From 836ac0012ad625f91f9a89b7488aa54bca55f93b Mon Sep 17 00:00:00 2001 From: xrkffgg Date: Mon, 13 Apr 2020 17:37:39 +0800 Subject: [PATCH 1/3] feat: add rtl radio/rate --- components/radio/Group.jsx | 2 + components/radio/Radio.jsx | 2 + components/radio/style/index.less | 2 + components/radio/style/rtl.less | 61 +++++++++++++++++++++++++++++++ components/rate/index.jsx | 7 +++- components/rate/style/index.less | 2 + components/rate/style/rtl.less | 33 +++++++++++++++++ 7 files changed, 108 insertions(+), 1 deletion(-) create mode 100644 components/radio/style/rtl.less create mode 100644 components/rate/style/rtl.less diff --git a/components/radio/Group.jsx b/components/radio/Group.jsx index 0b8a6e2d59..6cb9aa3543 100644 --- a/components/radio/Group.jsx +++ b/components/radio/Group.jsx @@ -89,11 +89,13 @@ export default { const props = getOptionProps(this); const { prefixCls: customizePrefixCls, options, buttonStyle } = props; const getPrefixCls = this.configProvider.getPrefixCls; + const direction = this.configProvider.direction; 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); diff --git a/components/radio/Radio.jsx b/components/radio/Radio.jsx index e24b6924ee..84e5b6bedb 100644 --- a/components/radio/Radio.jsx +++ b/components/radio/Radio.jsx @@ -54,6 +54,7 @@ export default { const { mouseenter = noop, mouseleave = noop, ...restListeners } = getListeners(this); const { prefixCls: customizePrefixCls, ...restProps } = props; const getPrefixCls = this.configProvider.getPrefixCls; + const direction = this.configProvider.direction; const prefixCls = getPrefixCls('radio', customizePrefixCls); const radioProps = { @@ -74,6 +75,7 @@ export default { [`${prefixCls}-wrapper`]: true, [`${prefixCls}-wrapper-checked`]: radioProps.props.checked, [`${prefixCls}-wrapper-disabled`]: radioProps.props.disabled, + [`${prefixCls}-wrapper-rtl`]: direction === 'rtl', }); return ( diff --git a/components/radio/style/index.less b/components/radio/style/index.less index e6095051b2..41fd8a3527 100644 --- a/components/radio/style/index.less +++ b/components/radio/style/index.less @@ -325,3 +325,5 @@ span.@{radio-prefix-cls} + * { vertical-align: text-bottom; } } + +@import './rtl'; diff --git a/components/radio/style/rtl.less b/components/radio/style/rtl.less new file mode 100644 index 0000000000..9890cf4593 --- /dev/null +++ b/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; + } + } + } +} diff --git a/components/rate/index.jsx b/components/rate/index.jsx index d6d7eb411a..5f79ab0ca0 100644 --- a/components/rate/index.jsx +++ b/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'; @@ -46,7 +47,11 @@ const Rate = { render() { const { prefixCls: customizePrefixCls, ...restProps } = getOptionProps(this); const getPrefixCls = this.configProvider.getPrefixCls; + const direction = this.configProvider.direction; const prefixCls = getPrefixCls('rate', customizePrefixCls); + const rateClassNames = classNames({ + [`${prefixCls}-rtl`]: direction === 'rtl', + }); const character = getComponentFromProp(this, 'character') || ; const rateProps = { @@ -59,7 +64,7 @@ const Rate = { on: getListeners(this), ref: 'refRate', }; - return ; + return ; }, }; diff --git a/components/rate/style/index.less b/components/rate/style/index.less index 34214491f9..17625a5b4f 100644 --- a/components/rate/style/index.less +++ b/components/rate/style/index.less @@ -83,3 +83,5 @@ font-size: @font-size-base; } } + +@import './rtl'; diff --git a/components/rate/style/rtl.less b/components/rate/style/rtl.less new file mode 100644 index 0000000000..f0678bc0ac --- /dev/null +++ b/components/rate/style/rtl.less @@ -0,0 +1,33 @@ +@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; + } + } + } + + &-text { + .@{rate-prefix-cls}-rtl & { + margin-right: 8px; + margin-left: 0; + } + } +} From 5605d9a6808bd65635058ad0577508d6b4a407cd Mon Sep 17 00:00:00 2001 From: xrkffgg Date: Thu, 23 Apr 2020 10:36:46 +0800 Subject: [PATCH 2/3] fix: add direction --- components/rate/index.jsx | 2 +- components/rate/style/index.less | 2 +- components/rate/style/rtl.less | 7 ------- 3 files changed, 2 insertions(+), 9 deletions(-) diff --git a/components/rate/index.jsx b/components/rate/index.jsx index 5f79ab0ca0..e4b1ce72c7 100644 --- a/components/rate/index.jsx +++ b/components/rate/index.jsx @@ -64,7 +64,7 @@ const Rate = { on: getListeners(this), ref: 'refRate', }; - return ; + return ; }, }; diff --git a/components/rate/style/index.less b/components/rate/style/index.less index 17625a5b4f..43fba3a6f9 100644 --- a/components/rate/style/index.less +++ b/components/rate/style/index.less @@ -79,7 +79,7 @@ &-text { display: inline-block; - margin-left: 8px; + margin: 0 8px; font-size: @font-size-base; } } diff --git a/components/rate/style/rtl.less b/components/rate/style/rtl.less index f0678bc0ac..425ab11e4e 100644 --- a/components/rate/style/rtl.less +++ b/components/rate/style/rtl.less @@ -23,11 +23,4 @@ } } } - - &-text { - .@{rate-prefix-cls}-rtl & { - margin-right: 8px; - margin-left: 0; - } - } } From 9336b4a963b26ebfeef9ac92d4833223ea2fe5bd Mon Sep 17 00:00:00 2001 From: xrkffgg Date: Thu, 23 Apr 2020 10:40:17 +0800 Subject: [PATCH 3/3] fix: name --- components/radio/Group.jsx | 3 +-- components/radio/Radio.jsx | 3 +-- components/rate/index.jsx | 3 +-- 3 files changed, 3 insertions(+), 6 deletions(-) diff --git a/components/radio/Group.jsx b/components/radio/Group.jsx index 6cb9aa3543..5f06fe9ec0 100644 --- a/components/radio/Group.jsx +++ b/components/radio/Group.jsx @@ -88,8 +88,7 @@ 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 direction = this.configProvider.direction; + const { getPrefixCls, direction } = this.configProvider; const prefixCls = getPrefixCls('radio', customizePrefixCls); const groupPrefixCls = `${prefixCls}-group`; diff --git a/components/radio/Radio.jsx b/components/radio/Radio.jsx index 84e5b6bedb..a169fbd9b6 100644 --- a/components/radio/Radio.jsx +++ b/components/radio/Radio.jsx @@ -53,8 +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 direction = this.configProvider.direction; + const { getPrefixCls, direction } = this.configProvider; const prefixCls = getPrefixCls('radio', customizePrefixCls); const radioProps = { diff --git a/components/rate/index.jsx b/components/rate/index.jsx index e4b1ce72c7..82cacf25a3 100644 --- a/components/rate/index.jsx +++ b/components/rate/index.jsx @@ -46,8 +46,7 @@ const Rate = { }, render() { const { prefixCls: customizePrefixCls, ...restProps } = getOptionProps(this); - const getPrefixCls = this.configProvider.getPrefixCls; - const direction = this.configProvider.direction; + const { getPrefixCls, direction } = this.configProvider; const prefixCls = getPrefixCls('rate', customizePrefixCls); const rateClassNames = classNames({ [`${prefixCls}-rtl`]: direction === 'rtl',