From 557b82397ec3bb47c2c92ee93f90a9053dd69cac Mon Sep 17 00:00:00 2001 From: "e.muhamethanov" Date: Fri, 20 Dec 2024 11:49:35 +0300 Subject: [PATCH 1/3] feat(Cell): fix rtl view --- .../src/components/Removable/Removable.module.css | 8 ++++++++ .../vkui/src/components/Removable/Removable.tsx | 14 +++++++++++--- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/packages/vkui/src/components/Removable/Removable.module.css b/packages/vkui/src/components/Removable/Removable.module.css index ab63dc4065..c250d8a809 100644 --- a/packages/vkui/src/components/Removable/Removable.module.css +++ b/packages/vkui/src/components/Removable/Removable.module.css @@ -3,6 +3,14 @@ display: flex; align-items: center; padding-inline-start: var(--vkui--size_base_padding_horizontal--regular); + transform: translateX(calc(-1px * var(--vkui--internal_Removable_remove_offset) * var(--vkui--internal_Removable_remove_offset_direction))); + + --vkui--internal_Removable_remove_offset: 0; + --vkui--internal_Removable_remove_offset_direction: 1; +} + +.rtl { + --vkui--internal_Removable_remove_offset_direction: -1; } .action { diff --git a/packages/vkui/src/components/Removable/Removable.tsx b/packages/vkui/src/components/Removable/Removable.tsx index e9faa2812e..e61c118d57 100644 --- a/packages/vkui/src/components/Removable/Removable.tsx +++ b/packages/vkui/src/components/Removable/Removable.tsx @@ -3,11 +3,12 @@ import * as React from 'react'; import { Icon24Cancel } from '@vkontakte/icons'; import { classNames } from '@vkontakte/vkjs'; +import { useDirection } from '../../hooks/useDirection'; import { useGlobalEventListener } from '../../hooks/useGlobalEventListener'; import { usePlatform } from '../../hooks/usePlatform'; import { getTextFromChildren } from '../../lib/children'; import { useDOM } from '../../lib/dom'; -import type { HTMLAttributesWithRootRef } from '../../types'; +import type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types'; import { IconButton } from '../IconButton/IconButton'; import { RootComponent } from '../RootComponent/RootComponent'; import { Tappable } from '../Tappable/Tappable'; @@ -54,6 +55,8 @@ const RemovableIos = ({ removeButtonTestId, disabled, }: RemovableIosOwnProps) => { + const [directionRef, textDirection = 'ltr'] = useDirection(); + const isRtl = textDirection === 'rtl'; const { window } = useDOM(); const removeButtonRef = React.useRef(null); @@ -89,11 +92,16 @@ const RemovableIos = ({ updateRemoveOffset(offsetWidth); }; + const style: CSSCustomProperties = { + '--vkui--internal_Removable_remove_offset': String(removeOffset ?? 0), + }; + return (
Date: Fri, 20 Dec 2024 17:44:41 +0300 Subject: [PATCH 2/3] fix: fix prettier --- .../vkui/src/components/Removable/Removable.module.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/vkui/src/components/Removable/Removable.module.css b/packages/vkui/src/components/Removable/Removable.module.css index c250d8a809..1422f545c7 100644 --- a/packages/vkui/src/components/Removable/Removable.module.css +++ b/packages/vkui/src/components/Removable/Removable.module.css @@ -3,7 +3,12 @@ display: flex; align-items: center; padding-inline-start: var(--vkui--size_base_padding_horizontal--regular); - transform: translateX(calc(-1px * var(--vkui--internal_Removable_remove_offset) * var(--vkui--internal_Removable_remove_offset_direction))); + transform: translateX( + calc( + -1px * var(--vkui--internal_Removable_remove_offset) * + var(--vkui--internal_Removable_remove_offset_direction) + ) + ); --vkui--internal_Removable_remove_offset: 0; --vkui--internal_Removable_remove_offset_direction: 1; From f18a417801224f53b7c452d5109d4790b52f3116 Mon Sep 17 00:00:00 2001 From: "e.muhamethanov" Date: Thu, 26 Dec 2024 13:09:18 +0300 Subject: [PATCH 3/3] fix(Removable): fix css variable name --- .../vkui/src/components/Removable/Removable.module.css | 10 +++++----- packages/vkui/src/components/Removable/Removable.tsx | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/vkui/src/components/Removable/Removable.module.css b/packages/vkui/src/components/Removable/Removable.module.css index 1422f545c7..c662bc30cd 100644 --- a/packages/vkui/src/components/Removable/Removable.module.css +++ b/packages/vkui/src/components/Removable/Removable.module.css @@ -5,17 +5,17 @@ padding-inline-start: var(--vkui--size_base_padding_horizontal--regular); transform: translateX( calc( - -1px * var(--vkui--internal_Removable_remove_offset) * - var(--vkui--internal_Removable_remove_offset_direction) + -1px * var(--vkui_internal_Removable_remove_offset) * + var(--vkui_internal_Removable_remove_offset_direction) ) ); - --vkui--internal_Removable_remove_offset: 0; - --vkui--internal_Removable_remove_offset_direction: 1; + --vkui_internal_Removable_remove_offset: 0; + --vkui_internal_Removable_remove_offset_direction: 1; } .rtl { - --vkui--internal_Removable_remove_offset_direction: -1; + --vkui_internal_Removable_remove_offset_direction: -1; } .action { diff --git a/packages/vkui/src/components/Removable/Removable.tsx b/packages/vkui/src/components/Removable/Removable.tsx index e61c118d57..bbd26675a1 100644 --- a/packages/vkui/src/components/Removable/Removable.tsx +++ b/packages/vkui/src/components/Removable/Removable.tsx @@ -93,7 +93,7 @@ const RemovableIos = ({ }; const style: CSSCustomProperties = { - '--vkui--internal_Removable_remove_offset': String(removeOffset ?? 0), + '--vkui_internal_Removable_remove_offset': String(removeOffset ?? 0), }; return (