From b0563adc8b15538ffa4b74746d5e6d68ba6a0e3f Mon Sep 17 00:00:00 2001 From: Tyr Date: Thu, 13 Jul 2023 11:25:39 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BA=20react=20=E7=BC=96=E8=BE=91?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=B7=BB=E5=8A=A0=20onDataCellEditEnd=20?= =?UTF-8?q?=E4=BA=8B=E4=BB=B6=20(#2247)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../s2-core/src/common/interface/emitter.ts | 4 +-- .../__tests__/unit/hooks/useEvents-spec.ts | 8 ++--- packages/s2-react/playground/index.tsx | 1 + .../sheets/editable-sheet/edit-cell/index.tsx | 34 ++++++++++++------ .../sheets/editable-sheet/index.tsx | 5 ++- packages/s2-react/src/hooks/useEvents.ts | 4 +-- packages/s2-shared/src/interface.ts | 35 ++++++++++--------- .../docs/api/components/sheet-component.zh.md | 1 + .../react-component/sheet/demo/editable.tsx | 5 +++ 9 files changed, 61 insertions(+), 36 deletions(-) diff --git a/packages/s2-core/src/common/interface/emitter.ts b/packages/s2-core/src/common/interface/emitter.ts index 137992f5e8..58c42b7079 100644 --- a/packages/s2-core/src/common/interface/emitter.ts +++ b/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 = { diff --git a/packages/s2-react/__tests__/unit/hooks/useEvents-spec.ts b/packages/s2-react/__tests__/unit/hooks/useEvents-spec.ts index b79e9e7b10..6c8b06f181 100644 --- a/packages/s2-react/__tests__/unit/hooks/useEvents-spec.ts +++ b/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'; diff --git a/packages/s2-react/playground/index.tsx b/packages/s2-react/playground/index.tsx index fd69cd6768..73fd2297eb 100644 --- a/packages/s2-react/playground/index.tsx +++ b/packages/s2-react/playground/index.tsx @@ -1238,6 +1238,7 @@ function MainLayout() { ref={s2Ref} themeCfg={themeCfg} onMounted={onSheetMounted} + onDataCellEditEnd={logHandler('onDataCellEditEnd')} /> 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 index 2071ffb090..80c80b9dd6 100644 --- 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 @@ -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; }; @@ -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 = 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, ); }, diff --git a/packages/s2-react/src/components/sheets/editable-sheet/index.tsx b/packages/s2-react/src/components/sheets/editable-sheet/index.tsx index 16995efbcb..d8e7a48795 100644 --- a/packages/s2-react/src/components/sheets/editable-sheet/index.tsx +++ b/packages/s2-react/src/components/sheets/editable-sheet/index.tsx @@ -8,7 +8,10 @@ export const EditableSheet: React.FC = React.memo( (props) => { return ( - {}} /> + {}} + onDataCellEditEnd={props.onDataCellEditEnd} + /> ); diff --git a/packages/s2-react/src/hooks/useEvents.ts b/packages/s2-react/src/hooks/useEvents.ts index 25139e09b7..a4bd40a187 100644 --- a/packages/s2-react/src/hooks/useEvents.ts +++ b/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'; diff --git a/packages/s2-shared/src/interface.ts b/packages/s2-shared/src/interface.ts index 78fc378362..9a6b4e0529 100644 --- a/packages/s2-shared/src/interface.ts +++ b/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; diff --git a/s2-site/docs/api/components/sheet-component.zh.md b/s2-site/docs/api/components/sheet-component.zh.md index 4cea58acce..adff865f41 100644 --- a/s2-site/docs/api/components/sheet-component.zh.md +++ b/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 | | | diff --git a/s2-site/examples/react-component/sheet/demo/editable.tsx b/s2-site/examples/react-component/sheet/demo/editable.tsx index e6dc02d52d..fd3025d678 100644 --- a/s2-site/examples/react-component/sheet/demo/editable.tsx +++ b/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( , document.getElementById('container'), );