feat: add rtl radio/rate

components/radio/Group.jsx

@@ -88,12 +88,13 @@ export default {
     const { mouseenter = noop, mouseleave = noop } = getListeners(this);
     const props = getOptionProps(this);
     const { prefixCls: customizePrefixCls, options, buttonStyle } = props;
-    const getPrefixCls = this.configProvider.getPrefixCls;
+    const { getPrefixCls, direction } = this.configProvider;
     const prefixCls = getPrefixCls('radio', customizePrefixCls);
 
     const groupPrefixCls = `${prefixCls}-group`;
     const classString = classNames(groupPrefixCls, `${groupPrefixCls}-${buttonStyle}`, {
       [`${groupPrefixCls}-${props.size}`]: props.size,
+      [`${groupPrefixCls}-rtl`]: direction === 'rtl',
     });
 
     let children = filterEmpty(this.$slots.default);

components/radio/Radio.jsx

@@ -53,7 +53,7 @@ export default {
     const children = $slots.default;
     const { mouseenter = noop, mouseleave = noop, ...restListeners } = getListeners(this);
     const { prefixCls: customizePrefixCls, ...restProps } = props;
-    const getPrefixCls = this.configProvider.getPrefixCls;
+    const { getPrefixCls, direction } = this.configProvider;
     const prefixCls = getPrefixCls('radio', customizePrefixCls);
 
     const radioProps = {
@@ -74,6 +74,7 @@ export default {
       [`${prefixCls}-wrapper`]: true,
       [`${prefixCls}-wrapper-checked`]: radioProps.props.checked,
       [`${prefixCls}-wrapper-disabled`]: radioProps.props.disabled,
+      [`${prefixCls}-wrapper-rtl`]: direction === 'rtl',
     });
 
     return (

components/radio/style/index.less

@@ -325,3 +325,5 @@ span.@{radio-prefix-cls} + * {
     vertical-align: text-bottom;
   }
 }
+
+@import './rtl';

components/radio/style/rtl.less

@@ -0,0 +1,61 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@radio-prefix-cls: ~'@{ant-prefix}-radio';
+@radio-group-prefix-cls: ~'@{radio-prefix-cls}-group';
+@radio-prefix-cls-button-wrapper: ~'@{radio-prefix-cls}-button-wrapper';
+
+.@{radio-group-prefix-cls} {
+  &&-rtl {
+    direction: rtl;
+  }
+}
+
+// 一般状态
+.@{radio-prefix-cls}-wrapper {
+  &&-rtl {
+    margin-right: 0;
+    margin-left: 8px;
+    direction: rtl;
+  }
+}
+
+.@{radio-prefix-cls-button-wrapper} {
+  &&-rtl {
+    border-right-width: 0;
+    border-left-width: @border-width-base;
+  }
+
+  &:not(:first-child) {
+    &::before {
+      .@{radio-prefix-cls-button-wrapper}.@{radio-prefix-cls-button-wrapper}-rtl& {
+        right: -1px;
+        left: 0;
+      }
+    }
+  }
+
+  &:first-child {
+    .@{radio-prefix-cls-button-wrapper}.@{radio-prefix-cls-button-wrapper}-rtl& {
+      border-right: @border-width-base @border-style-base @border-color-base;
+      border-radius: 0 @border-radius-base @border-radius-base 0;
+    }
+    .@{radio-prefix-cls-button-wrapper}-checked:not([class*=~"' @{radio-prefix-cls}-button-wrapper-disabled'"])& {
+      border-right-color: @radio-button-hover-color;
+    }
+  }
+
+  &:last-child {
+    .@{radio-prefix-cls-button-wrapper}.@{radio-prefix-cls-button-wrapper}-rtl& {
+      border-radius: @border-radius-base 0 0 @border-radius-base;
+    }
+  }
+
+  &-disabled {
+    &:first-child {
+      .@{radio-prefix-cls-button-wrapper}.@{radio-prefix-cls-button-wrapper}-rtl& {
+        border-right-color: @border-color-base;
+      }
+    }
+  }
+}

components/rate/index.jsx

@@ -1,4 +1,5 @@
 import omit from 'omit.js';
+import classNames from 'classnames';
 import PropTypes from '../_util/vue-types';
 import { getOptionProps, getComponentFromProp, getListeners } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
@@ -45,8 +46,11 @@ const Rate = {
   },
   render() {
     const { prefixCls: customizePrefixCls, ...restProps } = getOptionProps(this);
-    const getPrefixCls = this.configProvider.getPrefixCls;
+    const { getPrefixCls, direction } = this.configProvider;
     const prefixCls = getPrefixCls('rate', customizePrefixCls);
+    const rateClassNames = classNames({
+      [`${prefixCls}-rtl`]: direction === 'rtl',
+    });
 
     const character = getComponentFromProp(this, 'character') || <StarFilled />;
     const rateProps = {
@@ -59,7 +63,7 @@ const Rate = {
       on: getListeners(this),
       ref: 'refRate',
     };
-    return <VcRate {...rateProps} />;
+    return <VcRate {...rateProps} class={rateClassNames} direction={direction} />;
   },
 };
 

components/rate/style/index.less

@@ -79,7 +79,9 @@
 
   &-text {
     display: inline-block;
-    margin-left: 8px;
+    margin: 0 8px;
     font-size: @font-size-base;
   }
 }
+
+@import './rtl';

components/rate/style/rtl.less

@@ -0,0 +1,26 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@rate-prefix-cls: ~'@{ant-prefix}-rate';
+
+.@{rate-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-star {
+    &:not(:last-child) {
+      .@{rate-prefix-cls}-rtl & {
+        margin-right: 0;
+        margin-left: 8px;
+      }
+    }
+
+    &-first {
+      .@{rate-prefix-cls}-rtl & {
+        right: 0;
+        left: auto;
+      }
+    }
+  }
+}