fix: fix event bind in react-vtable

packages/react-vtable/.eslintrc.js

@@ -18,6 +18,9 @@ module.exports = {
       }
     }
   ],
+  globals: {
+    __VERSION__: 'readonly'
+  },
   rules: {
     'prettier/prettier': ['warn'],
     // 强制使用 Unix 换行符： \n

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;

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 (
+    <div>
+      <button
+        onClick={() => {
+          setTranspose(v => !v);
+        }}
+      >
+        transpose
+      </button>
+      <button
+        onClick={() => {
+          console.log('button transpose', transpose);
+        }}
+      >
+        get transpose
+      </button>
+      <ListTable
+        option={option}
+        height={'500px'}
+        onClickCell={() => {
+          console.log('onClickCell transpose', transpose);
+        }}
+      />
+    </div>
+  );
+};
+
+export default App;

packages/react-vtable/src/eventsUtils.ts

@@ -125,7 +125,7 @@ export const findEventProps = <T extends EventsProps>(
   const result: EventsProps = {};
 
   Object.keys(props).forEach(key => {
-    if (supportedEvents[key]) {
+    if (supportedEvents[key] && props[key]) {
       result[key] = props[key];
     }
   });

packages/react-vtable/src/global.d.ts

@@ -0,0 +1 @@
+declare const __VERSION__: string;

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

packages/react-vtable/src/index_old.tsx

@@ -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<any>;
-
-export const ReactVTable: FC<Props> = props => {
-  const { type, option, height = '100%', style, ...restProps } = props;
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (containerRef.current) {
-      option.container = containerRef.current;
-      new ListTable(option);
-    }
-  }, [option, type]);
-
-  return (
-    <div
-      style={{
-        ...style,
-        height
-      }}
-      {...restProps}
-      ref={containerRef}
-      id="react-VTable"
-    />
-  );
-};

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<string, unknown>[];
   /** 画布宽度 */
   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<IOption, 'type' | 'data' | 'width' | 'height'> = {};
 
-  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<Props> = React.forwardRef((props, ref) => {
   const [updateId, setUpdateId] = useState<number>(0);
-  const tableContext = useRef<TableContextType>({
-    // optionFromChildren: {}
-  });
+  const tableContext = useRef<TableContextType>({});
   useImperativeHandle(ref, () => tableContext.current?.table);
   const hasOption = !!props.option;
   const hasRecords = !!props.records;
@@ -132,6 +142,7 @@ const BaseTable: React.FC<Props> = 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<Props> = 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<Props> = 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<Props> = React.forwardRef((props, ref) => {
           tableContext.current = null;
         }
       }
+      eventsBinded.current = null;
       isUnmount.current = true;
     };
   }, []);
@@ -244,9 +256,11 @@ const BaseTable: React.FC<Props> = 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 (
           // <React.Fragment key={(child as any)?.props?.id ?? (child as any)?.id ?? `child-${index}`}>