fix: table height sync

Author: helloqian12138

packages/drip-table-generator/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drip-table-generator",
-  "version": "3.2.2-alpha.6",
+  "version": "3.2.2-alpha.7",
   "description": "A visualization tool for generating schema of drip-table.",
   "main": "dist/index.min.js",
   "module": "lib/index.js",

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

@@ -35,7 +35,7 @@ export interface LeftFixedColumnsProps<
 }
 
 export interface LeftFixedColumnsHandler {
-  getRowHeight: () => number;
+  getRowHeight: () => number[];
   getSubTableHeight: () => number[];
 }
 
@@ -71,6 +71,7 @@ function LeftFixedColumnsInner<
   React.useImperativeHandle(ref, () => ({
     getRowHeight: () => {
       let maxCellHeight = 0;
+      const rowHeight = rowRef.current?.offsetHeight ?? 0;
       for (const element of (rowRef.current?.children || []) as HTMLDivElement[]) {
         if (element.children[0]) {
           const trueCellHeight = (element.children[0] as HTMLDivElement).offsetHeight + 28;
@@ -79,7 +80,7 @@ function LeftFixedColumnsInner<
           }
         }
       }
-      return maxCellHeight;
+      return [rowHeight, maxCellHeight];
     },
     getSubTableHeight: () => {
       const rows = (containerRef.current?.children || []) as HTMLDivElement[];

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

@@ -32,7 +32,7 @@ export interface RightFixedColumnsProps<
 }
 
 export interface RightFixedColumnsHandler {
-  getRowHeight: () => number;
+  getRowHeight: () => number[];
 }
 
 function RightFixedColumnsInner<
@@ -46,6 +46,7 @@ function RightFixedColumnsInner<
   React.useImperativeHandle(ref, () => ({
     getRowHeight: () => {
       let maxCellHeight = 0;
+      const rowHeight = rowRef.current?.offsetHeight ?? 0;
       for (const element of (rowRef.current?.children || []) as HTMLDivElement[]) {
         if (element.children[0]) {
           const trueCellHeight = (element.children[0] as HTMLDivElement).offsetHeight + 28;
@@ -54,7 +55,7 @@ function RightFixedColumnsInner<
           }
         }
       }
-      return maxCellHeight;
+      return [rowHeight, maxCellHeight];
     },
   }));
   return (

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

@@ -32,7 +32,7 @@ export interface ScrollableColumnsProps<
 }
 
 export interface ScrollableColumnsHandler {
-  getRowHeight: () => number;
+  getRowHeight: () => number[];
   getRowHeaderHeights: () => number[];
 }
 
@@ -48,6 +48,7 @@ function ScrollableColumnsInner<
   React.useImperativeHandle(ref, () => ({
     getRowHeight: () => {
       let maxCellHeight = 0;
+      const rowHeight = rowRef.current?.offsetHeight ?? 0;
       for (const element of (rowRef.current?.children || []) as HTMLDivElement[]) {
         if (element.children[0]) {
           const trueCellHeight = (element.children[0] as HTMLDivElement).offsetHeight + 28;
@@ -56,7 +57,7 @@ function ScrollableColumnsInner<
           }
         }
       }
-      return maxCellHeight;
+      return [rowHeight, maxCellHeight];
     },
     getRowHeaderHeights: () => {
       const rows = (containerRef.current?.children || []) as HTMLDivElement[];

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

@@ -45,6 +45,7 @@ function EditableTable<
   const leftColumnsRef = React.useRef<LeftFixedColumnsHandler>(null);
   const scrollColumnsRef = React.useRef<ScrollableColumnsHandler>(null);
   const rightColumnsRef = React.useRef<RightFixedColumnsHandler>(null);
+  const lastRowHeights = React.useRef<number[]>([]);
 
   const tableHeight = React.useMemo(() => {
     if (props.tableConfig.configs.scroll?.y && typeof props.tableConfig.configs.scroll?.y !== 'boolean') {
@@ -93,20 +94,22 @@ function EditableTable<
   }
 
   React.useEffect(() => {
-    const leftHeight = leftColumnsRef.current?.getRowHeight() ?? 0;
-    const scrollHeight = scrollColumnsRef.current?.getRowHeight() ?? 0;
-    const rightHeight = rightColumnsRef.current?.getRowHeight() ?? 0;
-    if (leftFixedColumns.length > 0 && sortableColumns.length > 0 && rightFixedColumns.length > 0
-      && (
-        Math.abs(scrollHeight - leftHeight) > 1 && Math.abs(scrollHeight - rightHeight) > 1
-      )) {
-      setRowHeight(Math.max(leftHeight, scrollHeight, rightHeight));
-    } else if (sortableColumns.length > 0 && rightFixedColumns.length <= 0 && Math.abs(scrollHeight - leftHeight) > 1) {
-      setRowHeight(Math.max(leftHeight, scrollHeight));
-    } else if (sortableColumns.length > 0 && leftFixedColumns.length <= 0 && Math.abs(scrollHeight - rightHeight) > 1) {
-      setRowHeight(Math.max(rightHeight, scrollHeight));
+    const [leftRowHeight, leftCellHeight] = leftColumnsRef.current?.getRowHeight() ?? [0, 0];
+    const [scrollRowHeight, scrollCellHeight] = scrollColumnsRef.current?.getRowHeight() ?? [0, 0];
+    const [rightRowHeight, rightCellHeight] = rightColumnsRef.current?.getRowHeight() ?? [0, 0];
+    if (lastRowHeights.current.length <= 0) {
+      if (leftRowHeight !== scrollRowHeight || rightRowHeight !== scrollCellHeight || leftRowHeight !== rightRowHeight) {
+        setRowHeight(Math.max(leftCellHeight, scrollCellHeight, rightCellHeight) + 1);
+        lastRowHeights.current = [leftCellHeight, scrollCellHeight, rightCellHeight];
+      }
+    } else {
+      const [lastLeftHeight, lastScrollHeight, lastRightHeight] = lastRowHeights.current ?? [];
+      if (lastLeftHeight !== leftCellHeight || lastScrollHeight !== scrollCellHeight || lastRightHeight !== rightCellHeight) {
+        setRowHeight(Math.max(leftCellHeight, scrollCellHeight, rightCellHeight) + 1);
+        lastRowHeights.current = [leftCellHeight, scrollCellHeight, rightCellHeight];
+      }
     }
-  }, [props.dataSource, props.schema, props.tableConfig, leftFixedColumns, rightFixedColumns, sortableColumns]);
+  }, [props.dataSource, props.schema, props.tableConfig]);
 
   React.useEffect(() => {
     setTimeout(() => {