Switch components support RTL

src/components/config-provider/config-provider.tsx

@@ -3,7 +3,10 @@ import type { FC, ReactNode } from 'react'
 import { Locale } from '../../locales/base'
 import zhCN from '../../locales/zh-CN'
 
+type DirectionType = 'ltr' | 'rtl' | undefined
+
 type Config = {
+  direction?: DirectionType
   locale: Locale
   children?: ReactNode
 }

src/components/switch/switch.less

@@ -66,6 +66,11 @@
       -1px 2px 2px 0 rgba(0, 0, 0, 0.1);
   }
 
+  &-handle-rtl {
+    left: auto;
+    right: var(--border-width);
+  }
+
   &-inner {
     position: relative;
     z-index: 1;
@@ -91,6 +96,11 @@
       left: calc(100% - (var(--height) - var(--border-width)));
     }
 
+    .@{class-prefix-switch}-handle-rtl {
+      left: auto;
+      right: calc(100% - (var(--height) - var(--border-width)));
+    }
+
     .@{class-prefix-switch}-inner {
       margin: 0 calc(var(--height) - var(--border-width) + 5px) 0 8px;
       color: var(--adm-color-text-light-solid);

src/components/switch/switch.tsx

@@ -30,7 +30,7 @@ export const Switch: FC<SwitchProps> = p => {
   const props = mergeProps(defaultProps, p)
   const disabled = props.disabled || props.loading || false
   const [changing, setChanging] = useState(false)
-  const { locale } = useConfig()
+  const { locale, direction } = useConfig()
 
   const [checked, setChecked] = usePropsValue({
     value: props.checked,
@@ -80,7 +80,11 @@ export const Switch: FC<SwitchProps> = p => {
       aria-disabled={disabled}
     >
       <div className={`${classPrefix}-checkbox`}>
-        <div className={`${classPrefix}-handle`}>
+        <div
+          className={classNames(`${classPrefix}-handle`, {
+            [`${classPrefix}-handle-rtl`]: direction === 'rtl',
+          })}
+        >
           {(props.loading || changing) && (
             <SpinIcon className={`${classPrefix}-spin-icon`} />
           )}

src/components/switch/tests/switch.test.tsx

@@ -9,6 +9,8 @@ import {
   act,
 } from 'testing'
 import Switch from '..'
+import ConfigProvider from '../../config-provider'
+import zhCN from '../../../locales/zh-CN'
 
 const classPrefix = `adm-switch`
 
@@ -22,6 +24,17 @@ describe('Switch', () => {
     expect(screen.getByRole('switch')).toHaveClass(`${classPrefix}-disabled`)
   })
 
+  test('renders with rtl mode', () => {
+    render(
+      <ConfigProvider locale={zhCN} direction='rtl'>
+        <Switch />
+      </ConfigProvider>
+    )
+    expect(
+      screen.getByRole('switch').querySelector(`.${classPrefix}-handle-rtl`)
+    ).not.toBeNull()
+  })
+
   test('controlled mode', async () => {
     const App = () => {
       const [checked, setChecked] = useState(false)