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

package/src/index.less

@@ -70,6 +70,32 @@
   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%;

package/src/index.tsx

@@ -39,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,
@@ -50,8 +82,8 @@ function CellEditTable(props: CellEditTableProps, ref: any) {
     onChange,
     reactGridProps = {},
     onEditSubmit,
-    headerRowHeight = 44,
-    rowHeight = 44,
+    headerRowHeight = 48,
+    rowHeight = 48,
     reactGridStyle,
     className,
     Slots,
@@ -61,6 +93,7 @@ function CellEditTable(props: CellEditTableProps, ref: any) {
     loading,
     isExpand = false,
     getList,
+    setList,
     onRow,
   } = props;
 
@@ -139,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]);
 
@@ -297,15 +332,24 @@ function CellEditTable(props: CellEditTableProps, ref: any) {
   const handleCellsChanged = async (changes) => {
     if (!Array.isArray(changes) || changes.length === 0) return;
     const batchQuery: any = [];
+    // 父级数据源快照：保存失败时撤销乐观更新，避免 getList 前再次回显旧值
+    const previousDataSource = dataSource;
 
     // 基于 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,
+      });
       nextRows[changeRowIdx].cells[changeColumnIdx] = { ...change.newCell };
       currentCell.current = { ...change.newCell };
       batchQuery.push(handleArrayToObj(nextRows[changeRowIdx]));
@@ -336,14 +380,33 @@ function CellEditTable(props: CellEditTableProps, ref: any) {
     armScrollProtect(SCROLL_RESET_GUARD_MS);
     setRows(nextRows);
     restoreScroll();
+    // 同步父级 list：保存成功后的 getList 在接口返回前仍使用旧 list，
+    // 只更新内部 rows 会被随后触发的数据源重建覆盖成编辑前的值。
+    if (setList && batchQuery.length > 0) {
+      setList((prevList: any[]) => mergeRowsByKey(prevList, batchQuery, rowKey));
+    }
 
     // 提交成功后由 list-render 的 onEditSubmit 全量刷新列表；
     // 滚动位置由 rows 重建 effect 中的快照/恢复机制保持；
-    // 失败时仍 getList() 回滚恢复
+    // 失败时先把修改过的单元格回滚为编辑前的值，再 getList() 兜底刷新
     if (onEditSubmit) {
       try {
         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();
       }
     }
@@ -480,6 +543,9 @@ 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);
   };