@hzab/edit-table 0.1.12 → 0.1.13-alpha.1

package/src/common/useDynamicHeight.ts

@@ -0,0 +1,239 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export const useDynamicHeight = (props) => {
+  const { wrapRef, rowHeight, setRows } = props
+  /** 高度上报按帧合并缓冲，一帧内多次上报只触发一次 state 更新 */
+  const pendingHeightsRef = useRef<any>({});
+  const flushHeightsRafRef = useRef<any>();
+  /** 用户滚动位置记忆：持续跟踪，供编辑/重建后恢复 */
+  const scrollMemoryRef = useRef({ top: 0, left: 0 });
+  /** 滚动重置保护窗口截止时间戳：窗口内"回到顶部/最左"的程序化重置被纠正回记忆位置 */
+  const scrollProtectUntilRef = useRef(0);
+  /** rows 的镜像 ref：updater 执行时机不确定，编辑等纯计算需读取即时值 */
+  const rowsRef = useRef<any>([]);
+  /** 附件等动态行高：rowId -> { [columnId]: height }，同行多附件列时取最大值 */
+  const [rowHeights, setRowHeights] = useState<any>({});
+  /** 编辑提交时开启的长保护窗（ms），覆盖 onEditSubmit → getList 全量刷新 → rows 重建的完整链路 */
+  const SCROLL_RESET_GUARD_MS = 3000;
+
+  const armScrollProtect = useCallback((duration = 500) => {
+    const el = wrapRef.current;
+    if (!el) return;
+    scrollMemoryRef.current = { top: el.scrollTop, left: el.scrollLeft };
+    // 只延长不缩短：编辑链路开的 3000ms 长窗不能被 rows 重建 effect 的 500ms 短窗覆盖
+    scrollProtectUntilRef.current = Math.max(
+      scrollProtectUntilRef.current || 0,
+      Date.now() + duration,
+    );
+  }, []);
+
+  const restoreScroll = useCallback(() => {
+    const el = wrapRef.current;
+    if (!el) return;
+    const { top, left } = scrollMemoryRef.current;
+    // 双层 rAF：等 ReactGrid componentDidUpdate 的聚焦滚动写入先执行，再恢复用户位置
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        if (el.scrollTop !== top) el.scrollTop = top;
+        if (el.scrollLeft !== left) el.scrollLeft = left;
+      });
+    });
+  }, []);
+  /**
+   * reactgrid 每次 pointerdown（点击单元格）都会对隐藏的键盘捕获 input（.rg-hidden-element）
+   * 调用 focus()；该元素 position:fixed，静态位置落在滚动内容末尾（视口下边缘之外），
+   * 浏览器原生 scroll-into-view 会把表格滚动容器往下带一点（数据多到出现滚动条时可见）。
+   * 此处统一改为 preventScroll，焦点行为不变，仅禁止滚动。
+   */
+  useEffect(() => {
+    const root = wrapRef.current;
+    if (!root) return;
+    const patchHiddenFocus = () => {
+      root.querySelectorAll(".rg-hidden-element").forEach((el: any) => {
+        if (el.__focusScrollPatched) return;
+        el.__focusScrollPatched = true;
+        const rawFocus = el.focus.bind(el);
+        el.focus = (options?: FocusOptions) => rawFocus({ preventScroll: true, ...(options || {}) });
+      });
+    };
+    patchHiddenFocus();
+    const mo = new MutationObserver(patchHiddenFocus);
+    mo.observe(root, { childList: true, subtree: true });
+    return () => mo.disconnect();
+  }, []);
+
+  /**
+   * 滚动守卫：点击单元格时 reactgrid 会在 componentDidUpdate 里程序化写 scrollTop
+   * 做"聚焦行跟随"（scrollIntoView）。动态行高在编辑态切换时被反复重新测量、行高收敛
+   * 过程中每次状态更新都会触发一次 1~2px 的修正性滚动（focus-scroll-into-view 的效果）。
+   * 用户滚轮/触摸滚动是原生行为、不经过 JS scrollTop 赋值，因此这里拦截元素上的
+   * scrollTop/scrollTo/scrollBy 写入只影响程序化滚动：忽略 ≤3px 的微量修正，
+   * 大步长滚动（方向键导航等）不受影响。
+   */
+  useEffect(() => {
+    const el: any = wrapRef.current;
+    if (!el || el.__scrollGuard) return;
+    el.__scrollGuard = true;
+    const desc = Object.getOwnPropertyDescriptor(Element.prototype, "scrollTop") as PropertyDescriptor;
+    const MAX_CORRECTION = 3;
+
+    Object.defineProperty(el, "scrollTop", {
+      configurable: true,
+      get() {
+        return desc.get!.call(el);
+      },
+      set(v: any) {
+        const next = Number(v) || 0;
+        const cur = desc.get!.call(el);
+        const delta = next - cur;
+        if (delta !== 0 && Math.abs(delta) <= MAX_CORRECTION) {
+          return;
+        }
+        if (next === 0 && cur > 50) {
+          console.warn("[CellEditTable] 检测到程序化滚动回顶部: ", cur, "->", next, new Error().stack);
+        }
+        desc.set!.call(el, next);
+      },
+    });
+
+    const rawScrollTo = el.scrollTo.bind(el);
+    el.scrollTo = (x: any, y?: any) => {
+      if (typeof x === "object" && x !== null) {
+        if (x.top != null) {
+          const cur = desc.get!.call(el);
+          const delta = Number(x.top) - cur;
+          if (delta !== 0 && Math.abs(delta) <= MAX_CORRECTION) {
+            return;
+          }
+        }
+        return rawScrollTo(x);
+      }
+      if (typeof x === "number" && typeof y === "number") {
+        const cur = desc.get!.call(el);
+        const delta = y - cur;
+        if (delta !== 0 && Math.abs(delta) <= MAX_CORRECTION) {
+          return;
+        }
+      }
+      return rawScrollTo(x, y);
+    };
+
+    const rawScrollBy = el.scrollBy.bind(el);
+    el.scrollBy = (x: any, y?: any) => {
+      if (typeof x === "object" && x !== null) {
+        if (x.top != null && Math.abs(Number(x.top)) <= MAX_CORRECTION) {
+          return;
+        }
+        return rawScrollBy(x);
+      }
+      if (typeof x === "number" && typeof y === "number" && Math.abs(y) <= MAX_CORRECTION) {
+        return;
+      }
+      return rawScrollBy(x, y);
+    };
+  }, []);
+  /**
+     * 滚动位置记忆与重置纠正：持续跟踪用户滚动位置；
+     * 保护窗口内若出现"回到顶部/最左"式跳变（scrollTop 归 0 且记忆位置较深），
+     * 视为 ReactGrid/浏览器的程序化重置，立即纠正回记忆位置。
+     * 只拦截归零式重置，不影响窗口内的正常滚动与键盘导航滚动。
+     */
+  useEffect(() => {
+    const el: any = wrapRef.current;
+    if (!el) return;
+    const onScroll = () => {
+      if (
+        Date.now() < scrollProtectUntilRef.current &&
+        ((el.scrollTop === 0 && scrollMemoryRef.current.top > 50) ||
+          (el.scrollLeft === 0 && scrollMemoryRef.current.left > 50))
+      ) {
+        el.scrollTop = scrollMemoryRef.current.top;
+        el.scrollLeft = scrollMemoryRef.current.left;
+        return;
+      }
+      scrollMemoryRef.current = { top: el.scrollTop, left: el.scrollLeft };
+    };
+    el.addEventListener("scroll", onScroll, true);
+    return () => el.removeEventListener("scroll", onScroll, true);
+  }, []);
+  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 };
+      });
+      const result = changed ? next : prev;
+      rowsRef.current = result;
+      return result;
+    });
+  }, [rowHeights, rowHeight]);
+
+  return {
+    handleRowHeightChange,
+    armScrollProtect,
+    restoreScroll,
+    SCROLL_RESET_GUARD_MS,
+    rowsRef,
+    rowHeights
+  }
+}

package/src/index.less

@@ -35,6 +35,9 @@
 
   .rg-cell {
     padding: 0px !important;
+    /** hidden 兜底，clip 不建立滚动容器：单元格内部 focus 时浏览器不会再把它内部滚动 */
+    overflow: hidden;
+    overflow: clip;
   }
 
   .rg-cell-focus {
@@ -48,18 +51,33 @@
 
 .base-hoc {
   width: 100%;
-  height: 100%;
+  /** 高度由内容决定（换行内容撑开），但不小于单元格高度；
+      border-box 保证 scrollHeight 恒等于"内容+padding"，行高测量不会自我反馈 */
+  height: auto;
+  min-height: 100%;
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1;
-  padding: 4px;
+}
+.rg-cell > .base-hoc {
+  /** 单元格内边距（回显态与编辑态一致；行高测量会按此 padding 补偿，见 WidthWrapHoc） */
+  padding: 8px;
 }
 
 .base-hoc-edit {
   background-color: #fff;
 }
 
+/** 组件回显/编辑内容容器：纯内容高度，不设 min-height（保证高度测量双向真实） */
+.base-hoc-inner {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .validator-icon {
   position: relative;
   background: #fff;

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";
@@ -9,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";
 
@@ -66,9 +75,26 @@ function CellEditTable(props: CellEditTableProps, ref: any) {
   const [headerCustomTemplate, setHeaderCustomTemplate] = useState<any>([]);
   const [highlights, setHighlights] = useState([]);
   const highlightsRowIdRef = useRef();
-
   const gridRef = useRef<any>();
+  const wrapRef = useRef<HTMLDivElement>(null);
   const currentCell = useRef<any>();
+  /** 展开态镜像 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 {
@@ -84,10 +110,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]);
 
   /** 判断当前选中行是否还存在 */
@@ -182,9 +226,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];
@@ -227,72 +276,73 @@ function CellEditTable(props: CellEditTableProps, ref: any) {
             rowKey,
             expandKeys,
             Slots,
+            onRowHeightChange: handleRowHeightChange,
             ...newCell,
           };
         }),
       };
     });
     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 = [];
 
-    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();
-          }
+    // 基于 rowsRef 当前值在 updater 外纯计算（updater 执行时机不确定且可能执行两次，
+    // 不能在 updater 内收集提交数据），一次性生成新数组后同步 rowsRef 再 setRows
+    const prevRows = rowsRef.current || [];
+    const nextRows = prevRows.map((row) => ({ ...row, cells: [...row.cells] }));
+    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;
+      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(prevRows[changeRowIdx]);
-      });
-      return [...prevRows];
+      }
+      onChange && onChange(nextRows[changeRowIdx]);
     });
+    rowsRef.current = nextRows;
+    // 编辑提交后 list-render 的 onEditSubmit 会全量 getList 刷新并触发 rows 重建，
+    // 期间任意时刻都可能发生程序化回顶部：开启长保护窗，覆盖 提交→refetch→重建 全链路
+    armScrollProtect(SCROLL_RESET_GUARD_MS);
+    setRows(nextRows);
+    restoreScroll();
 
-    if (isBatchSubmit) {
+    // 提交成功后由 list-render 的 onEditSubmit 全量刷新列表；
+    // 滚动位置由 rows 重建 effect 中的快照/恢复机制保持；
+    // 失败时仍 getList() 回滚恢复
+    if (onEditSubmit) {
       try {
-        onEditSubmit && (await onEditSubmit(batchQuery));
+        await onEditSubmit(batchQuery);
       } catch (err) {
         getList && getList();
       }
@@ -435,10 +485,15 @@ function CellEditTable(props: CellEditTableProps, ref: any) {
 
   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}