fix: 修复编辑表的输入框未回填格式化后的数据 close #2528 (#2549)

* fix: 修复编辑表的输入框未回填格式化后的数据 close #2528 * fix: 修复循环引用 * fix: 编辑后不应该再次格式化 * fix: 移除定义 * test: 修复单测 * test: 增加单测
antvis · Feb 23, 2024 · 95d67ca · 95d67ca
1 parent 3a7803b
commit 95d67ca
Show file tree

Hide file tree

Showing 16 changed files with 384 additions and 291 deletions.
diff --git a/packages/s2-core/__tests__/bugs/issue-2528-spec.ts b/packages/s2-core/__tests__/bugs/issue-2528-spec.ts
@@ -0,0 +1,58 @@
+/**
+ * @description spec for issue #2528
+ * https://github.com/antvis/S2/issues/2528
+ */
+
+import * as mockDataConfig from '../data/simple-table-data.json';
+import { getContainer } from '../util/helpers';
+import type { SpreadSheet, S2DataConfig, S2Options } from '@/index';
+import { TableSheet } from '@/sheet-type';
+
+const s2DataConfig: S2DataConfig = {
+  ...mockDataConfig,
+  meta: [{ field: 'cost', formatter: (v) => `${v}-@` }],
+};
+
+const s2Options: S2Options = {
+  width: 800,
+  height: 400,
+};
+
+describe('Table Sheet Editable Formatter Tests', () => {
+  let s2: SpreadSheet;
+
+  beforeEach(() => {
+    s2 = new TableSheet(getContainer(), s2DataConfig, s2Options);
+
+    s2.render();
+  });
+
+  test('should get formatted data', () => {
+    const costValues = s2.interaction
+      .getPanelGroupAllDataCells()
+      .filter((cell) => cell.getMeta().valueField === 'cost')
+      .map((cell) => cell.getFieldValue());
+
+    expect(costValues).toEqual(['2-@', '2-@', '2-@']);
+  });
+
+  test('should only format data once after data edited', () => {
+    const id = '0-root[&]cost';
+    const inputValue = 'test';
+
+    // 模拟一次编辑 (更新第一行的 cost)
+    const displayData = s2.dataSet.getDisplayDataSet();
+
+    displayData[0].cost = inputValue;
+    s2.dataSet.displayFormattedValueMap?.set(id, inputValue);
+
+    s2.render();
+
+    const costValues = s2.interaction
+      .getPanelGroupAllDataCells()
+      .filter((cell) => cell.getMeta().valueField === 'cost')
+      .map((cell) => cell.getFieldValue());
+
+    expect(costValues).toEqual([inputValue, '2-@', '2-@']);
+  });
+});
diff --git a/packages/s2-core/__tests__/unit/facet/pivot-facet-spec.ts b/packages/s2-core/__tests__/unit/facet/pivot-facet-spec.ts
@@ -131,6 +131,7 @@ jest.mock('@/data-set/pivot-data-set', () => {
         getDimensionValues: actualPivotDataSet.prototype.getDimensionValues,
         getFieldsAndPivotMetaByField:
           actualPivotDataSet.prototype.getFieldsAndPivotMetaByField,
+        displayFormattedValueMap: new Map(),
       };
     }),
   };

diff --git a/packages/s2-core/__tests__/unit/facet/table-facet-spec.ts b/packages/s2-core/__tests__/unit/facet/table-facet-spec.ts
@@ -63,6 +63,7 @@ jest.mock('@/sheet-type', () => {
         },
         dataSet: {
           isEmpty: jest.fn(),
+          displayFormattedValueMap: new Map(),
         },
         isHierarchyTreeType: jest.fn(),
         getCanvasElement: () =>

diff --git a/packages/s2-core/__tests__/util/helpers.ts b/packages/s2-core/__tests__/util/helpers.ts
@@ -1,3 +1,4 @@
+/* eslint-disable max-lines-per-function */
 import fs from 'fs';
 import path from 'path';
 import { dsvFormat } from 'd3-dsv';
@@ -101,6 +102,7 @@ export const createFakeSpreadSheet = (config?: {
       return [];
     },
     getField: jest.fn(),
+    displayFormattedValueMap: new Map(),
   } as unknown as any;
 
   const layoutResult: LayoutResult = {

diff --git a/packages/s2-core/src/cell/data-cell.ts b/packages/s2-core/src/cell/data-cell.ts
@@ -251,8 +251,8 @@ export class DataCell extends BaseCell<ViewMeta> {
     }
   }
 
-  public setMeta(viewMeta: ViewMeta) {
-    super.setMeta(viewMeta);
+  public setMeta(viewMeta: Partial<ViewMeta>) {
+    super.setMeta(viewMeta as ViewMeta);
     this.initCell();
   }
 
@@ -358,12 +358,15 @@ export class DataCell extends BaseCell<ViewMeta> {
       };
     }
 
-    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/data-set/base-data-set.ts b/packages/s2-core/src/data-set/base-data-set.ts
@@ -78,6 +78,11 @@ export abstract class BaseDataSet {
    */
   protected displayData: RawData[];
 
+  /**
+   * 单元格所对应格式化后的值（用于编辑表）
+   */
+  public displayFormattedValueMap = new Map<string, string>();
+
   public constructor(spreadsheet: SpreadSheet) {
     this.spreadsheet = spreadsheet;
   }

diff --git a/packages/s2-react/playground/config.ts b/packages/s2-react/playground/config.ts
@@ -0,0 +1,208 @@
+import { isUpDataValue, type Columns, customMerge } from '@antv/s2';
+import type { S2DataConfig, ThemeCfg } from '@antv/s2';
+import { getBaseSheetComponentOptions } from '@antv/s2-shared';
+import type { SliderSingleProps } from 'antd';
+import {
+  data,
+  totalData,
+  meta,
+  fields,
+} from '../__tests__/data/mock-dataset.json';
+import type { SheetComponentOptions } from '../src/components';
+
+export const tableSheetSingleColumns: Columns = [
+  'province',
+  'city',
+  'type',
+  'sub_type',
+  'number',
+];
+
+export const tableSheetMultipleColumns: Columns = [
+  {
+    key: 'area',
+    children: ['province', 'city'],
+  },
+  'type',
+  {
+    key: 'money',
+    children: [{ key: 'price' }, 'number'],
+  },
+];
+
+export const tableSheetDataCfg: S2DataConfig = {
+  data,
+  totalData,
+  meta: [{ field: 'number', formatter: (v) => `${v}-@` }, ...meta],
+  fields: {
+    columns: tableSheetSingleColumns,
+  },
+};
+
+export const pivotSheetDataCfg: S2DataConfig = {
+  data,
+  totalData,
+  meta,
+  fields,
+};
+
+export const pivotSheetDataCfgForCompactMode = customMerge(pivotSheetDataCfg, {
+  data: [
+    ...pivotSheetDataCfg.data,
+    {
+      province: '浙江',
+      city: '杭州',
+      type: '笔',
+      price: '11111111',
+    },
+    {
+      province: '浙江',
+      city: '杭州',
+      type: '纸张',
+      price: '2',
+    },
+    {
+      province: '浙江',
+      city: '舟山',
+      type: '笔',
+      price: '2',
+    },
+    {
+      province: '浙江',
+      city: '舟山',
+      type: '纸张',
+      price: '133.333',
+    },
+  ],
+});
+
+export const s2Options: SheetComponentOptions = {
+  debug: true,
+  width: 600,
+  height: 400,
+  frozenFirstRow: false,
+  showSeriesNumber: false,
+  interaction: {
+    enableCopy: true,
+    copyWithHeader: true,
+    copyWithFormat: true,
+    // 防止 mac 触摸板横向滚动触发浏览器返回, 和移动端下拉刷新
+    overscrollBehavior: 'none',
+    brushSelection: {
+      data: true,
+      col: true,
+      row: true,
+    },
+  },
+  tooltip: {
+    showTooltip: true,
+    operation: {
+      trend: true,
+    },
+  },
+  conditions: {
+    text: [],
+    interval: [
+      {
+        field: 'number',
+        mapping() {
+          return {
+            fill: '#80BFFF',
+            // 自定义柱状图范围
+            isCompare: true,
+            maxValue: 8000,
+            minValue: 300,
+          };
+        },
+      },
+    ],
+  },
+  headerActionIcons: [
+    {
+      iconNames: ['SortDown'],
+      belongsCell: 'colCell',
+      defaultHide: true,
+    },
+    {
+      iconNames: ['SortDown'],
+      belongsCell: 'rowCell',
+      defaultHide: true,
+    },
+    {
+      iconNames: ['SortDown'],
+      belongsCell: 'cornerCell',
+      defaultHide: true,
+    },
+  ],
+  hierarchyType: 'grid',
+  style: {
+    colCfg: {
+      hideMeasureColumn: false,
+    },
+    rowCfg: {
+      width: 100,
+    },
+    cellCfg: {
+      height: 50,
+      width: 100,
+    },
+  },
+};
+
+export const s2ThemeConfig: ThemeCfg = {
+  name: 'default',
+  theme: {},
+};
+
+export const sliderOptions: SliderSingleProps = {
+  min: 0,
+  max: 10,
+  step: 0.1,
+  marks: {
+    0.2: '0.2',
+    1: '1 (默认)',
+    2: '2',
+    10: '10',
+  },
+};
+
+export const mockGridAnalysisOptions: SheetComponentOptions = {
+  width: 1600,
+  height: 600,
+  style: {
+    layoutWidthType: 'colAdaptive',
+    cellCfg: {
+      width: 400,
+      height: 100,
+      valuesCfg: {
+        widthPercent: [40, 0.2, 0.2, 0.2],
+      },
+    },
+  },
+  tooltip: { showTooltip: false },
+  interaction: {
+    selectedCellsSpotlight: true,
+  },
+  conditions: {
+    text: [
+      {
+        mapping: (value, cellInfo) => {
+          const { colIndex } = cellInfo;
+
+          if (colIndex <= 1) {
+            return {
+              fill: '#000',
+            };
+          }
+
+          return {
+            fill: isUpDataValue(value) ? '#FF4D4F' : '#29A294',
+          };
+        },
+      },
+    ],
+  },
+};
+
+export const defaultOptions =
+  getBaseSheetComponentOptions<SheetComponentOptions>(s2Options);