diff --git a/packages/vkui/src/components/Search/Search.e2e-playground.tsx b/packages/vkui/src/components/Search/Search.e2e-playground.tsx index bbe4e571f0..fd7d1cf5d5 100644 --- a/packages/vkui/src/components/Search/Search.e2e-playground.tsx +++ b/packages/vkui/src/components/Search/Search.e2e-playground.tsx @@ -18,6 +18,7 @@ export const SearchPlayground = (props: ComponentPlaygroundProps) => { { value: [undefined, 'value'], icon: [undefined, ], + dir: ['ltr', 'rtl'], }, { value: ['value'], @@ -38,7 +39,11 @@ export const SearchPlayground = (props: ComponentPlaygroundProps) => { }, ]} > - {(props: SearchProps) => } + {({ dir, ...props }: SearchProps) => ( +
+ +
+ )} ); }; diff --git a/packages/vkui/src/components/Search/Search.module.css b/packages/vkui/src/components/Search/Search.module.css index 54170d27d5..f9a4cfd8e2 100644 --- a/packages/vkui/src/components/Search/Search.module.css +++ b/packages/vkui/src/components/Search/Search.module.css @@ -4,6 +4,11 @@ -webkit-tap-highlight-color: transparent; --vkui_internal--search_height: var(--vkui--size_search_height--regular); + --vkui_internal--search_shift_direction: 1; +} + +.rtl { + --vkui_internal--search_shift_direction: -1; } .withPadding { @@ -130,14 +135,21 @@ color: var(--vkui--color_icon_secondary); transition: transform 0.3s var(--vkui--animation_easing_platform); /* Используем translate3d, чтобы поправить дергание при наведении в Safari */ - transform: translate3d(100%, 0, 0); + transform: translate3d(calc(var(--vkui_internal--search_shift_direction) * 100%), 0, 0); --vkui_internal--search_icon_size: calc(var(--vkui_internal--search_height) + 4px); } .hasIcon .controls { /* Исключаем параметр icon из расчёта, чтобы он оставался видимым */ - transform: translate3d(calc(100% - var(--vkui_internal--search_icon_size)), 0, 0); + transform: translate3d( + calc( + var(--vkui_internal--search_shift_direction) * + calc(100% - var(--vkui_internal--search_icon_size)) + ), + 0, + 0 + ); } .hasValue .controls { diff --git a/packages/vkui/src/components/Search/Search.tsx b/packages/vkui/src/components/Search/Search.tsx index faafc2012d..38454f22f2 100644 --- a/packages/vkui/src/components/Search/Search.tsx +++ b/packages/vkui/src/components/Search/Search.tsx @@ -6,6 +6,7 @@ import { classNames, hasReactNode, noop } from '@vkontakte/vkjs'; import { useAdaptivity } from '../../hooks/useAdaptivity'; import { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender'; import { useBooleanState } from '../../hooks/useBooleanState'; +import { useDirection } from '../../hooks/useDirection'; import { useExternRef } from '../../hooks/useExternRef'; import { useNativeFormResetListener } from '../../hooks/useNativeFormResetListener'; import { usePlatform } from '../../hooks/usePlatform'; @@ -75,6 +76,9 @@ export const Search = ({ onFindButtonClick, ...inputProps }: SearchProps): React.ReactNode => { + const [directionRef, textDirection = 'ltr'] = useDirection(); + const isRtl = textDirection === 'rtl'; + const rootRef = useExternRef(directionRef, getRootRef); const inputRef = useExternRef(getRef); const { value: isFocused, @@ -172,9 +176,10 @@ export const Search = ({ iconProp && styles.hasIcon, inputProps.disabled && styles.disabled, !noPadding && styles.withPadding, + isRtl && styles.rtl, className, )} - ref={getRootRef} + ref={rootRef} style={style} >
diff --git a/packages/vkui/src/components/Search/__image_snapshots__/search-android-chromium-dark-1-snap.png b/packages/vkui/src/components/Search/__image_snapshots__/search-android-chromium-dark-1-snap.png index 0a28ab0e73..3a8792209a 100644 --- a/packages/vkui/src/components/Search/__image_snapshots__/search-android-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/Search/__image_snapshots__/search-android-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:7772a331c674655a1ee366e62bc45dfa630884f9e754cf6b44e2965e4429608a -size 39755 +oid sha256:42d967dd0655afbcdb1fdb33b3996a1aaface9e6cde3be16e5c2830adeed22de +size 56799 diff --git a/packages/vkui/src/components/Search/__image_snapshots__/search-android-chromium-light-1-snap.png b/packages/vkui/src/components/Search/__image_snapshots__/search-android-chromium-light-1-snap.png index c7916d996a..42e91bdf3e 100644 --- a/packages/vkui/src/components/Search/__image_snapshots__/search-android-chromium-light-1-snap.png +++ b/packages/vkui/src/components/Search/__image_snapshots__/search-android-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:06e3278a5fd69934681769277aa2a130bc615aa196aedbb71a3bba2e7e1e0af9 -size 37883 +oid sha256:fe17c0b33e71af52fe9814b029391b0e817fe3a27261540d8f46920f1d59f048 +size 53985 diff --git a/packages/vkui/src/components/Search/__image_snapshots__/search-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/Search/__image_snapshots__/search-ios-webkit-dark-1-snap.png index edf1f17310..1e9a1bcc8d 100644 --- a/packages/vkui/src/components/Search/__image_snapshots__/search-ios-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/Search/__image_snapshots__/search-ios-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4992eb313cf6e9775d03ddc944217f40047733207c4bc5e037b2feb99aca3712 -size 66176 +oid sha256:ac45bb56e2f19ddfc01ae7cce7816e167b0e48e41958416dfd7f87b2f727c900 +size 93943 diff --git a/packages/vkui/src/components/Search/__image_snapshots__/search-ios-webkit-light-1-snap.png b/packages/vkui/src/components/Search/__image_snapshots__/search-ios-webkit-light-1-snap.png index 73eb35ab6e..8bb3009042 100644 --- a/packages/vkui/src/components/Search/__image_snapshots__/search-ios-webkit-light-1-snap.png +++ b/packages/vkui/src/components/Search/__image_snapshots__/search-ios-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:50fc612ed063b02fcf7cc09989758ce8d555b956f17ad0e386ebc8e6672db76e -size 65120 +oid sha256:905454a6ccb8388f83ea453b74006a2410ce9bee80a2aca390ebfc675a006e8c +size 92181 diff --git a/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-chromium-dark-1-snap.png index 40fcb7aa7a..aa3e251953 100644 --- a/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:7f1f1f49030a08c38ed6a80a651f241ecfaf09db678c0cb853312358f3bbb3dd -size 34988 +oid sha256:3ec4254b1d8b7c8b5f480256c04b23c39ea2172028bb3e17d279d167017a7255 +size 52258 diff --git a/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-chromium-light-1-snap.png index 32dcf8641b..5696ead27e 100644 --- a/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-chromium-light-1-snap.png +++ b/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d59a578e0a056376edac90b743625d7431f7dfabd2ea12ed3174b21b28aaca60 -size 33855 +oid sha256:bc7bb591ff12ca1afd10e827c5980be08a5759947a2e4bcdaaaaa7999321ddd3 +size 50465 diff --git a/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-firefox-dark-1-snap.png index 66098f10ad..13e09328f1 100644 --- a/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-firefox-dark-1-snap.png +++ b/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-firefox-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:cd32a3bcc20a39895b8aeb87884f5e99938f33f82870726d300b21dd0f5d2e9b -size 53307 +oid sha256:4c50c363f1995638d4609af457d46e3440c935f341a5e8c9bac2855f976da0c2 +size 79788 diff --git a/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-firefox-light-1-snap.png index a3f6e3f63a..a7d4d2a629 100644 --- a/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-firefox-light-1-snap.png +++ b/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-firefox-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8c2bd4dbb8c2f8bf3b260e44ef0b58e5152f670256384ebaa415112eec17ba9d -size 55245 +oid sha256:4a9e7afb6ef6c2de1b34fce041f41036d5b896493704be990fb1463ddbeaa9a2 +size 82649 diff --git a/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-webkit-dark-1-snap.png index d0bc55bf06..f60ab501cc 100644 --- a/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:da84b6a6368ad8db2f7751d5da88ddef88a3c1747ee392ec76a1ee47117400bc -size 51928 +oid sha256:4c9ed3cd00b6a6280afdcdcc21d7111584cff09100d732c754aa091bfec40813 +size 77200 diff --git a/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-webkit-light-1-snap.png index 1680fd869f..b0426d924a 100644 --- a/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-webkit-light-1-snap.png +++ b/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:eb25a199ff144ee5c5ef3ae65d5a2a7f5f640b05b3eea24b20b5e140eaeac3fd -size 51819 +oid sha256:fadf1018626c45fd233f7e0ac98ccc86ba1705f5eb8662b0ca8a18ec31edea87 +size 76878