Skip to content

Commit 313b619

Browse files
afc163afc163
authored
refactor: use css instead of inner style in MeasureRow (#1365)
* refactor: use css instead of inner style in MeasureRow * fix: update table measure row from td to th and adjust styles
1 parent d259fa9 commit 313b619

File tree

7 files changed

+438
-422
lines changed

7 files changed

+438
-422
lines changed

‎assets/index.less‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -219,6 +219,20 @@
219219
}
220220
}
221221

222+
th&-measure-cell {
223+
padding-top: 0;
224+
padding-bottom: 0;
225+
border-top: 0;
226+
border-bottom: 0;
227+
}
228+
229+
&-measure-cell-content {
230+
height: 0;
231+
overflow: hidden;
232+
visibility: hidden;
233+
pointer-events: none;
234+
}
235+
222236
&-content {
223237
.tableBorder();
224238
border-radius: 5px 0 0 0;

‎src/Body/MeasureCell.tsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,15 @@ export interface MeasureCellProps {
77
columnKey: React.Key;
88
onColumnResize: (key: React.Key, width: number) => void;
99
column?: ColumnType<any>;
10+
prefixCls: string;
1011
}
1112

12-
export default function MeasureCell({ columnKey, onColumnResize, column }: MeasureCellProps) {
13+
export default function MeasureCell({
14+
columnKey,
15+
onColumnResize,
16+
column,
17+
prefixCls,
18+
}: MeasureCellProps) {
1319
const cellRef = React.useRef<HTMLTableCellElement>();
1420

1521
useLayoutEffect(() => {
@@ -20,14 +26,9 @@ export default function MeasureCell({ columnKey, onColumnResize, column }: Measu
2026

2127
return (
2228
<ResizeObserver data={columnKey}>
23-
<td
24-
ref={cellRef}
25-
style={{ paddingTop: 0, paddingBottom: 0, borderTop: 0, borderBottom: 0, height: 0 }}
26-
>
27-
<div style={{ height: 0, overflow: 'hidden', fontWeight: 'bold' }}>
28-
{column?.title || '\xa0'}
29-
</div>
30-
</td>
29+
<th ref={cellRef} className={`${prefixCls}-measure-cell`}>
30+
<div className={`${prefixCls}-measure-cell-content`}>{column?.title || '\xa0'}</div>
31+
</th>
3132
</ResizeObserver>
3233
);
3334
}

‎src/Body/MeasureRow.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export default function MeasureRow({
2323
const { measureRowRender } = useContext(TableContext, ['measureRowRender']);
2424

2525
const measureRow = (
26-
<tr aria-hidden="true" className={`${prefixCls}-measure-row`} style={{ height: 0 }} ref={ref}>
26+
<tr aria-hidden="true" className={`${prefixCls}-measure-row`} ref={ref} tabIndex={-1}>
2727
<ResizeObserver.Collection
2828
onBatchResize={infoList => {
2929
if (isVisible(ref.current)) {
@@ -37,6 +37,7 @@ export default function MeasureRow({
3737
const column = columns.find(col => col.key === columnKey);
3838
return (
3939
<MeasureCell
40+
prefixCls={prefixCls}
4041
key={columnKey}
4142
columnKey={columnKey}
4243
onColumnResize={onColumnResize}

‎tests/FixedColumn.spec.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -240,11 +240,11 @@ describe('Table.FixedColumn', () => {
240240
it('not break measure count', async () => {
241241
const wrapper = mount(<Table columns={columns.slice(0, 5)} data={data} scroll={{ x: 1000 }} />);
242242
await safeAct(wrapper);
243-
expect(wrapper.find('.rc-table-measure-row td')).toHaveLength(5);
243+
expect(wrapper.find('.rc-table-measure-row th')).toHaveLength(5);
244244

245245
wrapper.setProps({ columns: columns.slice(0, 4) });
246246
wrapper.update();
247-
expect(wrapper.find('.rc-table-measure-row td')).toHaveLength(4);
247+
expect(wrapper.find('.rc-table-measure-row th')).toHaveLength(4);
248248
});
249249

250250
it('when all columns fixed left,cell should has classname rc-table-cell-fix-left-all', async () => {

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

Lines changed: 85 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -188,44 +188,44 @@ LoadedCheerio {
188188
<tr
189189
aria-hidden="true"
190190
class="rc-table-measure-row"
191-
style="height: 0px;"
191+
tabindex="-1"
192192
>
193-
<td
194-
style="padding-top: 0px; padding-bottom: 0px; border-top: 0px; border-bottom: 0px; height: 0px;"
193+
<th
194+
class="rc-table-measure-cell"
195195
>
196196
<div
197-
style="height: 0px; overflow: hidden; font-weight: bold;"
197+
class="rc-table-measure-cell-content"
198198
>
199199
 
200200
</div>
201-
</td>
202-
<td
203-
style="padding-top: 0px; padding-bottom: 0px; border-top: 0px; border-bottom: 0px; height: 0px;"
201+
</th>
202+
<th
203+
class="rc-table-measure-cell"
204204
>
205205
<div
206-
style="height: 0px; overflow: hidden; font-weight: bold;"
206+
class="rc-table-measure-cell-content"
207207
>
208208
Name
209209
</div>
210-
</td>
211-
<td
212-
style="padding-top: 0px; padding-bottom: 0px; border-top: 0px; border-bottom: 0px; height: 0px;"
210+
</th>
211+
<th
212+
class="rc-table-measure-cell"
213213
>
214214
<div
215-
style="height: 0px; overflow: hidden; font-weight: bold;"
215+
class="rc-table-measure-cell-content"
216216
>
217217
Age
218218
</div>
219-
</td>
220-
<td
221-
style="padding-top: 0px; padding-bottom: 0px; border-top: 0px; border-bottom: 0px; height: 0px;"
219+
</th>
220+
<th
221+
class="rc-table-measure-cell"
222222
>
223223
<div
224-
style="height: 0px; overflow: hidden; font-weight: bold;"
224+
class="rc-table-measure-cell-content"
225225
>
226226
Gender
227227
</div>
228-
</td>
228+
</th>
229229
</tr>
230230
<tr
231231
class="rc-table-row rc-table-row-level-0"
@@ -373,44 +373,44 @@ LoadedCheerio {
373373
<tr
374374
aria-hidden="true"
375375
class="rc-table-measure-row"
376-
style="height: 0px;"
376+
tabindex="-1"
377377
>
378-
<td
379-
style="padding-top: 0px; padding-bottom: 0px; border-top: 0px; border-bottom: 0px; height: 0px;"
378+
<th
379+
class="rc-table-measure-cell"
380380
>
381381
<div
382-
style="height: 0px; overflow: hidden; font-weight: bold;"
382+
class="rc-table-measure-cell-content"
383383
>
384384
 
385385
</div>
386-
</td>
387-
<td
388-
style="padding-top: 0px; padding-bottom: 0px; border-top: 0px; border-bottom: 0px; height: 0px;"
386+
</th>
387+
<th
388+
class="rc-table-measure-cell"
389389
>
390390
<div
391-
style="height: 0px; overflow: hidden; font-weight: bold;"
391+
class="rc-table-measure-cell-content"
392392
>
393393
Name
394394
</div>
395-
</td>
396-
<td
397-
style="padding-top: 0px; padding-bottom: 0px; border-top: 0px; border-bottom: 0px; height: 0px;"
395+
</th>
396+
<th
397+
class="rc-table-measure-cell"
398398
>
399399
<div
400-
style="height: 0px; overflow: hidden; font-weight: bold;"
400+
class="rc-table-measure-cell-content"
401401
>
402402
Age
403403
</div>
404-
</td>
405-
<td
406-
style="padding-top: 0px; padding-bottom: 0px; border-top: 0px; border-bottom: 0px; height: 0px;"
404+
</th>
405+
<th
406+
class="rc-table-measure-cell"
407407
>
408408
<div
409-
style="height: 0px; overflow: hidden; font-weight: bold;"
409+
class="rc-table-measure-cell-content"
410410
>
411411
Gender
412412
</div>
413-
</td>
413+
</th>
414414
</tr>
415415
<tr
416416
class="rc-table-row rc-table-row-level-0"
@@ -676,44 +676,44 @@ LoadedCheerio {
676676
<tr
677677
aria-hidden="true"
678678
class="rc-table-measure-row"
679-
style="height: 0px;"
679+
tabindex="-1"
680680
>
681-
<td
682-
style="padding-top: 0px; padding-bottom: 0px; border-top: 0px; border-bottom: 0px; height: 0px;"
681+
<th
682+
class="rc-table-measure-cell"
683683
>
684684
<div
685-
style="height: 0px; overflow: hidden; font-weight: bold;"
685+
class="rc-table-measure-cell-content"
686686
>
687687
 
688688
</div>
689-
</td>
690-
<td
691-
style="padding-top: 0px; padding-bottom: 0px; border-top: 0px; border-bottom: 0px; height: 0px;"
689+
</th>
690+
<th
691+
class="rc-table-measure-cell"
692692
>
693693
<div
694-
style="height: 0px; overflow: hidden; font-weight: bold;"
694+
class="rc-table-measure-cell-content"
695695
>
696696
Name
697697
</div>
698-
</td>
699-
<td
700-
style="padding-top: 0px; padding-bottom: 0px; border-top: 0px; border-bottom: 0px; height: 0px;"
698+
</th>
699+
<th
700+
class="rc-table-measure-cell"
701701
>
702702
<div
703-
style="height: 0px; overflow: hidden; font-weight: bold;"
703+
class="rc-table-measure-cell-content"
704704
>
705705
Age
706706
</div>
707-
</td>
708-
<td
709-
style="padding-top: 0px; padding-bottom: 0px; border-top: 0px; border-bottom: 0px; height: 0px;"
707+
</th>
708+
<th
709+
class="rc-table-measure-cell"
710710
>
711711
<div
712-
style="height: 0px; overflow: hidden; font-weight: bold;"
712+
class="rc-table-measure-cell-content"
713713
>
714714
Gender
715715
</div>
716-
</td>
716+
</th>
717717
</tr>
718718
<tr
719719
class="rc-table-row rc-table-row-level-0"
@@ -1230,44 +1230,44 @@ LoadedCheerio {
12301230
<tr
12311231
aria-hidden="true"
12321232
class="rc-table-measure-row"
1233-
style="height: 0px;"
1233+
tabindex="-1"
12341234
>
1235-
<td
1236-
style="padding-top: 0px; padding-bottom: 0px; border-top: 0px; border-bottom: 0px; height: 0px;"
1235+
<th
1236+
class="rc-table-measure-cell"
12371237
>
12381238
<div
1239-
style="height: 0px; overflow: hidden; font-weight: bold;"
1239+
class="rc-table-measure-cell-content"
12401240
>
12411241
 
12421242
</div>
1243-
</td>
1244-
<td
1245-
style="padding-top: 0px; padding-bottom: 0px; border-top: 0px; border-bottom: 0px; height: 0px;"
1243+
</th>
1244+
<th
1245+
class="rc-table-measure-cell"
12461246
>
12471247
<div
1248-
style="height: 0px; overflow: hidden; font-weight: bold;"
1248+
class="rc-table-measure-cell-content"
12491249
>
12501250
Name
12511251
</div>
1252-
</td>
1253-
<td
1254-
style="padding-top: 0px; padding-bottom: 0px; border-top: 0px; border-bottom: 0px; height: 0px;"
1252+
</th>
1253+
<th
1254+
class="rc-table-measure-cell"
12551255
>
12561256
<div
1257-
style="height: 0px; overflow: hidden; font-weight: bold;"
1257+
class="rc-table-measure-cell-content"
12581258
>
12591259
Age
12601260
</div>
1261-
</td>
1262-
<td
1263-
style="padding-top: 0px; padding-bottom: 0px; border-top: 0px; border-bottom: 0px; height: 0px;"
1261+
</th>
1262+
<th
1263+
class="rc-table-measure-cell"
12641264
>
12651265
<div
1266-
style="height: 0px; overflow: hidden; font-weight: bold;"
1266+
class="rc-table-measure-cell-content"
12671267
>
12681268
Gender
12691269
</div>
1270-
</td>
1270+
</th>
12711271
</tr>
12721272
<tr
12731273
class="rc-table-row rc-table-row-level-0"
@@ -1418,44 +1418,44 @@ LoadedCheerio {
14181418
<tr
14191419
aria-hidden="true"
14201420
class="rc-table-measure-row"
1421-
style="height: 0px;"
1421+
tabindex="-1"
14221422
>
1423-
<td
1424-
style="padding-top: 0px; padding-bottom: 0px; border-top: 0px; border-bottom: 0px; height: 0px;"
1423+
<th
1424+
class="rc-table-measure-cell"
14251425
>
14261426
<div
1427-
style="height: 0px; overflow: hidden; font-weight: bold;"
1427+
class="rc-table-measure-cell-content"
14281428
>
14291429
Name
14301430
</div>
1431-
</td>
1432-
<td
1433-
style="padding-top: 0px; padding-bottom: 0px; border-top: 0px; border-bottom: 0px; height: 0px;"
1431+
</th>
1432+
<th
1433+
class="rc-table-measure-cell"
14341434
>
14351435
<div
1436-
style="height: 0px; overflow: hidden; font-weight: bold;"
1436+
class="rc-table-measure-cell-content"
14371437
>
14381438
Age
14391439
</div>
1440-
</td>
1441-
<td
1442-
style="padding-top: 0px; padding-bottom: 0px; border-top: 0px; border-bottom: 0px; height: 0px;"
1440+
</th>
1441+
<th
1442+
class="rc-table-measure-cell"
14431443
>
14441444
<div
1445-
style="height: 0px; overflow: hidden; font-weight: bold;"
1445+
class="rc-table-measure-cell-content"
14461446
>
14471447
Gender
14481448
</div>
1449-
</td>
1450-
<td
1451-
style="padding-top: 0px; padding-bottom: 0px; border-top: 0px; border-bottom: 0px; height: 0px;"
1449+
</th>
1450+
<th
1451+
class="rc-table-measure-cell"
14521452
>
14531453
<div
1454-
style="height: 0px; overflow: hidden; font-weight: bold;"
1454+
class="rc-table-measure-cell-content"
14551455
>
14561456
 
14571457
</div>
1458-
</td>
1458+
</th>
14591459
</tr>
14601460
<tr
14611461
class="rc-table-row rc-table-row-level-0"

0 commit comments

Comments
 (0)