feat: add rtl list/popover/statistic

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,

components/list/style/index.less

@@ -232,3 +232,4 @@
 
 @import './bordered';
 @import './responsive';
+@import './rtl';

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;
+        }
+      }
+    }
+  }
+}

components/popover/style/index.less

@@ -203,3 +203,5 @@
     bottom: 12px;
   }
 }
+
+@import './rtl';

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;
+      }
+    }
+  }
+}

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 (
-      <div class={prefixCls}>
+      <div class={className}>
         {title && <div class={`${prefixCls}-title`}>{title}</div>}
         <div style={valueStyle} class={`${prefixCls}-content`}>
           {prefix && <span class={`${prefixCls}-content-prefix`}>{prefix}</span>}

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';

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;
+      }
+    }
+  }
+}