diff --git a/components/list/index.jsx b/components/list/index.jsx index c85716744d..e834966de9 100644 --- a/components/list/index.jsx +++ b/components/list/index.jsx @@ -161,7 +161,7 @@ const List = { paginationCurrent, paginationSize, } = this; - const getPrefixCls = this.configProvider.getPrefixCls; + const { getPrefixCls, direction } = this.configProvider; const prefixCls = getPrefixCls('list', customizePrefixCls); const loadMore = getComponentFromProp(this, 'loadMore'); @@ -197,6 +197,7 @@ const List = { [`${prefixCls}-loading`]: isLoading, [`${prefixCls}-grid`]: grid, [`${prefixCls}-something-after-last-item`]: this.isSomethingAfterLastItem(), + [`${prefixCls}-rtl`]: direction === 'rtl', }); const paginationProps = { ...this.defaultPaginationProps, diff --git a/components/list/style/index.less b/components/list/style/index.less index 9faea4a736..bf5322befc 100644 --- a/components/list/style/index.less +++ b/components/list/style/index.less @@ -232,3 +232,4 @@ @import './bordered'; @import './responsive'; +@import './rtl'; diff --git a/components/list/style/rtl.less b/components/list/style/rtl.less new file mode 100644 index 0000000000..8c0300da6f --- /dev/null +++ b/components/list/style/rtl.less @@ -0,0 +1,138 @@ +@import '../../style/themes/index'; +@import '../../style/mixins/index'; + +@list-prefix-cls: ~'@{ant-prefix}-list'; + +.@{list-prefix-cls} { + &-rtl { + direction: rtl; + text-align: right; + + // fix for virtual scroll style attribute > (direction:ltr) + .ReactVirtualized__List .@{list-prefix-cls}-item { + direction: rtl; + } + } + + &-pagination { + .@{list-prefix-cls}-rtl & { + text-align: left; + } + } + + &-item { + &-meta { + &-avatar { + .@{list-prefix-cls}-rtl & { + margin-right: 0; + margin-left: @list-item-meta-avatar-margin-right; + } + } + } + + &-action { + .@{list-prefix-cls}-rtl & { + margin-right: 48px; + margin-left: 0; + } + + & > li:first-child { + .@{list-prefix-cls}-rtl & { + padding-right: 0; + padding-left: 8px; + } + } + + &-split { + .@{list-prefix-cls}-rtl & { + right: auto; + left: 0; + } + } + } + } + + &-vertical &-item { + &-extra { + .@{list-prefix-cls}-rtl& { + margin-right: 40px; + margin-left: 0; + } + } + + &-action { + .@{list-prefix-cls}-rtl & { + margin-right: auto; + } + + > li { + &:first-child { + .@{list-prefix-cls}-rtl & { + padding-right: 0; + padding-left: 16px; + } + } + } + } + } + + // Horizontal + &:not(.@{list-prefix-cls}-vertical) { + .@{list-prefix-cls}-item-no-flex { + .@{list-prefix-cls}-item-action { + .@{list-prefix-cls}-rtl & { + float: left; + } + } + } + } +} + +// responsive +@media screen and (max-width: @screen-md) { + .@{list-prefix-cls} { + &-item { + &-action { + .@{list-prefix-cls}-rtl & { + margin-right: 24px; + margin-left: 0; + } + } + } + } + + .@{list-prefix-cls}-vertical { + .@{list-prefix-cls}-item { + &-extra { + .@{list-prefix-cls}-rtl & { + margin-right: 24px; + margin-left: 0; + } + } + } + } +} + +@media screen and (max-width: @screen-sm) { + .@{list-prefix-cls} { + &-item { + &-action { + .@{list-prefix-cls}-rtl & { + margin-right: 22px; + margin-left: 0; + } + } + } + } + + .@{list-prefix-cls}-vertical { + .@{list-prefix-cls}-item { + &-extra { + // to override margins on rtl view + .@{list-prefix-cls}-rtl& { + margin: auto auto 16px; + } + } + } + } +} diff --git a/components/popover/style/index.less b/components/popover/style/index.less index 631e0437c9..44667c456d 100644 --- a/components/popover/style/index.less +++ b/components/popover/style/index.less @@ -203,3 +203,5 @@ bottom: 12px; } } + +@import './rtl'; diff --git a/components/popover/style/rtl.less b/components/popover/style/rtl.less new file mode 100644 index 0000000000..dece824b82 --- /dev/null +++ b/components/popover/style/rtl.less @@ -0,0 +1,33 @@ +@import '../../style/themes/index'; +@import '../../style/mixins/index'; + +@popover-prefix-cls: ~'@{ant-prefix}-popover'; + +.@{popover-prefix-cls} { + &-rtl { + direction: rtl; + text-align: right; + } + + &-message { + &-title { + .@{popover-prefix-cls}-rtl & { + padding-right: @font-size-base + 8px; + padding-left: @padding-md; + } + } + } + + &-buttons { + .@{popover-prefix-cls}-rtl & { + text-align: left; + } + + button { + .@{popover-prefix-cls}-rtl & { + margin-right: 8px; + margin-left: 0; + } + } + } +} diff --git a/components/statistic/Statistic.jsx b/components/statistic/Statistic.jsx index fee065f276..27a4625161 100644 --- a/components/statistic/Statistic.jsx +++ b/components/statistic/Statistic.jsx @@ -1,4 +1,5 @@ import PropTypes from '../_util/vue-types'; +import classNames from 'classnames'; import { getComponentFromProp, initDefaultProps } from '../_util/props-util'; import { ConfigConsumerProps } from '../config-provider'; import StatisticNumber from './Number'; @@ -30,7 +31,7 @@ export default { render() { const { prefixCls: customizePrefixCls, value = 0, valueStyle, valueRender } = this.$props; - const getPrefixCls = this.configProvider.getPrefixCls; + const { getPrefixCls, direction } = this.configProvider; const prefixCls = getPrefixCls('statistic', customizePrefixCls); const title = getComponentFromProp(this, 'title'); @@ -44,8 +45,12 @@ export default { valueNode = valueRender(valueNode); } + const className = classNames(prefixCls, { + [`${prefixCls}-rtl`]: direction === 'rtl', + }); + return ( -
+
{title &&
{title}
}
{prefix && {prefix}} diff --git a/components/statistic/style/index.less b/components/statistic/style/index.less index 4d9e19c5fa..10777ac55d 100644 --- a/components/statistic/style/index.less +++ b/components/statistic/style/index.less @@ -18,6 +18,8 @@ font-family: @statistic-font-family; &-value { + display: inline-block; + direction: ltr; &-decimal { font-size: @statistic-unit-font-size; } @@ -38,3 +40,5 @@ } } } + +@import './rtl'; diff --git a/components/statistic/style/rtl.less b/components/statistic/style/rtl.less new file mode 100644 index 0000000000..519bb25f3e --- /dev/null +++ b/components/statistic/style/rtl.less @@ -0,0 +1,26 @@ +@import '../../style/themes/index'; +@import '../../style/mixins/index'; + +@statistic-prefix-cls: ~'@{ant-prefix}-statistic'; + +.@{statistic-prefix-cls} { + &-rtl { + direction: rtl; + } + + &-content { + &-prefix { + .@{statistic-prefix-cls}-rtl & { + margin-right: 0; + margin-left: 4px; + } + } + + &-suffix { + .@{statistic-prefix-cls}-rtl & { + margin-right: 4px; + margin-left: 0; + } + } + } +}