fix: Table rtl related className (#1245)

* chore: fix logical position

* test: update snapshot

* chore: fix default fixed type

* test: update snapshot

* test: fix test case

Author: zombieJ

src/Table.tsx

@@ -775,10 +775,8 @@ function Table<RecordType extends DefaultRecordType>(
         /** No used but for compatible */
         [`${prefixCls}-fixed-column`]: fixColumn,
         [`${prefixCls}-scroll-horizontal`]: horizonScroll,
-        [`${prefixCls}-has-fix-left`]: flattenColumns[0] && flattenColumns[0].fixed,
-        [`${prefixCls}-has-fix-right`]:
-          flattenColumns[flattenColumns.length - 1] &&
-          flattenColumns[flattenColumns.length - 1].fixed === 'right',
+        [`${prefixCls}-has-fix-start`]: flattenColumns[0]?.fixed,
+        [`${prefixCls}-has-fix-end`]: flattenColumns[flattenColumns.length - 1]?.fixed === 'end',
       })}
       style={style}
       id={id}
@@ -829,7 +827,7 @@ function Table<RecordType extends DefaultRecordType>(
       onTriggerExpand,
       expandIconColumnIndex: expandableConfig.expandIconColumnIndex,
       indentSize: expandableConfig.indentSize,
-      allColumnsFixedLeft: flattenColumns.every(col => col.fixed === 'left'),
+      allColumnsFixedLeft: flattenColumns.every(col => col.fixed === 'start'),
       emptyNode,
 
       // Column

src/hooks/useColumns/index.tsx

@@ -63,8 +63,8 @@ function flatColumns<RecordType>(
     .filter(column => column && typeof column === 'object')
     .reduce((list, column, index) => {
       const { fixed } = column;
-      // Convert `fixed='true'` to `fixed='left'` instead
-      const parsedFixed = fixed === true ? 'left' : fixed;
+      const parsedFixed =
+        fixed === true || fixed === 'left' ? 'start' : fixed === 'right' ? 'end' : fixed;
       const mergedKey = `${parentKey}-${index}`;
 
       const subColumns = (column as ColumnGroupType<RecordType>).children;
@@ -88,24 +88,6 @@ function flatColumns<RecordType>(
     }, []);
 }
 
-function revertForRtl<RecordType>(columns: ColumnsType<RecordType>): ColumnsType<RecordType> {
-  return columns.map(column => {
-    const { fixed, ...restProps } = column;
-
-    // Convert `fixed='left'` to `fixed='right'` instead
-    let parsedFixed = fixed;
-    if (fixed === 'left') {
-      parsedFixed = 'right';
-    } else if (fixed === 'right') {
-      parsedFixed = 'left';
-    }
-    return {
-      fixed: parsedFixed,
-      ...restProps,
-    };
-  });
-}
-
 /**
  * Parse `columns` & `children` into `columns`.
  */
@@ -175,10 +157,13 @@ function useColumns<RecordType>(
       // >>> Insert expand column if not exist
       if (!cloneColumns.includes(EXPAND_COLUMN)) {
         const expandColIndex = expandIconColumnIndex || 0;
-        if (expandColIndex >= 0 && (expandColIndex || fixed === 'left' || !fixed)) {
+        if (
+          expandColIndex >= 0 &&
+          (expandColIndex || fixed === 'left' || fixed === 'start' || !fixed)
+        ) {
           cloneColumns.splice(expandColIndex, 0, EXPAND_COLUMN);
         }
-        if (fixed === 'right') {
+        if (fixed === 'right' || fixed === 'end') {
           cloneColumns.splice(baseColumns.length, 0, EXPAND_COLUMN);
         }
       }
@@ -266,13 +251,11 @@ function useColumns<RecordType>(
   }, [transformColumns, withExpandColumns, direction]);
 
   // ========================== Flatten =========================
-  const flattenColumns = React.useMemo(() => {
-    if (direction === 'rtl') {
-      return revertForRtl(flatColumns(mergedColumns));
-    }
-    return flatColumns(mergedColumns);
+  const flattenColumns = React.useMemo(
+    () => flatColumns(mergedColumns),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [mergedColumns, direction, scrollWidth]);
+    [mergedColumns, direction, scrollWidth],
+  );
 
   // ========================= FillWidth ========================
   const [filledColumns, realScrollWidth] = useWidthColumns(

src/utils/fixUtil.ts

@@ -16,10 +16,10 @@ export interface FixedInfo {
 }
 
 function isFixedStart(column: { fixed?: FixedType }) {
-  return column.fixed === 'left' || column.fixed === 'start';
+  return column.fixed === 'start';
 }
 function isFixedEnd(column: { fixed?: FixedType }) {
-  return column.fixed === 'right' || column.fixed === 'end';
+  return column.fixed === 'end';
 }
 
 export function getCellFixedInfo(

tests/ExpandRow.spec.jsx

@@ -265,8 +265,8 @@ describe('Table.Expand', () => {
         expandable: { expandedRowRender, fixed: 'right' },
       }),
     );
-    expect(container.querySelectorAll('.rc-table-has-fix-left').length).toBe(1);
-    expect(container2.querySelectorAll('.rc-table-has-fix-right').length).toBe(1);
+    expect(container.querySelector('.rc-table-has-fix-start')).toBeTruthy();
+    expect(container2.querySelector('.rc-table-has-fix-end')).toBeTruthy();
   });
 
   describe('config expand column index', () => {

tests/Table.spec.jsx

@@ -619,6 +619,7 @@ describe('Table.Basic', () => {
           scroll: { x: 100, y: 100 },
         }),
       );
+      console.log(container.innerHTML);
       expect(container.firstChild).toMatchSnapshot();
     });
 

tests/__snapshots__/ExpandRow.spec.jsx.snap

@@ -438,7 +438,7 @@ exports[`Table.Expand > not use nest when children is invalidate 1`] = `
 
 exports[`Table.Expand > renders fixed column correctly > work 1`] = `
 <div
-  class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
+  class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-start rc-table-has-fix-end"
 >
   <div
     class="rc-table-container"