feat: add rtl slider/switch

components/slider/index.jsx

@@ -4,6 +4,7 @@ import { getOptionProps, getListeners } from '../_util/props-util';
 import VcSlider from '../vc-slider/src/Slider';
 import VcRange from '../vc-slider/src/Range';
 import VcHandle from '../vc-slider/src/Handle';
+import classNames from 'classnames';
 import Tooltip from '../tooltip';
 import Base from '../base';
 import { ConfigConsumerProps } from '../config-provider';
@@ -129,16 +130,23 @@ const Slider = {
       tooltipPrefixCls: customizeTooltipPrefixCls,
       ...restProps
     } = getOptionProps(this);
-    const getPrefixCls = this.configProvider.getPrefixCls;
+    const { getPrefixCls, direction } = this.configProvider;
     const prefixCls = getPrefixCls('slider', customizePrefixCls);
     const tooltipPrefixCls = getPrefixCls('tooltip', customizeTooltipPrefixCls);
     const listeners = getListeners(this);
+    const cls = classNames({
+      [`${prefixCls}-rtl`]: direction === 'rtl',
+    });
+    if (direction === 'rtl' && !restProps.vertical) {
+      restProps.reverse = !restProps.reverse;
+    }
     if (range) {
       const vcRangeProps = {
         props: {
           ...restProps,
           prefixCls,
           tooltipPrefixCls,
+          class: cls,
           handle: info => this.handleWithTooltip(tooltipPrefixCls, prefixCls, info),
         },
         ref: 'sliderRef',
@@ -151,6 +159,7 @@ const Slider = {
         ...restProps,
         prefixCls,
         tooltipPrefixCls,
+        class: cls,
         handle: info => this.handleWithTooltip(tooltipPrefixCls, prefixCls, info),
       },
       ref: 'sliderRef',

components/slider/style/index.less

@@ -195,3 +195,5 @@
     }
   }
 }
+
+@import './rtl';

components/slider/style/rtl.less

@@ -0,0 +1,70 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@slider-prefix-cls: ~'@{ant-prefix}-slider';
+
+.@{slider-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-mark {
+    .@{slider-prefix-cls}-rtl & {
+      right: 0;
+      left: auto;
+    }
+  }
+
+  &-dot {
+    .@{slider-prefix-cls}-rtl & {
+      margin-right: -4px;
+      margin-left: 0;
+    }
+
+    &:first-child {
+      .@{slider-prefix-cls}-rtl & {
+        margin-right: -4px;
+        margin-left: 0;
+      }
+    }
+
+    &:last-child {
+      .@{slider-prefix-cls}-rtl & {
+        margin-right: -4px;
+        margin-left: 0;
+      }
+    }
+  }
+}
+
+.vertical() {
+  &-vertical {
+    .@{slider-prefix-cls}-handle {
+      .@{slider-prefix-cls}-rtl& {
+        margin-right: -5px;
+        margin-left: 0;
+      }
+    }
+
+    .@{slider-prefix-cls}-mark {
+      .@{slider-prefix-cls}-rtl& {
+        right: 12px;
+        left: auto;
+      }
+    }
+
+    .@{slider-prefix-cls}-mark-text {
+      .@{slider-prefix-cls}-rtl& {
+        right: 4px;
+        left: auto;
+      }
+    }
+
+    .@{slider-prefix-cls}-dot {
+      .@{slider-prefix-cls}-rtl& {
+        right: 2px;
+        left: auto;
+      }
+    }
+  }
+}

components/switch/index.jsx

@@ -50,16 +50,15 @@ const Switch = {
     const { prefixCls: customizePrefixCls, size, loading, disabled, ...restProps } = getOptionProps(
       this,
     );
-    const getPrefixCls = this.configProvider.getPrefixCls;
+    const { getPrefixCls, direction } = this.configProvider;
     const prefixCls = getPrefixCls('switch', customizePrefixCls);
 
     const classes = {
       [`${prefixCls}-small`]: size === 'small',
       [`${prefixCls}-loading`]: loading,
+      [`${prefixCls}-rtl`]: direction === 'rtl',
     };
-    const loadingIcon = loading ? (
-      <LoadingOutlined class={`${prefixCls}-loading-icon`} />
-    ) : null;
+    const loadingIcon = loading ? <LoadingOutlined class={`${prefixCls}-loading-icon`} /> : null;
     const switchProps = {
       props: {
         ...restProps,

components/switch/style/index.less

@@ -176,3 +176,5 @@
     transform-origin: 50% 50%;
   }
 }
+
+@import './rtl';

components/switch/style/rtl.less

@@ -0,0 +1,73 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@switch-prefix-cls: ~'@{ant-prefix}-switch';
+
+.@{switch-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-inner {
+    .@{switch-prefix-cls}-rtl & {
+      margin-right: 24px;
+      margin-left: 6px;
+    }
+  }
+
+  &-loading-icon,
+  &::after {
+    .@{switch-prefix-cls}-rtl& {
+      left: 100%;
+      margin-left: -1px;
+      transform: translateX(-100%);
+    }
+  }
+
+  &-small {
+    .@{switch-prefix-cls}-inner {
+      .@{switch-prefix-cls}-rtl& {
+        margin-right: 18px;
+        margin-left: 3px;
+      }
+    }
+  }
+
+  &-small &-loading-icon {
+    .@{switch-prefix-cls}-rtl& {
+      margin-left: 12px;
+    }
+  }
+
+  &-small&-checked {
+    .@{switch-prefix-cls}-inner {
+      .@{switch-prefix-cls}-rtl& {
+        margin-right: 3px;
+        margin-left: 18px;
+      }
+    }
+  }
+
+  &-checked {
+    .@{switch-prefix-cls}-inner {
+      .@{switch-prefix-cls}-rtl& {
+        margin-right: 6px;
+        margin-left: 24px;
+      }
+    }
+
+    &::after {
+      .@{switch-prefix-cls}-rtl& {
+        left: 1px;
+        margin-left: 0;
+        transform: translateX(0);
+      }
+    }
+  }
+
+  &-checked &-loading-icon {
+    .@{switch-prefix-cls}-rtl& {
+      margin-left: -41px;
+    }
+  }
+}