Skip to content

fix: Table rtl related className #1245

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zombieJ merged 5 commits into from
Mar 10, 2025
Merged

fix: Table rtl related className #1245

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e30f1a8
chore: fix logical position
zombieJ Mar 10, 2025
17cd472
test: update snapshot
zombieJ Mar 10, 2025
9677512
chore: fix default fixed type
zombieJ Mar 10, 2025
1756eee
test: update snapshot
zombieJ Mar 10, 2025
4d74567
test: fix test case
zombieJ Mar 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 3 additions & 5 deletions src/Table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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
Expand Down
39 changes: 11 additions & 28 deletions src/hooks/useColumns/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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`.
*/
Expand Down Expand Up @@ -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);
}
}
Expand Down Expand Up @@ -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(
Expand Down
4 changes: 2 additions & 2 deletions src/utils/fixUtil.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
4 changes: 2 additions & 2 deletions tests/ExpandRow.spec.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down
1 change: 1 addition & 0 deletions tests/Table.spec.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -619,6 +619,7 @@ describe('Table.Basic', () => {
scroll: { x: 100, y: 100 },
}),
);
console.log(container.innerHTML);
expect(container.firstChild).toMatchSnapshot();
});

Expand Down
2 changes: 1 addition & 1 deletion tests/__snapshots__/ExpandRow.spec.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Loading