feat: 为 react 编辑组件添加 onDataCellEditEnd 事件 (#2247)

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 = {

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';
 

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 {
@@ -28,6 +28,7 @@ export interface CustomProps {
 
 type onChangeProps = {
   onChange?: (val: any[]) => void;
+  onDataCellEditEnd?: (meta: ViewMeta) => void;
   trigger?: number;
   CustomComponent?: React.FunctionComponent<CustomProps>;
 };
@@ -37,7 +38,7 @@ function EditCellComponent(
 ) {
   const { params, resolver } = props;
   const spreadsheet = useSpreadSheetRef();
-  const { event, onChange, CustomComponent } = params;
+  const { event, onChange, onDataCellEditEnd, CustomComponent } = params;
   const cell: BaseCell<ViewMeta> = event.target.cfg.parent;
 
   const { left, top, width, height } = useMemo(() => {
@@ -94,6 +95,15 @@ function EditCellComponent(
     spreadsheet.dataSet.originData[rowIndex][valueField] = inputVal;
     spreadsheet.render(true);
 
+    onDataCellEditEnd?.(
+      merge(cell.getMeta(), {
+        fieldValue: inputVal,
+        data: {
+          [valueField]: inputVal,
+        },
+      }),
+    );
+
     if (onChange) {
       onChange(spreadsheet.dataSet.originData);
     }
@@ -162,14 +172,18 @@ function EditCellComponent(
   );
 }
 
-function EditCell({ onChange, CustomComponent }: onChangeProps) {
+function EditCell({
+  onChange,
+  onDataCellEditEnd,
+  CustomComponent,
+}: onChangeProps) {
   const spreadsheet = useSpreadSheetRef();
 
   const cb = useCallback(
     (e: CanvasEvent) => {
       invokeComponent(
         EditCellComponent,
-        { event: e, onChange, CustomComponent },
+        { event: e, onChange, onDataCellEditEnd, CustomComponent },
         spreadsheet,
       );
     },

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

@@ -8,7 +8,10 @@ export const EditableSheet: React.FC<SheetComponentsProps> = React.memo(
   (props) => {
     return (
       <BaseSheet {...props} sheetType={'table'}>
-        <EditCell onChange={() => {}} />
+        <EditCell
+          onChange={() => {}}
+          onDataCellEditEnd={props.onDataCellEditEnd}
+        />
         <DragCopyPoint />
       </BaseSheet>
     );

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';

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/examples/react-component/sheet/demo/editable.tsx

@@ -44,11 +44,16 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
       frozenTrailingColCount: 1, // 列尾冻结数量
     };
 
+    const onDataCellEditEnd = (meta) => {
+      console.log('onDataCellEditEnd', meta);
+    };
+
     ReactDOM.render(
       <SheetComponent
         dataCfg={s2DataConfig}
         options={s2Options}
         sheetType="editable"
+        onDataCellEditEnd={onDataCellEditEnd}
       />,
       document.getElementById('container'),
     );