Skip to content

Commit 0b7a659

Browse files
zombieJzombieJ
committed
chore: Move scrollbar size measure into effect
1 parent 1297462 commit 0b7a659

File tree

5 files changed

+62
-44
lines changed

5 files changed

+62
-44
lines changed

‎src/Body/ExpandedRow.tsx‎

Lines changed: 41 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import * as React from 'react';
2-
import getScrollBarSize from 'rc-util/lib/getScrollBarSize';
32
import { CustomizeComponent } from '../interface';
43
import Cell from '../Cell';
5-
6-
const scrollBarSize = getScrollBarSize();
4+
import TableContext from '../context/TableContext';
75

86
export interface ExpandedRowProps<RecordType> {
97
prefixCls: string;
@@ -30,36 +28,51 @@ function ExpandedRow<RecordType>({
3028
componentWidth,
3129
colSpan,
3230
}: ExpandedRowProps<RecordType>) {
33-
let contentNode = children;
31+
const { scrollbarSize } = React.useContext(TableContext);
32+
33+
// Cache render node
34+
return React.useMemo(() => {
35+
let contentNode = children;
3436

35-
if (fixColumn) {
36-
contentNode = (
37-
<div
37+
if (fixColumn) {
38+
contentNode = (
39+
<div
40+
style={{
41+
width: componentWidth - (fixHeader ? scrollbarSize : 0),
42+
position: 'sticky',
43+
left: 0,
44+
overflow: 'hidden',
45+
}}
46+
className={`${prefixCls}-expanded-row-fixed`}
47+
>
48+
{contentNode}
49+
</div>
50+
);
51+
}
52+
53+
return (
54+
<Component
55+
className={className}
3856
style={{
39-
width: componentWidth - (fixHeader ? scrollBarSize : 0),
40-
position: 'sticky',
41-
left: 0,
42-
overflow: 'hidden',
57+
display: expanded ? null : 'none',
4358
}}
44-
className={`${prefixCls}-expanded-row-fixed`}
4559
>
46-
{contentNode}
47-
</div>
60+
<Cell component={cellComponent} prefixCls={prefixCls} colSpan={colSpan}>
61+
{contentNode}
62+
</Cell>
63+
</Component>
4864
);
49-
}
50-
51-
return (
52-
<Component
53-
className={className}
54-
style={{
55-
display: expanded ? null : 'none',
56-
}}
57-
>
58-
<Cell component={cellComponent} prefixCls={prefixCls} colSpan={colSpan}>
59-
{contentNode}
60-
</Cell>
61-
</Component>
62-
);
65+
}, [
66+
children,
67+
Component,
68+
fixHeader,
69+
fixColumn,
70+
className,
71+
expanded,
72+
componentWidth,
73+
colSpan,
74+
scrollbarSize,
75+
]);
6376
}
6477

6578
export default ExpandedRow;

‎src/Header/FixedHeader.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
import * as React from 'react';
2-
import getScrollBarSize from 'rc-util/lib/getScrollBarSize';
32
import Header, { HeaderProps } from './Header';
43
import ColGroup from '../ColGroup';
54
import { ColumnsType, ColumnType } from '../interface';
65
import TableContext from '../context/TableContext';
76

8-
const scrollbarSize = getScrollBarSize();
9-
107
export interface FixedHeaderProps<RecordType> extends HeaderProps<RecordType> {
118
colWidths: number[];
129
columCount: number;
@@ -20,7 +17,7 @@ function FixedHeader<RecordType>({
2017
stickyOffsets,
2118
...props
2219
}: FixedHeaderProps<RecordType>) {
23-
const { prefixCls } = React.useContext(TableContext);
20+
const { prefixCls, scrollbarSize } = React.useContext(TableContext);
2421

2522
// Add scrollbar column
2623
const lastColumn = flattenColumns[flattenColumns.length - 1];
@@ -33,12 +30,12 @@ function FixedHeader<RecordType>({
3330

3431
const columnsWithScrollbar = React.useMemo<ColumnsType<RecordType>>(
3532
() => (scrollbarSize ? [...columns, ScrollBarColumn] : columns),
36-
[columns],
33+
[scrollbarSize, columns],
3734
);
3835

3936
const flattenColumnsWithScrollbar = React.useMemo<ColumnType<RecordType>[]>(
4037
() => (scrollbarSize ? [...flattenColumns, ScrollBarColumn] : flattenColumns),
41-
[flattenColumns],
38+
[scrollbarSize, flattenColumns],
4239
);
4340

4441
// Calculate the sticky offsets
@@ -49,7 +46,7 @@ function FixedHeader<RecordType>({
4946
...stickyOffsets,
5047
right: [...right.map(width => width + scrollbarSize), 0],
5148
};
52-
}, [stickyOffsets]);
49+
}, [scrollbarSize, stickyOffsets]);
5350

5451
return (
5552
<table style={{ tableLayout: 'fixed' }}>

‎src/Table.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,6 @@ import { findAllChildrenKeys, renderExpandIcon } from './utils/expandUtil';
6767

6868
// Used for conditions cache
6969
const EMPTY_DATA = [];
70-
const scrollbarSize = getScrollBarSize();
7170

7271
export interface TableProps<RecordType extends DefaultRecordType>
7372
extends LegacyExpandableProps<RecordType> {
@@ -143,6 +142,12 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
143142
const mergedData = data || EMPTY_DATA;
144143
const hasData = !!mergedData.length;
145144

145+
// ===================== Effects ======================
146+
const [scrollbarSize, setScrollbarSize] = React.useState(0);
147+
React.useEffect(() => {
148+
setScrollbarSize(getScrollBarSize());
149+
});
150+
146151
// ===================== Warning ======================
147152
if (process.env.NODE_ENV !== 'production') {
148153
[
@@ -507,6 +512,7 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
507512
value={{
508513
prefixCls,
509514
getComponent,
515+
scrollbarSize,
510516
}}
511517
>
512518
<BodyContext.Provider

‎src/context/TableContext.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import * as React from 'react';
2-
import { DefaultRecordType, GetComponent } from '../interface';
2+
import { GetComponent } from '../interface';
33

4-
export interface TableContextProps<RecordType = DefaultRecordType> {
4+
export interface TableContextProps {
55
// Table context
66
prefixCls: string;
77
getComponent: GetComponent;
8+
9+
scrollbarSize: number;
810
}
911

1012
const TableContext = React.createContext<TableContextProps>(null);

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ exports[`Table.Expand childrenColumnName 1`] = `
3636
class="rc-table-cell"
3737
>
3838
<span
39-
class="rc-table-indent indent-level-0"
39+
class="rc-table-row-indent indent-level-0"
4040
/>
4141
<span
4242
class="rc-table-row-expand-icon rc-table-row-expanded"
@@ -56,7 +56,7 @@ exports[`Table.Expand childrenColumnName 1`] = `
5656
class="rc-table-cell"
5757
>
5858
<span
59-
class="rc-table-indent indent-level-1"
59+
class="rc-table-row-indent indent-level-1"
6060
/>
6161
<span
6262
class="rc-table-row-expand-icon rc-table-row-spaced"
@@ -76,7 +76,7 @@ exports[`Table.Expand childrenColumnName 1`] = `
7676
class="rc-table-cell"
7777
>
7878
<span
79-
class="rc-table-indent indent-level-0"
79+
class="rc-table-row-indent indent-level-0"
8080
/>
8181
<span
8282
class="rc-table-row-expand-icon rc-table-row-spaced"
@@ -274,7 +274,7 @@ exports[`Table.Expand renders tree row correctly 1`] = `
274274
class="rc-table-cell"
275275
>
276276
<span
277-
class="rc-table-indent indent-level-0"
277+
class="rc-table-row-indent indent-level-0"
278278
/>
279279
<span
280280
class="rc-table-row-expand-icon rc-table-row-expanded"
@@ -294,7 +294,7 @@ exports[`Table.Expand renders tree row correctly 1`] = `
294294
class="rc-table-cell"
295295
>
296296
<span
297-
class="rc-table-indent indent-level-1"
297+
class="rc-table-row-indent indent-level-1"
298298
/>
299299
<span
300300
class="rc-table-row-expand-icon rc-table-row-spaced"
@@ -314,7 +314,7 @@ exports[`Table.Expand renders tree row correctly 1`] = `
314314
class="rc-table-cell"
315315
>
316316
<span
317-
class="rc-table-indent indent-level-0"
317+
class="rc-table-row-indent indent-level-0"
318318
/>
319319
<span
320320
class="rc-table-row-expand-icon rc-table-row-spaced"

0 commit comments

Comments
 (0)