Skip to content

Commit

Permalink
fix: The fixed attribute does not take effect (#1193)
Browse files Browse the repository at this point in the history 
* fix: The fixed attribute does not take effect

* fix: Rectify the case that expandIconColumnIndex is smaller than 0

* fix: update Table.Expand snapshoot

* fix: supplementary test cases

---------

Co-authored-by: 树清 <[email protected]>
  • Loading branch information
@yezhonghu0503
yezhonghu0503 and 树清 authored Dec 30, 2024
1 parent cb61872 commit 681133f
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 120 deletions.
14 changes: 9 additions & 5 deletions src/hooks/useColumns/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,9 +176,12 @@ function useColumns<RecordType>(
// >>> Insert expand column if not exist
if (!cloneColumns.includes(EXPAND_COLUMN)) {
const expandColIndex = expandIconColumnIndex || 0;
if (expandColIndex >= 0) {
if (expandColIndex >= 0 && (expandColIndex || fixed === 'left' || !fixed)) {
cloneColumns.splice(expandColIndex, 0, EXPAND_COLUMN);
}
if (fixed === 'right') {
cloneColumns.splice(baseColumns.length, 0, EXPAND_COLUMN);
}
}

// >>> Deduplicate additional expand column
Expand All @@ -197,10 +200,8 @@ function useColumns<RecordType>(
const prevColumn = baseColumns[expandColumnIndex];

let fixedColumn: FixedType | null;
if ((fixed === 'left' || fixed) && !expandIconColumnIndex) {
fixedColumn = 'left';
} else if ((fixed === 'right' || fixed) && expandIconColumnIndex === baseColumns.length) {
fixedColumn = 'right';
if (fixed) {
fixedColumn = fixed;
} else {
fixedColumn = prevColumn ? prevColumn.fixed : null;
}
Expand Down Expand Up @@ -243,6 +244,7 @@ function useColumns<RecordType>(
}

return baseColumns.filter(col => col !== EXPAND_COLUMN);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [expandable, baseColumns, getRowKey, expandedKeys, expandIcon, direction]);

// ========================= Transform ========================
Expand All @@ -261,6 +263,7 @@ function useColumns<RecordType>(
];
}
return finalColumns;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [transformColumns, withExpandColumns, direction]);

// ========================== Flatten =========================
Expand All @@ -269,6 +272,7 @@ function useColumns<RecordType>(
return revertForRtl(flatColumns(mergedColumns));
}
return flatColumns(mergedColumns);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [mergedColumns, direction, scrollWidth]);

// ========================= Gap Fixed ========================
Expand Down
30 changes: 30 additions & 0 deletions tests/ExpandRow.spec.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -230,6 +230,36 @@ describe('Table.Expand', () => {
expect(wrapper2.find('.rc-table-has-fix-right').length).toBe(0);
});

it('fixed in expandable Fixed in expandable', () => {
const columns = [
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Age', dataIndex: 'age', key: 'age' },
{ title: 'Gender', dataIndex: 'gender', key: 'gender' },
];
const data = [
{ key: 0, name: 'Lucy', age: 27, gender: 'F' },
{ key: 1, name: 'Jack', age: 28, gender: 'M' },
];
const wrapper = mount(
createTable({
columns,
data,
scroll: { x: 903 },
expandable: { expandedRowRender, fixed: 'left' },
}),
);
const wrapper2 = mount(
createTable({
columns,
data,
scroll: { x: 903 },
expandable: { expandedRowRender, fixed: 'right' },
}),
);
expect(wrapper.find('.rc-table-has-fix-left').length).toBe(1);
expect(wrapper2.find('.rc-table-has-fix-right').length).toBe(1);
});

describe('config expand column index', () => {
it('not show EXPAND_COLUMN if expandable is false', () => {
resetWarned();
Expand Down
131 changes: 16 additions & 115 deletions tests/__snapshots__/ExpandRow.spec.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ LoadedCheerio {
exports[`Table.Expand > does not crash if scroll is not set 1`] = `
LoadedCheerio {
"0": <div
class="rc-table rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left"
class="rc-table rc-table-scroll-horizontal"
>
<div
class="rc-table-container"
Expand All @@ -148,21 +148,13 @@ LoadedCheerio {
style="overflow-x: auto; overflow-y: hidden;"
>
<table
style="min-width: 100%; table-layout: fixed;"
style="min-width: 100%; table-layout: auto;"
>
<colgroup>
<col
class="rc-table-expand-icon-col"
/>
</colgroup>
<colgroup />
<thead
class="rc-table-thead"
>
<tr>
<th
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
style="position: sticky; left: 0px;"
/>
<th
class="rc-table-cell"
scope="col"
Expand Down Expand Up @@ -218,28 +210,11 @@ LoadedCheerio {
 
</div>
</td>
<td
style="padding: 0px; border: 0px; height: 0px;"
>
<div
style="height: 0px; overflow: hidden;"
>
 
</div>
</td>
</tr>
<tr
class="rc-table-row rc-table-row-level-0"
data-row-key="0"
>
<td
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
style="position: sticky; left: 0px;"
>
<span
class="rc-table-row-expand-icon rc-table-row-collapsed"
/>
</td>
<td
class="rc-table-cell"
>
Expand All @@ -260,14 +235,6 @@ LoadedCheerio {
class="rc-table-row rc-table-row-level-0"
data-row-key="1"
>
<td
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
style="position: sticky; left: 0px;"
>
<span
class="rc-table-row-expand-icon rc-table-row-collapsed"
/>
</td>
<td
class="rc-table-cell"
>
Expand Down Expand Up @@ -323,7 +290,7 @@ LoadedCheerio {
exports[`Table.Expand > does not crash if scroll is not set 2`] = `
LoadedCheerio {
"0": <div
class="rc-table rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left"
class="rc-table rc-table-scroll-horizontal"
>
<div
class="rc-table-container"
Expand All @@ -333,21 +300,13 @@ LoadedCheerio {
style="overflow-x: auto; overflow-y: hidden;"
>
<table
style="min-width: 100%; table-layout: fixed;"
style="min-width: 100%; table-layout: auto;"
>
<colgroup>
<col
class="rc-table-expand-icon-col"
/>
</colgroup>
<colgroup />
<thead
class="rc-table-thead"
>
<tr>
<th
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
style="position: sticky; left: 0px;"
/>
<th
class="rc-table-cell"
scope="col"
Expand Down Expand Up @@ -403,28 +362,11 @@ LoadedCheerio {
 
</div>
</td>
<td
style="padding: 0px; border: 0px; height: 0px;"
>
<div
style="height: 0px; overflow: hidden;"
>
 
</div>
</td>
</tr>
<tr
class="rc-table-row rc-table-row-level-0"
data-row-key="0"
>
<td
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
style="position: sticky; left: 0px;"
>
<span
class="rc-table-row-expand-icon rc-table-row-collapsed"
/>
</td>
<td
class="rc-table-cell"
>
Expand All @@ -445,14 +387,6 @@ LoadedCheerio {
class="rc-table-row rc-table-row-level-0"
data-row-key="1"
>
<td
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
style="position: sticky; left: 0px;"
>
<span
class="rc-table-row-expand-icon rc-table-row-collapsed"
/>
</td>
<td
class="rc-table-cell"
>
Expand Down Expand Up @@ -1183,7 +1117,7 @@ LoadedCheerio {
exports[`Table.Expand > work in expandable fix 1`] = `
LoadedCheerio {
"0": <div
class="rc-table rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left"
class="rc-table rc-table-scroll-horizontal"
>
<div
class="rc-table-container"
Expand All @@ -1193,21 +1127,13 @@ LoadedCheerio {
style="overflow-x: auto; overflow-y: hidden;"
>
<table
style="width: 903px; min-width: 100%; table-layout: fixed;"
style="width: 903px; min-width: 100%; table-layout: auto;"
>
<colgroup>
<col
class="rc-table-expand-icon-col"
/>
</colgroup>
<colgroup />
<thead
class="rc-table-thead"
>
<tr>
<th
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
style="position: sticky; left: 0px;"
/>
<th
class="rc-table-cell"
scope="col"
Expand Down Expand Up @@ -1263,28 +1189,11 @@ LoadedCheerio {
 
</div>
</td>
<td
style="padding: 0px; border: 0px; height: 0px;"
>
<div
style="height: 0px; overflow: hidden;"
>
 
</div>
</td>
</tr>
<tr
class="rc-table-row rc-table-row-level-0"
data-row-key="0"
>
<td
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
style="position: sticky; left: 0px;"
>
<span
class="rc-table-row-expand-icon rc-table-row-collapsed"
/>
</td>
<td
class="rc-table-cell"
>
Expand All @@ -1305,14 +1214,6 @@ LoadedCheerio {
class="rc-table-row rc-table-row-level-0"
data-row-key="1"
>
<td
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
style="position: sticky; left: 0px;"
>
<span
class="rc-table-row-expand-icon rc-table-row-collapsed"
/>
</td>
<td
class="rc-table-cell"
>
Expand Down Expand Up @@ -1368,7 +1269,7 @@ LoadedCheerio {
exports[`Table.Expand > work in expandable fix 2`] = `
LoadedCheerio {
"0": <div
class="rc-table rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-right"
class="rc-table rc-table-fixed-column rc-table-fixed-column-gapped rc-table-scroll-horizontal"
>
<div
class="rc-table-container"
Expand Down Expand Up @@ -1411,8 +1312,8 @@ LoadedCheerio {
Gender
</th>
<th
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-right rc-table-cell-fix-right-first"
style="position: sticky; right: 0px;"
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
style="position: sticky; left: 0px;"
/>
</tr>
</thead>
Expand Down Expand Up @@ -1481,8 +1382,8 @@ LoadedCheerio {
F
</td>
<td
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-right rc-table-cell-fix-right-first"
style="position: sticky; right: 0px;"
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
style="position: sticky; left: 0px;"
>
<span
class="rc-table-row-expand-icon rc-table-row-collapsed"
Expand All @@ -1509,8 +1410,8 @@ LoadedCheerio {
M
</td>
<td
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-right rc-table-cell-fix-right-first"
style="position: sticky; right: 0px;"
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
style="position: sticky; left: 0px;"
>
<span
class="rc-table-row-expand-icon rc-table-row-collapsed"
Expand Down

0 comments on commit 681133f

Please sign in to comment.