fix(table): a.d.c editable cell (#2381)

Tencent · Jul 21, 2023 · 6a50b97 · 6a50b97
1 parent 405f09e
commit 6a50b97
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git a/src/table/EditableCell.tsx b/src/table/EditableCell.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useMemo, useRef, useState, MouseEvent } from 'react';
 import get from 'lodash/get';
 import set from 'lodash/set';
 import isFunction from 'lodash/isFunction';
+import cloneDeep from 'lodash/cloneDeep';
 import { Edit1Icon as TdEdit1Icon } from 'tdesign-icons-react';
 import classNames from 'classnames';
 import {
@@ -47,8 +48,16 @@ const EditableCell = (props: EditableCellProps) => {
   const { classPrefix } = useConfig();
 
   const getCurrentRow = (row: TableRowData, colKey: string, value: any) => {
+    if (!colKey) return row;
+    // handle colKey like a.b.c
+    const [firstKey, ...restKeys] = colKey.split('.') || [];
     const newRow = { ...row };
-    set(newRow, colKey, value);
+    if (restKeys.length) {
+      newRow[firstKey] = cloneDeep(row[firstKey]);
+      set(newRow[firstKey], restKeys.join('.'), value);
+    } else {
+      set(newRow, colKey, value);
+    }
     return newRow;
   };
 
@@ -62,6 +71,8 @@ const EditableCell = (props: EditableCellProps) => {
     [col, row, colIndex, rowIndex],
   );
 
+  const cellValue = useMemo(() => get(row, col.colKey), [row, col.colKey]);
+
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const currentRow = useMemo(() => getCurrentRow(row, col.colKey, editValue), [col.colKey, editValue, row]);
 
@@ -238,14 +249,8 @@ const EditableCell = (props: EditableCellProps) => {
     });
   };
 
-  const cellValue = useMemo(() => get(row, col.colKey), [row, col.colKey]);
-
   useEffect(() => {
-    let val = cellValue;
-    if (typeof val === 'object' && val !== null) {
-      val = val instanceof Array ? [...val] : { ...val };
-    }
-    setEditValue(val);
+    setEditValue(cellValue);
   }, [cellValue]);
 
   useEffect(() => {

diff --git a/src/table/hooks/useEditableRow.ts b/src/table/hooks/useEditableRow.ts
@@ -52,7 +52,7 @@ export function useEditableRow(props: PrimaryTableProps) {
             resolve({ ...item, errorList: [] });
             return;
           }
-          validate(editedRow[col.colKey], rules).then((r) => {
+          validate(get(editedRow, col.colKey), rules).then((r) => {
             resolve({ ...item, errorList: r.filter((t) => !t.result) });
           });
         }),