@hzab/edit-table 0.1.11 → 0.1.13-alpha.0

package/src/index.tsx

@@ -1,4 +1,12 @@
-import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { Checkbox, Empty, Spin } from "antd";
 import { ReactGrid } from "@silevis/reactgrid";
 import TextTemplate from "./Template/TextCellTemplate";
@@ -66,9 +74,82 @@ function CellEditTable(props: CellEditTableProps, ref: any) {
   const [headerCustomTemplate, setHeaderCustomTemplate] = useState<any>([]);
   const [highlights, setHighlights] = useState([]);
   const highlightsRowIdRef = useRef();
-
+  /** 附件等动态行高：rowId -> { [columnId]: height }，同行多附件列时取最大值 */
+  const [rowHeights, setRowHeights] = useState<any>({});
+  /** 高度上报按帧合并缓冲，一帧内多次上报只触发一次 state 更新 */
+  const pendingHeightsRef = useRef<any>({});
+  const flushHeightsRafRef = useRef<any>();
   const gridRef = useRef<any>();
   const currentCell = useRef<any>();
+  const flushPendingHeights = useCallback(() => {
+    flushHeightsRafRef.current = undefined;
+    const pending = pendingHeightsRef.current;
+    if (Object.keys(pending).length === 0) return;
+    pendingHeightsRef.current = {};
+    setRowHeights((prev: any) => {
+      let next = prev;
+      for (const rowId in pending) {
+        const cols = { ...(next[rowId] || {}) };
+        let rowChanged = false;
+        for (const colId in pending[rowId]) {
+          const h = pending[rowId][colId];
+          if (cols[colId] !== h) {
+            cols[colId] = h;
+            rowChanged = true;
+          }
+        }
+        if (rowChanged) {
+          if (next === prev) next = { ...prev };
+          next[rowId] = cols;
+        }
+      }
+      return next === prev ? prev : next;
+    });
+  }, []);
+
+  /** 供单元格（如 Upload 附件）回传内容高度，撑开/恢复所在行高 */
+  const handleRowHeightChange = useCallback(
+    (rowId: any, height?: number, columnId?: string) => {
+      const h = Math.max(Number(height) || 0, rowHeight);
+      const rId = String(rowId);
+      const cId = columnId || "_";
+      const row = (pendingHeightsRef.current[rId] = pendingHeightsRef.current[rId] || {});
+      if (row[cId] === h) return;
+      row[cId] = h;
+      if (!flushHeightsRafRef.current) {
+        flushHeightsRafRef.current = requestAnimationFrame(flushPendingHeights);
+      }
+    },
+    [rowHeight, flushPendingHeights],
+  );
+
+  /** 组件卸载时取消未执行的合帧刷新 */
+  useEffect(() => {
+    return () => {
+      if (flushHeightsRafRef.current) cancelAnimationFrame(flushHeightsRafRef.current);
+    };
+  }, []);
+
+  /** 行高变化时仅补丁式更新受影响行的 height，避免整表重建 */
+  useEffect(() => {
+    setRows((prev: any) => {
+      if (!Array.isArray(prev) || prev.length === 0) return prev;
+      let changed = false;
+      const next = prev.map((row) => {
+        // 表头行高度固定，不参与动态行高
+        if (typeof row?.rowId === "string" && row.rowId.indexOf("header-") === 0) return row;
+        const heightMap = rowHeights[row.rowId];
+        const h =
+          heightMap && Object.keys(heightMap).length > 0
+            ? Math.max(rowHeight, ...Object.values(heightMap).map(Number))
+            : rowHeight;
+        if (row.height === h) return row;
+        changed = true;
+        return { ...row, height: h };
+      });
+      return changed ? next : prev;
+    });
+  }, [rowHeights, rowHeight]);
 
   useImperativeHandle(ref, () => {
     return {
@@ -182,9 +263,14 @@ function CellEditTable(props: CellEditTableProps, ref: any) {
     const columnsIds = tableColumns?.map((el) => el?.columnId);
 
     const tempDataSource = newDataSource?.map((item, index) => {
+      const heightMap = rowHeights[item[rowKey]];
+      const dynamicRowHeight =
+        heightMap && Object.keys(heightMap).length > 0
+          ? Math.max(rowHeight, ...Object.values(heightMap).map(Number))
+          : rowHeight;
       return {
         rowId: item[rowKey],
-        height: rowHeight,
+        height: dynamicRowHeight,
         cells: columnsIds?.map((el, ind) => {
           let newCell = {};
           const columnsItem = tableColumns[ind];
@@ -211,7 +297,7 @@ function CellEditTable(props: CellEditTableProps, ref: any) {
             record: item,
             rowId: item[rowKey] || columnsItem?.type,
             type: type,
-            nonEditable: columnsItem?.nonEditable,
+            nonEditable: columnsItem?.pattern == "readPretty" ? true : columnsItem?.nonEditable,
             text: String(cellItem || ""),
             value: cellItem,
             selectedValue: cellItem || "",
@@ -227,6 +313,7 @@ function CellEditTable(props: CellEditTableProps, ref: any) {
             rowKey,
             expandKeys,
             Slots,
+            onRowHeightChange: handleRowHeightChange,
             ...newCell,
           };
         }),
@@ -234,6 +321,7 @@ function CellEditTable(props: CellEditTableProps, ref: any) {
     });
     const mergerList = [...headerList, ...tempDataSource];
     setRows(mergerList);
+    // 注：此处读取的 rowHeights 为本次渲染时的快照；行高的后续增量变化由下方补丁 effect 处理，避免全量重建
   }, [newDataSource, tableColumns, headerList]);
   useEffect(() => {
     if (loading) {