From 5b4f6cecabb00bf3959850ccb2b76d32e60a718b Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Wed, 13 Mar 2024 15:13:17 +0800 Subject: [PATCH] fix: fix event bind in react-vtable --- packages/react-vtable/.eslintrc.js | 3 + packages/react-vtable/demo/src/App.tsx | 4 +- .../demo/src/event/event-rebind.tsx | 60 +++++++++++++++++++ packages/react-vtable/src/eventsUtils.ts | 2 +- packages/react-vtable/src/global.d.ts | 1 + packages/react-vtable/src/index.ts | 2 + packages/react-vtable/src/index_old.tsx | 32 ---------- .../react-vtable/src/tables/base-table.tsx | 38 ++++++++---- 8 files changed, 96 insertions(+), 46 deletions(-) create mode 100644 packages/react-vtable/demo/src/event/event-rebind.tsx create mode 100644 packages/react-vtable/src/global.d.ts delete mode 100644 packages/react-vtable/src/index_old.tsx diff --git a/packages/react-vtable/.eslintrc.js b/packages/react-vtable/.eslintrc.js index a93e12d0a..07c503d59 100644 --- a/packages/react-vtable/.eslintrc.js +++ b/packages/react-vtable/.eslintrc.js @@ -18,6 +18,9 @@ module.exports = { } } ], + globals: { + __VERSION__: 'readonly' + }, rules: { 'prettier/prettier': ['warn'], // 强制使用 Unix 换行符： \n diff --git a/packages/react-vtable/demo/src/App.tsx b/packages/react-vtable/demo/src/App.tsx index 196077752..d2be9b77b 100644 --- a/packages/react-vtable/demo/src/App.tsx +++ b/packages/react-vtable/demo/src/App.tsx @@ -10,11 +10,12 @@ import pivotChart from './pivot-chart/pivot-chart'; import pivotChartComponent from './pivot-chart/pivot-chart-component'; import listTableEvent from './event/list-table'; +import eventRebind from './event/event-rebind'; // export default listTable; // export default listOptionRecord; // export default listComponent; -export default listCustomLayout; +// export default listCustomLayout; // export default pivotTable; // export default pivotComponent; @@ -23,3 +24,4 @@ export default listCustomLayout; // export default pivotChartComponent; // export default listTableEvent; +export default eventRebind; diff --git a/packages/react-vtable/demo/src/event/event-rebind.tsx b/packages/react-vtable/demo/src/event/event-rebind.tsx new file mode 100644 index 000000000..6c024225f --- /dev/null +++ b/packages/react-vtable/demo/src/event/event-rebind.tsx @@ -0,0 +1,60 @@ +/* eslint-disable no-undef */ +/* eslint-disable no-console */ +import { useState } from 'react'; +import { ListTable } from '../../../src'; + +const App = () => { + const [transpose, setTranspose] = useState(false); + + const option = { + transpose, + columns: [ + { + field: '0', + caption: 'name' + }, + { + field: '1', + caption: 'age' + }, + { + field: '2', + caption: 'gender' + }, + { + field: '3', + caption: 'hobby' + } + ], + records: new Array(1000).fill(['John', 18, 'male', '🏀']) + }; + + console.log('transpose:', transpose); + return ( +
+ + + { + console.log('onClickCell transpose', transpose); + }} + /> +
+ ); +}; + +export default App; diff --git a/packages/react-vtable/src/eventsUtils.ts b/packages/react-vtable/src/eventsUtils.ts index 487eaaad4..ec9f4d5c6 100644 --- a/packages/react-vtable/src/eventsUtils.ts +++ b/packages/react-vtable/src/eventsUtils.ts @@ -125,7 +125,7 @@ export const findEventProps = ( const result: EventsProps = {}; Object.keys(props).forEach(key => { - if (supportedEvents[key]) { + if (supportedEvents[key] && props[key]) { result[key] = props[key]; } }); diff --git a/packages/react-vtable/src/global.d.ts b/packages/react-vtable/src/global.d.ts new file mode 100644 index 000000000..415c2c827 --- /dev/null +++ b/packages/react-vtable/src/global.d.ts @@ -0,0 +1 @@ +declare const __VERSION__: string; diff --git a/packages/react-vtable/src/index.ts b/packages/react-vtable/src/index.ts index 2370f87cd..9f2eccb9f 100644 --- a/packages/react-vtable/src/index.ts +++ b/packages/react-vtable/src/index.ts @@ -3,3 +3,5 @@ import * as VTable from '@visactor/vtable'; export * from './tables'; export * from './components'; export { VTable }; + +export const version = __VERSION__; diff --git a/packages/react-vtable/src/index_old.tsx b/packages/react-vtable/src/index_old.tsx deleted file mode 100644 index 445e633a7..000000000 --- a/packages/react-vtable/src/index_old.tsx +++ /dev/null @@ -1,32 +0,0 @@ -/* eslint-disable @typescript-eslint/no-duplicate-imports */ -/* eslint-disable @typescript-eslint/consistent-type-imports */ -import { ListTable } from '@visactor/vtable'; -import type { FC } from 'react'; -import React from 'react'; -import { useEffect, useRef } from 'react'; - -type Props = React.PropsWithChildren; - -export const ReactVTable: FC = props => { - const { type, option, height = '100%', style, ...restProps } = props; - const containerRef = useRef(null); - - useEffect(() => { - if (containerRef.current) { - option.container = containerRef.current; - new ListTable(option); - } - }, [option, type]); - - return ( -
- ); -}; diff --git a/packages/react-vtable/src/tables/base-table.tsx b/packages/react-vtable/src/tables/base-table.tsx index afbf60054..0aa5c4525 100644 --- a/packages/react-vtable/src/tables/base-table.tsx +++ b/packages/react-vtable/src/tables/base-table.tsx @@ -5,7 +5,7 @@ import type { ContainerProps } from '../containers/withContainer'; import withContainer from '../containers/withContainer'; import type { TableContextType } from '../context/table'; import RootTableContext from '../context/table'; -import { isEqual, pickWithout } from '@visactor/vutils'; +import { isEqual, isNil, pickWithout } from '@visactor/vutils'; import { toArray } from '../util'; import { REACT_PRIVATE_PROPS } from '../constants'; import type { IMarkElement } from '../components'; @@ -35,7 +35,7 @@ export interface BaseTableProps extends EventsProps { /** option */ option?: any; /** 数据 */ - records?: any; + records?: Record[]; /** 画布宽度 */ width?: number; /** 画布高度 */ @@ -61,14 +61,26 @@ const notOptionKeys = [ 'container' ]; +const getComponentId = (child: React.ReactNode, index: number) => { + const componentName = child && (child as any).type && ((child as any).type.displayName || (child as any).type.name); + return `${componentName}-${index}`; +}; + const parseOptionFromChildren = (props: Props) => { const optionFromChildren: Omit = {}; - toArray(props.children).map(child => { + toArray(props.children).map((child, index) => { const parseOption = child && (child as any).type && (child as any).type.parseOption; if (parseOption && (child as any).props) { - const optionResult = parseOption((child as any).props); + const childProps = isNil((child as any).props.componentId) + ? { + ...(child as any).props, + componentId: getComponentId(child, index) + } + : (child as any).props; + + const optionResult = parseOption(childProps); if (optionResult.isSingle) { optionFromChildren[optionResult.optionName] = optionResult.option; @@ -87,9 +99,7 @@ const parseOptionFromChildren = (props: Props) => { const BaseTable: React.FC = React.forwardRef((props, ref) => { const [updateId, setUpdateId] = useState(0); - const tableContext = useRef({ - // optionFromChildren: {} - }); + const tableContext = useRef({}); useImperativeHandle(ref, () => tableContext.current?.table); const hasOption = !!props.option; const hasRecords = !!props.records; @@ -132,6 +142,7 @@ const BaseTable: React.FC = React.forwardRef((props, ref) => { vtable = new VTable.ListTable(props.container, parseOption(props)); } tableContext.current = { ...tableContext.current, table: vtable }; + isUnmount.current = false; }, [parseOption] ); @@ -171,7 +182,7 @@ const BaseTable: React.FC = React.forwardRef((props, ref) => { createTable(props); renderTable(); - bindEventsToTable(tableContext.current.table, props, null, TABLE_EVENTS); + // bindEventsToTable(tableContext.current.table, props, null, TABLE_EVENTS); // tableContext.current = { // ...tableContext.current, // isChildrenUpdated: false @@ -191,7 +202,7 @@ const BaseTable: React.FC = React.forwardRef((props, ref) => { !isEqual(eventsBinded.current.records, props.records, { skipFunction: skipFunctionDiff }) ) { eventsBinded.current = props; - tableContext.current.table.setRecords(props.records, { + tableContext.current.table.setRecords(props.records as any[], { restoreHierarchyState: props.option.restoreHierarchyState }); handleTableRender(); @@ -233,6 +244,7 @@ const BaseTable: React.FC = React.forwardRef((props, ref) => { tableContext.current = null; } } + eventsBinded.current = null; isUnmount.current = true; }; }, []); @@ -244,9 +256,11 @@ const BaseTable: React.FC = React.forwardRef((props, ref) => { return; } - const componentName = - child && (child as any).type && ((child as any).type.displayName || (child as any).type.name); - const childId = `${componentName}-${index}`; + const childId = getComponentId(child, index); + + // const componentName = + // child && (child as any).type && ((child as any).type.displayName || (child as any).type.name); + // const childId = `${componentName}-${index}`; return ( //