Skip to content

Commit 681133f

Browse files
yezhonghu0503树清
yezhonghu0503
and
树清
authored
fix: The fixed attribute does not take effect (#1193)
* 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]>
1 parent cb61872 commit 681133f

File tree

3 files changed

+55
-120
lines changed

3 files changed

+55
-120
lines changed

‎src/hooks/useColumns/index.tsx

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -176,9 +176,12 @@ function useColumns<RecordType>(
176176
// >>> Insert expand column if not exist
177177
if (!cloneColumns.includes(EXPAND_COLUMN)) {
178178
const expandColIndex = expandIconColumnIndex || 0;
179-
if (expandColIndex >= 0) {
179+
if (expandColIndex >= 0 && (expandColIndex || fixed === 'left' || !fixed)) {
180180
cloneColumns.splice(expandColIndex, 0, EXPAND_COLUMN);
181181
}
182+
if (fixed === 'right') {
183+
cloneColumns.splice(baseColumns.length, 0, EXPAND_COLUMN);
184+
}
182185
}
183186

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

199202
let fixedColumn: FixedType | null;
200-
if ((fixed === 'left' || fixed) && !expandIconColumnIndex) {
201-
fixedColumn = 'left';
202-
} else if ((fixed === 'right' || fixed) && expandIconColumnIndex === baseColumns.length) {
203-
fixedColumn = 'right';
203+
if (fixed) {
204+
fixedColumn = fixed;
204205
} else {
205206
fixedColumn = prevColumn ? prevColumn.fixed : null;
206207
}
@@ -243,6 +244,7 @@ function useColumns<RecordType>(
243244
}
244245

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

248250
// ========================= Transform ========================
@@ -261,6 +263,7 @@ function useColumns<RecordType>(
261263
];
262264
}
263265
return finalColumns;
266+
// eslint-disable-next-line react-hooks/exhaustive-deps
264267
}, [transformColumns, withExpandColumns, direction]);
265268

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

274278
// ========================= Gap Fixed ========================

‎tests/ExpandRow.spec.jsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -230,6 +230,36 @@ describe('Table.Expand', () => {
230230
expect(wrapper2.find('.rc-table-has-fix-right').length).toBe(0);
231231
});
232232

233+
it('fixed in expandable Fixed in expandable', () => {
234+
const columns = [
235+
{ title: 'Name', dataIndex: 'name', key: 'name' },
236+
{ title: 'Age', dataIndex: 'age', key: 'age' },
237+
{ title: 'Gender', dataIndex: 'gender', key: 'gender' },
238+
];
239+
const data = [
240+
{ key: 0, name: 'Lucy', age: 27, gender: 'F' },
241+
{ key: 1, name: 'Jack', age: 28, gender: 'M' },
242+
];
243+
const wrapper = mount(
244+
createTable({
245+
columns,
246+
data,
247+
scroll: { x: 903 },
248+
expandable: { expandedRowRender, fixed: 'left' },
249+
}),
250+
);
251+
const wrapper2 = mount(
252+
createTable({
253+
columns,
254+
data,
255+
scroll: { x: 903 },
256+
expandable: { expandedRowRender, fixed: 'right' },
257+
}),
258+
);
259+
expect(wrapper.find('.rc-table-has-fix-left').length).toBe(1);
260+
expect(wrapper2.find('.rc-table-has-fix-right').length).toBe(1);
261+
});
262+
233263
describe('config expand column index', () => {
234264
it('not show EXPAND_COLUMN if expandable is false', () => {
235265
resetWarned();

‎tests/__snapshots__/ExpandRow.spec.jsx.snap

Lines changed: 16 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ LoadedCheerio {
138138
exports[`Table.Expand > does not crash if scroll is not set 1`] = `
139139
LoadedCheerio {
140140
"0": <div
141-
class="rc-table rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left"
141+
class="rc-table rc-table-scroll-horizontal"
142142
>
143143
<div
144144
class="rc-table-container"
@@ -148,21 +148,13 @@ LoadedCheerio {
148148
style="overflow-x: auto; overflow-y: hidden;"
149149
>
150150
<table
151-
style="min-width: 100%; table-layout: fixed;"
151+
style="min-width: 100%; table-layout: auto;"
152152
>
153-
<colgroup>
154-
<col
155-
class="rc-table-expand-icon-col"
156-
/>
157-
</colgroup>
153+
<colgroup />
158154
<thead
159155
class="rc-table-thead"
160156
>
161157
<tr>
162-
<th
163-
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
164-
style="position: sticky; left: 0px;"
165-
/>
166158
<th
167159
class="rc-table-cell"
168160
scope="col"
@@ -218,28 +210,11 @@ LoadedCheerio {
218210
 
219211
</div>
220212
</td>
221-
<td
222-
style="padding: 0px; border: 0px; height: 0px;"
223-
>
224-
<div
225-
style="height: 0px; overflow: hidden;"
226-
>
227-
 
228-
</div>
229-
</td>
230213
</tr>
231214
<tr
232215
class="rc-table-row rc-table-row-level-0"
233216
data-row-key="0"
234217
>
235-
<td
236-
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
237-
style="position: sticky; left: 0px;"
238-
>
239-
<span
240-
class="rc-table-row-expand-icon rc-table-row-collapsed"
241-
/>
242-
</td>
243218
<td
244219
class="rc-table-cell"
245220
>
@@ -260,14 +235,6 @@ LoadedCheerio {
260235
class="rc-table-row rc-table-row-level-0"
261236
data-row-key="1"
262237
>
263-
<td
264-
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
265-
style="position: sticky; left: 0px;"
266-
>
267-
<span
268-
class="rc-table-row-expand-icon rc-table-row-collapsed"
269-
/>
270-
</td>
271238
<td
272239
class="rc-table-cell"
273240
>
@@ -323,7 +290,7 @@ LoadedCheerio {
323290
exports[`Table.Expand > does not crash if scroll is not set 2`] = `
324291
LoadedCheerio {
325292
"0": <div
326-
class="rc-table rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left"
293+
class="rc-table rc-table-scroll-horizontal"
327294
>
328295
<div
329296
class="rc-table-container"
@@ -333,21 +300,13 @@ LoadedCheerio {
333300
style="overflow-x: auto; overflow-y: hidden;"
334301
>
335302
<table
336-
style="min-width: 100%; table-layout: fixed;"
303+
style="min-width: 100%; table-layout: auto;"
337304
>
338-
<colgroup>
339-
<col
340-
class="rc-table-expand-icon-col"
341-
/>
342-
</colgroup>
305+
<colgroup />
343306
<thead
344307
class="rc-table-thead"
345308
>
346309
<tr>
347-
<th
348-
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
349-
style="position: sticky; left: 0px;"
350-
/>
351310
<th
352311
class="rc-table-cell"
353312
scope="col"
@@ -403,28 +362,11 @@ LoadedCheerio {
403362
 
404363
</div>
405364
</td>
406-
<td
407-
style="padding: 0px; border: 0px; height: 0px;"
408-
>
409-
<div
410-
style="height: 0px; overflow: hidden;"
411-
>
412-
 
413-
</div>
414-
</td>
415365
</tr>
416366
<tr
417367
class="rc-table-row rc-table-row-level-0"
418368
data-row-key="0"
419369
>
420-
<td
421-
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
422-
style="position: sticky; left: 0px;"
423-
>
424-
<span
425-
class="rc-table-row-expand-icon rc-table-row-collapsed"
426-
/>
427-
</td>
428370
<td
429371
class="rc-table-cell"
430372
>
@@ -445,14 +387,6 @@ LoadedCheerio {
445387
class="rc-table-row rc-table-row-level-0"
446388
data-row-key="1"
447389
>
448-
<td
449-
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
450-
style="position: sticky; left: 0px;"
451-
>
452-
<span
453-
class="rc-table-row-expand-icon rc-table-row-collapsed"
454-
/>
455-
</td>
456390
<td
457391
class="rc-table-cell"
458392
>
@@ -1183,7 +1117,7 @@ LoadedCheerio {
11831117
exports[`Table.Expand > work in expandable fix 1`] = `
11841118
LoadedCheerio {
11851119
"0": <div
1186-
class="rc-table rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left"
1120+
class="rc-table rc-table-scroll-horizontal"
11871121
>
11881122
<div
11891123
class="rc-table-container"
@@ -1193,21 +1127,13 @@ LoadedCheerio {
11931127
style="overflow-x: auto; overflow-y: hidden;"
11941128
>
11951129
<table
1196-
style="width: 903px; min-width: 100%; table-layout: fixed;"
1130+
style="width: 903px; min-width: 100%; table-layout: auto;"
11971131
>
1198-
<colgroup>
1199-
<col
1200-
class="rc-table-expand-icon-col"
1201-
/>
1202-
</colgroup>
1132+
<colgroup />
12031133
<thead
12041134
class="rc-table-thead"
12051135
>
12061136
<tr>
1207-
<th
1208-
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
1209-
style="position: sticky; left: 0px;"
1210-
/>
12111137
<th
12121138
class="rc-table-cell"
12131139
scope="col"
@@ -1263,28 +1189,11 @@ LoadedCheerio {
12631189
 
12641190
</div>
12651191
</td>
1266-
<td
1267-
style="padding: 0px; border: 0px; height: 0px;"
1268-
>
1269-
<div
1270-
style="height: 0px; overflow: hidden;"
1271-
>
1272-
 
1273-
</div>
1274-
</td>
12751192
</tr>
12761193
<tr
12771194
class="rc-table-row rc-table-row-level-0"
12781195
data-row-key="0"
12791196
>
1280-
<td
1281-
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
1282-
style="position: sticky; left: 0px;"
1283-
>
1284-
<span
1285-
class="rc-table-row-expand-icon rc-table-row-collapsed"
1286-
/>
1287-
</td>
12881197
<td
12891198
class="rc-table-cell"
12901199
>
@@ -1305,14 +1214,6 @@ LoadedCheerio {
13051214
class="rc-table-row rc-table-row-level-0"
13061215
data-row-key="1"
13071216
>
1308-
<td
1309-
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
1310-
style="position: sticky; left: 0px;"
1311-
>
1312-
<span
1313-
class="rc-table-row-expand-icon rc-table-row-collapsed"
1314-
/>
1315-
</td>
13161217
<td
13171218
class="rc-table-cell"
13181219
>
@@ -1368,7 +1269,7 @@ LoadedCheerio {
13681269
exports[`Table.Expand > work in expandable fix 2`] = `
13691270
LoadedCheerio {
13701271
"0": <div
1371-
class="rc-table rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-right"
1272+
class="rc-table rc-table-fixed-column rc-table-fixed-column-gapped rc-table-scroll-horizontal"
13721273
>
13731274
<div
13741275
class="rc-table-container"
@@ -1411,8 +1312,8 @@ LoadedCheerio {
14111312
Gender
14121313
</th>
14131314
<th
1414-
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-right rc-table-cell-fix-right-first"
1415-
style="position: sticky; right: 0px;"
1315+
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
1316+
style="position: sticky; left: 0px;"
14161317
/>
14171318
</tr>
14181319
</thead>
@@ -1481,8 +1382,8 @@ LoadedCheerio {
14811382
F
14821383
</td>
14831384
<td
1484-
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-right rc-table-cell-fix-right-first"
1485-
style="position: sticky; right: 0px;"
1385+
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
1386+
style="position: sticky; left: 0px;"
14861387
>
14871388
<span
14881389
class="rc-table-row-expand-icon rc-table-row-collapsed"
@@ -1509,8 +1410,8 @@ LoadedCheerio {
15091410
M
15101411
</td>
15111412
<td
1512-
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-right rc-table-cell-fix-right-first"
1513-
style="position: sticky; right: 0px;"
1413+
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
1414+
style="position: sticky; left: 0px;"
15141415
>
15151416
<span
15161417
class="rc-table-row-expand-icon rc-table-row-collapsed"

0 commit comments

Comments
 (0)