Skip to content

Commit 60a984b

Browse files
helloqian12138helloqian12138
committed
fix: table height sync
1 parent 2b5e1af commit 60a984b

File tree

5 files changed

+101
-69
lines changed

5 files changed

+101
-69
lines changed

‎packages/drip-table-generator/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "drip-table-generator",
3-
"version": "3.2.2-alpha.8",
3+
"version": "3.2.2-alpha.9",
44
"description": "A visualization tool for generating schema of drip-table.",
55
"main": "dist/index.min.js",
66
"module": "lib/index.js",

‎packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/left-columns/index.tsx‎

Lines changed: 33 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ import { DripTableGeneratorProps } from '@/typing';
1919

2020
import EditableTable from '../..';
2121
import ColumnHeader from '../column-header';
22+
import { RightFixedColumnsHandler } from '../right-columns';
23+
import { ScrollableColumnsHandler } from '../scroll-columns';
2224
import TableSection from '../table-section';
2325

2426
export interface LeftFixedColumnsProps<
@@ -28,14 +30,14 @@ export interface LeftFixedColumnsProps<
2830
tableConfig: DTGTableConfig;
2931
previewDataSource: ({ id: number; record: RecordType })[];
3032
containerWidth: number;
31-
rowHeight: number | undefined;
33+
siblings: [React.RefObject<ScrollableColumnsHandler>, React.RefObject<RightFixedColumnsHandler>];
3234
columnList: { id: number; column: DTGTableConfig['columns'][number] }[];
3335
ref?: React.RefObject<LeftFixedColumnsHandler>;
3436
rowHeaderHeights?: number[];
3537
}
3638

3739
export interface LeftFixedColumnsHandler {
38-
getRowHeight: () => number[];
40+
getRowHeight: () => number;
3941
getSubTableHeight: () => number[];
4042
}
4143

@@ -48,8 +50,10 @@ function LeftFixedColumnsInner<
4850
) {
4951
const { tableConfigs } = React.useContext(TableConfigsContext);
5052
const currentTableIndex = tableConfigs.findIndex(c => c.tableId === props.tableConfig.tableId);
53+
const [rowHeight, setRowHeight] = React.useState(void 0 as number | undefined);
5154
const rowRef = React.createRef<HTMLDivElement>();
5255
const containerRef = React.createRef<HTMLDivElement>();
56+
5357
const leftMargins = React.useMemo(() => {
5458
let margin = 0;
5559
if (props.tableConfig.hasSubTable) {
@@ -68,20 +72,34 @@ function LeftFixedColumnsInner<
6872
}
6973
return margin;
7074
}, [props.tableConfig.hasSubTable, props.tableConfig.configs, props.columnList]);
71-
React.useImperativeHandle(ref, () => ({
72-
getRowHeight: () => {
73-
let maxCellHeight = 0;
74-
const rowHeight = rowRef.current?.offsetHeight ?? 0;
75-
for (const element of (rowRef.current?.children || []) as HTMLDivElement[]) {
76-
if (element.children[0]) {
77-
const trueCellHeight = (element.children[0] as HTMLDivElement).offsetHeight + 28;
78-
if (trueCellHeight > maxCellHeight) {
79-
maxCellHeight = trueCellHeight;
80-
}
75+
76+
const getCurrentRowHeight = () => {
77+
let maxCellHeight = 0;
78+
const currentRowHeight = rowRef.current?.offsetHeight ?? 0;
79+
for (const element of (rowRef.current?.children || []) as HTMLDivElement[]) {
80+
if (element.children[0]) {
81+
const trueCellHeight = (element.children[0] as HTMLDivElement).offsetHeight + 28;
82+
if (trueCellHeight > maxCellHeight) {
83+
maxCellHeight = trueCellHeight;
8184
}
8285
}
83-
return [rowHeight, maxCellHeight];
84-
},
86+
}
87+
return currentRowHeight - maxCellHeight === 1 ? currentRowHeight : maxCellHeight;
88+
};
89+
90+
React.useEffect(() => {
91+
const currentRowHeight = getCurrentRowHeight();
92+
const [scrollRef, rightRef] = props.siblings;
93+
const scrollColumnsHeight = scrollRef.current?.getRowHeight() || 0;
94+
const rightFixedColumnsHeight = rightRef.current?.getRowHeight() || 0;
95+
const maxSiblingsHeight = Math.max(scrollColumnsHeight, rightFixedColumnsHeight);
96+
if (maxSiblingsHeight > currentRowHeight) {
97+
setRowHeight(maxSiblingsHeight);
98+
}
99+
}, [props.columnList, props.tableConfig, props.dataSource]);
100+
101+
React.useImperativeHandle(ref, () => ({
102+
getRowHeight: getCurrentRowHeight,
85103
getSubTableHeight: () => {
86104
const rows = (containerRef.current?.children || []) as HTMLDivElement[];
87105
const start = props.tableConfig.configs.showHeader ? 1 : 0;
@@ -174,7 +192,7 @@ function LeftFixedColumnsInner<
174192
stripe: props.tableConfig.configs.stripe && rowIndex % 2 === 1,
175193
})}
176194
ref={rowRef}
177-
style={{ height: props.rowHeight }}
195+
style={{ height: rowHeight }}
178196
>
179197
{props.tableConfig.hasSubTable && (
180198
<div

‎packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/right-columns/index.tsx‎

Lines changed: 32 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ import { DTGTableConfig } from '@/context/table-configs';
1515
import { DripTableGeneratorProps } from '@/typing';
1616

1717
import ColumnHeader from '../column-header';
18+
import { LeftFixedColumnsHandler } from '../left-columns';
19+
import { ScrollableColumnsHandler } from '../scroll-columns';
1820
import TableSection from '../table-section';
1921

2022
export interface RightFixedColumnsProps<
@@ -24,15 +26,15 @@ export interface RightFixedColumnsProps<
2426
tableConfig: DTGTableConfig;
2527
previewDataSource: ({ id: number; record: RecordType })[];
2628
containerWidth: number;
27-
rowHeight: number | undefined;
29+
siblings: [React.RefObject<LeftFixedColumnsHandler>, React.RefObject<ScrollableColumnsHandler>];
2830
columnList: { id: number; column: DTGTableConfig['columns'][number] }[];
2931
ref?: React.RefObject<RightFixedColumnsHandler>;
3032
subTableHeights?: number[];
3133
rowHeaderHeights?: number[];
3234
}
3335

3436
export interface RightFixedColumnsHandler {
35-
getRowHeight: () => number[];
37+
getRowHeight: () => number;
3638
}
3739

3840
function RightFixedColumnsInner<
@@ -43,20 +45,35 @@ function RightFixedColumnsInner<
4345
ref: React.ForwardedRef<RightFixedColumnsHandler>,
4446
) {
4547
const rowRef = React.createRef<HTMLDivElement>();
46-
React.useImperativeHandle(ref, () => ({
47-
getRowHeight: () => {
48-
let maxCellHeight = 0;
49-
const rowHeight = rowRef.current?.offsetHeight ?? 0;
50-
for (const element of (rowRef.current?.children || []) as HTMLDivElement[]) {
51-
if (element.children[0]) {
52-
const trueCellHeight = (element.children[0] as HTMLDivElement).offsetHeight + 28;
53-
if (trueCellHeight > maxCellHeight) {
54-
maxCellHeight = trueCellHeight;
55-
}
48+
const [rowHeight, setRowHeight] = React.useState(void 0 as number | undefined);
49+
50+
const getCurrentRowHeight = () => {
51+
let maxCellHeight = 0;
52+
const currentRowHeight = rowRef.current?.offsetHeight ?? 0;
53+
for (const element of (rowRef.current?.children || []) as HTMLDivElement[]) {
54+
if (element.children[0]) {
55+
const trueCellHeight = (element.children[0] as HTMLDivElement).offsetHeight + 28;
56+
if (trueCellHeight > maxCellHeight) {
57+
maxCellHeight = trueCellHeight;
5658
}
5759
}
58-
return [rowHeight, maxCellHeight];
59-
},
60+
}
61+
return currentRowHeight - maxCellHeight === 1 ? currentRowHeight : maxCellHeight;
62+
};
63+
64+
React.useEffect(() => {
65+
const currentRowHeight = getCurrentRowHeight();
66+
const [leftRef, scrollRef] = props.siblings;
67+
const leftFixedColumnsHeight = leftRef.current?.getRowHeight() || 0;
68+
const scrollColumnsHeight = scrollRef.current?.getRowHeight() || 0;
69+
const maxSiblingsHeight = Math.max(scrollColumnsHeight, leftFixedColumnsHeight);
70+
if (maxSiblingsHeight > currentRowHeight) {
71+
setRowHeight(maxSiblingsHeight);
72+
}
73+
}, [props.columnList, props.tableConfig, props.dataSource]);
74+
75+
React.useImperativeHandle(ref, () => ({
76+
getRowHeight: getCurrentRowHeight,
6077
}));
6178
return (
6279
<div
@@ -97,7 +114,7 @@ function RightFixedColumnsInner<
97114
stripe: props.tableConfig.configs.stripe && rowIndex % 2 === 1,
98115
})}
99116
ref={rowRef}
100-
style={{ height: props.rowHeight }}
117+
style={{ height: rowHeight }}
101118
>
102119
<TableSection
103120
{...props}

‎packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/scroll-columns/index.tsx‎

Lines changed: 32 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ import { DTGTableConfig } from '@/context/table-configs';
1515
import { DripTableGeneratorProps } from '@/typing';
1616

1717
import ColumnHeader from '../column-header';
18+
import { LeftFixedColumnsHandler } from '../left-columns';
19+
import { RightFixedColumnsHandler } from '../right-columns';
1820
import RowHeader from '../row/row-header';
1921
import TableSection from '../table-section';
2022

@@ -25,14 +27,14 @@ export interface ScrollableColumnsProps<
2527
tableConfig: DTGTableConfig;
2628
previewDataSource: ({ id: number; record: RecordType })[];
2729
containerWidth: number;
28-
rowHeight: number | undefined;
30+
siblings: [React.RefObject<LeftFixedColumnsHandler>, React.RefObject<RightFixedColumnsHandler>];
2931
columnList: { id: number; column: DTGTableConfig['columns'][number] }[];
3032
ref?: React.RefObject<ScrollableColumnsHandler>;
3133
subTableHeights?: number[];
3234
}
3335

3436
export interface ScrollableColumnsHandler {
35-
getRowHeight: () => number[];
37+
getRowHeight: () => number;
3638
getRowHeaderHeights: () => number[];
3739
}
3840

@@ -45,20 +47,35 @@ function ScrollableColumnsInner<
4547
) {
4648
const rowRef = React.createRef<HTMLDivElement>();
4749
const containerRef = React.createRef<HTMLDivElement>();
48-
React.useImperativeHandle(ref, () => ({
49-
getRowHeight: () => {
50-
let maxCellHeight = 0;
51-
const rowHeight = rowRef.current?.offsetHeight ?? 0;
52-
for (const element of (rowRef.current?.children || []) as HTMLDivElement[]) {
53-
if (element.children[0]) {
54-
const trueCellHeight = (element.children[0] as HTMLDivElement).offsetHeight + 28;
55-
if (trueCellHeight > maxCellHeight) {
56-
maxCellHeight = trueCellHeight;
57-
}
50+
const [rowHeight, setRowHeight] = React.useState(void 0 as number | undefined);
51+
52+
const getCurrentRowHeight = () => {
53+
let maxCellHeight = 0;
54+
const currentRowHeight = rowRef.current?.offsetHeight ?? 0;
55+
for (const element of (rowRef.current?.children || []) as HTMLDivElement[]) {
56+
if (element.children[0]) {
57+
const trueCellHeight = (element.children[0] as HTMLDivElement).offsetHeight + 28;
58+
if (trueCellHeight > maxCellHeight) {
59+
maxCellHeight = trueCellHeight;
5860
}
5961
}
60-
return [rowHeight, maxCellHeight];
61-
},
62+
}
63+
return currentRowHeight - maxCellHeight === 1 ? currentRowHeight : maxCellHeight;
64+
};
65+
66+
React.useEffect(() => {
67+
const currentRowHeight = getCurrentRowHeight();
68+
const [leftRef, rightRef] = props.siblings;
69+
const leftFixedColumnsHeight = leftRef.current?.getRowHeight() || 0;
70+
const rightFixedColumnsHeight = rightRef.current?.getRowHeight() || 0;
71+
const maxSiblingsHeight = Math.max(rightFixedColumnsHeight, leftFixedColumnsHeight);
72+
if (maxSiblingsHeight > currentRowHeight) {
73+
setRowHeight(maxSiblingsHeight);
74+
}
75+
}, [props.columnList, props.tableConfig, props.dataSource]);
76+
77+
React.useImperativeHandle(ref, () => ({
78+
getRowHeight: getCurrentRowHeight,
6279
getRowHeaderHeights: () => {
6380
const rows = (containerRef.current?.children || []) as HTMLDivElement[];
6481
const start = props.tableConfig.configs.showHeader ? 1 : 0;
@@ -117,7 +134,7 @@ function ScrollableColumnsInner<
117134
stripe: props.tableConfig.configs.stripe && rowIndex % 2 === 1,
118135
})}
119136
ref={rowRef}
120-
style={{ height: props.rowHeight }}
137+
style={{ height: rowHeight }}
121138
>
122139
<TableSection
123140
{...props}

‎packages/drip-table-generator/src/layouts/table-workstation/editable-table/index.tsx‎

Lines changed: 3 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -38,14 +38,12 @@ function EditableTable<
3838
>(props: EditableTableProps<RecordType, ExtraOptions>) {
3939
const context = React.useContext(TableConfigsContext);
4040
const [previewRecord] = React.useState(void 0 as number | undefined);
41-
const [rowHeight, setRowHeight] = React.useState(void 0 as number | undefined);
4241
const [subTableHeights, setSubTableHeights] = React.useState([] as number[]);
4342
const [rowHeaderHeights, setRowHeaderHeights] = React.useState([] as number[]);
4443
const containerRef = React.useRef<TableContainerHandler>(null);
4544
const leftColumnsRef = React.useRef<LeftFixedColumnsHandler>(null);
4645
const scrollColumnsRef = React.useRef<ScrollableColumnsHandler>(null);
4746
const rightColumnsRef = React.useRef<RightFixedColumnsHandler>(null);
48-
const lastRowHeights = React.useRef<number[]>([]);
4947

5048
const tableHeight = React.useMemo(() => {
5149
if (props.tableConfig.configs.scroll?.y && typeof props.tableConfig.configs.scroll?.y !== 'boolean') {
@@ -93,24 +91,6 @@ function EditableTable<
9391
rightFixedColumns = filterArray(columnList, item => item.column.fixed === 'right' || (item.column.fixed && item.id > sortableColumns[0].id));
9492
}
9593

96-
React.useEffect(() => {
97-
const [leftRowHeight, leftCellHeight] = leftColumnsRef.current?.getRowHeight() ?? [0, 0];
98-
const [scrollRowHeight, scrollCellHeight] = scrollColumnsRef.current?.getRowHeight() ?? [0, 0];
99-
const [rightRowHeight, rightCellHeight] = rightColumnsRef.current?.getRowHeight() ?? [0, 0];
100-
if (lastRowHeights.current.length <= 0) {
101-
if (leftRowHeight !== scrollRowHeight || rightRowHeight !== scrollCellHeight || leftRowHeight !== rightRowHeight) {
102-
setRowHeight(Math.max(leftCellHeight, scrollCellHeight, rightCellHeight) + 1);
103-
lastRowHeights.current = [leftCellHeight, scrollCellHeight, rightCellHeight];
104-
}
105-
} else {
106-
const [lastLeftHeight, lastScrollHeight, lastRightHeight] = lastRowHeights.current ?? [];
107-
if (lastLeftHeight !== leftCellHeight || Math.abs(lastScrollHeight - scrollCellHeight) > 1 || lastRightHeight !== rightCellHeight) {
108-
setRowHeight(Math.max(leftCellHeight, scrollCellHeight, rightCellHeight) + 1);
109-
lastRowHeights.current = [leftCellHeight, scrollCellHeight, rightCellHeight];
110-
}
111-
}
112-
}, [props.dataSource, props.schema, props.tableConfig]);
113-
11494
React.useEffect(() => {
11595
setTimeout(() => {
11696
const leftHeights = leftColumnsRef.current?.getSubTableHeight() ?? [];
@@ -160,8 +140,8 @@ function EditableTable<
160140
columnList={leftFixedColumns}
161141
previewDataSource={previewDataSource as ({ id: number; record: RecordType })[]}
162142
containerWidth={tableWidth}
163-
rowHeight={rowHeight}
164143
rowHeaderHeights={rowHeaderHeights}
144+
siblings={[scrollColumnsRef, rightColumnsRef]}
165145
/>
166146
<ScrollableColumns<RecordType, ExtraOptions>
167147
{...props}
@@ -170,8 +150,8 @@ function EditableTable<
170150
columnList={sortableColumns}
171151
previewDataSource={previewDataSource}
172152
containerWidth={tableWidth}
173-
rowHeight={rowHeight}
174153
subTableHeights={subTableHeights}
154+
siblings={[leftColumnsRef, rightColumnsRef]}
175155
/>
176156
<RightFixedColumns<RecordType, ExtraOptions>
177157
{...props}
@@ -180,9 +160,9 @@ function EditableTable<
180160
columnList={rightFixedColumns}
181161
previewDataSource={previewDataSource}
182162
containerWidth={tableWidth}
183-
rowHeight={rowHeight}
184163
subTableHeights={subTableHeights}
185164
rowHeaderHeights={rowHeaderHeights}
165+
siblings={[leftColumnsRef, scrollColumnsRef]}
186166
/>
187167
</div>
188168
<AddColumnComponent

0 commit comments

Comments
 (0)