diff --git a/packages/vkui/src/components/Switch/Switch.e2e-playground.tsx b/packages/vkui/src/components/Switch/Switch.e2e-playground.tsx
index 44a4b5b182..968bc81908 100644
--- a/packages/vkui/src/components/Switch/Switch.e2e-playground.tsx
+++ b/packages/vkui/src/components/Switch/Switch.e2e-playground.tsx
@@ -9,13 +9,18 @@ export const SwitchPlayground = (props: ComponentPlaygroundProps) => {
{
checked: [true, false],
disabled: [true, false],
+ dir: ['ltr', 'rtl'],
},
{
$adaptivity: 'y',
},
]}
>
- {(props: SwitchProps) => }
+ {({ dir, ...props }: SwitchProps) => (
+
+
+
+ )}
);
};
diff --git a/packages/vkui/src/components/Switch/Switch.module.css b/packages/vkui/src/components/Switch/Switch.module.css
index 2cc9fa4e6a..a0a88db8f1 100644
--- a/packages/vkui/src/components/Switch/Switch.module.css
+++ b/packages/vkui/src/components/Switch/Switch.module.css
@@ -2,7 +2,11 @@
/* Switch__track */
--vkui_internal--Switch__track_shape: calc(var(--vkui_internal--Switch__track_width) / 2);
--vkui_internal--Switch__track_outline_width: 2px;
- --vkui_internal--Switch__handle_shift_x: var(--vkui_internal--Switch__track_outline_width);
+ --vkui_internal--Switch__handle_shift_x_direction: 1;
+ --vkui_internal--Switch__handle_shift_x: calc(
+ var(--vkui_internal--Switch__handle_shift_x_direction) *
+ var(--vkui_internal--Switch__track_outline_width)
+ );
/* prettier-ignore */
--vkui_internal--Switch__handle_shift_y: calc(var(--vkui_internal--Switch__track_height) - var(--vkui_internal--Switch__handle_height) - var(--vkui_internal--Switch__track_outline_width));
/* prettier-ignore */
@@ -16,6 +20,10 @@
-webkit-tap-highlight-color: transparent;
}
+.rtl {
+ --vkui_internal--Switch__handle_shift_x_direction: -1;
+}
+
.disabled {
cursor: not-allowed;
opacity: var(--vkui_internal--Switch_disabled);
@@ -136,7 +144,7 @@
/* Switch__handle */
/* prettier-ignore */
- --vkui_internal--Switch__handle_shift_x: calc(var(--vkui_internal--Switch__track_width) - var(--vkui_internal--Switch__handle_width) - var(--vkui_internal--Switch__track_outline_width));
+ --vkui_internal--Switch__handle_shift_x: calc(var(--vkui_internal--Switch__handle_shift_x_direction) * calc(var(--vkui_internal--Switch__track_width) - var(--vkui_internal--Switch__handle_width) - var(--vkui_internal--Switch__track_outline_width)));
/* prettier-ignore */
--vkui_internal--Switch__handle_scale: calc(var(--vkui_internal--Switch__handle_widthNoUnit--checked) / var(--vkui_internal--Switch__handle_heightNoUnit));
--vkui_internal--Switch__track_shadow_visibility: 0;
@@ -212,7 +220,7 @@
border-radius: inherit;
background-color: var(--vkui_internal--Switch__handleRipple_color);
opacity: var(--vkui_internal--Switch__handleRipple_opacity);
- transform: translate(-50%, -50%);
+ transform: translate(calc(-50% * var(--vkui_internal--Switch__handle_shift_x_direction)), -50%);
transition-property: opacity, background-color;
/* prettier-ignore */
transition-duration:
diff --git a/packages/vkui/src/components/Switch/Switch.tsx b/packages/vkui/src/components/Switch/Switch.tsx
index 72dfd72240..fa6bdd51a8 100644
--- a/packages/vkui/src/components/Switch/Switch.tsx
+++ b/packages/vkui/src/components/Switch/Switch.tsx
@@ -3,6 +3,8 @@
import * as React from 'react';
import { classNames } from '@vkontakte/vkjs';
import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { useDirection } from '../../hooks/useDirection';
+import { useExternRef } from '../../hooks/useExternRef';
import { useFocusVisible } from '../../hooks/useFocusVisible';
import { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';
import { usePlatform } from '../../hooks/usePlatform';
@@ -36,6 +38,9 @@ export const Switch = ({
onClick,
...restProps
}: SwitchProps): React.ReactNode => {
+ const [directionRef, textDirection = 'ltr'] = useDirection();
+ const isRtl = textDirection === 'rtl';
+ const rootRef = useExternRef(getRootRef, directionRef);
const platform = usePlatform();
const { sizeY = 'none' } = useAdaptivity();
const { focusVisible, onBlur, onFocus } = useFocusVisible();
@@ -86,11 +91,12 @@ export const Switch = ({
sizeY !== 'regular' && sizeYClassNames[sizeY],
platform === 'ios' ? styles.ios : styles.default,
disabled && styles.disabled,
+ isRtl && styles.rtl,
focusVisibleClassNames,
className,
)}
style={style}
- ref={getRootRef}
+ ref={rootRef}
>