feat: 为 react 编辑组件添加 onDataCellEditEnd 事件

packages/s2-core/src/common/constant/events/basic.ts

@@ -32,6 +32,7 @@ export enum S2Event {
   DATA_CELL_TREND_ICON_CLICK = 'data-cell:trend-icon-click',
   DATA_CELL_BRUSH_SELECTION = 'data-cell:brush-selection',
   DATA_CELL_SELECT_MOVE = 'data-cell:select-move',
+  DATA_CELL_EDIT_END = 'data-cell:edit-end',
 
   /** ================ Corner Cell ================  */
   CORNER_CELL_HOVER = 'corner-cell:hover',

packages/s2-core/src/common/interface/emitter.ts

@@ -1,8 +1,7 @@
 import type { Event as CanvasEvent } from '@antv/g-canvas';
-import type { SpreadSheet } from '../../sheet-type';
+import type { ColCell } from '../../cell/col-cell';
 import type { DataCell } from '../../cell/data-cell';
 import type { RowCell } from '../../cell/row-cell';
-import type { ColCell } from '../../cell/col-cell';
 import type { S2Event } from '../../common/constant';
 import type {
   CellMeta,
@@ -19,6 +18,7 @@ import type {
 } from '../../common/interface/basic';
 import type { Data } from '../../common/interface/s2DataConfig';
 import type { Node } from '../../facet/layout/node';
+import type { SpreadSheet } from '../../sheet-type';
 import type { ResizeInfo } from './resize';
 
 export type CollapsedRowsType = {
@@ -93,6 +93,7 @@ export interface EmitterType {
   [S2Event.DATA_CELL_TREND_ICON_CLICK]: (data: ViewMeta) => void;
   [S2Event.DATA_CELL_BRUSH_SELECTION]: (cells: (DataCell | CellMeta)[]) => void;
   [S2Event.DATA_CELL_SELECT_MOVE]: (metas: CellMeta[]) => void;
+  [S2Event.DATA_CELL_EDIT_END]: (meta: ViewMeta) => void;
 
   /** ================ Row Cell ================  */
   [S2Event.ROW_CELL_MOUSE_DOWN]: CanvasEventHandler;

packages/s2-react/__tests__/unit/hooks/useEvents-spec.ts

@@ -1,13 +1,13 @@
-import { renderHook, act } from '@testing-library/react-hooks';
 import {
+  GEvent,
   PivotSheet,
   S2Event,
-  type S2Options,
   SpreadSheet,
-  GEvent,
+  type S2Options,
 } from '@antv/s2';
-import { createMockCellInfo, getContainer } from 'tests/util/helpers';
+import { act, renderHook } from '@testing-library/react-hooks';
 import * as mockDataConfig from 'tests/data/simple-data.json';
+import { createMockCellInfo, getContainer } from 'tests/util/helpers';
 import type { SheetComponentsProps } from '../../../src/components';
 import { useCellEvent, useEvents, useS2Event } from '@/hooks';
 
@@ -255,6 +255,10 @@ const cellEventCases = [
     event: S2Event.DATA_CELL_SELECT_MOVE,
     name: 'onDataCellSelectMove',
   },
+  {
+    event: S2Event.DATA_CELL_EDIT_END,
+    name: 'onDataCellEditEnd',
+  },
   {
     event: S2Event.CORNER_CELL_HOVER,
     name: 'onCornerCellHover',

packages/s2-react/playground/index.tsx

@@ -1238,6 +1238,7 @@ function MainLayout() {
             ref={s2Ref}
             themeCfg={themeCfg}
             onMounted={onSheetMounted}
+            onDataCellEditEnd={logHandler('onDataCellEditEnd')}
           />
         </TabPane>
       </Tabs>

packages/s2-react/src/components/sheets/editable-sheet/edit-cell/index.tsx

@@ -1,14 +1,14 @@
+import type { Event as CanvasEvent } from '@antv/g-canvas';
+import { BaseCell, S2Event, SpreadSheet, type ViewMeta } from '@antv/s2';
+import { Input } from 'antd';
+import { merge, pick } from 'lodash';
 import React, {
-  useRef,
-  useState,
+  useCallback,
   useEffect,
   useMemo,
-  useCallback,
+  useRef,
+  useState,
 } from 'react';
-import { Input } from 'antd';
-import { BaseCell, S2Event, SpreadSheet, type ViewMeta } from '@antv/s2';
-import type { Event as CanvasEvent } from '@antv/g-canvas';
-import { pick } from 'lodash';
 import { useS2Event } from '../../../../hooks';
 import { useSpreadSheetRef } from '../../../../utils/SpreadSheetContext';
 import {
@@ -94,6 +94,16 @@ function EditCellComponent(
     spreadsheet.dataSet.originData[rowIndex][valueField] = inputVal;
     spreadsheet.render(true);
 
+    spreadsheet.emit(
+      S2Event.DATA_CELL_EDIT_END,
+      merge(cell.getMeta(), {
+        fieldValue: inputVal,
+        data: {
+          [valueField]: inputVal,
+        },
+      }),
+    );
+
     if (onChange) {
       onChange(spreadsheet.dataSet.originData);
     }

packages/s2-react/src/hooks/useEvents.ts

@@ -1,9 +1,9 @@
 import {
-  type EmitterType,
-  getBaseCellData,
   GEvent,
   S2Event,
   SpreadSheet,
+  getBaseCellData,
+  type EmitterType,
   type TargetCellInfo,
 } from '@antv/s2';
 import React from 'react';
@@ -91,6 +91,7 @@ export function useEvents(props: SheetComponentsProps, s2: SpreadSheet) {
     s2,
   );
   useS2Event(S2Event.DATA_CELL_SELECT_MOVE, props.onDataCellSelectMove, s2);
+  useS2Event(S2Event.DATA_CELL_EDIT_END, props.onDataCellEditEnd, s2);
 
   // ============== Corner Cell ====================
   useCellEvent(S2Event.CORNER_CELL_HOVER, props.onCornerCellHover, s2);

packages/s2-shared/src/interface.ts

@@ -1,29 +1,29 @@
 import type {
-  S2DataConfig,
-  S2Options,
+  CellMeta,
   CellScrollPosition,
-  TargetCellInfo,
-  ResizeParams,
-  Node,
-  SpreadSheet,
-  ThemeCfg,
-  ViewMeta,
-  LayoutResult,
-  SortParams,
-  DataCell,
+  CollapsedRowsType,
   Data,
+  DataCell,
+  DataType,
   GEvent,
   HiddenColumnsInfo,
-  CollapsedRowsType,
-  DataType,
+  LayoutResult,
+  Node,
+  Pagination,
   ResizeInfo,
+  ResizeParams,
   S2CellType,
-  TooltipOperatorOptions,
-  S2RenderOptions,
+  S2DataConfig,
   S2MountContainer,
-  CellMeta,
+  S2Options,
+  S2RenderOptions,
+  SortParams,
+  SpreadSheet,
+  TargetCellInfo,
+  ThemeCfg,
   TooltipContentType,
-  Pagination,
+  TooltipOperatorOptions,
+  ViewMeta,
 } from '@antv/s2';
 
 // 是否开启自适应宽高，并指定容器
@@ -121,6 +121,7 @@ export interface BaseSheetComponentProps<
   onDataCellTrendIconClick?: (meta: ViewMeta) => void;
   onDataCellBrushSelection?: (brushRangeDataCells: DataCell[]) => void;
   onDataCellSelectMove?: (metas: CellMeta[]) => void;
+  onDataCellEditEnd?: (meta: ViewMeta) => void;
 
   // ============== Corner Cell ====================
   onCornerCellHover?: (data: TargetCellInfo) => void;

s2-site/docs/api/components/sheet-component.zh.md

@@ -48,6 +48,7 @@ order: 0
 | onDataCellTrendIconClick | 数值单元格的趋势图 icon 点击事件 | (meta: [ViewMeta](/docs/api/basic-class/node)) => void |  |  |
 | onDataCellBrushSelection | 数值单元格刷选事件 | ( dataCells: [DataCell](/docs/api/basic-class/base-cell)[] ) => void |  |  |
 | onDataCellSelectMove | 数值单元格键盘方向键移动事件 | (metas: CellMeta[]) => void |  |  |
+| onDataCellEditEnd | 数值单元格编辑完成（暂只支持编辑表） | (meta: [ViewMeta](/docs/api/basic-class/node)) => void |  |  |
 | onCornerCellHover | 角头鼠标悬停事件 | (data: [TargetCellInfo](#targetcellinfo)) => void |  |  |
 | onCornerCellClick | 角头鼠标单击事件 | (data: [TargetCellInfo](#targetcellinfo)) => void |  |  |
 | onCornerCellDoubleClick | 角头鼠标双击事件 | (data: [TargetCellInfo](#targetcellinfo)) => void |  |  |

s2-site/docs/api/general/S2Event.en.md

@@ -54,6 +54,7 @@ s2.on(S2Event.ROW_CELL_CLICK, (event) => {
 | mouse release    | `S2Event.DATA_CELL_MOUSE_UP`         | Value cell mouse release                                 |
 | trend icon click | `S2Event.DATA_CELL_TREND_ICON_CLICK` | Click on the trend icon in the tooltip of the value cell |
 | Swipe            | `S2Event.DATA_CELL_BRUSH_SELECTION`  | Value cell selection                                     |
+| Edit end           | `S2Event.DATA_CELL_EDIT_END`  | Value cell edit end(Currently only supports React editable SheetComponent)                         |
 
 ### Corner head
 

s2-site/docs/api/general/S2Event.zh.md

@@ -58,6 +58,7 @@ s2.on(S2Event.ROW_CELL_CLICK, (event) => {
 | 鼠标松开       | `S2Event.DATA_CELL_MOUSE_UP`         | 数值单元格鼠标松开                      |
 | 趋势 icon 点击 | `S2Event.DATA_CELL_TREND_ICON_CLICK` | 数值单元格 tooltip 里面的趋势 icon 点击 |
 | 刷选           | `S2Event.DATA_CELL_BRUSH_SELECTION`  | 数值单元格刷选                          |
+| 编辑完成           | `S2Event.DATA_CELL_EDIT_END`  | 数值单元格编辑完成（暂只支持 React 编辑表）                          |
 
 ### 角头