@ant-design/pro-components 3.1.12-0 → 3.1.13-0

package/es/utils/useEditableArray/index.js

@@ -5,7 +5,8 @@ import React, { createRef, forwardRef, useCallback, useContext, useEffect, useIm
 import { useDebounceFn, useRefFunction } from '..';
 import { useIntl } from "../../provider";
 import { ProFormContext } from "../components/ProFormContext";
-import { useDeepCompareEffectDebounce } from "../hooks/useDeepCompareEffect";
+import { conversionMomentValue } from "../conversionMomentValue";
+import { useDeepCompareEffect } from "../hooks/useDeepCompareEffect";
 import { usePrevious } from "../hooks/usePrevious";
 import { merge } from "../merge";
 import useLazyKVMap from "../useLazyKVMap";
@@ -27,12 +28,28 @@ export const recordKeyToString = rowKey => {
   return rowKey;
 };
 
+/**
+ * 判断两个 RecordKey 是否语义相等（容忍 number/string 与数组顺序差异）。
+ *
+ * 设计动机：直接 `===` 对 RecordKey 不安全：
+ *  - `1` !== `'1'`（number/string 混用场景常见）
+ *  - 数组永远是引用相等，例如 `['a'] !== ['a']`
+ *
+ * 实现：先用 recordKeyToString 拍平为标量，再做 `String(...)` 字符串比较，
+ * 双侧都为 null/undefined 时返回 true 视作"未指定 key"匹配。
+ */
+export const isSameRecordKey = (a, b) => {
+  if (a == null && b == null) return true;
+  if (a == null || b == null) return false;
+  return String(recordKeyToString(a)) === String(recordKeyToString(b));
+};
+
 /**
  * Normalize antd Form `NamePath` segments.
  *
  * - Preserve `0` (number) and other falsy-but-valid segments
  * - Flatten nested arrays (e.g. `name={['a','b']}`)
- * - Convert number segments to string to align with `spellNamePath` behavior
+ * - Convert number segments to string to align with `buildNamePath` behavior
  */
 const normalizeNamePath = (...segments) => {
   return segments.flat(1).filter(key => key !== undefined && key !== null).map(key => typeof key === 'number' ? key.toString() : key);
@@ -43,6 +60,12 @@ const normalizeNamePath = (...segments) => {
 function flattenRecordsToMap(records, getRowKey, childrenColumnName, parentKey, parentIndex) {
   const kvMap = new Map();
   records.forEach((record, index) => {
+    // 历史实现：用 `parentIndex * 10 + index` 把"全局扁平后的位置"传给 getRowKey 的第二参数，
+    // 用于嵌套树场景下当 rowKey 退化到 index 时仍尽量保持唯一性。
+    // 这种拼法在「兄弟节点超过 9 个」时会哈希冲突（如父1的第10个孩子和父2的第0个孙都是 20），
+    // 但 editor-table 等测试已经依赖了这种 index 的具体值（重建 dataSource 时反查 map），
+    // 直接改成 `index` 会让保存编辑后丢行（`saveEditable should save and quit editing` 测试）。
+    // → 暂保留原实现，待用 path 字符串替代上层 map 的 key 维度后再彻底重构。
     const eachIndex = (parentIndex || 0) * 10 + index;
     const recordKey = getRowKey(record, eachIndex).toString();
     const hasChildren = record && typeof record === 'object' && childrenColumnName in record;
@@ -56,7 +79,7 @@ function flattenRecordsToMap(records, getRowKey, childrenColumnName, parentKey,
       map_row_key: recordKey,
       map_row_parentKey: parentKey
     };
-    delete newRecord.children;
+    delete newRecord[childrenColumnName];
     if (!parentKey) {
       delete newRecord.map_row_parentKey;
     }
@@ -139,10 +162,11 @@ function rebuildTreeStructure(map, childrenColumnName, action) {
       const children = childrenMap.get(parentKeyStr);
       if (children && children.length > 0) {
         // 找到对应的 record 并添加 children
+        // 注意：第一步插入时 record 一定带有 map_row_key（见 `const record = { ...rest, map_row_key }`），
+        // 这里仅依赖 map_row_key 比较即可。原实现 `|| (r as any).id` 既是死代码，又会在用户字段恰好叫
+        // `id` 时产生误命中，已删除。
         const recordIndex = children.findIndex(r => {
-          // 比较时需要确保类型一致
-          const recordKey = r.map_row_key || r.id;
-          return String(recordKey) === String(map_row_key);
+          return String(r.map_row_key) === String(map_row_key);
         });
         if (recordIndex >= 0 && childrenMap.has(map_row_key)) {
           children[recordIndex] = {
@@ -438,6 +462,13 @@ export function defaultActionRender(row, config) {
  * @param props
  */
 export function useEditableArray(props) {
+  const normalizeRowDateValues = useRefFunction(row => {
+    if (row == null || typeof row !== 'object') {
+      return row;
+    }
+    return conversionMomentValue(row, props.dateFormatter ?? 'string', {}, false);
+  });
+
   // Internationalization
   const intl = useIntl();
 
@@ -476,7 +507,11 @@ export function useEditableArray(props) {
   const initDataSourceKeyIndexMap = useMemo(() => buildDataSourceKeyIndexMap(), []);
   const dataSourceKeyIndexMapRef = useRef(initDataSourceKeyIndexMap);
   const newLineRecordRef = useRef(undefined);
-  useDeepCompareEffectDebounce(() => {
+
+  // 注意：必须用同步的 useDeepCompareEffect，不能再用 debounce 版本——后者会让短时间内
+  // 多次更新 dataSource 时 Map 处于过期状态，cancelEditable / saveEditable / validateCanAddRecord
+  // 通过 dataSourceKeyIndexMapRef 反查映射 key 时会拿到旧映射，新增/删除场景下偶发查不到。
+  useDeepCompareEffect(() => {
     dataSourceKeyIndexMapRef.current = buildDataSourceKeyIndexMap();
   }, [props.dataSource]);
 
@@ -488,10 +523,16 @@ export function useEditableArray(props) {
   const setEditableRowKeys = useCallback(updater => {
     setEditableRowKeysInner(prev => {
       const next = typeof updater === 'function' ? updater(prev) : updater;
-      props?.onChange?.(next?.filter(key => key !== undefined) ?? [], next?.map(key => getRecordByKey(key)).filter(k => k !== undefined) ?? []);
+      const cleanKeys = next?.filter(key => key !== undefined) ?? [];
+      const editingRecords = cleanKeys.map(key => getRecordByKey(key)).filter(k => k !== undefined);
+      // single 模式 onChange 第二参数语义是「当前编辑中的那一条 record」，
+      // multiple 模式才是数组 —— 否则用户接到的永远是数组，没法靠 Array.isArray 区分。
+      // 单选无在编辑项时回退到 undefined，与早期行为兼容。
+      const editingPayload = editableType === 'single' ? editingRecords[0] : editingRecords;
+      props?.onChange?.(cleanKeys, editingPayload);
       return next;
     });
-  }, [props.onChange, getRecordByKey]);
+  }, [props.onChange, getRecordByKey, editableType]);
   const editableKeysRef = usePrevious(editableKeys);
 
   /**
@@ -569,102 +610,120 @@ export function useEditableArray(props) {
     setEditableRowKeys(newKeys);
   });
 
+  /**
+   * 拿到当前关联的 form 实例（兼容 props.form / props.formProps.formRef 两种入口）
+   */
+  const resolveFormInstance = useRefFunction(() => {
+    const formRef = props.formProps?.formRef;
+    return formRef?.current || props.form;
+  });
+
+  /**
+   * 若当前 recordKey 命中 newLineRecordCache，则返回该缓存供 onCancel 使用
+   */
+  const matchNewLineConfig = useRefFunction(recordKey => {
+    if (!newLineRecordCache) return undefined;
+    const cacheRecordKey = newLineRecordCache.options?.recordKey;
+    if (cacheRecordKey == null) return undefined;
+    return isSameRecordKey(cacheRecordKey, recordKey) ? newLineRecordCache : undefined;
+  });
+
+  /**
+   * cancelEditable 子步骤 1：调用用户 onCancel（仅用于测试与外部 actionRef.cancel 入口；
+   * UI 上点取消会走 CancelEditableAction）
+   */
+  const tryRunOnCancel = useRefFunction(async recordKey => {
+    if (!props.onCancel) return;
+    const keyForFind = Array.isArray(recordKey) ? recordKey[0] : recordKey;
+    const record = findRecordByKey(keyForFind);
+    const originRow = preEditRowRef.current;
+    const newLineConfig = matchNewLineConfig(recordKey);
+    const fallback = record || newLineConfig?.defaultValue || {};
+    try {
+      await props.onCancel(recordKey, fallback, originRow || fallback, newLineConfig);
+    } catch (error) {
+      // onCancel 抛异常不应阻断后续清理
+      console.error('onCancel error:', error);
+    }
+  });
+
+  /**
+   * cancelEditable 子步骤 2：当本次取消的 recordKey 命中 newLineRecordCache 时清空缓存
+   */
+  const tryClearNewLineCache = useRefFunction(recordKey => {
+    if (!newLineRecordCache) return;
+    if (isSameRecordKey(newLineRecordCache.options.recordKey, recordKey)) {
+      setNewLineRecordCache(undefined);
+    }
+  });
+
+  /**
+   * cancelEditable 子步骤 3：把 form 中该行的字段恢复为编辑前的快照（name 模式）
+   * 或直接清空（非 name 模式），并重置 preEditRowRef
+   */
+  const tryRestoreFormFields = useRefFunction(recordKey => {
+    const originRow = preEditRowRef.current;
+    if (!originRow) return;
+    if (!isSameRecordKey(props.getRowKey(originRow, -1), recordKey)) return;
+    try {
+      const form = resolveFormInstance();
+      if (!form) return;
+      if (props.tableName) {
+        // name 模式：把该行字段值恢复成进入编辑前的快照
+        const namePath = normalizeNamePath(props.tableName, recordKey);
+        form.setFieldsValue(set({}, namePath, originRow));
+      } else {
+        // 非 name 模式：字段以 `{ [recordKey]: { [dataIndex]: value } }` 嵌套存储，
+        // 直接清空整个嵌套对象，避免下次渲染仍展示输入框残留
+        const recordKeyStr = recordKeyToString(recordKey)?.toString();
+        if (!recordKeyStr) return;
+        try {
+          form.resetFields([[recordKeyStr]]);
+          form.setFieldsValue({
+            [recordKeyStr]: undefined
+          });
+        } catch (error) {
+          console.warn('Failed to clear form fields in cancelEditable:', error);
+        }
+      }
+    } catch (error) {
+      console.warn('Failed to reset form fields in cancelEditable:', error);
+    }
+    preEditRowRef.current = null;
+  });
+
   /**
    * 退出编辑状态
+   *
+   * 流程：① 必要时按 mappedKey 重试一次 → ② onCancel → ③ 清 newLineCache
+   *      → ④ 还原 form 字段 → ⑤ 清编辑态
    */
   const cancelEditable = useRefFunction(async (recordKey, needReTry) => {
     const relayKey = recordKeyToString(recordKey);
     const relayKeyStr = relayKey != null ? relayKey.toString() : null;
     const mappedKey = relayKeyStr != null ? dataSourceKeyIndexMapRef.current.get(relayKeyStr) : undefined;
-    const isInEditableSet = editableKeys?.some(key => {
-      if (relayKeyStr == null) return false;
-      return key?.toString() === relayKeyStr || key === relayKey;
-    });
+    const isInEditableSet = (editableKeys ?? []).some(key => isSameRecordKey(key, recordKey));
+
+    // ① 当传入的 key 不在 editableKeys 内但能在 indexKey↔realKey 映射里找到对应项时，
+    // 用映射后的 key 再试一次（避免 name 模式下用户传错维度的 key 导致取消失败）
     if (!isInEditableSet && mappedKey && (needReTry ?? true) && props.tableName) {
-      return await cancelEditable(mappedKey, false);
-    }
-
-    // 如果提供了 onCancel，尝试调用它（用于测试场景）
-    // 注意：在实际使用中，onCancel 应该在 CancelEditableAction 中被调用
-    if (props.onCancel && isInEditableSet) {
-      const keyForFind = Array.isArray(recordKey) ? recordKey[0] : recordKey;
-      const record = findRecordByKey(keyForFind);
-      const originRow = preEditRowRef.current;
-      // 比较 recordKey 时需要考虑类型转换
-      // newLineRecordCache.options.recordKey 是 addEditRecord 时设置的 recordKey
-      // 而 recordKey 是 cancelEditable 的参数，需要确保它们匹配
-      const cacheRecordKey = newLineRecordCache?.options?.recordKey;
-      const cacheKey = cacheRecordKey != null ? recordKeyToString(cacheRecordKey) : null;
-      const cacheKeyStr = cacheKey != null ? cacheKey.toString() : null;
-      // 检查 newLineRecordCache 是否匹配当前的 recordKey
-      const newLineConfig = newLineRecordCache != null && cacheRecordKey != null && (cacheRecordKey === recordKey || cacheKeyStr != null && relayKeyStr != null && cacheKeyStr === relayKeyStr || cacheRecordKey?.toString() === recordKey?.toString() || String(cacheRecordKey) === String(recordKey)) ? newLineRecordCache : undefined;
-
-      // 调用 onCancel，即使找不到记录（新行编辑场景）
-      // 对于新行编辑，record 可能为 null，但 newLineConfig 应该包含 defaultValue
-      try {
-        await props.onCancel(recordKey, record || newLineConfig?.defaultValue || {}, originRow || record || newLineConfig?.defaultValue || {}, newLineConfig);
-      } catch (error) {
-        // 如果 onCancel 抛出异常，仍然继续清理状态
-        console.error('onCancel error:', error);
-      }
+      return cancelEditable(mappedKey, false);
     }
-
-    // 清理 newLineRecordCache，需要比较 recordKey（考虑类型转换）
-    if (newLineRecordCache) {
-      const cacheRecordKey = newLineRecordCache.options.recordKey;
-      // 重用之前计算的 relayKeyStr
-      const cacheKeyStr = cacheRecordKey != null ? recordKeyToString(cacheRecordKey)?.toString() : null;
-      if (cacheRecordKey === recordKey || cacheKeyStr != null && relayKeyStr != null && cacheKeyStr === relayKeyStr || cacheRecordKey?.toString() === recordKey?.toString() || String(cacheRecordKey) === String(recordKey)) {
-        setNewLineRecordCache(undefined);
-      }
+    if (isInEditableSet) {
+      // ② 调 onCancel（兼容外部 actionRef.cancel 调用）
+      await tryRunOnCancel(recordKey);
     }
 
-    // 先清理 preEditRowRef 并重置表单字段，然后再清除编辑状态
-    // 这样在清除编辑状态前，表单字段已经被清除，表格重新渲染时就不会显示输入框
-    const originRow = preEditRowRef.current;
-    if (originRow && props.getRowKey(originRow, -1) === recordKey && isInEditableSet) {
-      try {
-        // 尝试通过 formProps.formRef 访问 form
-        const formRef = props.formProps?.formRef;
-        const form = formRef?.current || props.form;
-        if (form) {
-          if (props.tableName) {
-            // name 模式：重置为原始值
-            const namePath = normalizeNamePath(props.tableName, recordKey);
-            form.setFieldsValue(set({}, namePath, originRow));
-          } else {
-            // 非 name 模式：清除该行的所有表单字段
-            // 在非 name 模式下，表单字段路径是 [recordKey, columnDataIndex]
-            // 如 [624748504, 'title']，需要清除所有以 recordKey 开头的字段
-            const recordKeyStr = recordKeyToString(recordKey)?.toString();
-            if (recordKeyStr) {
-              try {
-                // 在非 name 模式下，表单字段以嵌套对象的形式存储
-                // 比如 { '624748504': { 'title': 'value', 'state': 'value' } }
-                // 需要清除整个嵌套对象
-                // 先使用 resetFields 清除字段状态
-                form.resetFields([[recordKeyStr]]);
-
-                // 然后使用 setFieldsValue 清除字段值
-                // 这样可以确保字段被完全清除，表格重新渲染时不会显示输入框
-                form.setFieldsValue({
-                  [recordKeyStr]: undefined
-                });
-              } catch (error) {
-                // 如果清除失败，忽略错误
-                console.warn('Failed to clear form fields in cancelEditable:', error);
-              }
-            }
-          }
-        }
-      } catch (error) {
-        // 如果访问 form 失败，忽略错误
-        console.warn('Failed to reset form fields in cancelEditable:', error);
-      }
-      preEditRowRef.current = null;
+    // ③ 清 newLineRecordCache
+    tryClearNewLineCache(recordKey);
+
+    // ④ 还原 form 字段：注意必须在 clearEditableState 之前，
+    // 否则 editableKeys 一变更，行重渲会先于字段重置发生，残留输入框
+    if (isInEditableSet) {
+      tryRestoreFormFields(recordKey);
     }
 
-    // 最后清除编辑状态，这样表格会重新渲染，输入框会消失
+    // ⑤ 最后清除编辑状态，触发表格重新渲染、输入框消失
     clearEditableState(recordKey);
     return true;
   });
@@ -698,7 +757,7 @@ export function useEditableArray(props) {
       updatedDataSource = editableRowByKey({
         data: updatedDataSource,
         getRowKey: props.getRowKey,
-        row: editRow,
+        row: normalizeRowDateValues(editRow),
         key: recordKey,
         childrenColumnName: props.childrenColumnName || 'children'
       }, 'update');
@@ -719,10 +778,10 @@ export function useEditableArray(props) {
       return newLineRecordCache?.defaultValue || {};
     }
     const fieldPath = buildFormFieldPath(recordKey);
-    const newLineRecordData = {
+    const newLineRecordData = normalizeRowDateValues({
       ...newLineRecordCache?.defaultValue,
       ...get(values, fieldPath)
-    };
+    });
     const existsInDataSource = dataSourceKeyIndexMapRef.current.has(recordKeyToString(recordKey));
     if (existsInDataSource) {
       const foundRow = dataSource.find((item, index) => {
@@ -743,9 +802,21 @@ export function useEditableArray(props) {
   });
   const saveRefsMap = useRef(new Map());
   useEffect(() => {
-    const editableKeysSet = new Set(editableKeys?.map(key => key?.toString()) ?? []);
-    saveRefsMap.current.forEach((ref, key) => {
-      if (!editableKeysSet.has(key?.toString())) {
+    // saveRefsMap 的 key 在 tableName 模式下写入的是 mappedKey（indexKey）而非 realKey
+    // （见下方 `actionRender` 内 `dataSourceKeyIndexMapRef.current.get(...) || ...`），
+    // 而 editableKeys 里存的是 realKey ── 直接拿 editableKeys 反查会导致 tableName 模式
+    // 下永远命中不了，缓存只增不减，最终泄漏。
+    // 修复：把 editableKeys 双向展开（自身 + 映射后的 indexKey），都视为「仍在编辑」。
+    const aliveKeysSet = new Set();
+    (editableKeys ?? []).forEach(key => {
+      const keyStr = key?.toString();
+      if (keyStr == null) return;
+      aliveKeysSet.add(keyStr);
+      const mapped = dataSourceKeyIndexMapRef.current.get(keyStr);
+      if (mapped != null) aliveKeysSet.add(mapped.toString());
+    });
+    saveRefsMap.current.forEach((_ref, key) => {
+      if (!aliveKeysSet.has(key?.toString())) {
         saveRefsMap.current.delete(key);
       }
     });
@@ -761,21 +832,25 @@ export function useEditableArray(props) {
 
   /**
    * 保存编辑行
+   *
+   * 设计：仅作为 `SaveEditableAction.save` 的外部触发入口。所有副作用
+   *  （setDataSource / cancelEditable / 清 saveRefsMap）都由 `actionSaveRef`
+   *  → `cancelEditable` 链路统一处理，这里**绝不再额外调 clearEditableState**，
+   *  否则 `setEditableRowKeys` 会被触发两次。
    */
   const saveEditable = useRefFunction(async (recordKey, needReTry) => {
     const relayKey = recordKeyToString(recordKey);
     const relayKeyStr = relayKey.toString();
     const mappedKey = dataSourceKeyIndexMapRef.current.get(relayKeyStr);
-    const isInEditableSet = editableKeys?.some(key => key?.toString() === relayKeyStr || key === relayKey);
+    const isInEditableSet = (editableKeys ?? []).some(key => isSameRecordKey(key, recordKey));
     if (!isInEditableSet && mappedKey && (needReTry ?? true) && props.tableName) {
-      return await saveEditable(mappedKey, false);
+      return saveEditable(mappedKey, false);
     }
     const saveRef = getSaveRef(recordKey);
     if (!saveRef?.current) {
       return false;
     }
     await saveRef.current.save();
-    clearEditableState(recordKey);
     return true;
   });
 
@@ -867,21 +942,27 @@ export function useEditableArray(props) {
     const {
       options
     } = newLine || newLineRecordRef.current || {};
-    const isNewLine = !options?.parentKey && options?.recordKey === recordKey;
+    // 用 isSameRecordKey 替代 ===：RecordKey 可能是 number/string/array，直接 === 在
+    // number↔string 混用或数组场景下永远 false，会导致新增行被错误地走"更新"分支而非"插入"分支
+    const isNewLine = !options?.parentKey && isSameRecordKey(options?.recordKey, recordKey);
     if (isNewLine) {
+      // 新增行：editRow 仅包含用户在 form 中填过的字段，必须 merge 上 originRow
+      // （= recordCreatorProps.record 中设的默认值），否则那些没参与编辑的字段会丢失。
+      // 与 SaveEditableAction.save 内部 `merge({}, row, data)` 语义保持一致。
+      const mergedRow = normalizeRowDateValues(merge({}, originRow, editRow));
       if (options?.position === 'top') {
-        props.setDataSource([editRow, ...props.dataSource]);
+        props.setDataSource([mergedRow, ...props.dataSource]);
       } else {
-        props.setDataSource([...props.dataSource, editRow]);
+        props.setDataSource([...props.dataSource, mergedRow]);
       }
     } else {
       const actionProps = {
         data: props.dataSource,
         getRowKey: props.getRowKey,
-        row: options ? {
+        row: normalizeRowDateValues(options ? {
           ...editRow,
           map_row_parentKey: recordKeyToString(options?.parentKey ?? '')?.toString()
-        } : editRow,
+        } : editRow),
         key: recordKey,
         childrenColumnName: props.childrenColumnName || 'children'
       };

package/es/utils/useEditableMap/index.d.ts

@@ -5,11 +5,18 @@ export type AddLineOptions = {
     recordKey?: React.Key;
 };
 /**
- * 一个方便的hooks 用于维护编辑的状态
+ * 单条记录场景下的"行内编辑"状态管理 hook（与 useEditableArray 平行设计，
+ * useEditableArray 服务于数组场景如 ProTable，本 hook 服务于 ProDescriptions 等单记录场景）。
+ *
+ * 设计要点：
+ * 1. `type='single'`（默认）下，已有任意字段处于编辑态时，再次发起 startEditable 会被拒绝并弹 toast，
+ *    用户必须先 cancel/save 当前编辑行才能编辑别的字段。这是产品刻意设计（受测试 `📝 单行模式下应该阻止同时编辑多个字段` 锁定），
+ *    与某些同类组件"切换式"行为不同；如需切换，需显式传 `type='multiple'` 并自行约束最多一行。
+ * 2. 多行模式（`type='multiple'`）支持任意多个字段同时编辑，每个字段进入编辑态前的快照按 key 存到 `preEditRowRefs` Map 中。
  *
  * @param props
  */
-export declare function useEditableMap<RecordType>(props: RowEditableConfig<RecordType> & {
+export declare function useEditableMap<RecordType extends Record<string, any> = Record<string, any>>(props: RowEditableConfig<RecordType> & {
     dataSource: RecordType;
     childrenColumnName?: string;
     setDataSource: (dataSource: RecordType) => void;
@@ -17,7 +24,7 @@ export declare function useEditableMap<RecordType>(props: RowEditableConfig<Reco
     editableKeys: React.Key[];
     setEditableRowKeys: (updater: React.Key[] | ((prev: React.Key[]) => React.Key[])) => void;
     isEditable: (recordKey: RecordKey) => boolean;
-    actionRender: (key: RecordKey, config?: ActionTypeText<RecordType>) => React.ReactNode[] | (import("react/jsx-runtime").JSX.Element | undefined)[];
+    actionRender: (key: RecordKey, config?: ActionTypeText<RecordType>) => React.ReactNode[] | (React.JSX.Element | undefined)[];
     startEditable: (recordKey: RecordKey, recordValue?: any) => boolean;
     cancelEditable: (recordKey: RecordKey) => boolean;
 };