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

package/src/index.tsx

@@ -17,6 +17,7 @@ import { ExpandListTemplate } from "./Template/ExpandListTemplate";
 import { convertColumnsToRows, flattenColumns, isReactElement } from "./common/utils";
 import { childAntdComponent } from "./common/childAntdComponent";
 import { GetBaseTemplate } from "./Template/GetBaseTemplate";
+import { useDynamicHeight } from "./common/useDynamicHeight";
 import "./index.less";
 import "@silevis/reactgrid/styles.css";
 
@@ -38,9 +39,41 @@ interface CellEditTableProps {
   loading?: boolean;
   isExpand?: boolean;
   getList?: () => void;
+  setList?: (value: any) => void;
   onRow?: (v: any, ri: number, ci: number) => void;
 }
 
+/** 将编辑后的行合并回列表数据源，供 getList 返回前保持单元格新值 */
+function mergeRowsByKey(list: any[], updates: any[], key: string): any[] {
+  if (!Array.isArray(list) || !Array.isArray(updates) || updates.length === 0) return list;
+
+  const updateMap = new Map<string, any>();
+  updates.forEach((item) => {
+    if (item?.[key] != null) updateMap.set(String(item[key]), item);
+    if (item?.id != null) updateMap.set(String(item.id), item);
+  });
+
+  const walk = (items: any[]): any[] => {
+    if (!Array.isArray(items)) return items;
+    return items.map((item) => {
+      const update = updateMap.get(String(item?.[key] ?? item?.id));
+      const originalChildren = item?.children;
+      const children = originalChildren ? walk(originalChildren) : originalChildren;
+      if (!update) {
+        return children === originalChildren ? item : { ...item, children };
+      }
+      const { children: _children, ...nextItem } = update;
+      return {
+        ...item,
+        ...nextItem,
+        ...(originalChildren !== undefined ? { children } : {}),
+      };
+    });
+  };
+
+  return walk(list);
+}
+
 function CellEditTable(props: CellEditTableProps, ref: any) {
   const {
     columns,
@@ -49,8 +82,8 @@ function CellEditTable(props: CellEditTableProps, ref: any) {
     onChange,
     reactGridProps = {},
     onEditSubmit,
-    headerRowHeight = 44,
-    rowHeight = 44,
+    headerRowHeight = 48,
+    rowHeight = 48,
     reactGridStyle,
     className,
     Slots,
@@ -60,6 +93,7 @@ function CellEditTable(props: CellEditTableProps, ref: any) {
     loading,
     isExpand = false,
     getList,
+    setList,
     onRow,
   } = props;
 
@@ -74,82 +108,26 @@ 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 wrapRef = useRef<HTMLDivElement>(null);
   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]);
+  /** 展开态镜像 ref：dataSource 同步 effect 读取最新 expandKeys 用（不加进 deps，
+   *  避免展开/收起时又触发全量同步——展开/收起由 ExpandListTemplate 直接维护 newDataSource） */
+  const expandKeysRef = useRef<any>([]);
+  expandKeysRef.current = expandKeys;
+  /** 动态测量单元格高度及滚动逻辑 */
+  const {
+    handleRowHeightChange,
+    armScrollProtect,
+    restoreScroll,
+    SCROLL_RESET_GUARD_MS,
+    rowsRef,
+    rowHeights,
+  } = useDynamicHeight({
+    wrapRef,
+    rowHeight,
+    setRows,
+  });
 
   useImperativeHandle(ref, () => {
     return {
@@ -165,10 +143,28 @@ function CellEditTable(props: CellEditTableProps, ref: any) {
       }
     });
   };
+
   /** 洗数据 */
   useEffect(() => {
     handleDataSource(dataSource);
-    setNewDataSource(dataSource);
+    // 同步时必须保留展开态：把已展开父行的 children 重新插入到对应位置。
+    // 直接 setNewDataSource(dataSource) 会把列表重置为仅父行，子行瞬间从矩阵消失，
+    // ReactGrid 内部 validateLocation(focusedLocation) 在 rowId 查不到时会被
+    // idx-clamp 永久替换成原索引处的其他行，导致聚焦框/整行高亮错位。
+    const flattenWithExpansion = (arr: any) => {
+      const result: any = [];
+      const loop = (list: any) => {
+        for (const item of list || []) {
+          result.push(item);
+          if (item?.children?.length && expandKeysRef.current?.includes(item?.[rowKey])) {
+            loop(item.children);
+          }
+        }
+      };
+      loop(arr);
+      return result;
+    };
+    setNewDataSource(flattenWithExpansion(dataSource));
   }, [dataSource]);
 
   /** 判断当前选中行是否还存在 */
@@ -176,6 +172,8 @@ function CellEditTable(props: CellEditTableProps, ref: any) {
     const validRowIds = rows.map((r) => r.rowId);
     if (!validRowIds?.includes(highlightsRowIdRef.current)) {
       setHighlights([]);
+      // 同步清理高亮行全局标记，避免 .rg-cell 残留高亮 class
+      (window as any).gridHighlightRowId = null;
     }
   }, [rows]);
 
@@ -320,68 +318,95 @@ function CellEditTable(props: CellEditTableProps, ref: any) {
       };
     });
     const mergerList = [...headerList, ...tempDataSource];
+    // 整表重建会触发 ReactGrid 内部程序化写 scrollTop（滚动回顶部）：
+    // 重建前记录用户滚动位置并开启保护窗口，重建完成后双层 rAF 恢复；
+    // 窗口内若再发生归零式重置，由 scroll 监听纠正回记忆位置
+    rowsRef.current = mergerList;
+    armScrollProtect();
     setRows(mergerList);
+    restoreScroll();
     // 注：此处读取的 rowHeights 为本次渲染时的快照；行高的后续增量变化由下方补丁 effect 处理，避免全量重建
   }, [newDataSource, tableColumns, headerList]);
-  useEffect(() => {
-    if (loading) {
-      const item = rows?.find((el) => el?.rowId == currentCell.current?.rowId);
-      let newItem = item?.cells?.find((it) => it?.columnId == currentCell.current?.columnId);
-      newItem = { ...currentCell.current };
-      initRowsRef.current = rows;
-    }
-  }, [loading, rows]);
+
   // 单元格编辑回调
   const handleCellsChanged = async (changes) => {
-    const batchQuery: any = [];
     if (!Array.isArray(changes) || changes.length === 0) return;
-    /** 批量提交 */
-    let isBatchSubmit = false;
-    if (changes?.length > 1) {
-      isBatchSubmit = true;
-    }
+    const batchQuery: any = [];
+    // 父级数据源快照：保存失败时撤销乐观更新，避免 getList 前再次回显旧值
+    const previousDataSource = dataSource;
 
-    setRows((prevRows) => {
-      changes.forEach(async (change) => {
-        const changeRowIdx = prevRows.findIndex((el) => el.rowId == change.rowId);
-        const changeColumnIdx = tableColumns.findIndex((el) => el.columnId == change.columnId);
-        prevRows[changeRowIdx].cells[changeColumnIdx] = { ...change.newCell };
-        currentCell.current = { ...change.newCell };
-        batchQuery.push(handleArrayToObj(prevRows[changeRowIdx]));
-        if (formulaConfig) {
-          for (const key in formulaConfig) {
-            const item = formulaConfig[key];
-            const resultColumnIdx = tableColumns.findIndex((el) => el.columnId == key);
-            const newCell = {
-              ...prevRows[changeRowIdx].cells[resultColumnIdx],
-              text: item?.setCellData && item?.setCellData(prevRows[changeRowIdx]),
-              value: item?.setCellData && item?.setCellData(prevRows[changeRowIdx]),
-              style:
-                item?.setCellStyle &&
-                item?.setCellStyle(
-                  (item?.setCellData && item?.setCellData(prevRows[changeRowIdx])) ||
-                    prevRows[changeRowIdx],
-                ),
-            };
-            prevRows[changeRowIdx].cells[resultColumnIdx] = newCell;
-          }
-        }
-        if (onEditSubmit && !isBatchSubmit) {
-          try {
-            await onEditSubmit(batchQuery);
-          } catch (err) {
-            getList && getList();
-          }
-        }
-        onChange && onChange(prevRows[changeRowIdx]);
+    // 基于 rowsRef 当前值在 updater 外纯计算（updater 执行时机不确定且可能执行两次，
+    // 不能在 updater 内收集提交数据），一次性生成新数组后同步 rowsRef 再 setRows
+    const prevRows = rowsRef.current || [];
+    const nextRows = prevRows.map((row) => ({ ...row, cells: [...row.cells] }));
+    // 编辑前单元格快照，保存失败时用于单元格级回滚
+    const prevCellSnapshot: any[] = [];
+    changes.forEach((change) => {
+      const changeRowIdx = nextRows.findIndex((el) => el.rowId == change.rowId);
+      const changeColumnIdx = tableColumns.findIndex((el) => el.columnId == change.columnId);
+      if (changeRowIdx === -1 || changeColumnIdx === -1) return;
+      prevCellSnapshot.push({
+        rowId: change.rowId,
+        columnId: change.columnId,
+        previousCell: change.previousCell,
       });
-      return [...prevRows];
+      nextRows[changeRowIdx].cells[changeColumnIdx] = { ...change.newCell };
+      currentCell.current = { ...change.newCell };
+      batchQuery.push(handleArrayToObj(nextRows[changeRowIdx]));
+      if (formulaConfig) {
+        for (const key in formulaConfig) {
+          const item = formulaConfig[key];
+          const resultColumnIdx = tableColumns.findIndex((el) => el.columnId == key);
+          if (resultColumnIdx === -1) continue;
+          const newCell = {
+            ...nextRows[changeRowIdx].cells[resultColumnIdx],
+            text: item?.setCellData && item?.setCellData(nextRows[changeRowIdx]),
+            value: item?.setCellData && item?.setCellData(nextRows[changeRowIdx]),
+            style:
+              item?.setCellStyle &&
+              item?.setCellStyle(
+                (item?.setCellData && item?.setCellData(nextRows[changeRowIdx])) ||
+                  nextRows[changeRowIdx],
+              ),
+          };
+          nextRows[changeRowIdx].cells[resultColumnIdx] = newCell;
+        }
+      }
+      onChange && onChange(nextRows[changeRowIdx]);
     });
+    rowsRef.current = nextRows;
+    // 编辑提交后 list-render 的 onEditSubmit 会全量 getList 刷新并触发 rows 重建，
+    // 期间任意时刻都可能发生程序化回顶部：开启长保护窗，覆盖 提交→refetch→重建 全链路
+    armScrollProtect(SCROLL_RESET_GUARD_MS);
+    setRows(nextRows);
+    restoreScroll();
+    // 同步父级 list：保存成功后的 getList 在接口返回前仍使用旧 list，
+    // 只更新内部 rows 会被随后触发的数据源重建覆盖成编辑前的值。
+    if (setList && batchQuery.length > 0) {
+      setList((prevList: any[]) => mergeRowsByKey(prevList, batchQuery, rowKey));
+    }
 
-    if (isBatchSubmit) {
+    // 提交成功后由 list-render 的 onEditSubmit 全量刷新列表；
+    // 滚动位置由 rows 重建 effect 中的快照/恢复机制保持；
+    // 失败时先把修改过的单元格回滚为编辑前的值，再 getList() 兜底刷新
+    if (onEditSubmit) {
       try {
-        onEditSubmit && (await onEditSubmit(batchQuery));
+        await onEditSubmit(batchQuery);
       } catch (err) {
+        const restoredRows = (rowsRef.current || []).map((row) => ({
+          ...row,
+          cells: [...row.cells],
+        }));
+        prevCellSnapshot.forEach(({ rowId, columnId, previousCell }) => {
+          const rIdx = restoredRows.findIndex((el) => el.rowId == rowId);
+          const cIdx = tableColumns.findIndex((el) => el.columnId == columnId);
+          if (rIdx === -1 || cIdx === -1 || !previousCell) return;
+          restoredRows[rIdx].cells[cIdx] = { ...previousCell };
+        });
+        rowsRef.current = restoredRows;
+        setRows(restoredRows);
+        restoreScroll();
+        setList?.(previousDataSource);
         getList && getList();
       }
     }
@@ -518,15 +543,23 @@ function CellEditTable(props: CellEditTableProps, ref: any) {
         borderColor: "transparent",
       }));
     highlightsRowIdRef.current = cell?.rowId;
+    // 记录高亮行 rowId 到全局，供 WidthWrapHoc.getClassName 给 .rg-cell 追加高亮 class
+    (window as any).gridHighlightRowId = cell?.rowId;
+
     setHighlights(list);
   };
 
   return (
     <Spin spinning={loading}>
-      <div className={`grid-container ${className}`} style={reactGridStyle}>
+      <div ref={wrapRef} className={`grid-container ${className}`} style={reactGridStyle}>
         <ReactGrid
           ref={gridRef}
-          rows={loading ? initRowsRef.current : rows}
+          // 直接渲染 rows state：loading 期间它本就持有完整数据（编辑提交时已 setRows）。
+          // 历史上曾用 initRowsRef 快照在 loading 期间代替 rows，但该 ref 由 effect 写入、
+          // 晚于渲染消费——loading 翻 true 的当次渲染读到的是过期快照（行数少于当前），
+          // 矩阵瞬态缩小、展开子行消失，ReactGrid 内部 validateLocation 的 idx-clamp
+          // 会把 focusedLocation 永久替换成错误行（聚焦框/整行高亮错位）。
+          rows={rows}
           key={dataSource?.length == 0 ? 0 : 1}
           columns={tableColumns}
           onCellsChanged={handleCellsChanged}