From 10d97bf346496ee1b11a4b6fc9d68d1fec85755a Mon Sep 17 00:00:00 2001
From: xrkffgg <xrkffgg@gmail.com>
Date: Thu, 19 Mar 2020 17:21:41 +0800
Subject: [PATCH] style: add rtl.less of Table (#22402)

---
 components/table/style/index.less |  66 +--------------
 components/table/style/rtl.less   | 130 ++++++++++++++++++++++++++++++
 2 files changed, 131 insertions(+), 65 deletions(-)
 create mode 100644 components/table/style/rtl.less

diff --git a/components/table/style/index.less b/components/table/style/index.less
index fc3503351f..a68bf0c1fe 100644
--- a/components/table/style/index.less
+++ b/components/table/style/index.less
@@ -5,7 +5,6 @@
 
 @table-prefix-cls: ~'@{ant-prefix}-table';
 @dropdown-prefix-cls: ~'@{ant-prefix}-dropdown';
-@table-wrapepr-rtl-cls: ~'@{table-prefix-cls}-wrapper-rtl';
 @table-header-icon-color: #bfbfbf;
 @table-header-icon-color-hover: darken(@table-header-icon-color, 10%);
 @table-header-sort-active-filter-bg: lighten(@table-header-sort-active-bg, 2%);
@@ -14,9 +13,6 @@
 
 .@{table-prefix-cls}-wrapper {
   .clearfix;
-  &-rtl {
-    direction: rtl;
-  }
 }
 
 .@{table-prefix-cls} {
@@ -33,10 +29,6 @@
     border-radius: @table-border-radius-base @table-border-radius-base 0 0;
     border-collapse: separate;
     border-spacing: 0;
-
-    .@{table-wrapepr-rtl-cls} & {
-      text-align: right;
-    }
   }
 
   // ============================= Cell =============================
@@ -93,14 +85,6 @@
 
         &[colspan]:not([colspan='1']) {
           text-align: center;
-
-          .@{table-wrapepr-rtl-cls} & {
-            text-align: center;
-          }
-        }
-
-        .@{table-wrapepr-rtl-cls} & {
-          text-align: right;
         }
       }
     }
@@ -143,9 +127,6 @@
         margin: -@table-padding-vertical -@table-padding-horizontal -@table-padding-vertical (@table-padding-horizontal +
               ceil(@font-size-sm * 1.4));
 
-        &.@{table-prefix-cls}-rtl {
-          margin: -@table-padding-vertical (@table-padding-horizontal + ceil(@font-size-sm * 1.4)) -@table-padding-vertical -@table-padding-horizontal;
-        }
         td {
           background: transparent;
         }
@@ -176,10 +157,6 @@
   &-pagination.@{ant-prefix}-pagination {
     float: right;
     margin: 16px 0;
-
-    .@{table-wrapepr-rtl-cls} & {
-      float: left;
-    }
   }
 
   // ================================================================
@@ -218,11 +195,6 @@
     margin-left: @padding-xs;
     color: @table-header-icon-color;
 
-    .@{table-wrapepr-rtl-cls} & {
-      margin-right: @padding-xs;
-      margin-left: 0;
-    }
-
     &-full {
       margin-top: -0.2em;
       margin-bottom: 0;
@@ -258,10 +230,6 @@
   &-filter-column-title {
     flex: auto;
     padding: @table-padding-vertical 2.3em @table-padding-vertical @table-padding-horizontal;
-
-    .@{table-wrapepr-rtl-cls} & {
-      padding: @table-padding-vertical @table-padding-horizontal @table-padding-vertical 2.3em;
-    }
   }
 
   &-filter-trigger-container {
@@ -276,11 +244,6 @@
     cursor: pointer;
     transition: background-color 0.3s;
 
-    .@{table-wrapepr-rtl-cls} & {
-      right: auto;
-      left: 0;
-    }
-
     &-open,
     &:hover,
     thead th.@{table-prefix-cls}-column-has-sorters:hover &:hover {
@@ -343,11 +306,6 @@
     &-submenu {
       .@{ant-prefix}-checkbox-wrapper + span {
         padding-left: 8px;
-
-        .@{ant-prefix}-dropdown-rtl & {
-          padding-right: 8px;
-          padding-left: 0;
-        }
       }
     }
 
@@ -381,22 +339,12 @@
   &-selection {
     position: relative;
 
-    .@{table-wrapepr-rtl-cls} & {
-      text-align: center;
-    }
-
     &-extra {
       position: absolute;
       top: 50%;
       right: 0;
       transform: translate(100%, -50%);
 
-      .@{table-wrapepr-rtl-cls} & {
-        right: auto;
-        left: 0;
-        transform: translate(-100%, -50%);
-      }
-
       .@{iconfont-css-prefix} {
         .iconfont-size-under-12px(10px);
         color: @table-header-icon-color;
@@ -420,10 +368,6 @@
   &-row-indent {
     float: left;
     height: 1px;
-
-    .@{table-wrapepr-rtl-cls} & {
-      float: right;
-    }
   }
 
   &-row-expand-icon {
@@ -446,10 +390,6 @@
     transition: all 0.3s;
     user-select: none;
 
-    .@{table-wrapepr-rtl-cls} & {
-      float: right;
-    }
-
     &:focus,
     &:hover,
     &:active {
@@ -500,11 +440,6 @@
     .@{table-prefix-cls}-row-indent + & {
       margin-top: (@font-size-base * @line-height-base - ceil(@font-size-sm * 1.4)) / 2;
       margin-right: @padding-xs;
-
-      .@{table-wrapepr-rtl-cls} & {
-        margin-right: 0;
-        margin-left: @padding-xs;
-      }
     }
   }
 
@@ -633,3 +568,4 @@
 }
 
 @import './radius.less';
+@import './rtl';
diff --git a/components/table/style/rtl.less b/components/table/style/rtl.less
new file mode 100644
index 0000000000..86a56b7e7f
--- /dev/null
+++ b/components/table/style/rtl.less
@@ -0,0 +1,130 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@table-prefix-cls: ~'@{ant-prefix}-table';
+@table-wrapepr-rtl-cls: ~'@{table-prefix-cls}-wrapper-rtl';
+
+.@{table-prefix-cls}-wrapper {
+  &-rtl {
+    direction: rtl;
+  }
+}
+
+.@{table-prefix-cls} {
+  table {
+    .@{table-wrapepr-rtl-cls} & {
+      text-align: right;
+    }
+  }
+
+  // ============================ Header ============================
+  thead {
+    > tr {
+      > th {
+        &[colspan]:not([colspan='1']) {
+          .@{table-wrapepr-rtl-cls} & {
+            text-align: center;
+          }
+        }
+
+        .@{table-wrapepr-rtl-cls} & {
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  // ============================= Body =============================
+  tbody {
+    > tr {
+      // ========================= Nest Table ===========================
+      .@{table-prefix-cls} {
+        &.@{table-prefix-cls}-rtl {
+          margin: -@table-padding-vertical (@table-padding-horizontal + ceil(@font-size-sm * 1.4)) -@table-padding-vertical -@table-padding-horizontal;
+        }
+      }
+    }
+  }
+
+  // ========================== Pagination ==========================
+  &-pagination.@{ant-prefix}-pagination {
+    .@{table-wrapepr-rtl-cls} & {
+      float: left;
+    }
+  }
+
+  // ================================================================
+  // =                           Function                           =
+  // ================================================================
+
+  // ============================ Sorter ============================
+  &-column-sorter {
+    .@{table-wrapepr-rtl-cls} & {
+      margin-right: @padding-xs;
+      margin-left: 0;
+    }
+  }
+
+  // ============================ Filter ============================
+  &-filter-column-title {
+    .@{table-wrapepr-rtl-cls} & {
+      padding: @table-padding-vertical @table-padding-horizontal @table-padding-vertical 2.3em;
+    }
+  }
+
+  &-filter-trigger-container {
+    .@{table-wrapepr-rtl-cls} & {
+      right: auto;
+      left: 0;
+    }
+  }
+
+  // Dropdown
+  &-filter-dropdown {
+    // Checkbox
+    &,
+    &-submenu {
+      .@{ant-prefix}-checkbox-wrapper + span {
+        .@{ant-prefix}-dropdown-rtl & {
+          padding-right: 8px;
+          padding-left: 0;
+        }
+      }
+    }
+  }
+
+  // ========================== Selections ==========================
+  &-selection {
+    .@{table-wrapepr-rtl-cls} & {
+      text-align: center;
+    }
+
+    &-extra {
+      .@{table-wrapepr-rtl-cls} & {
+        right: auto;
+        left: 0;
+        transform: translate(-100%, -50%);
+      }
+    }
+  }
+
+  // ========================== Expandable ==========================
+  &-row-indent {
+    .@{table-wrapepr-rtl-cls} & {
+      float: right;
+    }
+  }
+
+  &-row-expand-icon {
+    .@{table-wrapepr-rtl-cls} & {
+      float: right;
+    }
+
+    .@{table-prefix-cls}-row-indent + & {
+      .@{table-wrapepr-rtl-cls} & {
+        margin-right: 0;
+        margin-left: @padding-xs;
+      }
+    }
+  }
+}