fix: 编辑后不应该再次格式化

antvis · Feb 23, 2024 · f79ab34 · f79ab34
1 parent 11adbed
commit f79ab34
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 14 deletions.
diff --git a/packages/s2-core/src/cell/data-cell.ts b/packages/s2-core/src/cell/data-cell.ts
@@ -293,12 +293,16 @@ export class DataCell extends BaseCell<ViewMeta> {
         formattedValue: EMPTY_PLACEHOLDER,
       };
     }
-    const { rowId, valueField, fieldValue, data } = this.meta;
+
+    const { rowId, valueField, fieldValue, data, id } = this.meta;
+    const displayFormattedValue =
+      this.spreadsheet.dataSet.displayFormattedValueMap.get(id);
     const rowMeta = this.spreadsheet.dataSet.getFieldMeta(rowId);
     const fieldId = rowMeta ? rowId : valueField;
     const formatter = this.spreadsheet.dataSet.getFieldFormatter(fieldId);
     // TODO: 这里只用 formatter(fieldValue, this.meta) 即可, 为了保持兼容, 暂时在第三个参入传入 meta 信息
-    const formattedValue = formatter(fieldValue, data, this.meta);
+    const formattedValue =
+      displayFormattedValue ?? formatter(fieldValue, data, this.meta);
 
     return {
       value: fieldValue,

diff --git a/packages/s2-core/src/common/interface/basic.ts b/packages/s2-core/src/common/interface/basic.ts
@@ -452,6 +452,7 @@ export interface ViewMeta {
   label?: string;
   value?: string | number;
   query?: Query;
+  formattedValue?: string;
   [key: string]: unknown;
 }
 

diff --git a/packages/s2-core/src/data-set/base-data-set.ts b/packages/s2-core/src/data-set/base-data-set.ts
@@ -53,6 +53,9 @@ export abstract class BaseDataSet {
   // 透视表入口对象实例
   public spreadsheet: SpreadSheet;
 
+  // 单元格所对应格式化后的值（用于编辑表）
+  public displayFormattedValueMap = new Map<string, string>();
+
   public constructor(spreadsheet: SpreadSheet) {
     this.spreadsheet = spreadsheet;
   }

diff --git a/packages/s2-react/src/components/sheets/editable-sheet/edit-cell/index.tsx b/packages/s2-react/src/components/sheets/editable-sheet/edit-cell/index.tsx
@@ -2,6 +2,7 @@ import type { Event as CanvasEvent } from '@antv/g-canvas';
 import {
   S2Event,
   SpreadSheet,
+  customMerge,
   type DataType,
   type S2CellType,
   type TableDataCell,
@@ -82,29 +83,27 @@ function EditCellComponent(
     return cellMeta;
   }, [cell, spreadsheet]);
 
-  const [inputVal, setInputVal] = React.useState(() => {
-    return cell.getFieldValue();
-  });
+  const [inputVal, setInputVal] = React.useState(() => cell.getFieldValue());
 
   const inputRef = React.useRef<HTMLInputElement>(null);
   const containerRef = React.useRef<HTMLDivElement>(null);
 
   const onSave = () => {
-    const { rowIndex, valueField, fieldValue } = cell.getMeta();
+    const { rowIndex, valueField, id } = cell.getMeta();
+    const displayData = spreadsheet.dataSet.getDisplayDataSet();
+    displayData[rowIndex][valueField] = inputVal;
+    // 编辑后的值作为格式化后的结果, formatter 不再触发, 避免二次格式化
+    spreadsheet.dataSet.displayFormattedValueMap.set(id, inputVal);
+    spreadsheet.render();
 
-    cell.setMeta({
+    const editedMeta = customMerge(cell.getMeta(), {
       fieldValue: inputVal,
-      originalFieldValue: fieldValue,
       data: {
         [valueField]: inputVal,
       },
     });
 
-    const displayData = spreadsheet.dataSet.getDisplayDataSet();
-    displayData[rowIndex][valueField] = inputVal;
-    spreadsheet.render(true);
-
-    onDataCellEditEnd?.(cell.getMeta(), cell);
+    onDataCellEditEnd?.(editedMeta, cell);
     onChange?.(displayData);
     resolver(true);
   };

diff --git a/s2-site/docs/api/basic-class/base-data-set.zh.md b/s2-site/docs/api/basic-class/base-data-set.zh.md
@@ -27,9 +27,10 @@ s2.dataSet.getFieldName('type')
 | getDimensionValues                     | 获取维值                           | (filed: string, query?: [DataType](#datatype) ) => string[]                                                                                                                                  |                                             |
 | getCellData                            | 获取单个的单元格数据               | (params: [CellDataParams](#celldataparams)) => [DataType[]](#datatype)                                                                                                                       |                                             |
 | getMultiData                           | 获取批量的单元格数据               | (query: [DataType](#datatype),params?: [MultiDataParams](#multidataparams)) => [DataType[]](#datatype)                                                                                       |                                             |
-| <strike>getMultiData<strike>  (已废弃) | 获取批量的单元格数据               | (query: [DataType](#datatype), isTotals?: boolean, isRow?: boolean, drillDownFields?: string[], includeTotalData:boolean) => [DataType[]](#datatype)                                         |                                             |
+| <strike>getMultiData<strike>  （已废弃） | 获取批量的单元格数据               | (query: [DataType](#datatype), isTotals?: boolean, isRow?: boolean, drillDownFields?: string[], includeTotalData:boolean) => [DataType[]](#datatype)                                         |                                             |
 | moreThanOneValue                       | 是否超过 1 个数值                  | () => [ViewMeta](#viewmeta)                                                                                                                                                                  |                                             |
 | isEmpty                                | 是否为空数据集                     | () => `boolean`                                                                                                                                                                              | `@antv/s2-v1.51.1`                          |
+| displayFormattedValueMap                                |  单元格所对应格式化后的值（用于编辑表）                  | `Map<string, string>`                                                                                                                                                                             | `@antv/s2-v1.54.5`                          |
 
 ### DataType