Skip to content

Commit b98bb3e

Browse files
linxianxilinxianxi
authored
fix: header blank when using sticky or scroll.y (#1267)
1 parent 8078217 commit b98bb3e

File tree

5 files changed

+48
-30
lines changed

5 files changed

+48
-30
lines changed

‎src/Body/MeasureCell.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import * as React from 'react';
22
import ResizeObserver from '@rc-component/resize-observer';
3+
import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
34

45
export interface MeasureCellProps {
56
columnKey: React.Key;
@@ -9,7 +10,7 @@ export interface MeasureCellProps {
910
export default function MeasureCell({ columnKey, onColumnResize }: MeasureCellProps) {
1011
const cellRef = React.useRef<HTMLTableCellElement>();
1112

12-
React.useEffect(() => {
13+
useLayoutEffect(() => {
1314
if (cellRef.current) {
1415
onColumnResize(columnKey, cellRef.current.offsetWidth);
1516
}

‎src/Body/MeasureRow.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from 'react';
22
import ResizeObserver from '@rc-component/resize-observer';
33
import MeasureCell from './MeasureCell';
4+
import isVisible from '@rc-component/util/lib/Dom/isVisible';
45

56
export interface MeasureCellProps {
67
prefixCls: string;
@@ -9,17 +10,22 @@ export interface MeasureCellProps {
910
}
1011

1112
export default function MeasureRow({ prefixCls, columnsKey, onColumnResize }: MeasureCellProps) {
13+
const ref = React.useRef<HTMLTableRowElement>(null);
14+
1215
return (
1316
<tr
1417
aria-hidden="true"
1518
className={`${prefixCls}-measure-row`}
1619
style={{ height: 0, fontSize: 0 }}
20+
ref={ref}
1721
>
1822
<ResizeObserver.Collection
1923
onBatchResize={infoList => {
20-
infoList.forEach(({ data: columnKey, size }) => {
21-
onColumnResize(columnKey, size.offsetWidth);
22-
});
24+
if (isVisible(ref.current)) {
25+
infoList.forEach(({ data: columnKey, size }) => {
26+
onColumnResize(columnKey, size.offsetWidth);
27+
});
28+
}
2329
}}
2430
>
2531
{columnsKey.map(columnKey => (

‎src/Table.tsx‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@
2727
import type { CompareProps } from '@rc-component/context/lib/Immutable';
2828
import classNames from 'classnames';
2929
import ResizeObserver from '@rc-component/resize-observer';
30-
import isVisible from '@rc-component/util/lib/Dom/isVisible';
3130
import { getTargetScrollBarSize } from '@rc-component/util/lib/getScrollBarSize';
3231
import useEvent from '@rc-component/util/lib/hooks/useEvent';
3332
import pickAttrs from '@rc-component/util/lib/pickAttrs';
@@ -47,7 +46,7 @@ import Header from './Header/Header';
4746
import useColumns from './hooks/useColumns';
4847
import useExpand from './hooks/useExpand';
4948
import useFixedInfo from './hooks/useFixedInfo';
50-
import { useLayoutState, useTimeoutLock } from './hooks/useFrame';
49+
import { useTimeoutLock } from './hooks/useFrame';
5150
import useHover from './hooks/useHover';
5251
import useSticky from './hooks/useSticky';
5352
import useStickyOffsets from './hooks/useStickyOffsets';
@@ -76,6 +75,7 @@ import ColumnGroup from './sugar/ColumnGroup';
7675
import { getColumnsKey, validateValue, validNumberValue } from './utils/valueUtil';
7776
import { getDOM } from '@rc-component/util/lib/Dom/findDOMNode';
7877
import isEqual from '@rc-component/util/lib/isEqual';
78+
import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
7979

8080
export const DEFAULT_PREFIX = 'rc-table';
8181

@@ -349,7 +349,7 @@ function Table<RecordType extends DefaultRecordType>(
349349
const scrollSummaryRef = React.useRef<HTMLDivElement>();
350350
const [shadowStart, setShadowStart] = React.useState(false);
351351
const [shadowEnd, setShadowEnd] = React.useState(false);
352-
const [colsWidths, updateColsWidths] = useLayoutState(new Map<React.Key, number>());
352+
const [colsWidths, updateColsWidths] = React.useState(new Map<React.Key, number>());
353353

354354
// Convert map to number width
355355
const colsKeys = getColumnsKey(flattenColumns);
@@ -403,16 +403,14 @@ function Table<RecordType extends DefaultRecordType>(
403403
}
404404

405405
const onColumnResize = React.useCallback((columnKey: React.Key, width: number) => {
406-
if (isVisible(fullTableRef.current)) {
407-
updateColsWidths(widths => {
408-
if (widths.get(columnKey) !== width) {
409-
const newWidths = new Map(widths);
410-
newWidths.set(columnKey, width);
411-
return newWidths;
412-
}
413-
return widths;
414-
});
415-
}
406+
updateColsWidths(widths => {
407+
if (widths.get(columnKey) !== width) {
408+
const newWidths = new Map(widths);
409+
newWidths.set(columnKey, width);
410+
return newWidths;
411+
}
412+
return widths;
413+
});
416414
}, []);
417415

418416
const [setScrollTarget, getScrollTarget] = useTimeoutLock(null);
@@ -526,7 +524,7 @@ function Table<RecordType extends DefaultRecordType>(
526524
// ===================== Effects ======================
527525
const [scrollbarSize, setScrollbarSize] = React.useState(0);
528526

529-
React.useEffect(() => {
527+
useLayoutEffect(() => {
530528
if (!tailor || !useInternalHooks) {
531529
if (scrollBodyRef.current instanceof Element) {
532530
setScrollbarSize(getTargetScrollBarSize(scrollBodyRef.current).width);

‎tests/__snapshots__/FixedColumn.spec.tsx.snap‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ exports[`Table.FixedColumn > fixed column renders correctly RTL 1`] = `
4848
<th
4949
class="rc-table-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow rc-table-cell-ellipsis"
5050
scope="col"
51-
style="inset-inline-start: 0; --z-offset: 23; --z-offset-reverse: 13;"
51+
style="inset-inline-start: 1000px; --z-offset: 23; --z-offset-reverse: 13;"
5252
title="title2"
5353
>
5454
<span
@@ -249,7 +249,7 @@ exports[`Table.FixedColumn > fixed column renders correctly RTL 1`] = `
249249
</td>
250250
<td
251251
class="rc-table-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow rc-table-cell-ellipsis"
252-
style="inset-inline-start: 0; --z-offset: 23; --z-offset-reverse: 13;"
252+
style="inset-inline-start: 1000px; --z-offset: 23; --z-offset-reverse: 13;"
253253
title="1111"
254254
>
255255
<span
@@ -322,7 +322,7 @@ exports[`Table.FixedColumn > fixed column renders correctly RTL 1`] = `
322322
</td>
323323
<td
324324
class="rc-table-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow rc-table-cell-ellipsis"
325-
style="inset-inline-start: 0; --z-offset: 23; --z-offset-reverse: 13;"
325+
style="inset-inline-start: 1000px; --z-offset: 23; --z-offset-reverse: 13;"
326326
title="1111"
327327
>
328328
<span
@@ -395,7 +395,7 @@ exports[`Table.FixedColumn > fixed column renders correctly RTL 1`] = `
395395
</td>
396396
<td
397397
class="rc-table-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow rc-table-cell-ellipsis"
398-
style="inset-inline-start: 0; --z-offset: 23; --z-offset-reverse: 13;"
398+
style="inset-inline-start: 1000px; --z-offset: 23; --z-offset-reverse: 13;"
399399
title="1111"
400400
>
401401
<span
@@ -452,7 +452,7 @@ exports[`Table.FixedColumn > fixed column renders correctly RTL 1`] = `
452452
</td>
453453
<td
454454
class="rc-table-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow rc-table-cell-ellipsis"
455-
style="inset-inline-start: 0; --z-offset: 23; --z-offset-reverse: 13;"
455+
style="inset-inline-start: 1000px; --z-offset: 23; --z-offset-reverse: 13;"
456456
title="1111"
457457
>
458458
<span
@@ -509,7 +509,7 @@ exports[`Table.FixedColumn > fixed column renders correctly RTL 1`] = `
509509
</td>
510510
<td
511511
class="rc-table-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow rc-table-cell-ellipsis"
512-
style="inset-inline-start: 0; --z-offset: 23; --z-offset-reverse: 13;"
512+
style="inset-inline-start: 1000px; --z-offset: 23; --z-offset-reverse: 13;"
513513
title="1111"
514514
>
515515
<span
@@ -566,7 +566,7 @@ exports[`Table.FixedColumn > fixed column renders correctly RTL 1`] = `
566566
</td>
567567
<td
568568
class="rc-table-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow rc-table-cell-ellipsis"
569-
style="inset-inline-start: 0; --z-offset: 23; --z-offset-reverse: 13;"
569+
style="inset-inline-start: 1000px; --z-offset: 23; --z-offset-reverse: 13;"
570570
title="1111"
571571
>
572572
<span
@@ -623,7 +623,7 @@ exports[`Table.FixedColumn > fixed column renders correctly RTL 1`] = `
623623
</td>
624624
<td
625625
class="rc-table-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow rc-table-cell-ellipsis"
626-
style="inset-inline-start: 0; --z-offset: 23; --z-offset-reverse: 13;"
626+
style="inset-inline-start: 1000px; --z-offset: 23; --z-offset-reverse: 13;"
627627
title="1111"
628628
>
629629
<span
@@ -680,7 +680,7 @@ exports[`Table.FixedColumn > fixed column renders correctly RTL 1`] = `
680680
</td>
681681
<td
682682
class="rc-table-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow rc-table-cell-ellipsis"
683-
style="inset-inline-start: 0; --z-offset: 23; --z-offset-reverse: 13;"
683+
style="inset-inline-start: 1000px; --z-offset: 23; --z-offset-reverse: 13;"
684684
title="1111"
685685
>
686686
<span
@@ -737,7 +737,7 @@ exports[`Table.FixedColumn > fixed column renders correctly RTL 1`] = `
737737
</td>
738738
<td
739739
class="rc-table-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow rc-table-cell-ellipsis"
740-
style="inset-inline-start: 0; --z-offset: 23; --z-offset-reverse: 13;"
740+
style="inset-inline-start: 1000px; --z-offset: 23; --z-offset-reverse: 13;"
741741
title="1111"
742742
>
743743
<span

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

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,9 +86,22 @@ exports[`Table.Basic > custom components > renders fixed column and header corre
8686
style="overflow: hidden;"
8787
>
8888
<table
89-
style="table-layout: fixed; visibility: hidden;"
89+
style="table-layout: fixed;"
9090
>
91-
<colgroup />
91+
<colgroup>
92+
<col
93+
style="width: 0px;"
94+
/>
95+
<col
96+
style="width: 0px;"
97+
/>
98+
<col
99+
style="width: 0px;"
100+
/>
101+
<col
102+
style="width: 15px;"
103+
/>
104+
</colgroup>
92105
<thead
93106
class="rc-table-thead"
94107
name="my-header-wrapper"

0 commit comments

Comments
 (0)