fix: fixed Table text-align bug in RTL mode #2172 (#2214)

Co-authored-by: shijia.me <shijia.me@bytedance.com>
DouyinFE · May 6, 2024 · 74998fd · 74998fd
1 parent 52bb3f9
commit 74998fd
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 4 deletions.
diff --git a/packages/semi-foundation/table/rtl.scss b/packages/semi-foundation/table/rtl.scss
@@ -5,6 +5,18 @@ $module: #{$prefix}-table;
         direction: rtl;
         text-align: right;
 
+        &-align-left {
+            .#{$module}-operate-wrapper {
+                justify-content: flex-end;
+            }
+        }
+
+        &-align-right {
+            .#{$module}-operate-wrapper {
+                justify-content: flex-start;
+            }
+        }
+
         &-thead {
             & > .#{$module}-row {
                 & > .#{$module}-row-head {
@@ -98,12 +110,12 @@ $module: #{$prefix}-table;
             }
 
             &-sorter {
-                margin-left: auto;
+                margin-left: 0;
                 margin-right: $spacing-table_column_sorter-marginLeft;
             }
 
             &-filter {
-                margin-left: auto;
+                margin-left: 0;
                 margin-right: $spacing-table_column_filter-marginLeft;
             }
         }

diff --git a/packages/semi-ui/table/_story/RTL/ColumnAlignWithSorter.tsx b/packages/semi-ui/table/_story/RTL/ColumnAlignWithSorter.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Space } from '../../../index';
+import ColumnAlignWithSorter from '../v2/columnAlignWithSorter';
+import RTLWrapper from '../../../configProvider/_story/RTLDirection/RTLWrapper';
+
+function App() {
+    return (
+        <Space vertical align='start' style={{ width: 1200 }}>
+            <RTLWrapper defaultDirection='rtl'>
+                <ColumnAlignWithSorter />
+            </RTLWrapper>
+            <RTLWrapper defaultDirection='ltr'>
+                <ColumnAlignWithSorter />
+            </RTLWrapper>
+        </Space>
+    );
+}
+
+export default App;
diff --git a/packages/semi-ui/table/_story/RTL/index.jsx b/packages/semi-ui/table/_story/RTL/index.jsx
@@ -1,4 +1,5 @@
 
 export { default as RTLAlignScrollBar } from './AlignScrollBar';
 export { default as ColumnAlign } from './ColumnAlign';
-export { default as Direction } from './Direction';
+export { default as Direction } from './Direction';
+export { default as ColumnAlignWithSorter } from './ColumnAlignWithSorter';
diff --git a/packages/semi-ui/table/_story/table.stories.jsx b/packages/semi-ui/table/_story/table.stories.jsx
@@ -72,7 +72,7 @@ export { default as VirtualizedDynamicData } from './VirtualizedDynamicData';
 export { default as MassiveColumns } from './MassiveColumns';
 export { default as ControlledPagination } from './ControlledPagination';
 export { default as FulldRenderDemo } from './FullRender';
-export { RTLAlignScrollBar, ColumnAlign, Direction  } from './RTL';
+export { RTLAlignScrollBar, ColumnAlign, Direction, ColumnAlignWithSorter  } from './RTL';
 export { default as JSXAsyncData } from './JSXAsyncData';
 export { default as ScrollBar } from './ScrollBar';
 export { default as TableSpan } from './TableSpan';

diff --git a/packages/semi-ui/table/_story/v2/columnAlignWithSorter.tsx b/packages/semi-ui/table/_story/v2/columnAlignWithSorter.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import { Table } from '@douyinfe/semi-ui';
+
+export default function App() {
+    const columns = [
+        {
+            title: '大小(align left)',
+            dataIndex: 'size',
+            align: 'left',
+            sorter: (a, b) => (a.size - b.size > 0 ? 1 : -1),
+        },
+        {
+            title: '所有者(align right)',
+            dataIndex: 'owner',
+            align: 'right',
+            sorter: (a, b) => (a.size - b.size > 0 ? 1 : -1),
+        },
+        {
+            title: '更新日期(align left)',
+            dataIndex: 'updateTime',
+            align: 'left',
+            filters: [
+                {
+                    text: 'Semi Design 设计稿',
+                    value: 'Semi Design 设计稿',
+                },
+                {
+                    text: 'Semi D2C 设计稿',
+                    value: 'Semi D2C 设计稿',
+                },
+            ],
+            onFilter: (value, record) => record.name.includes(value),
+        },
+        {
+            title: '标题(align right)',
+            dataIndex: 'name',
+            align: 'right',
+            filters: [
+                {
+                    text: 'Semi Design 设计稿',
+                    value: 'Semi Design 设计稿',
+                },
+                {
+                    text: 'Semi D2C 设计稿',
+                    value: 'Semi D2C 设计稿',
+                },
+            ],
+            onFilter: (value, record) => record.name.includes(value),
+        },
+    ];
+    const data = [
+        {
+            key: '1',
+            name: 'Semi Design 设计稿.fig',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png',
+            size: '2M',
+            owner: '姜鹏志',
+            updateTime: '2020-02-02 05:13',
+            avatarBg: 'grey',
+        },
+        {
+            key: '2',
+            name: 'Semi Design 分享演示文稿',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
+            size: '2M',
+            owner: '郝宣',
+            updateTime: '2020-01-17 05:31',
+            avatarBg: 'red',
+        },
+        {
+            key: '3',
+            name: '设计文档',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
+            size: '34KB',
+            owner: 'Zoey Edwards',
+            updateTime: '2020-01-26 11:01',
+            avatarBg: 'light-blue',
+        },
+    ];
+
+    return <Table columns={columns} dataSource={data} pagination={false} />;
+}