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

package/src/common/WidthWrapHoc.tsx

@@ -28,6 +28,8 @@ export interface BaseCell extends Cell {
   value: string | number;
   values: OptionType[];
   isDisabled?: boolean;
+  /** 运行时附加（index.tsx 构造单元格时写入），reactgrid 的 Cell/Compatible 类型不含此字段 */
+  rowId?: string | number;
 }
 interface DIProps {
   onCellChanged: (...args: any[]) => void;
@@ -71,6 +73,11 @@ export const WidthWrapHoc = (WrapComponent: any, props = {}) => {
     }
 
     getClassName(cell: Compatible<BaseCell>, isInEditMode: boolean): string {
+      // 整行高亮：选中行由全局变量标记，给 .rg-cell 追加高亮 class，使背景切换为高亮色
+      const highlightRowId = (window as any).gridHighlightRowId;
+      if (highlightRowId && cell.rowId === highlightRowId) {
+        return "custom-highlights-row";
+      }
       return "";
     }
     /** enableEditMode为true 时输入中文会报错 */
@@ -104,12 +111,31 @@ export const WidthWrapHoc = (WrapComponent: any, props = {}) => {
 
       /**
        * 通用单元格内容高度上报：内容换行/增减时自动撑开所在行（表头行、角标跳过）。
-       * 测量对象是"内容子元素"而非容器自身 —— 容器带 min-height:100%（撑起双击热区），
-       * 其 scrollHeight 存在"下限=当前行高"的假象，内容变矮时测不出真实高度；
-       * 内容子元素无此限制，双向（撑开/回落）测量都真实，行高一次到位、无渐变动画。
+       * 测量对象是"内容子树的真实占用高度"而非容器 scrollHeight —— 容器带 min-height:100%
+       * （撑起双击热区）或子容器残留 inline 高度时（如上传组件编辑态的 antd 动画容器），
+       * scrollHeight 会取"容器自身高度"与"内容高度"的较大者，把空白也测进去；
+       * 改为累加可见子元素的 margin-box 占据区间（首个子元素 margin 上缘 → 末个 margin 下缘），
+       * 只反映真实内容，双向（撑开/回落）测量都真实，行高一次到位、无渐变动画。
        */
+      const measureContentHeight = (container: Element): number => {
+        const els = Array.from(container.children) as HTMLElement[];
+        if (els.length === 0) return (container as HTMLElement).clientHeight;
+        let top = Infinity;
+        let bottom = -Infinity;
+        for (const c of els) {
+          const r = c.getBoundingClientRect();
+          const cs = getComputedStyle(c);
+          const mt = parseFloat(cs.marginTop) || 0;
+          const mb = parseFloat(cs.marginBottom) || 0;
+          top = Math.min(top, r.top - mt);
+          bottom = Math.max(bottom, r.bottom + mb);
+        }
+        return Math.max(0, Math.ceil(bottom - top));
+      };
+
       useEffect(() => {
         const el = wrapRef.current;
+
         const onRowHeightChange = cell?.onRowHeightChange;
         if (!el || !onRowHeightChange) return;
         if (cell?.rowId == null) return;
@@ -122,13 +148,16 @@ export const WidthWrapHoc = (WrapComponent: any, props = {}) => {
           paddingCacheRef.current =
             (parseFloat(cs.paddingTop) || 0) + (parseFloat(cs.paddingBottom) || 0);
         }
-        // 测子元素时需补回容器垂直 padding；退化测容器自身时 scrollHeight 已含 padding
+        // 测子元素时需补回容器垂直 padding；退化测容器自身时 clientHeight 已含 padding
         const extra = child ? paddingCacheRef.current : 0;
-        const report = () =>
-          onRowHeightChange(cell?.rowId, target.scrollHeight + extra, cell?.columnId);
-        report();
-        const ro = new ResizeObserver(report);
+        const ro = new ResizeObserver(() => {
+          // 内容子元素可能新增（如上传列表新增条目），补充观察，确保其尺寸变化也能触发重测
+          Array.from(target.children).forEach((c) => ro.observe(c));
+          const h = measureContentHeight(target) + extra;
+          onRowHeightChange(cell?.rowId, h, cell?.columnId);
+        });
         ro.observe(target);
+        Array.from(target.children).forEach((c) => ro.observe(c));
         return () => ro.disconnect();
       }, [cell?.rowId, cell?.columnId, cell?.onRowHeightChange, edit, comValue]);
       useEffect(() => {

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 {
@@ -57,13 +60,42 @@
   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;
 }
 
+/** 可编辑单元格（非 nonEditable）默认底色，用于区分不可编辑单元格；
+    设置在 .rg-cell 层级，内层 .base-hoc 透明透出，避免嵌套 .base-hoc（如 cellRender 返回的“未填写”）盖住底色 */
+.rg-cell:not(.rg-cell-nonEditable) {
+  background-color: #f9f9ff;
+}
+.rg-cell.rg-rowSelection-cell{
+  background-color: #ffffff;
+}
+
+
+
+
+/** 整行点击高亮：.rg-cell 背景统一切换为高亮色 #e9f8ff，覆盖包括 #f9f9ff 在内的所有其他背景。
+    .custom-highlights-row 由 JS（WidthWrapHoc.getClassName）追加到选中行的 .rg-cell 上 */
+.rg-cell.custom-highlights-row {
+  background-color: #e9f8ff;
+}
+
+/** 高亮行内编辑态单元格（.base-hoc-edit 默认 #fff）也覆盖为高亮色，保证整行背景一致 */
+.rg-cell.custom-highlights-row .base-hoc-edit {
+  background-color: #ffffff;
+}
+
+
+
+
 /** 组件回显/编辑内容容器：纯内容高度，不设 min-height（保证高度测量双向真实） */
 .base-hoc-inner {
   width: 100%;