@visactor/react-vtable 1.5.2-alpha.1 → 1.5.3-alpha.0

package/README.md

@@ -43,19 +43,19 @@ const option = {
   header: [
     {
       field: "0",
-      caption: "name",
+      title: "name",
     },
     {
       field: "1",
-      caption: "age",
+      title: "age",
     },
     {
       field: "2",
-      caption: "gender",
+      title: "gender",
     },
     {
       field: "3",
-      caption: "hobby",
+      title: "hobby",
     },
   ],
   records: new Array(1000).fill(["John", 18, "male", "🏀"]),

package/cjs/components/base-component.d.ts

@@ -5,7 +5,7 @@ export interface BaseComponentProps {
 }
 type ComponentProps = BaseComponentProps & {
     updateId?: number;
-    componentId?: number;
+    componentId?: string;
     componentIndex?: number;
 };
 export declare const createComponent: <T extends ComponentProps>(componentName: string, optionName: string, supportedEvents?: Record<string, string> | null, isSingle?: boolean) => React.FC<T>;

package/cjs/components/base-component.js

@@ -34,7 +34,7 @@ Object.defineProperty(exports, "__esModule", {
 }), exports.createComponent = void 0;
 
 const react_1 = __importStar(require("react")), vutils_1 = require("@visactor/vutils"), table_1 = __importDefault(require("../context/table")), eventsUtils_1 = require("../eventsUtils"), custom_layout_1 = require("./custom/custom-layout"), createComponent = (componentName, optionName, supportedEvents, isSingle) => {
-    const ignoreKeys = [ "id", "updateId", "componentId", "componentIndex", "children" ], notOptionKeys = supportedEvents ? Object.keys(supportedEvents).concat(ignoreKeys) : ignoreKeys, Comp = props => {
+    const ignoreKeys = [ "id", "updateId", "componentIndex", "children" ], notOptionKeys = supportedEvents ? Object.keys(supportedEvents).concat(ignoreKeys) : ignoreKeys, Comp = props => {
         const context = (0, react_1.useContext)(table_1.default), eventsBinded = react_1.default.useRef(null), updateId = react_1.default.useRef(props.updateId);
         if (props.updateId !== updateId.current) {
             updateId.current = props.updateId;
@@ -42,17 +42,14 @@ const react_1 = __importStar(require("react")), vutils_1 = require("@visactor/vu
         }
         return (0, react_1.useEffect)((() => () => {
             supportedEvents && (0, eventsUtils_1.bindEventsToTable)(context.table, null, eventsBinded.current, supportedEvents);
-        }), []), props.children ? react_1.default.Children.map(props.children, (child => react_1.default.createElement(custom_layout_1.CustomLayout, {
-            componentIndex: props.componentIndex
-        }, child))) : null;
+        }), []), parseCustomChildren(props.children, props.componentId);
     };
     return Comp.displayName = componentName, Comp.parseOption = props => {
         const newComponentOption = (0, vutils_1.pickWithout)(props, notOptionKeys);
         if (props.children) {
             const {children: children} = props;
-            react_1.default.Children.map(children, (child => {
-                "custom-layout" === child.props.role && (newComponentOption.customLayout = "react-custom-layout"), 
-                "header-custom-layout" === child.props.role && (newComponentOption.headerCustomLayout = "react-custom-layout");
+            react_1.default.Children.map(children, ((child, index) => {
+                parseChild(child, props, newComponentOption, notOptionKeys, props.componentId + "-" + index);
             }));
         }
         return {
@@ -63,4 +60,27 @@ const react_1 = __importStar(require("react")), vutils_1 = require("@visactor/vu
     }, Comp;
 };
 
+function parseChild(child, componentProps, newComponentOption, notOptionKeys, componentId) {
+    if ("custom-layout" === child.props.role && (newComponentOption.customLayout = "react-custom-layout", 
+    newComponentOption.customLayoutComponentId = componentId), "header-custom-layout" === child.props.role && (newComponentOption.headerCustomLayout = "react-custom-layout", 
+    newComponentOption.headerCustomLayoutComponentId = componentId), "ListColumn" === child.type.displayName) {
+        newComponentOption.columns || (newComponentOption.columns = []);
+        const childOption = (0, vutils_1.pickWithout)(child.props, notOptionKeys);
+        newComponentOption.columns.push(childOption), childOption.componentId = componentId, 
+        child.props.children && react_1.default.Children.map(child.props.children, ((child, index) => {
+            parseChild(child, componentProps, childOption, notOptionKeys, componentId + "-" + index);
+        }));
+    }
+}
+
+function parseCustomChildren(children, componentId) {
+    return isReactElement(children) || Array.isArray(children) ? react_1.default.Children.map(children, ((child, index) => child.props.children ? parseCustomChildren(child.props.children, componentId + "-" + index) : "custom-layout" === child.props.role || "header-custom-layout" === child.props.role ? react_1.default.createElement(custom_layout_1.CustomLayout, {
+        componentId: componentId
+    }, child) : null)) : null;
+}
+
+function isReactElement(obj) {
+    return obj && obj.$$typeof === Symbol.for("react.element");
+}
+
 exports.createComponent = createComponent;

package/cjs/components/base-component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/base-component.tsx"],"names":[],"mappings":"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","file":"base-component.js","sourcesContent":["import type { ReactElement } from 'react';\nimport React, { useContext, useEffect } from 'react';\nimport { isEqual, isNil, pickWithout } from '@visactor/vutils';\n\nimport type { TableContextType } from '../context/table';\nimport RootTableContext from '../context/table';\nimport { bindEventsToTable } from '../eventsUtils';\nimport { uid } from '../util';\nimport { CustomLayout } from './custom/custom-layout';\n\nexport interface BaseComponentProps {\n  id?: string | number;\n  children?: React.ReactNode;\n}\n\ntype ComponentProps = BaseComponentProps & { updateId?: number; componentId?: number; componentIndex?: number };\n\nexport const createComponent = <T extends ComponentProps>(\n  componentName: string,\n  optionName: string,\n  supportedEvents?: Record<string, string> | null,\n  isSingle?: boolean\n) => {\n  const ignoreKeys = ['id', 'updateId', 'componentId', 'componentIndex', 'children'];\n  const notOptionKeys = supportedEvents ? Object.keys(supportedEvents).concat(ignoreKeys) : ignoreKeys;\n\n  const Comp: React.FC<T> = (props: T) => {\n    const context = useContext(RootTableContext);\n    // const id = React.useRef<string | number>(isNil(props.id) ? uid(optionName) : props.id);\n\n    const eventsBinded = React.useRef<T>(null);\n    const updateId = React.useRef<number>(props.updateId);\n    // const componentOption = React.useRef<Partial<T>>();\n\n    if (props.updateId !== updateId.current) {\n      // update triggered by table when table is rendered\n      updateId.current = props.updateId;\n\n      // rebind events after table render\n      const hasPrevEventsBinded = supportedEvents\n        ? bindEventsToTable(context.table, props, eventsBinded.current, supportedEvents)\n        : false;\n      if (hasPrevEventsBinded) {\n        eventsBinded.current = props;\n      }\n      // } else {\n      //   const newComponentOption: Partial<T> = pickWithout<T>(props, notOptionKeys);\n\n      //   if (!isEqual(newComponentOption, componentOption.current)) {\n      //     componentOption.current = newComponentOption;\n      //     updateToContext(context, id.current, optionName, isSingle, newComponentOption);\n      //   }\n    }\n\n    useEffect(() => {\n      return () => {\n        if (supportedEvents) {\n          bindEventsToTable(context.table, null, eventsBinded.current, supportedEvents);\n        }\n        // deleteToContext(context, id.current, optionName, isSingle);\n      };\n    }, []);\n\n    // children are all custom layout temply\n    // return props.children\n    //   ? React.cloneElement(props.children as ReactElement, { componentIndex: props.componentIndex })\n    //   : null;\n    if (props.children) {\n      return React.Children.map(props.children as ReactElement, (child: ReactElement) => {\n        return React.createElement(CustomLayout, { componentIndex: props.componentIndex }, child);\n      });\n    }\n    return null;\n  };\n\n  Comp.displayName = componentName;\n\n  (Comp as any).parseOption = (props: T & { updateId?: number; componentId?: string }) => {\n    const newComponentOption: Partial<T> = pickWithout<T>(props, notOptionKeys);\n\n    // deal width customLayout\n    if (props.children) {\n      const { children } = props;\n      React.Children.map(children as ReactElement, (child: ReactElement) => {\n        if (child.props.role === 'custom-layout') {\n          (newComponentOption as any).customLayout = 'react-custom-layout';\n        }\n        if (child.props.role === 'header-custom-layout') {\n          (newComponentOption as any).headerCustomLayout = 'react-custom-layout';\n        }\n      });\n    }\n    // if (props.children && (props.children as React.ReactElement).props.role === 'custom-layout') {\n    //   (newComponentOption as any).customLayout = 'react-custom-layout';\n    // }\n\n    return {\n      option: newComponentOption,\n      optionName,\n      isSingle\n    };\n  };\n\n  return Comp;\n};\n\n// const updateToContext = (\n//   context: TableContextType,\n//   id: string | number,\n//   optionName: string,\n//   isSingle: boolean,\n//   props: Partial<ComponentProps>\n// ) => {\n//   if (!context.optionFromChildren) {\n//     return;\n//   }\n\n//   if (isSingle) {\n//     context.optionFromChildren[optionName] = { ...props };\n//   } else {\n//     if (!context.optionFromChildren[optionName]) {\n//       context.optionFromChildren[optionName] = [];\n//     }\n\n//     const comps = context.optionFromChildren[optionName];\n//     const index = comps.findIndex((entry: any) => entry.id === id);\n\n//     if (index >= 0) {\n//       comps[index] = {\n//         id,\n//         ...props\n//       };\n//     } else {\n//       context.optionFromChildren[optionName].push({\n//         id,\n//         ...props\n//       });\n//     }\n//   }\n//   context.isChildrenUpdated = true;\n// };\n\n// const deleteToContext = (context: TableContextType, id: string | number, optionName: string, isSingle: boolean) => {\n//   if (!context.optionFromChildren) {\n//     return;\n//   }\n\n//   if (isSingle) {\n//     context.optionFromChildren[optionName] = null;\n//   } else {\n//     const comps = context.optionFromChildren[optionName] ?? [];\n//     const index = comps.findIndex((entry: any) => entry.id === id);\n\n//     if (index >= 0) {\n//       const newComps = comps.slice(0, index - 1).concat(comps.slice(index + 1));\n\n//       context.optionFromChildren[optionName] = newComps;\n//       context.isChildrenUpdated = true;\n//     }\n//   }\n// };\n"]}
+{"version":3,"sources":["components/base-component.tsx"],"names":[],"mappings":"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","file":"base-component.js","sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport React, { useContext, useEffect } from 'react';\nimport { isEqual, isNil, pickWithout } from '@visactor/vutils';\n\nimport type { TableContextType } from '../context/table';\nimport RootTableContext from '../context/table';\nimport { bindEventsToTable } from '../eventsUtils';\nimport { uid } from '../util';\nimport { CustomLayout } from './custom/custom-layout';\n\nexport interface BaseComponentProps {\n  id?: string | number;\n  children?: React.ReactNode;\n}\n\ntype ComponentProps = BaseComponentProps & { updateId?: number; componentId?: string; componentIndex?: number };\n\nexport const createComponent = <T extends ComponentProps>(\n  componentName: string,\n  optionName: string,\n  supportedEvents?: Record<string, string> | null,\n  isSingle?: boolean\n) => {\n  const ignoreKeys = ['id', 'updateId', 'componentIndex', 'children'];\n  const notOptionKeys = supportedEvents ? Object.keys(supportedEvents).concat(ignoreKeys) : ignoreKeys;\n\n  const Comp: React.FC<T> = (props: T) => {\n    const context = useContext(RootTableContext);\n    // const id = React.useRef<string | number>(isNil(props.id) ? uid(optionName) : props.id);\n\n    const eventsBinded = React.useRef<T>(null);\n    const updateId = React.useRef<number>(props.updateId);\n    // const componentOption = React.useRef<Partial<T>>();\n\n    if (props.updateId !== updateId.current) {\n      // update triggered by table when table is rendered\n      updateId.current = props.updateId;\n\n      // rebind events after table render\n      const hasPrevEventsBinded = supportedEvents\n        ? bindEventsToTable(context.table, props, eventsBinded.current, supportedEvents)\n        : false;\n      if (hasPrevEventsBinded) {\n        eventsBinded.current = props;\n      }\n      // } else {\n      //   const newComponentOption: Partial<T> = pickWithout<T>(props, notOptionKeys);\n\n      //   if (!isEqual(newComponentOption, componentOption.current)) {\n      //     componentOption.current = newComponentOption;\n      //     updateToContext(context, id.current, optionName, isSingle, newComponentOption);\n      //   }\n    }\n\n    useEffect(() => {\n      return () => {\n        if (supportedEvents) {\n          bindEventsToTable(context.table, null, eventsBinded.current, supportedEvents);\n        }\n        // deleteToContext(context, id.current, optionName, isSingle);\n      };\n    }, []);\n\n    // children are all custom layout temply\n    // return props.children\n    //   ? React.cloneElement(props.children as ReactElement, { componentIndex: props.componentIndex })\n    //   : null;\n    // if (props.children) {\n    //   return React.Children.map(props.children as ReactElement, (child: ReactElement) => {\n    //     if (child.props.role === 'custom-layout' || child.props.role === 'header-custom-layout') {\n    //       return React.createElement(CustomLayout, { componentId: props.componentId }, child);\n    //     }\n    //   });\n    // }\n    return parseCustomChildren(props.children, props.componentId);\n  };\n\n  Comp.displayName = componentName;\n\n  (Comp as any).parseOption = (props: T & { updateId?: number; componentId?: string }) => {\n    const newComponentOption: Partial<T> = pickWithout<T>(props, notOptionKeys);\n    // deal width customLayout\n    if (props.children) {\n      const { children } = props;\n      React.Children.map(children as ReactElement, (child: ReactElement, index) => {\n        parseChild(child, props, newComponentOption, notOptionKeys, props.componentId + '-' + index);\n      });\n    }\n    // if (props.children && (props.children as React.ReactElement).props.role === 'custom-layout') {\n    //   (newComponentOption as any).customLayout = 'react-custom-layout';\n    // }\n\n    return {\n      option: newComponentOption,\n      optionName,\n      isSingle\n    };\n  };\n\n  return Comp;\n};\n\nfunction parseChild(\n  child: ReactElement,\n  componentProps: any,\n  newComponentOption: any,\n  notOptionKeys: string[],\n  componentId: string\n) {\n  if (child.props.role === 'custom-layout') {\n    (newComponentOption as any).customLayout = 'react-custom-layout';\n    (newComponentOption as any).customLayoutComponentId = componentId;\n  }\n  if (child.props.role === 'header-custom-layout') {\n    (newComponentOption as any).headerCustomLayout = 'react-custom-layout';\n    (newComponentOption as any).headerCustomLayoutComponentId = componentId;\n  }\n  if ((child.type as any).displayName === 'ListColumn') {\n    if (!newComponentOption.columns) {\n      newComponentOption.columns = [];\n    }\n    const childOption = pickWithout(child.props, notOptionKeys);\n    newComponentOption.columns.push(childOption);\n    childOption.componentId = componentId;\n    if (child.props.children) {\n      React.Children.map(child.props.children as ReactElement, (child: ReactElement, index) => {\n        parseChild(child, componentProps, childOption, notOptionKeys, componentId + '-' + index);\n      });\n    }\n  }\n}\n\nfunction parseCustomChildren(children: ReactNode, componentId: string): ReactNode | undefined {\n  if (isReactElement(children) || Array.isArray(children)) {\n    return React.Children.map(children as ReactElement, (child: ReactElement, index) => {\n      if (child.props.children) {\n        return parseCustomChildren(child.props.children as ReactElement, componentId + '-' + index);\n      } else if (child.props.role === 'custom-layout' || child.props.role === 'header-custom-layout') {\n        return React.createElement(CustomLayout, { componentId: componentId }, child);\n      }\n      return null;\n    });\n  }\n  return null;\n}\n\nfunction isReactElement(obj: any) {\n  return obj && obj.$$typeof === Symbol.for('react.element');\n}\n"]}

package/cjs/components/custom/custom-layout.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 import type { CustomRenderFunctionArg } from '@visactor/vtable/src/ts-types';
 type CustomLayoutProps = {
-    componentIndex?: number;
+    componentId: string;
 };
 export type CustomLayoutFunctionArg = Partial<CustomRenderFunctionArg> & {
     role?: 'custom-layout' | 'header-custom-layout';
+    renderDefault?: boolean;
 };
 export declare const CustomLayout: React.FC<CustomLayoutProps>;
 export {};

package/cjs/components/custom/custom-layout.js

@@ -34,7 +34,7 @@ Object.defineProperty(exports, "__esModule", {
 }), exports.CustomLayout = void 0;
 
 const react_1 = __importStar(require("react")), table_1 = __importDefault(require("../../context/table")), vtable_1 = require("@visactor/vtable"), reconciler_1 = require("./reconciler"), constants_1 = require("react-reconciler/constants"), {Group: Group} = vtable_1.VRender, CustomLayout = (props, ref) => {
-    const {componentIndex: componentIndex, children: children} = props;
+    const {componentId: componentId, children: children} = props;
     if (!(0, react_1.isValidElement)(children)) return null;
     const context = (0, react_1.useContext)(table_1.default), {table: table} = context, isHeaderCustomLayout = "header-custom-layout" === children.props.role, container = (0, 
     react_1.useRef)(new Map), createGraphic = (0, react_1.useCallback)((args => {
@@ -50,7 +50,7 @@ const react_1 = __importStar(require("react")), table_1 = __importDefault(requir
         }
         return {
             rootContainer: group,
-            renderDefault: !1
+            renderDefault: !!children.props.renderDefault
         };
     }), [ children ]), removeContainer = (0, react_1.useCallback)(((col, row) => {
         const key = `${col}-${row}`;
@@ -61,9 +61,9 @@ const react_1 = __importStar(require("react")), table_1 = __importDefault(requir
     }), []);
     return (0, react_1.useLayoutEffect)((() => () => {}), []), (0, react_1.useLayoutEffect)((() => {
         var _a, _b, _c, _d;
-        null == table || table.checkReactCustomLayout(), table && !(null === (_a = table.reactCustomLayout) || void 0 === _a ? void 0 : _a.hasReactCreateGraphic(componentIndex, isHeaderCustomLayout)) ? (null === (_b = table.reactCustomLayout) || void 0 === _b || _b.setReactCreateGraphic(componentIndex, createGraphic, isHeaderCustomLayout), 
-        null === (_c = table.reactCustomLayout) || void 0 === _c || _c.setReactRemoveGraphic(componentIndex, removeContainer, isHeaderCustomLayout), 
-        null === (_d = table.reactCustomLayout) || void 0 === _d || _d.updateCustomCell(componentIndex, isHeaderCustomLayout)) : table && container.current.forEach(((value, key) => {
+        null == table || table.checkReactCustomLayout(), table && !(null === (_a = table.reactCustomLayout) || void 0 === _a ? void 0 : _a.hasReactCreateGraphic(componentId, isHeaderCustomLayout)) ? (null === (_b = table.reactCustomLayout) || void 0 === _b || _b.setReactCreateGraphic(componentId, createGraphic, isHeaderCustomLayout), 
+        null === (_c = table.reactCustomLayout) || void 0 === _c || _c.setReactRemoveGraphic(componentId, removeContainer, isHeaderCustomLayout), 
+        null === (_d = table.reactCustomLayout) || void 0 === _d || _d.updateCustomCell(componentId, isHeaderCustomLayout)) : table && container.current.forEach(((value, key) => {
             const [col, row] = key.split("-").map(Number), width = table.getColWidth(col), height = table.getRowHeight(row), currentContainer = value, args = {
                 col: col,
                 row: row,

package/cjs/components/custom/custom-layout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/custom/custom-layout.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,+CAAgG;AAChG,gEAAmD;AACnD,6CAA2C;AAG3C,6CAA0C;AAC1C,0DAAwD;AAExD,MAAM,EAAE,KAAK,EAAE,GAAG,gBAAO,CAAC;AAOnB,MAAM,YAAY,GAAgC,CAAC,KAA2C,EAAE,GAAG,EAAE,EAAE;IAC5G,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC3C,IAAI,CAAC,IAAA,sBAAc,EAAC,QAAQ,CAAC,EAAE;QAC7B,OAAO,IAAI,CAAC;KACb;IACD,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,eAAgB,CAAC,CAAC;IAC7C,MAAM,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC;IAE1B,MAAM,oBAAoB,GAAG,QAAQ,CAAC,KAAK,CAAC,IAAI,KAAK,sBAAsB,CAAC;IAG5E,MAAM,SAAS,GAAG,IAAA,cAAM,EAAyB,IAAI,GAAG,EAAE,CAAC,CAAC;IAG5D,MAAM,aAAa,GAAqB,IAAA,mBAAW,EACjD,IAAI,CAAC,EAAE;QACL,MAAM,GAAG,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;QACtC,IAAI,KAAK,CAAC;QACV,IAAI,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;YAC9B,MAAM,gBAAgB,GAAG,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;YAEpD,yBAAyB,CAAC,QAAQ,EAAE,gBAAgB,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;YACnE,KAAK,GAAG,gBAAgB,CAAC,aAAa,CAAC;SACxC;aAAM;YACL,KAAK,GAAG,IAAI,KAAK,CAAC,EAAE,CAAC,CAAC;YACtB,MAAM,gBAAgB,GAAG,uBAAU,CAAC,eAAe,CAAC,KAAK,EAAE,sBAAU,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;YAC/G,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE,gBAAgB,CAAC,CAAC;YAC7C,yBAAyB,CAAC,QAAQ,EAAE,gBAAgB,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;SAGpE;QAED,OAAO;YACL,aAAa,EAAE,KAAK;YACpB,aAAa,EAAE,KAAK;SACrB,CAAC;IACJ,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,eAAe,GAAG,IAAA,mBAAW,EAAC,CAAC,GAAW,EAAE,GAAW,EAAE,EAAE;QAC/D,MAAM,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,EAAE,CAAC;QAC5B,IAAI,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;YAC9B,MAAM,gBAAgB,GAAG,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;YACpD,uBAAU,CAAC,eAAe,CAAC,IAAI,EAAE,gBAAgB,EAAE,IAAI,CAAC,CAAC;YAEzD,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;SAC/B;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAA,uBAAe,EAAC,GAAG,EAAE;QAGnB,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QAGlC,OAAO,GAAG,EAAE;YAEV,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QACvC,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAA,uBAAe,EAAC,GAAG,EAAE;;QAGnB,OAAO,CAAC,GAAG,CAAC,cAAc,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QAE1C,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,sBAAsB,EAAE,CAAC;QAChC,IAAI,KAAK,IAAI,CAAC,CAAA,MAAA,KAAK,CAAC,iBAAiB,0CAAE,qBAAqB,CAAC,cAAc,EAAE,oBAAoB,CAAC,CAAA,EAAE;YAClG,MAAA,KAAK,CAAC,iBAAiB,0CAAE,qBAAqB,CAC5C,cAAc,EACd,aAAa,EAEb,oBAAoB,CACrB,CAAC;YACF,MAAA,KAAK,CAAC,iBAAiB,0CAAE,qBAAqB,CAAC,cAAc,EAAE,eAAe,EAAE,oBAAoB,CAAC,CAAC;YACtG,MAAA,KAAK,CAAC,iBAAiB,0CAAE,gBAAgB,CAAC,cAAc,EAAE,oBAAoB,CAAC,CAAC;SACjF;aAAM,IAAI,KAAK,EAAE;YAEhB,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;gBACvC,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;gBAC9C,MAAM,KAAK,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;gBACrC,MAAM,MAAM,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;gBACvC,MAAM,gBAAgB,GAAG,KAAK,CAAC;gBAC/B,MAAM,IAAI,GAAG;oBACX,GAAG;oBACH,GAAG;oBACH,SAAS,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,EAAE,GAAG,CAAC;oBAC7C,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,GAAG,CAAC,IAAI,EAAE;oBACzC,IAAI,EAAE;wBACJ,IAAI,EAAE,CAAC;wBACP,GAAG,EAAE,CAAC;wBACN,KAAK,EAAE,KAAK;wBACZ,MAAM,EAAE,MAAM;wBACd,KAAK;wBACL,MAAM;qBACP;oBACD,KAAK;iBACN,CAAC;gBAEF,MAAM,KAAK,GAAG,gBAAgB,CAAC,aAAa,CAAC;gBAC7C,yBAAyB,CAAC,QAAQ,EAAE,gBAAgB,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;gBAEnE,KAAK,CAAC,UAAU,CAAC,eAAe,EAAE,CAAC;YACrC,CAAC,CAAC,CAAC;SACJ;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AA7GW,QAAA,YAAY,gBA6GvB;AAEF,SAAS,yBAAyB,CAAC,QAAQ,EAAE,gBAAgB,EAAE,KAAK,EAAE,IAAI;IACxE,uBAAU,CAAC,eAAe,CAAC,eAAK,CAAC,YAAY,CAAC,QAAQ,oBAAO,IAAI,EAAG,EAAE,gBAAgB,EAAE,IAAI,CAAC,CAAC;AAUhG,CAAC;AAED,SAAS,cAAc,CAAC,GAAG;IACzB,OAAO,GAAG,IAAI,GAAG,CAAC,QAAQ,KAAK,MAAM,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;AAC7D,CAAC","file":"custom-layout.js","sourcesContent":["/* eslint-disable react-hooks/rules-of-hooks */\nimport type { PropsWithChildren } from 'react';\nimport React, { isValidElement, useCallback, useContext, useLayoutEffect, useRef } from 'react';\nimport RootTableContext from '../../context/table';\nimport { VRender } from '@visactor/vtable';\nimport type { ICustomLayoutFuc, CustomRenderFunctionArg } from '@visactor/vtable/src/ts-types';\nimport type { FiberRoot } from 'react-reconciler';\nimport { reconcilor } from './reconciler';\nimport { LegacyRoot } from 'react-reconciler/constants';\n\nconst { Group } = VRender;\ntype CustomLayoutProps = { componentIndex?: number };\n\nexport type CustomLayoutFunctionArg = Partial<CustomRenderFunctionArg> & {\n  role?: 'custom-layout' | 'header-custom-layout';\n};\n\nexport const CustomLayout: React.FC<CustomLayoutProps> = (props: PropsWithChildren<CustomLayoutProps>, ref) => {\n  const { componentIndex, children } = props;\n  if (!isValidElement(children)) {\n    return null;\n  }\n  const context = useContext(RootTableContext);\n  const { table } = context;\n\n  const isHeaderCustomLayout = children.props.role === 'header-custom-layout';\n\n  // react customLayout component container cache\n  const container = useRef<Map<string, FiberRoot>>(new Map());\n\n  // customLayout function for vtable\n  const createGraphic: ICustomLayoutFuc = useCallback(\n    args => {\n      const key = `${args.col}-${args.row}`;\n      let group;\n      if (container.current.has(key)) {\n        const currentContainer = container.current.get(key);\n        // reconcilor.updateContainer(React.cloneElement(children, { ...args }), currentContainer, null);\n        reconcilorUpdateContainer(children, currentContainer, group, args);\n        group = currentContainer.containerInfo;\n      } else {\n        group = new Group({});\n        const currentContainer = reconcilor.createContainer(group, LegacyRoot, null, null, null, 'custom', null, null);\n        container.current.set(key, currentContainer);\n        reconcilorUpdateContainer(children, currentContainer, group, args);\n        // const ele = React.cloneElement(children, { ...args });\n        // reconcilor.updateContainer(ele, currentContainer, null);\n      }\n\n      return {\n        rootContainer: group,\n        renderDefault: false\n      };\n    },\n    [children]\n  );\n\n  const removeContainer = useCallback((col: number, row: number) => {\n    const key = `${col}-${row}`;\n    if (container.current.has(key)) {\n      const currentContainer = container.current.get(key);\n      reconcilor.updateContainer(null, currentContainer, null);\n      // group = currentContainer.containerInfo;\n      container.current.delete(key);\n    }\n  }, []);\n\n  useLayoutEffect(() => {\n    // init and release\n    // eslint-disable-next-line no-undef\n    console.log('init', props, table);\n    // table && (table._reactCreateGraphic = createGraphic); // never go to here\n    // table?.renderWithRecreateCells();\n    return () => {\n      // eslint-disable-next-line no-undef\n      console.log('release', props, table);\n    };\n  }, []);\n\n  useLayoutEffect(() => {\n    // update props\n    // eslint-disable-next-line no-undef\n    console.log('update props', props, table);\n\n    table?.checkReactCustomLayout(); // init reactCustomLayout component\n    if (table && !table.reactCustomLayout?.hasReactCreateGraphic(componentIndex, isHeaderCustomLayout)) {\n      table.reactCustomLayout?.setReactCreateGraphic(\n        componentIndex,\n        createGraphic,\n        // container.current,\n        isHeaderCustomLayout\n      ); // set customLayout function\n      table.reactCustomLayout?.setReactRemoveGraphic(componentIndex, removeContainer, isHeaderCustomLayout); // set customLayout function\n      table.reactCustomLayout?.updateCustomCell(componentIndex, isHeaderCustomLayout); // update cell content\n    } else if (table) {\n      // update all container\n      container.current.forEach((value, key) => {\n        const [col, row] = key.split('-').map(Number);\n        const width = table.getColWidth(col); // to be fixed: may be merge cell\n        const height = table.getRowHeight(row); // to be fixed: may be merge cell\n        const currentContainer = value;\n        const args = {\n          col,\n          row,\n          dataValue: table.getCellOriginValue(col, row),\n          value: table.getCellValue(col, row) || '',\n          rect: {\n            left: 0,\n            top: 0,\n            right: width,\n            bottom: height,\n            width,\n            height\n          },\n          table\n        };\n        // update element in container\n        const group = currentContainer.containerInfo;\n        reconcilorUpdateContainer(children, currentContainer, group, args);\n        // reconcilor.updateContainer(React.cloneElement(children, { ...args }), currentContainer, null);\n        table.scenegraph.updateNextFrame();\n      });\n    }\n  });\n\n  return null;\n};\n\nfunction reconcilorUpdateContainer(children, currentContainer, group, args) {\n  reconcilor.updateContainer(React.cloneElement(children, { ...args }), currentContainer, null);\n  // group = group.firstChild;\n  // if (isReactElement(group.attribute.html?.dom)) {\n  //   const div = document.createElement('div');\n  //   const root = ReactDOM.createRoot(div as HTMLElement);\n  //   root.render(group.attribute.html.dom);\n  //   group.attribute.html.dom = div;\n  //   // debugger;\n  //   // group.html.dom = div;\n  // }\n}\n\nfunction isReactElement(obj) {\n  return obj && obj.$$typeof === Symbol.for('react.element');\n}\n"]}
+{"version":3,"sources":["components/custom/custom-layout.tsx"],"names":[],"mappings":"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","file":"custom-layout.js","sourcesContent":["/* eslint-disable react-hooks/rules-of-hooks */\nimport type { PropsWithChildren, ReactElement } from 'react';\nimport React, { isValidElement, useCallback, useContext, useLayoutEffect, useRef } from 'react';\nimport RootTableContext from '../../context/table';\nimport { VRender } from '@visactor/vtable';\nimport type { ICustomLayoutFuc, CustomRenderFunctionArg } from '@visactor/vtable/src/ts-types';\nimport type { FiberRoot } from 'react-reconciler';\nimport { reconcilor } from './reconciler';\nimport { LegacyRoot } from 'react-reconciler/constants';\n\nconst { Group } = VRender;\ntype CustomLayoutProps = { componentId: string };\n\nexport type CustomLayoutFunctionArg = Partial<CustomRenderFunctionArg> & {\n  role?: 'custom-layout' | 'header-custom-layout';\n  renderDefault?: boolean;\n};\n\nexport const CustomLayout: React.FC<CustomLayoutProps> = (props: PropsWithChildren<CustomLayoutProps>, ref) => {\n  const { componentId, children } = props;\n  if (!isValidElement(children)) {\n    return null;\n  }\n  const context = useContext(RootTableContext);\n  const { table } = context;\n\n  const isHeaderCustomLayout = children.props.role === 'header-custom-layout';\n\n  // react customLayout component container cache\n  const container = useRef<Map<string, FiberRoot>>(new Map());\n\n  // customLayout function for vtable\n  const createGraphic: ICustomLayoutFuc = useCallback(\n    args => {\n      const key = `${args.col}-${args.row}`;\n      let group;\n      if (container.current.has(key)) {\n        const currentContainer = container.current.get(key);\n        // reconcilor.updateContainer(React.cloneElement(children, { ...args }), currentContainer, null);\n        reconcilorUpdateContainer(children, currentContainer, group, args);\n        group = currentContainer.containerInfo;\n      } else {\n        group = new Group({});\n        const currentContainer = reconcilor.createContainer(group, LegacyRoot, null, null, null, 'custom', null, null);\n        container.current.set(key, currentContainer);\n        reconcilorUpdateContainer(children, currentContainer, group, args);\n        // const ele = React.cloneElement(children, { ...args });\n        // reconcilor.updateContainer(ele, currentContainer, null);\n      }\n\n      return {\n        rootContainer: group,\n        renderDefault: !!children.props.renderDefault\n      };\n    },\n    [children]\n  );\n\n  const removeContainer = useCallback((col: number, row: number) => {\n    const key = `${col}-${row}`;\n    if (container.current.has(key)) {\n      const currentContainer = container.current.get(key);\n      reconcilor.updateContainer(null, currentContainer, null);\n      // group = currentContainer.containerInfo;\n      container.current.delete(key);\n    }\n  }, []);\n\n  useLayoutEffect(() => {\n    // init and release\n    // eslint-disable-next-line no-undef\n    console.log('init', props, table);\n    // table && (table._reactCreateGraphic = createGraphic); // never go to here\n    // table?.renderWithRecreateCells();\n    return () => {\n      // eslint-disable-next-line no-undef\n      console.log('release', props, table);\n    };\n  }, []);\n\n  useLayoutEffect(() => {\n    // update props\n    // eslint-disable-next-line no-undef\n    console.log('update props', props, table);\n\n    table?.checkReactCustomLayout(); // init reactCustomLayout component\n    if (table && !table.reactCustomLayout?.hasReactCreateGraphic(componentId, isHeaderCustomLayout)) {\n      table.reactCustomLayout?.setReactCreateGraphic(\n        componentId,\n        createGraphic,\n        // container.current,\n        isHeaderCustomLayout\n      ); // set customLayout function\n      table.reactCustomLayout?.setReactRemoveGraphic(componentId, removeContainer, isHeaderCustomLayout); // set customLayout function\n      table.reactCustomLayout?.updateCustomCell(componentId, isHeaderCustomLayout); // update cell content\n    } else if (table) {\n      // update all container\n      container.current.forEach((value, key) => {\n        const [col, row] = key.split('-').map(Number);\n        const width = table.getColWidth(col); // to be fixed: may be merge cell\n        const height = table.getRowHeight(row); // to be fixed: may be merge cell\n        const currentContainer = value;\n        const args = {\n          col,\n          row,\n          dataValue: table.getCellOriginValue(col, row),\n          value: table.getCellValue(col, row) || '',\n          rect: {\n            left: 0,\n            top: 0,\n            right: width,\n            bottom: height,\n            width,\n            height\n          },\n          table\n        };\n        // update element in container\n        const group = currentContainer.containerInfo;\n        reconcilorUpdateContainer(children, currentContainer, group, args);\n        // reconcilor.updateContainer(React.cloneElement(children, { ...args }), currentContainer, null);\n        table.scenegraph.updateNextFrame();\n      });\n    }\n  });\n\n  return null;\n};\n\nfunction reconcilorUpdateContainer(children: ReactElement, currentContainer: any, group: typeof Group, args: any) {\n  reconcilor.updateContainer(React.cloneElement(children, { ...args }), currentContainer, null);\n  // group = group.firstChild;\n  // if (isReactElement(group.attribute.html?.dom)) {\n  //   const div = document.createElement('div');\n  //   const root = ReactDOM.createRoot(div as HTMLElement);\n  //   root.render(group.attribute.html.dom);\n  //   group.attribute.html.dom = div;\n  //   // debugger;\n  //   // group.html.dom = div;\n  // }\n}\n\nfunction isReactElement(obj) {\n  return obj && obj.$$typeof === Symbol.for('react.element');\n}\n"]}

package/cjs/components/list/list-column.d.ts

@@ -1,4 +1,4 @@
 import type { BaseComponentProps } from '../base-component';
 import type { ColumnDefine } from '@visactor/vtable';
-export type ListColumnProps = ColumnDefine & BaseComponentProps;
+export type ListColumnProps = Omit<ColumnDefine, 'columns'> & BaseComponentProps;
 export declare const ListColumn: import("react").FC<ListColumnProps>;

package/cjs/components/list/list-column.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/list/list-column.tsx"],"names":[],"mappings":";;;AACA,sDAAoD;AAKvC,QAAA,UAAU,GAAG,IAAA,gCAAe,EAAkB,YAAY,EAAE,SAAS,CAAC,CAAC","file":"list-column.js","sourcesContent":["import type { BaseComponentProps } from '../base-component';\nimport { createComponent } from '../base-component';\nimport type { ColumnDefine } from '@visactor/vtable';\n\nexport type ListColumnProps = ColumnDefine & BaseComponentProps;\n\nexport const ListColumn = createComponent<ListColumnProps>('ListColumn', 'columns');\n"]}
+{"version":3,"sources":["components/list/list-column.tsx"],"names":[],"mappings":";;;AAEA,sDAAoD;AAKvC,QAAA,UAAU,GAAG,IAAA,gCAAe,EAAkB,YAAY,EAAE,SAAS,CAAC,CAAC","file":"list-column.js","sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport type { BaseComponentProps } from '../base-component';\nimport { createComponent } from '../base-component';\nimport type { ColumnDefine } from '@visactor/vtable';\n\nexport type ListColumnProps = Omit<ColumnDefine, 'columns'> & BaseComponentProps;\n\nexport const ListColumn = createComponent<ListColumnProps>('ListColumn', 'columns');\n"]}

package/cjs/index.d.ts

@@ -1,4 +1,4 @@
 export * from './tables';
 export * from './components';
 export * from './vtable';
-export declare const version = "1.5.2-alpha.1";
+export declare const version = "1.5.3-alpha.0";

package/cjs/index.js

@@ -18,5 +18,5 @@ var __createBinding = this && this.__createBinding || (Object.create ? function(
 Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.version = void 0, __exportStar(require("./tables"), exports), __exportStar(require("./components"), exports), 
-__exportStar(require("./vtable"), exports), exports.version = "1.5.2-alpha.1";
+__exportStar(require("./vtable"), exports), exports.version = "1.5.3-alpha.0";
 //# sourceMappingURL=index.js.map

package/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,2CAAyB;AACzB,+CAA6B;AAC7B,2CAAyB;AAEZ,QAAA,OAAO,GAAG,eAAe,CAAC","file":"index.js","sourcesContent":["export * from './tables';\nexport * from './components';\nexport * from './vtable';\n\nexport const version = \"1.5.2-alpha.1\";\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,2CAAyB;AACzB,+CAA6B;AAC7B,2CAAyB;AAEZ,QAAA,OAAO,GAAG,eAAe,CAAC","file":"index.js","sourcesContent":["export * from './tables';\nexport * from './components';\nexport * from './vtable';\n\nexport const version = \"1.5.3-alpha.0\";\n"]}

package/dist/react-vtable.js

@@ -13457,7 +13457,7 @@
 
 	const { Group: Group$1 } = VTable.VRender;
 	const CustomLayout = (props, ref) => {
-	    const { componentIndex, children } = props;
+	    const { componentId, children } = props;
 	    if (!reactExports.isValidElement(children)) {
 	        return null;
 	    }
@@ -13481,7 +13481,7 @@
 	        }
 	        return {
 	            rootContainer: group,
-	            renderDefault: false
+	            renderDefault: !!children.props.renderDefault
 	        };
 	    }, [children]);
 	    const removeContainer = reactExports.useCallback((col, row) => {
@@ -13501,10 +13501,10 @@
 	    reactExports.useLayoutEffect(() => {
 	        console.log('update props', props, table);
 	        table?.checkReactCustomLayout();
-	        if (table && !table.reactCustomLayout?.hasReactCreateGraphic(componentIndex, isHeaderCustomLayout)) {
-	            table.reactCustomLayout?.setReactCreateGraphic(componentIndex, createGraphic, isHeaderCustomLayout);
-	            table.reactCustomLayout?.setReactRemoveGraphic(componentIndex, removeContainer, isHeaderCustomLayout);
-	            table.reactCustomLayout?.updateCustomCell(componentIndex, isHeaderCustomLayout);
+	        if (table && !table.reactCustomLayout?.hasReactCreateGraphic(componentId, isHeaderCustomLayout)) {
+	            table.reactCustomLayout?.setReactCreateGraphic(componentId, createGraphic, isHeaderCustomLayout);
+	            table.reactCustomLayout?.setReactRemoveGraphic(componentId, removeContainer, isHeaderCustomLayout);
+	            table.reactCustomLayout?.updateCustomCell(componentId, isHeaderCustomLayout);
 	        }
 	        else if (table) {
 	            container.current.forEach((value, key) => {
@@ -13540,7 +13540,7 @@
 	}
 
 	const createComponent = (componentName, optionName, supportedEvents, isSingle) => {
-	    const ignoreKeys = ['id', 'updateId', 'componentId', 'componentIndex', 'children'];
+	    const ignoreKeys = ['id', 'updateId', 'componentIndex', 'children'];
 	    const notOptionKeys = supportedEvents ? Object.keys(supportedEvents).concat(ignoreKeys) : ignoreKeys;
 	    const Comp = (props) => {
 	        const context = reactExports.useContext(TableContext);
@@ -13562,25 +13562,15 @@
 	                }
 	            };
 	        }, []);
-	        if (props.children) {
-	            return React.Children.map(props.children, (child) => {
-	                return React.createElement(CustomLayout, { componentIndex: props.componentIndex }, child);
-	            });
-	        }
-	        return null;
+	        return parseCustomChildren(props.children, props.componentId);
 	    };
 	    Comp.displayName = componentName;
 	    Comp.parseOption = (props) => {
 	        const newComponentOption = pickWithout(props, notOptionKeys);
 	        if (props.children) {
 	            const { children } = props;
-	            React.Children.map(children, (child) => {
-	                if (child.props.role === 'custom-layout') {
-	                    newComponentOption.customLayout = 'react-custom-layout';
-	                }
-	                if (child.props.role === 'header-custom-layout') {
-	                    newComponentOption.headerCustomLayout = 'react-custom-layout';
-	                }
+	            React.Children.map(children, (child, index) => {
+	                parseChild(child, props, newComponentOption, notOptionKeys, props.componentId + '-' + index);
 	            });
 	        }
 	        return {
@@ -13591,6 +13581,46 @@
 	    };
 	    return Comp;
 	};
+	function parseChild(child, componentProps, newComponentOption, notOptionKeys, componentId) {
+	    if (child.props.role === 'custom-layout') {
+	        newComponentOption.customLayout = 'react-custom-layout';
+	        newComponentOption.customLayoutComponentId = componentId;
+	    }
+	    if (child.props.role === 'header-custom-layout') {
+	        newComponentOption.headerCustomLayout = 'react-custom-layout';
+	        newComponentOption.headerCustomLayoutComponentId = componentId;
+	    }
+	    if (child.type.displayName === 'ListColumn') {
+	        if (!newComponentOption.columns) {
+	            newComponentOption.columns = [];
+	        }
+	        const childOption = pickWithout(child.props, notOptionKeys);
+	        newComponentOption.columns.push(childOption);
+	        childOption.componentId = componentId;
+	        if (child.props.children) {
+	            React.Children.map(child.props.children, (child, index) => {
+	                parseChild(child, componentProps, childOption, notOptionKeys, componentId + '-' + index);
+	            });
+	        }
+	    }
+	}
+	function parseCustomChildren(children, componentId) {
+	    if (isReactElement(children) || Array.isArray(children)) {
+	        return React.Children.map(children, (child, index) => {
+	            if (child.props.children) {
+	                return parseCustomChildren(child.props.children, componentId + '-' + index);
+	            }
+	            else if (child.props.role === 'custom-layout' || child.props.role === 'header-custom-layout') {
+	                return React.createElement(CustomLayout, { componentId: componentId }, child);
+	            }
+	            return null;
+	        });
+	    }
+	    return null;
+	}
+	function isReactElement(obj) {
+	    return obj && obj.$$typeof === Symbol.for('react.element');
+	}
 
 	const ListColumn = createComponent('ListColumn', 'columns');
 
@@ -13718,7 +13748,7 @@
 	const Radio = 'radio';
 	const Checkbox = 'checkbox';
 
-	const version = "1.5.2-alpha.1";
+	const version = "1.5.3-alpha.0";
 
 	exports.VTable = VTable__namespace;
 	exports.Arc = Arc;

package/dist/react-vtable.min.js

@@ -43,4 +43,4 @@
 	 *
 	 * This source code is licensed under the MIT license found in the
 	 * LICENSE file in the root directory of this source tree.
-	 */"production"===process.env.NODE_ENV?Ee.exports=(we||(we=1,Ce.ConcurrentRoot=1,Ce.ContinuousEventPriority=4,Ce.DefaultEventPriority=16,Ce.DiscreteEventPriority=1,Ce.IdleEventPriority=536870912,Ce.LegacyRoot=0),Ce):Ee.exports=(xe||(xe=1,"production"!==process.env.NODE_ENV&&(_e.ConcurrentRoot=1,_e.ContinuousEventPriority=4,_e.DefaultEventPriority=16,_e.DiscreteEventPriority=1,_e.IdleEventPriority=536870912,_e.LegacyRoot=0)),_e);var Re=Ee.exports;const{application:Pe,createText:Te,REACT_TO_CANOPUS_EVENTS:Ne,Tag:ze}=n.VRender,Ie=ke({supportsMutation:!0,supportsPersistence:!1,createInstance:(e,n,t)=>{const r=function(e,n){if("tag"===e){return new ze(n.attribute)}if(!Pe.graphicService.creator[e])return;const t=Pe.graphicService.creator[e](n.attribute);return t}(e,n);if(r)return function(e,n){for(const t in n)Le(t,n)&&e.addEventListener(Ne[t],n[t])}(r,n),r},createTextInstance:(e,n)=>{},appendInitialChild:(e,n)=>{e.add(n)},finalizeInitialChildren:()=>!1,prepareUpdate:()=>!0,shouldSetTextContent:()=>!1,getRootHostContext:()=>null,getChildHostContext:()=>null,getPublicInstance:e=>e,prepareForCommit:()=>null,resetAfterCommit:()=>{},preparePortalMount:()=>null,scheduleTimeout:setTimeout,cancelTimeout:clearTimeout,noTimeout:-1,isPrimaryRenderer:!1,getCurrentEventPriority:()=>Re.DefaultEventPriority,getInstanceFromNode:e=>null,beforeActiveInstanceBlur:()=>{},afterActiveInstanceBlur:()=>{},prepareScopeUpdate:()=>{},getInstanceFromScope:()=>{},detachDeletedInstance:()=>{},supportsHydration:!1,appendChild:(e,n)=>{e.add(n)},appendChildToContainer:(e,n)=>{e.add(n)},insertBefore:(e,n,t)=>{e.insertBefore(n,t)},insertInContainerBefore:(e,n,t)=>{e.insertBefore(n,t)},removeChild:(e,n)=>{n.delete()},removeChildFromContainer:(e,n)=>{n.delete()},commitUpdate:(e,n,t,r,a)=>{!function(e,n,t){for(const r in t)Le(r,t)&&t[r]!==n[r]&&e.removeEventListener(Ne[r],t[r]);for(const r in n)Le(r,n)&&t[r]!==n[r]&&e.addEventListener(Ne[r],n[r]);e.initAttributes(n.attribute),"image"===e.type&&e.loadImage(n.attribute.image)}(e,a,r)},hideInstance:e=>{e.setAttribute("visible",!1)},unhideInstance:(e,n)=>{e.setAttribute("visible",!0)},clearContainer:e=>{e.removeAllChild()},commitTextUpdate:(e,n,t)=>{}});function Le(e,n){return e.startsWith("on")&&h(n[e])}Ie.injectIntoDevTools({bundleType:"production"!==process.env.NODE_ENV?1:0,version:f.version,rendererPackageName:"react-vtable"});const{Group:De}=n.VRender,Me=(e,n)=>{const{componentIndex:t,children:r}=e;if(!c.isValidElement(r))return null;const a=c.useContext(d),{table:o}=a,l="header-custom-layout"===r.props.role,i=c.useRef(new Map),u=c.useCallback((e=>{const n=`${e.col}-${e.row}`;let t;if(i.current.has(n)){const a=i.current.get(n);Oe(r,a,t,e),t=a.containerInfo}else{t=new De({});const a=Ie.createContainer(t,Re.LegacyRoot,null,null,null,"custom",null,null);i.current.set(n,a),Oe(r,a,t,e)}return{rootContainer:t,renderDefault:!1}}),[r]),s=c.useCallback(((e,n)=>{const t=`${e}-${n}`;if(i.current.has(t)){const e=i.current.get(t);Ie.updateContainer(null,e,null),i.current.delete(t)}}),[]);return c.useLayoutEffect((()=>(console.log("init",e,o),()=>{console.log("release",e,o)})),[]),c.useLayoutEffect((()=>{console.log("update props",e,o),o?.checkReactCustomLayout(),o&&!o.reactCustomLayout?.hasReactCreateGraphic(t,l)?(o.reactCustomLayout?.setReactCreateGraphic(t,u,l),o.reactCustomLayout?.setReactRemoveGraphic(t,s,l),o.reactCustomLayout?.updateCustomCell(t,l)):o&&i.current.forEach(((e,n)=>{const[t,a]=n.split("-").map(Number),l=o.getColWidth(t),i=o.getRowHeight(a),u=e,s={col:t,row:a,dataValue:o.getCellOriginValue(t,a),value:o.getCellValue(t,a)||"",rect:{left:0,top:0,right:l,bottom:i,width:l,height:i},table:o},c=u.containerInfo;Oe(r,u,c,s),o.scenegraph.updateNextFrame()}))})),null};function Oe(e,n,t,r){Ie.updateContainer(f.cloneElement(e,{...r}),n,null)}const Ue=(e,n,t,r)=>{const a=["id","updateId","componentId","componentIndex","children"],o=t?Object.keys(t).concat(a):a,l=e=>{const n=c.useContext(d),r=f.useRef(null),a=f.useRef(e.updateId);if(e.updateId!==a.current){a.current=e.updateId;!!t&&B(n.table,e,r.current,t)&&(r.current=e)}return c.useEffect((()=>()=>{t&&B(n.table,null,r.current,t)}),[]),e.children?f.Children.map(e.children,(n=>f.createElement(Me,{componentIndex:e.componentIndex},n))):null};return l.displayName=e,l.parseOption=e=>{const t=P(e,o);if(e.children){const{children:n}=e;f.Children.map(n,(e=>{"custom-layout"===e.props.role&&(t.customLayout="react-custom-layout"),"header-custom-layout"===e.props.role&&(t.headerCustomLayout="react-custom-layout")}))}return{option:t,optionName:n,isSingle:r}},l},Fe=Ue("ListColumn","columns"),je=Ue("PivotColumnDimension","columns"),Ae=Ue("PivotRowDimension","rows"),He=Ue("PivotIndicator","indicators"),We=Ue("PivotColumnHeaderTitle","columnHeaderTitle",void 0,!0),$e=Ue("PivotRowHeaderTitle","rowHeaderTitle",void 0,!0),Be=Ue("PivotCorner","corner",void 0,!0),Ve=Ue("Menu","menu",void 0,!0),Qe=Ue("Tooltip","tooltip",void 0,!0);function qe(e,n){return E(e)?e:"string"==typeof e&&e.endsWith("%")?Number(e.slice(0,-1))/100*n:0}e.VTable=r,e.Arc="arc",e.Checkbox="checkbox",e.Circle="circle",e.CustomComponent=e=>{const n=c.useContext(d),{table:t}=n,r=function(e,n){const t=c.useMemo((()=>({...n})),[n]),r=c.useMemo((()=>{const n=R({},e);for(const e in t)void 0===n[e]&&(n[e]=t[e]);return n}),[e,t]);return r}(e,{style:{left:0,top:0},className:"vtable-custom-component",displayMode:"position",x:0,y:0,width:0,height:0,row:0,col:0,anchor:"top-left",dx:0,dy:0}),{displayMode:a,x:o,y:l,width:i,height:u,row:s,col:p,anchor:h,dx:m,dy:v,className:y,children:g,style:b}=r;let S,w,k,E;if("position"===a)S=o+m+"px",w=l+v+"px",k=i+"px",E=u+"px";else if("cell"===a){const e=t&&p>=0&&s>=0?t?.getCellRelativeRect(p,s):{width:0,height:0,left:-9999,top:-9999};k=qe(i,e.width)+"px",E=qe(u,e.height)+"px","top-left"===h?(S=e.left+qe(m,e.width)+"px",w=e.top+qe(v,e.height)+"px"):"top-right"===h?(S=e.left+qe(m,e.width)+e.width+"px",w=e.top+qe(v,e.height)+"px"):"bottom-left"===h?(S=e.left+qe(m,e.width)+"px",w=e.top+qe(v,e.height)+e.height+"px"):"bottom-right"===h&&(S=e.left+qe(m,e.width)+e.width+"px",w=e.top+qe(v,e.height)+e.height+"px")}const C=R({},b,{position:"absolute",zIndex:1e3,width:k,height:E,left:S,top:w});return f.createElement("div",{className:y,style:C},f.Children.map(g,(e=>e?f.cloneElement(e,{}):e)))},e.CustomLayout=Me,e.Group="group",e.Image="image",e.Line="line",e.ListColumn=Fe,e.ListTable=oe,e.Menu=Ve,e.Path="path",e.PivotChart=ie,e.PivotColumnDimension=je,e.PivotColumnHeaderTitle=We,e.PivotCorner=Be,e.PivotIndicator=He,e.PivotRowDimension=Ae,e.PivotRowHeaderTitle=$e,e.PivotTable=le,e.Polygon="polygon",e.Radio="radio",e.Rect="rect",e.RichText="richtext",e.Symbol="symbol",e.Tag="tag",e.Text="text",e.Tooltip=Qe,e.registerChartModule=function(e,n){r.register.chartModule(e,n)},e.version="1.5.2-alpha.1"}));
+	 */"production"===process.env.NODE_ENV?Ee.exports=(we||(we=1,Ce.ConcurrentRoot=1,Ce.ContinuousEventPriority=4,Ce.DefaultEventPriority=16,Ce.DiscreteEventPriority=1,Ce.IdleEventPriority=536870912,Ce.LegacyRoot=0),Ce):Ee.exports=(xe||(xe=1,"production"!==process.env.NODE_ENV&&(_e.ConcurrentRoot=1,_e.ContinuousEventPriority=4,_e.DefaultEventPriority=16,_e.DiscreteEventPriority=1,_e.IdleEventPriority=536870912,_e.LegacyRoot=0)),_e);var Re=Ee.exports;const{application:Pe,createText:Te,REACT_TO_CANOPUS_EVENTS:Ne,Tag:ze}=n.VRender,Ie=ke({supportsMutation:!0,supportsPersistence:!1,createInstance:(e,n,t)=>{const r=function(e,n){if("tag"===e){return new ze(n.attribute)}if(!Pe.graphicService.creator[e])return;const t=Pe.graphicService.creator[e](n.attribute);return t}(e,n);if(r)return function(e,n){for(const t in n)Le(t,n)&&e.addEventListener(Ne[t],n[t])}(r,n),r},createTextInstance:(e,n)=>{},appendInitialChild:(e,n)=>{e.add(n)},finalizeInitialChildren:()=>!1,prepareUpdate:()=>!0,shouldSetTextContent:()=>!1,getRootHostContext:()=>null,getChildHostContext:()=>null,getPublicInstance:e=>e,prepareForCommit:()=>null,resetAfterCommit:()=>{},preparePortalMount:()=>null,scheduleTimeout:setTimeout,cancelTimeout:clearTimeout,noTimeout:-1,isPrimaryRenderer:!1,getCurrentEventPriority:()=>Re.DefaultEventPriority,getInstanceFromNode:e=>null,beforeActiveInstanceBlur:()=>{},afterActiveInstanceBlur:()=>{},prepareScopeUpdate:()=>{},getInstanceFromScope:()=>{},detachDeletedInstance:()=>{},supportsHydration:!1,appendChild:(e,n)=>{e.add(n)},appendChildToContainer:(e,n)=>{e.add(n)},insertBefore:(e,n,t)=>{e.insertBefore(n,t)},insertInContainerBefore:(e,n,t)=>{e.insertBefore(n,t)},removeChild:(e,n)=>{n.delete()},removeChildFromContainer:(e,n)=>{n.delete()},commitUpdate:(e,n,t,r,a)=>{!function(e,n,t){for(const r in t)Le(r,t)&&t[r]!==n[r]&&e.removeEventListener(Ne[r],t[r]);for(const r in n)Le(r,n)&&t[r]!==n[r]&&e.addEventListener(Ne[r],n[r]);e.initAttributes(n.attribute),"image"===e.type&&e.loadImage(n.attribute.image)}(e,a,r)},hideInstance:e=>{e.setAttribute("visible",!1)},unhideInstance:(e,n)=>{e.setAttribute("visible",!0)},clearContainer:e=>{e.removeAllChild()},commitTextUpdate:(e,n,t)=>{}});function Le(e,n){return e.startsWith("on")&&h(n[e])}Ie.injectIntoDevTools({bundleType:"production"!==process.env.NODE_ENV?1:0,version:f.version,rendererPackageName:"react-vtable"});const{Group:De}=n.VRender,Me=(e,n)=>{const{componentId:t,children:r}=e;if(!c.isValidElement(r))return null;const a=c.useContext(d),{table:o}=a,l="header-custom-layout"===r.props.role,i=c.useRef(new Map),u=c.useCallback((e=>{const n=`${e.col}-${e.row}`;let t;if(i.current.has(n)){const a=i.current.get(n);Oe(r,a,t,e),t=a.containerInfo}else{t=new De({});const a=Ie.createContainer(t,Re.LegacyRoot,null,null,null,"custom",null,null);i.current.set(n,a),Oe(r,a,t,e)}return{rootContainer:t,renderDefault:!!r.props.renderDefault}}),[r]),s=c.useCallback(((e,n)=>{const t=`${e}-${n}`;if(i.current.has(t)){const e=i.current.get(t);Ie.updateContainer(null,e,null),i.current.delete(t)}}),[]);return c.useLayoutEffect((()=>(console.log("init",e,o),()=>{console.log("release",e,o)})),[]),c.useLayoutEffect((()=>{console.log("update props",e,o),o?.checkReactCustomLayout(),o&&!o.reactCustomLayout?.hasReactCreateGraphic(t,l)?(o.reactCustomLayout?.setReactCreateGraphic(t,u,l),o.reactCustomLayout?.setReactRemoveGraphic(t,s,l),o.reactCustomLayout?.updateCustomCell(t,l)):o&&i.current.forEach(((e,n)=>{const[t,a]=n.split("-").map(Number),l=o.getColWidth(t),i=o.getRowHeight(a),u=e,s={col:t,row:a,dataValue:o.getCellOriginValue(t,a),value:o.getCellValue(t,a)||"",rect:{left:0,top:0,right:l,bottom:i,width:l,height:i},table:o},c=u.containerInfo;Oe(r,u,c,s),o.scenegraph.updateNextFrame()}))})),null};function Oe(e,n,t,r){Ie.updateContainer(f.cloneElement(e,{...r}),n,null)}const Ue=(e,n,t,r)=>{const a=["id","updateId","componentIndex","children"],o=t?Object.keys(t).concat(a):a,l=e=>{const n=c.useContext(d),r=f.useRef(null),a=f.useRef(e.updateId);if(e.updateId!==a.current){a.current=e.updateId;!!t&&B(n.table,e,r.current,t)&&(r.current=e)}return c.useEffect((()=>()=>{t&&B(n.table,null,r.current,t)}),[]),je(e.children,e.componentId)};return l.displayName=e,l.parseOption=e=>{const t=P(e,o);if(e.children){const{children:n}=e;f.Children.map(n,((n,r)=>{Fe(n,e,t,o,e.componentId+"-"+r)}))}return{option:t,optionName:n,isSingle:r}},l};function Fe(e,n,t,r,a){if("custom-layout"===e.props.role&&(t.customLayout="react-custom-layout",t.customLayoutComponentId=a),"header-custom-layout"===e.props.role&&(t.headerCustomLayout="react-custom-layout",t.headerCustomLayoutComponentId=a),"ListColumn"===e.type.displayName){t.columns||(t.columns=[]);const o=P(e.props,r);t.columns.push(o),o.componentId=a,e.props.children&&f.Children.map(e.props.children,((e,t)=>{Fe(e,n,o,r,a+"-"+t)}))}}function je(e,n){return(t=e)&&t.$$typeof===Symbol.for("react.element")||Array.isArray(e)?f.Children.map(e,((e,t)=>e.props.children?je(e.props.children,n+"-"+t):"custom-layout"===e.props.role||"header-custom-layout"===e.props.role?f.createElement(Me,{componentId:n},e):null)):null;var t}const Ae=Ue("ListColumn","columns"),He=Ue("PivotColumnDimension","columns"),We=Ue("PivotRowDimension","rows"),$e=Ue("PivotIndicator","indicators"),Be=Ue("PivotColumnHeaderTitle","columnHeaderTitle",void 0,!0),Ve=Ue("PivotRowHeaderTitle","rowHeaderTitle",void 0,!0),Qe=Ue("PivotCorner","corner",void 0,!0),qe=Ue("Menu","menu",void 0,!0),Ye=Ue("Tooltip","tooltip",void 0,!0);function Ge(e,n){return E(e)?e:"string"==typeof e&&e.endsWith("%")?Number(e.slice(0,-1))/100*n:0}e.VTable=r,e.Arc="arc",e.Checkbox="checkbox",e.Circle="circle",e.CustomComponent=e=>{const n=c.useContext(d),{table:t}=n,r=function(e,n){const t=c.useMemo((()=>({...n})),[n]),r=c.useMemo((()=>{const n=R({},e);for(const e in t)void 0===n[e]&&(n[e]=t[e]);return n}),[e,t]);return r}(e,{style:{left:0,top:0},className:"vtable-custom-component",displayMode:"position",x:0,y:0,width:0,height:0,row:0,col:0,anchor:"top-left",dx:0,dy:0}),{displayMode:a,x:o,y:l,width:i,height:u,row:s,col:p,anchor:h,dx:m,dy:v,className:y,children:g,style:b}=r;let S,w,k,E;if("position"===a)S=o+m+"px",w=l+v+"px",k=i+"px",E=u+"px";else if("cell"===a){const e=t&&p>=0&&s>=0?t?.getCellRelativeRect(p,s):{width:0,height:0,left:-9999,top:-9999};k=Ge(i,e.width)+"px",E=Ge(u,e.height)+"px","top-left"===h?(S=e.left+Ge(m,e.width)+"px",w=e.top+Ge(v,e.height)+"px"):"top-right"===h?(S=e.left+Ge(m,e.width)+e.width+"px",w=e.top+Ge(v,e.height)+"px"):"bottom-left"===h?(S=e.left+Ge(m,e.width)+"px",w=e.top+Ge(v,e.height)+e.height+"px"):"bottom-right"===h&&(S=e.left+Ge(m,e.width)+e.width+"px",w=e.top+Ge(v,e.height)+e.height+"px")}const C=R({},b,{position:"absolute",zIndex:1e3,width:k,height:E,left:S,top:w});return f.createElement("div",{className:y,style:C},f.Children.map(g,(e=>e?f.cloneElement(e,{}):e)))},e.CustomLayout=Me,e.Group="group",e.Image="image",e.Line="line",e.ListColumn=Ae,e.ListTable=oe,e.Menu=qe,e.Path="path",e.PivotChart=ie,e.PivotColumnDimension=He,e.PivotColumnHeaderTitle=Be,e.PivotCorner=Qe,e.PivotIndicator=$e,e.PivotRowDimension=We,e.PivotRowHeaderTitle=Ve,e.PivotTable=le,e.Polygon="polygon",e.Radio="radio",e.Rect="rect",e.RichText="richtext",e.Symbol="symbol",e.Tag="tag",e.Text="text",e.Tooltip=Ye,e.registerChartModule=function(e,n){r.register.chartModule(e,n)},e.version="1.5.3-alpha.0"}));

package/es/components/base-component.d.ts

@@ -5,7 +5,7 @@ export interface BaseComponentProps {
 }
 type ComponentProps = BaseComponentProps & {
     updateId?: number;
-    componentId?: number;
+    componentId?: string;
     componentIndex?: number;
 };
 export declare const createComponent: <T extends ComponentProps>(componentName: string, optionName: string, supportedEvents?: Record<string, string> | null, isSingle?: boolean) => React.FC<T>;

package/es/components/base-component.js

@@ -9,7 +9,7 @@ import { bindEventsToTable } from "../eventsUtils";
 import { CustomLayout } from "./custom/custom-layout";
 
 export const createComponent = (componentName, optionName, supportedEvents, isSingle) => {
-    const ignoreKeys = [ "id", "updateId", "componentId", "componentIndex", "children" ], notOptionKeys = supportedEvents ? Object.keys(supportedEvents).concat(ignoreKeys) : ignoreKeys, Comp = props => {
+    const ignoreKeys = [ "id", "updateId", "componentIndex", "children" ], notOptionKeys = supportedEvents ? Object.keys(supportedEvents).concat(ignoreKeys) : ignoreKeys, Comp = props => {
         const context = useContext(RootTableContext), eventsBinded = React.useRef(null), updateId = React.useRef(props.updateId);
         if (props.updateId !== updateId.current) {
             updateId.current = props.updateId;
@@ -17,17 +17,14 @@ export const createComponent = (componentName, optionName, supportedEvents, isSi
         }
         return useEffect((() => () => {
             supportedEvents && bindEventsToTable(context.table, null, eventsBinded.current, supportedEvents);
-        }), []), props.children ? React.Children.map(props.children, (child => React.createElement(CustomLayout, {
-            componentIndex: props.componentIndex
-        }, child))) : null;
+        }), []), parseCustomChildren(props.children, props.componentId);
     };
     return Comp.displayName = componentName, Comp.parseOption = props => {
         const newComponentOption = pickWithout(props, notOptionKeys);
         if (props.children) {
             const {children: children} = props;
-            React.Children.map(children, (child => {
-                "custom-layout" === child.props.role && (newComponentOption.customLayout = "react-custom-layout"), 
-                "header-custom-layout" === child.props.role && (newComponentOption.headerCustomLayout = "react-custom-layout");
+            React.Children.map(children, ((child, index) => {
+                parseChild(child, props, newComponentOption, notOptionKeys, props.componentId + "-" + index);
             }));
         }
         return {
@@ -36,4 +33,27 @@ export const createComponent = (componentName, optionName, supportedEvents, isSi
             isSingle: isSingle
         };
     }, Comp;
-};
+};
+
+function parseChild(child, componentProps, newComponentOption, notOptionKeys, componentId) {
+    if ("custom-layout" === child.props.role && (newComponentOption.customLayout = "react-custom-layout", 
+    newComponentOption.customLayoutComponentId = componentId), "header-custom-layout" === child.props.role && (newComponentOption.headerCustomLayout = "react-custom-layout", 
+    newComponentOption.headerCustomLayoutComponentId = componentId), "ListColumn" === child.type.displayName) {
+        newComponentOption.columns || (newComponentOption.columns = []);
+        const childOption = pickWithout(child.props, notOptionKeys);
+        newComponentOption.columns.push(childOption), childOption.componentId = componentId, 
+        child.props.children && React.Children.map(child.props.children, ((child, index) => {
+            parseChild(child, componentProps, childOption, notOptionKeys, componentId + "-" + index);
+        }));
+    }
+}
+
+function parseCustomChildren(children, componentId) {
+    return isReactElement(children) || Array.isArray(children) ? React.Children.map(children, ((child, index) => child.props.children ? parseCustomChildren(child.props.children, componentId + "-" + index) : "custom-layout" === child.props.role || "header-custom-layout" === child.props.role ? React.createElement(CustomLayout, {
+        componentId: componentId
+    }, child) : null)) : null;
+}
+
+function isReactElement(obj) {
+    return obj && obj.$$typeof === Symbol.for("react.element");
+}

package/es/components/base-component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/base-component.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAkB,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAG/D,OAAO,gBAAgB,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEnD,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAStD,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,aAAqB,EACrB,UAAkB,EAClB,eAA+C,EAC/C,QAAkB,EAClB,EAAE;IACF,MAAM,UAAU,GAAG,CAAC,IAAI,EAAE,UAAU,EAAE,aAAa,EAAE,gBAAgB,EAAE,UAAU,CAAC,CAAC;IACnF,MAAM,aAAa,GAAG,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC;IAErG,MAAM,IAAI,GAAgB,CAAC,KAAQ,EAAE,EAAE;QACrC,MAAM,OAAO,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;QAG7C,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAI,IAAI,CAAC,CAAC;QAC3C,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAS,KAAK,CAAC,QAAQ,CAAC,CAAC;QAGtD,IAAI,KAAK,CAAC,QAAQ,KAAK,QAAQ,CAAC,OAAO,EAAE;YAEvC,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC,QAAQ,CAAC;YAGlC,MAAM,mBAAmB,GAAG,eAAe;gBACzC,CAAC,CAAC,iBAAiB,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,YAAY,CAAC,OAAO,EAAE,eAAe,CAAC;gBAChF,CAAC,CAAC,KAAK,CAAC;YACV,IAAI,mBAAmB,EAAE;gBACvB,YAAY,CAAC,OAAO,GAAG,KAAK,CAAC;aAC9B;SAQF;QAED,SAAS,CAAC,GAAG,EAAE;YACb,OAAO,GAAG,EAAE;gBACV,IAAI,eAAe,EAAE;oBACnB,iBAAiB,CAAC,OAAO,CAAC,KAAK,EAAE,IAAI,EAAE,YAAY,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;iBAC/E;YAEH,CAAC,CAAC;QACJ,CAAC,EAAE,EAAE,CAAC,CAAC;QAMP,IAAI,KAAK,CAAC,QAAQ,EAAE;YAClB,OAAO,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,QAAwB,EAAE,CAAC,KAAmB,EAAE,EAAE;gBAChF,OAAO,KAAK,CAAC,aAAa,CAAC,YAAY,EAAE,EAAE,cAAc,EAAE,KAAK,CAAC,cAAc,EAAE,EAAE,KAAK,CAAC,CAAC;YAC5F,CAAC,CAAC,CAAC;SACJ;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,IAAI,CAAC,WAAW,GAAG,aAAa,CAAC;IAEhC,IAAY,CAAC,WAAW,GAAG,CAAC,KAAsD,EAAE,EAAE;QACrF,MAAM,kBAAkB,GAAe,WAAW,CAAI,KAAK,EAAE,aAAa,CAAC,CAAC;QAG5E,IAAI,KAAK,CAAC,QAAQ,EAAE;YAClB,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;YAC3B,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAwB,EAAE,CAAC,KAAmB,EAAE,EAAE;gBACnE,IAAI,KAAK,CAAC,KAAK,CAAC,IAAI,KAAK,eAAe,EAAE;oBACvC,kBAA0B,CAAC,YAAY,GAAG,qBAAqB,CAAC;iBAClE;gBACD,IAAI,KAAK,CAAC,KAAK,CAAC,IAAI,KAAK,sBAAsB,EAAE;oBAC9C,kBAA0B,CAAC,kBAAkB,GAAG,qBAAqB,CAAC;iBACxE;YACH,CAAC,CAAC,CAAC;SACJ;QAKD,OAAO;YACL,MAAM,EAAE,kBAAkB;YAC1B,UAAU;YACV,QAAQ;SACT,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,IAAI,CAAC;AACd,CAAC,CAAC","file":"base-component.js","sourcesContent":["import type { ReactElement } from 'react';\nimport React, { useContext, useEffect } from 'react';\nimport { isEqual, isNil, pickWithout } from '@visactor/vutils';\n\nimport type { TableContextType } from '../context/table';\nimport RootTableContext from '../context/table';\nimport { bindEventsToTable } from '../eventsUtils';\nimport { uid } from '../util';\nimport { CustomLayout } from './custom/custom-layout';\n\nexport interface BaseComponentProps {\n  id?: string | number;\n  children?: React.ReactNode;\n}\n\ntype ComponentProps = BaseComponentProps & { updateId?: number; componentId?: number; componentIndex?: number };\n\nexport const createComponent = <T extends ComponentProps>(\n  componentName: string,\n  optionName: string,\n  supportedEvents?: Record<string, string> | null,\n  isSingle?: boolean\n) => {\n  const ignoreKeys = ['id', 'updateId', 'componentId', 'componentIndex', 'children'];\n  const notOptionKeys = supportedEvents ? Object.keys(supportedEvents).concat(ignoreKeys) : ignoreKeys;\n\n  const Comp: React.FC<T> = (props: T) => {\n    const context = useContext(RootTableContext);\n    // const id = React.useRef<string | number>(isNil(props.id) ? uid(optionName) : props.id);\n\n    const eventsBinded = React.useRef<T>(null);\n    const updateId = React.useRef<number>(props.updateId);\n    // const componentOption = React.useRef<Partial<T>>();\n\n    if (props.updateId !== updateId.current) {\n      // update triggered by table when table is rendered\n      updateId.current = props.updateId;\n\n      // rebind events after table render\n      const hasPrevEventsBinded = supportedEvents\n        ? bindEventsToTable(context.table, props, eventsBinded.current, supportedEvents)\n        : false;\n      if (hasPrevEventsBinded) {\n        eventsBinded.current = props;\n      }\n      // } else {\n      //   const newComponentOption: Partial<T> = pickWithout<T>(props, notOptionKeys);\n\n      //   if (!isEqual(newComponentOption, componentOption.current)) {\n      //     componentOption.current = newComponentOption;\n      //     updateToContext(context, id.current, optionName, isSingle, newComponentOption);\n      //   }\n    }\n\n    useEffect(() => {\n      return () => {\n        if (supportedEvents) {\n          bindEventsToTable(context.table, null, eventsBinded.current, supportedEvents);\n        }\n        // deleteToContext(context, id.current, optionName, isSingle);\n      };\n    }, []);\n\n    // children are all custom layout temply\n    // return props.children\n    //   ? React.cloneElement(props.children as ReactElement, { componentIndex: props.componentIndex })\n    //   : null;\n    if (props.children) {\n      return React.Children.map(props.children as ReactElement, (child: ReactElement) => {\n        return React.createElement(CustomLayout, { componentIndex: props.componentIndex }, child);\n      });\n    }\n    return null;\n  };\n\n  Comp.displayName = componentName;\n\n  (Comp as any).parseOption = (props: T & { updateId?: number; componentId?: string }) => {\n    const newComponentOption: Partial<T> = pickWithout<T>(props, notOptionKeys);\n\n    // deal width customLayout\n    if (props.children) {\n      const { children } = props;\n      React.Children.map(children as ReactElement, (child: ReactElement) => {\n        if (child.props.role === 'custom-layout') {\n          (newComponentOption as any).customLayout = 'react-custom-layout';\n        }\n        if (child.props.role === 'header-custom-layout') {\n          (newComponentOption as any).headerCustomLayout = 'react-custom-layout';\n        }\n      });\n    }\n    // if (props.children && (props.children as React.ReactElement).props.role === 'custom-layout') {\n    //   (newComponentOption as any).customLayout = 'react-custom-layout';\n    // }\n\n    return {\n      option: newComponentOption,\n      optionName,\n      isSingle\n    };\n  };\n\n  return Comp;\n};\n\n// const updateToContext = (\n//   context: TableContextType,\n//   id: string | number,\n//   optionName: string,\n//   isSingle: boolean,\n//   props: Partial<ComponentProps>\n// ) => {\n//   if (!context.optionFromChildren) {\n//     return;\n//   }\n\n//   if (isSingle) {\n//     context.optionFromChildren[optionName] = { ...props };\n//   } else {\n//     if (!context.optionFromChildren[optionName]) {\n//       context.optionFromChildren[optionName] = [];\n//     }\n\n//     const comps = context.optionFromChildren[optionName];\n//     const index = comps.findIndex((entry: any) => entry.id === id);\n\n//     if (index >= 0) {\n//       comps[index] = {\n//         id,\n//         ...props\n//       };\n//     } else {\n//       context.optionFromChildren[optionName].push({\n//         id,\n//         ...props\n//       });\n//     }\n//   }\n//   context.isChildrenUpdated = true;\n// };\n\n// const deleteToContext = (context: TableContextType, id: string | number, optionName: string, isSingle: boolean) => {\n//   if (!context.optionFromChildren) {\n//     return;\n//   }\n\n//   if (isSingle) {\n//     context.optionFromChildren[optionName] = null;\n//   } else {\n//     const comps = context.optionFromChildren[optionName] ?? [];\n//     const index = comps.findIndex((entry: any) => entry.id === id);\n\n//     if (index >= 0) {\n//       const newComps = comps.slice(0, index - 1).concat(comps.slice(index + 1));\n\n//       context.optionFromChildren[optionName] = newComps;\n//       context.isChildrenUpdated = true;\n//     }\n//   }\n// };\n"]}
+{"version":3,"sources":["components/base-component.tsx"],"names":[],"mappings":"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","file":"base-component.js","sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport React, { useContext, useEffect } from 'react';\nimport { isEqual, isNil, pickWithout } from '@visactor/vutils';\n\nimport type { TableContextType } from '../context/table';\nimport RootTableContext from '../context/table';\nimport { bindEventsToTable } from '../eventsUtils';\nimport { uid } from '../util';\nimport { CustomLayout } from './custom/custom-layout';\n\nexport interface BaseComponentProps {\n  id?: string | number;\n  children?: React.ReactNode;\n}\n\ntype ComponentProps = BaseComponentProps & { updateId?: number; componentId?: string; componentIndex?: number };\n\nexport const createComponent = <T extends ComponentProps>(\n  componentName: string,\n  optionName: string,\n  supportedEvents?: Record<string, string> | null,\n  isSingle?: boolean\n) => {\n  const ignoreKeys = ['id', 'updateId', 'componentIndex', 'children'];\n  const notOptionKeys = supportedEvents ? Object.keys(supportedEvents).concat(ignoreKeys) : ignoreKeys;\n\n  const Comp: React.FC<T> = (props: T) => {\n    const context = useContext(RootTableContext);\n    // const id = React.useRef<string | number>(isNil(props.id) ? uid(optionName) : props.id);\n\n    const eventsBinded = React.useRef<T>(null);\n    const updateId = React.useRef<number>(props.updateId);\n    // const componentOption = React.useRef<Partial<T>>();\n\n    if (props.updateId !== updateId.current) {\n      // update triggered by table when table is rendered\n      updateId.current = props.updateId;\n\n      // rebind events after table render\n      const hasPrevEventsBinded = supportedEvents\n        ? bindEventsToTable(context.table, props, eventsBinded.current, supportedEvents)\n        : false;\n      if (hasPrevEventsBinded) {\n        eventsBinded.current = props;\n      }\n      // } else {\n      //   const newComponentOption: Partial<T> = pickWithout<T>(props, notOptionKeys);\n\n      //   if (!isEqual(newComponentOption, componentOption.current)) {\n      //     componentOption.current = newComponentOption;\n      //     updateToContext(context, id.current, optionName, isSingle, newComponentOption);\n      //   }\n    }\n\n    useEffect(() => {\n      return () => {\n        if (supportedEvents) {\n          bindEventsToTable(context.table, null, eventsBinded.current, supportedEvents);\n        }\n        // deleteToContext(context, id.current, optionName, isSingle);\n      };\n    }, []);\n\n    // children are all custom layout temply\n    // return props.children\n    //   ? React.cloneElement(props.children as ReactElement, { componentIndex: props.componentIndex })\n    //   : null;\n    // if (props.children) {\n    //   return React.Children.map(props.children as ReactElement, (child: ReactElement) => {\n    //     if (child.props.role === 'custom-layout' || child.props.role === 'header-custom-layout') {\n    //       return React.createElement(CustomLayout, { componentId: props.componentId }, child);\n    //     }\n    //   });\n    // }\n    return parseCustomChildren(props.children, props.componentId);\n  };\n\n  Comp.displayName = componentName;\n\n  (Comp as any).parseOption = (props: T & { updateId?: number; componentId?: string }) => {\n    const newComponentOption: Partial<T> = pickWithout<T>(props, notOptionKeys);\n    // deal width customLayout\n    if (props.children) {\n      const { children } = props;\n      React.Children.map(children as ReactElement, (child: ReactElement, index) => {\n        parseChild(child, props, newComponentOption, notOptionKeys, props.componentId + '-' + index);\n      });\n    }\n    // if (props.children && (props.children as React.ReactElement).props.role === 'custom-layout') {\n    //   (newComponentOption as any).customLayout = 'react-custom-layout';\n    // }\n\n    return {\n      option: newComponentOption,\n      optionName,\n      isSingle\n    };\n  };\n\n  return Comp;\n};\n\nfunction parseChild(\n  child: ReactElement,\n  componentProps: any,\n  newComponentOption: any,\n  notOptionKeys: string[],\n  componentId: string\n) {\n  if (child.props.role === 'custom-layout') {\n    (newComponentOption as any).customLayout = 'react-custom-layout';\n    (newComponentOption as any).customLayoutComponentId = componentId;\n  }\n  if (child.props.role === 'header-custom-layout') {\n    (newComponentOption as any).headerCustomLayout = 'react-custom-layout';\n    (newComponentOption as any).headerCustomLayoutComponentId = componentId;\n  }\n  if ((child.type as any).displayName === 'ListColumn') {\n    if (!newComponentOption.columns) {\n      newComponentOption.columns = [];\n    }\n    const childOption = pickWithout(child.props, notOptionKeys);\n    newComponentOption.columns.push(childOption);\n    childOption.componentId = componentId;\n    if (child.props.children) {\n      React.Children.map(child.props.children as ReactElement, (child: ReactElement, index) => {\n        parseChild(child, componentProps, childOption, notOptionKeys, componentId + '-' + index);\n      });\n    }\n  }\n}\n\nfunction parseCustomChildren(children: ReactNode, componentId: string): ReactNode | undefined {\n  if (isReactElement(children) || Array.isArray(children)) {\n    return React.Children.map(children as ReactElement, (child: ReactElement, index) => {\n      if (child.props.children) {\n        return parseCustomChildren(child.props.children as ReactElement, componentId + '-' + index);\n      } else if (child.props.role === 'custom-layout' || child.props.role === 'header-custom-layout') {\n        return React.createElement(CustomLayout, { componentId: componentId }, child);\n      }\n      return null;\n    });\n  }\n  return null;\n}\n\nfunction isReactElement(obj: any) {\n  return obj && obj.$$typeof === Symbol.for('react.element');\n}\n"]}

package/es/components/custom/custom-layout.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 import type { CustomRenderFunctionArg } from '@visactor/vtable/src/ts-types';
 type CustomLayoutProps = {
-    componentIndex?: number;
+    componentId: string;
 };
 export type CustomLayoutFunctionArg = Partial<CustomRenderFunctionArg> & {
     role?: 'custom-layout' | 'header-custom-layout';
+    renderDefault?: boolean;
 };
 export declare const CustomLayout: React.FC<CustomLayoutProps>;
 export {};

package/es/components/custom/custom-layout.js

@@ -11,7 +11,7 @@ import { LegacyRoot } from "react-reconciler/constants";
 const {Group: Group} = VRender;
 
 export const CustomLayout = (props, ref) => {
-    const {componentIndex: componentIndex, children: children} = props;
+    const {componentId: componentId, children: children} = props;
     if (!isValidElement(children)) return null;
     const context = useContext(RootTableContext), {table: table} = context, isHeaderCustomLayout = "header-custom-layout" === children.props.role, container = useRef(new Map), createGraphic = useCallback((args => {
         const key = `${args.col}-${args.row}`;
@@ -26,7 +26,7 @@ export const CustomLayout = (props, ref) => {
         }
         return {
             rootContainer: group,
-            renderDefault: !1
+            renderDefault: !!children.props.renderDefault
         };
     }), [ children ]), removeContainer = useCallback(((col, row) => {
         const key = `${col}-${row}`;
@@ -37,9 +37,9 @@ export const CustomLayout = (props, ref) => {
     }), []);
     return useLayoutEffect((() => () => {}), []), useLayoutEffect((() => {
         var _a, _b, _c, _d;
-        null == table || table.checkReactCustomLayout(), table && !(null === (_a = table.reactCustomLayout) || void 0 === _a ? void 0 : _a.hasReactCreateGraphic(componentIndex, isHeaderCustomLayout)) ? (null === (_b = table.reactCustomLayout) || void 0 === _b || _b.setReactCreateGraphic(componentIndex, createGraphic, isHeaderCustomLayout), 
-        null === (_c = table.reactCustomLayout) || void 0 === _c || _c.setReactRemoveGraphic(componentIndex, removeContainer, isHeaderCustomLayout), 
-        null === (_d = table.reactCustomLayout) || void 0 === _d || _d.updateCustomCell(componentIndex, isHeaderCustomLayout)) : table && container.current.forEach(((value, key) => {
+        null == table || table.checkReactCustomLayout(), table && !(null === (_a = table.reactCustomLayout) || void 0 === _a ? void 0 : _a.hasReactCreateGraphic(componentId, isHeaderCustomLayout)) ? (null === (_b = table.reactCustomLayout) || void 0 === _b || _b.setReactCreateGraphic(componentId, createGraphic, isHeaderCustomLayout), 
+        null === (_c = table.reactCustomLayout) || void 0 === _c || _c.setReactRemoveGraphic(componentId, removeContainer, isHeaderCustomLayout), 
+        null === (_d = table.reactCustomLayout) || void 0 === _d || _d.updateCustomCell(componentId, isHeaderCustomLayout)) : table && container.current.forEach(((value, key) => {
             const [col, row] = key.split("-").map(Number), width = table.getColWidth(col), height = table.getRowHeight(row), currentContainer = value, args = {
                 col: col,
                 row: row,

package/es/components/custom/custom-layout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/custom/custom-layout.tsx"],"names":[],"mappings":"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","file":"custom-layout.js","sourcesContent":["/* eslint-disable react-hooks/rules-of-hooks */\nimport type { PropsWithChildren } from 'react';\nimport React, { isValidElement, useCallback, useContext, useLayoutEffect, useRef } from 'react';\nimport RootTableContext from '../../context/table';\nimport { VRender } from '@visactor/vtable';\nimport type { ICustomLayoutFuc, CustomRenderFunctionArg } from '@visactor/vtable/src/ts-types';\nimport type { FiberRoot } from 'react-reconciler';\nimport { reconcilor } from './reconciler';\nimport { LegacyRoot } from 'react-reconciler/constants';\n\nconst { Group } = VRender;\ntype CustomLayoutProps = { componentIndex?: number };\n\nexport type CustomLayoutFunctionArg = Partial<CustomRenderFunctionArg> & {\n  role?: 'custom-layout' | 'header-custom-layout';\n};\n\nexport const CustomLayout: React.FC<CustomLayoutProps> = (props: PropsWithChildren<CustomLayoutProps>, ref) => {\n  const { componentIndex, children } = props;\n  if (!isValidElement(children)) {\n    return null;\n  }\n  const context = useContext(RootTableContext);\n  const { table } = context;\n\n  const isHeaderCustomLayout = children.props.role === 'header-custom-layout';\n\n  // react customLayout component container cache\n  const container = useRef<Map<string, FiberRoot>>(new Map());\n\n  // customLayout function for vtable\n  const createGraphic: ICustomLayoutFuc = useCallback(\n    args => {\n      const key = `${args.col}-${args.row}`;\n      let group;\n      if (container.current.has(key)) {\n        const currentContainer = container.current.get(key);\n        // reconcilor.updateContainer(React.cloneElement(children, { ...args }), currentContainer, null);\n        reconcilorUpdateContainer(children, currentContainer, group, args);\n        group = currentContainer.containerInfo;\n      } else {\n        group = new Group({});\n        const currentContainer = reconcilor.createContainer(group, LegacyRoot, null, null, null, 'custom', null, null);\n        container.current.set(key, currentContainer);\n        reconcilorUpdateContainer(children, currentContainer, group, args);\n        // const ele = React.cloneElement(children, { ...args });\n        // reconcilor.updateContainer(ele, currentContainer, null);\n      }\n\n      return {\n        rootContainer: group,\n        renderDefault: false\n      };\n    },\n    [children]\n  );\n\n  const removeContainer = useCallback((col: number, row: number) => {\n    const key = `${col}-${row}`;\n    if (container.current.has(key)) {\n      const currentContainer = container.current.get(key);\n      reconcilor.updateContainer(null, currentContainer, null);\n      // group = currentContainer.containerInfo;\n      container.current.delete(key);\n    }\n  }, []);\n\n  useLayoutEffect(() => {\n    // init and release\n    // eslint-disable-next-line no-undef\n    console.log('init', props, table);\n    // table && (table._reactCreateGraphic = createGraphic); // never go to here\n    // table?.renderWithRecreateCells();\n    return () => {\n      // eslint-disable-next-line no-undef\n      console.log('release', props, table);\n    };\n  }, []);\n\n  useLayoutEffect(() => {\n    // update props\n    // eslint-disable-next-line no-undef\n    console.log('update props', props, table);\n\n    table?.checkReactCustomLayout(); // init reactCustomLayout component\n    if (table && !table.reactCustomLayout?.hasReactCreateGraphic(componentIndex, isHeaderCustomLayout)) {\n      table.reactCustomLayout?.setReactCreateGraphic(\n        componentIndex,\n        createGraphic,\n        // container.current,\n        isHeaderCustomLayout\n      ); // set customLayout function\n      table.reactCustomLayout?.setReactRemoveGraphic(componentIndex, removeContainer, isHeaderCustomLayout); // set customLayout function\n      table.reactCustomLayout?.updateCustomCell(componentIndex, isHeaderCustomLayout); // update cell content\n    } else if (table) {\n      // update all container\n      container.current.forEach((value, key) => {\n        const [col, row] = key.split('-').map(Number);\n        const width = table.getColWidth(col); // to be fixed: may be merge cell\n        const height = table.getRowHeight(row); // to be fixed: may be merge cell\n        const currentContainer = value;\n        const args = {\n          col,\n          row,\n          dataValue: table.getCellOriginValue(col, row),\n          value: table.getCellValue(col, row) || '',\n          rect: {\n            left: 0,\n            top: 0,\n            right: width,\n            bottom: height,\n            width,\n            height\n          },\n          table\n        };\n        // update element in container\n        const group = currentContainer.containerInfo;\n        reconcilorUpdateContainer(children, currentContainer, group, args);\n        // reconcilor.updateContainer(React.cloneElement(children, { ...args }), currentContainer, null);\n        table.scenegraph.updateNextFrame();\n      });\n    }\n  });\n\n  return null;\n};\n\nfunction reconcilorUpdateContainer(children, currentContainer, group, args) {\n  reconcilor.updateContainer(React.cloneElement(children, { ...args }), currentContainer, null);\n  // group = group.firstChild;\n  // if (isReactElement(group.attribute.html?.dom)) {\n  //   const div = document.createElement('div');\n  //   const root = ReactDOM.createRoot(div as HTMLElement);\n  //   root.render(group.attribute.html.dom);\n  //   group.attribute.html.dom = div;\n  //   // debugger;\n  //   // group.html.dom = div;\n  // }\n}\n\nfunction isReactElement(obj) {\n  return obj && obj.$$typeof === Symbol.for('react.element');\n}\n"]}
+{"version":3,"sources":["components/custom/custom-layout.tsx"],"names":[],"mappings":"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","file":"custom-layout.js","sourcesContent":["/* eslint-disable react-hooks/rules-of-hooks */\nimport type { PropsWithChildren, ReactElement } from 'react';\nimport React, { isValidElement, useCallback, useContext, useLayoutEffect, useRef } from 'react';\nimport RootTableContext from '../../context/table';\nimport { VRender } from '@visactor/vtable';\nimport type { ICustomLayoutFuc, CustomRenderFunctionArg } from '@visactor/vtable/src/ts-types';\nimport type { FiberRoot } from 'react-reconciler';\nimport { reconcilor } from './reconciler';\nimport { LegacyRoot } from 'react-reconciler/constants';\n\nconst { Group } = VRender;\ntype CustomLayoutProps = { componentId: string };\n\nexport type CustomLayoutFunctionArg = Partial<CustomRenderFunctionArg> & {\n  role?: 'custom-layout' | 'header-custom-layout';\n  renderDefault?: boolean;\n};\n\nexport const CustomLayout: React.FC<CustomLayoutProps> = (props: PropsWithChildren<CustomLayoutProps>, ref) => {\n  const { componentId, children } = props;\n  if (!isValidElement(children)) {\n    return null;\n  }\n  const context = useContext(RootTableContext);\n  const { table } = context;\n\n  const isHeaderCustomLayout = children.props.role === 'header-custom-layout';\n\n  // react customLayout component container cache\n  const container = useRef<Map<string, FiberRoot>>(new Map());\n\n  // customLayout function for vtable\n  const createGraphic: ICustomLayoutFuc = useCallback(\n    args => {\n      const key = `${args.col}-${args.row}`;\n      let group;\n      if (container.current.has(key)) {\n        const currentContainer = container.current.get(key);\n        // reconcilor.updateContainer(React.cloneElement(children, { ...args }), currentContainer, null);\n        reconcilorUpdateContainer(children, currentContainer, group, args);\n        group = currentContainer.containerInfo;\n      } else {\n        group = new Group({});\n        const currentContainer = reconcilor.createContainer(group, LegacyRoot, null, null, null, 'custom', null, null);\n        container.current.set(key, currentContainer);\n        reconcilorUpdateContainer(children, currentContainer, group, args);\n        // const ele = React.cloneElement(children, { ...args });\n        // reconcilor.updateContainer(ele, currentContainer, null);\n      }\n\n      return {\n        rootContainer: group,\n        renderDefault: !!children.props.renderDefault\n      };\n    },\n    [children]\n  );\n\n  const removeContainer = useCallback((col: number, row: number) => {\n    const key = `${col}-${row}`;\n    if (container.current.has(key)) {\n      const currentContainer = container.current.get(key);\n      reconcilor.updateContainer(null, currentContainer, null);\n      // group = currentContainer.containerInfo;\n      container.current.delete(key);\n    }\n  }, []);\n\n  useLayoutEffect(() => {\n    // init and release\n    // eslint-disable-next-line no-undef\n    console.log('init', props, table);\n    // table && (table._reactCreateGraphic = createGraphic); // never go to here\n    // table?.renderWithRecreateCells();\n    return () => {\n      // eslint-disable-next-line no-undef\n      console.log('release', props, table);\n    };\n  }, []);\n\n  useLayoutEffect(() => {\n    // update props\n    // eslint-disable-next-line no-undef\n    console.log('update props', props, table);\n\n    table?.checkReactCustomLayout(); // init reactCustomLayout component\n    if (table && !table.reactCustomLayout?.hasReactCreateGraphic(componentId, isHeaderCustomLayout)) {\n      table.reactCustomLayout?.setReactCreateGraphic(\n        componentId,\n        createGraphic,\n        // container.current,\n        isHeaderCustomLayout\n      ); // set customLayout function\n      table.reactCustomLayout?.setReactRemoveGraphic(componentId, removeContainer, isHeaderCustomLayout); // set customLayout function\n      table.reactCustomLayout?.updateCustomCell(componentId, isHeaderCustomLayout); // update cell content\n    } else if (table) {\n      // update all container\n      container.current.forEach((value, key) => {\n        const [col, row] = key.split('-').map(Number);\n        const width = table.getColWidth(col); // to be fixed: may be merge cell\n        const height = table.getRowHeight(row); // to be fixed: may be merge cell\n        const currentContainer = value;\n        const args = {\n          col,\n          row,\n          dataValue: table.getCellOriginValue(col, row),\n          value: table.getCellValue(col, row) || '',\n          rect: {\n            left: 0,\n            top: 0,\n            right: width,\n            bottom: height,\n            width,\n            height\n          },\n          table\n        };\n        // update element in container\n        const group = currentContainer.containerInfo;\n        reconcilorUpdateContainer(children, currentContainer, group, args);\n        // reconcilor.updateContainer(React.cloneElement(children, { ...args }), currentContainer, null);\n        table.scenegraph.updateNextFrame();\n      });\n    }\n  });\n\n  return null;\n};\n\nfunction reconcilorUpdateContainer(children: ReactElement, currentContainer: any, group: typeof Group, args: any) {\n  reconcilor.updateContainer(React.cloneElement(children, { ...args }), currentContainer, null);\n  // group = group.firstChild;\n  // if (isReactElement(group.attribute.html?.dom)) {\n  //   const div = document.createElement('div');\n  //   const root = ReactDOM.createRoot(div as HTMLElement);\n  //   root.render(group.attribute.html.dom);\n  //   group.attribute.html.dom = div;\n  //   // debugger;\n  //   // group.html.dom = div;\n  // }\n}\n\nfunction isReactElement(obj) {\n  return obj && obj.$$typeof === Symbol.for('react.element');\n}\n"]}

package/es/components/list/list-column.d.ts

@@ -1,4 +1,4 @@
 import type { BaseComponentProps } from '../base-component';
 import type { ColumnDefine } from '@visactor/vtable';
-export type ListColumnProps = ColumnDefine & BaseComponentProps;
+export type ListColumnProps = Omit<ColumnDefine, 'columns'> & BaseComponentProps;
 export declare const ListColumn: import("react").FC<ListColumnProps>;

package/es/components/list/list-column.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/list/list-column.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAKpD,MAAM,CAAC,MAAM,UAAU,GAAG,eAAe,CAAkB,YAAY,EAAE,SAAS,CAAC,CAAC","file":"list-column.js","sourcesContent":["import type { BaseComponentProps } from '../base-component';\nimport { createComponent } from '../base-component';\nimport type { ColumnDefine } from '@visactor/vtable';\n\nexport type ListColumnProps = ColumnDefine & BaseComponentProps;\n\nexport const ListColumn = createComponent<ListColumnProps>('ListColumn', 'columns');\n"]}
+{"version":3,"sources":["components/list/list-column.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAKpD,MAAM,CAAC,MAAM,UAAU,GAAG,eAAe,CAAkB,YAAY,EAAE,SAAS,CAAC,CAAC","file":"list-column.js","sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport type { BaseComponentProps } from '../base-component';\nimport { createComponent } from '../base-component';\nimport type { ColumnDefine } from '@visactor/vtable';\n\nexport type ListColumnProps = Omit<ColumnDefine, 'columns'> & BaseComponentProps;\n\nexport const ListColumn = createComponent<ListColumnProps>('ListColumn', 'columns');\n"]}

package/es/index.d.ts

@@ -1,4 +1,4 @@
 export * from './tables';
 export * from './components';
 export * from './vtable';
-export declare const version = "1.5.2-alpha.1";
+export declare const version = "1.5.3-alpha.0";

package/es/index.js

@@ -4,5 +4,5 @@ export * from "./components";
 
 export * from "./vtable";
 
-export const version = "1.5.2-alpha.1";
+export const version = "1.5.3-alpha.0";
 //# sourceMappingURL=index.js.map

package/es/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC","file":"index.js","sourcesContent":["export * from './tables';\nexport * from './components';\nexport * from './vtable';\n\nexport const version = \"1.5.2-alpha.1\";\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC","file":"index.js","sourcesContent":["export * from './tables';\nexport * from './components';\nexport * from './vtable';\n\nexport const version = \"1.5.3-alpha.0\";\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visactor/react-vtable",
-  "version": "1.5.2-alpha.1",
+  "version": "1.5.3-alpha.0",
   "description": "The react version of VTable",
   "keywords": [
     "react",
@@ -43,7 +43,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@visactor/vtable": "1.5.2-alpha.1",
+    "@visactor/vtable": "1.5.3-alpha.0",
     "@visactor/vutils": "~0.18.9",
     "react-is": "^18.2.0",
     "react-reconciler": "0.29.2"