@visactor/react-vtable 1.5.4-beta.0 → 1.5.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/components/custom/custom-layout.js +18 -7
- package/cjs/components/custom/custom-layout.js.map +1 -1
- package/cjs/index.d.ts +1 -1
- package/cjs/index.js +1 -1
- package/cjs/index.js.map +1 -1
- package/dist/react-vtable.js +20 -9
- package/dist/react-vtable.min.js +1 -1
- package/es/components/custom/custom-layout.js +18 -7
- package/es/components/custom/custom-layout.js.map +1 -1
- package/es/index.d.ts +1 -1
- package/es/index.js +1 -1
- package/es/index.js.map +1 -1
- package/package.json +6 -6
|
@@ -42,11 +42,11 @@ const react_1 = __importStar(require("react")), table_1 = __importDefault(requir
|
|
|
42
42
|
let group;
|
|
43
43
|
if (container.current.has(key)) {
|
|
44
44
|
const currentContainer = container.current.get(key);
|
|
45
|
-
reconcilorUpdateContainer(children, currentContainer,
|
|
45
|
+
reconcilorUpdateContainer(children, currentContainer, args), group = currentContainer.containerInfo;
|
|
46
46
|
} else {
|
|
47
47
|
group = new Group({});
|
|
48
48
|
const currentContainer = reconciler_1.reconcilor.createContainer(group, constants_1.LegacyRoot, null, null, null, "custom", null, null);
|
|
49
|
-
container.current.set(key, currentContainer), reconcilorUpdateContainer(children, currentContainer,
|
|
49
|
+
container.current.set(key, currentContainer), reconcilorUpdateContainer(children, currentContainer, args);
|
|
50
50
|
}
|
|
51
51
|
return {
|
|
52
52
|
rootContainer: group,
|
|
@@ -58,13 +58,18 @@ const react_1 = __importStar(require("react")), table_1 = __importDefault(requir
|
|
|
58
58
|
const currentContainer = container.current.get(key);
|
|
59
59
|
reconciler_1.reconcilor.updateContainer(null, currentContainer, null), container.current.delete(key);
|
|
60
60
|
}
|
|
61
|
+
}), []), removeAllContainer = (0, react_1.useCallback)((() => {
|
|
62
|
+
container.current.forEach(((value, key) => {
|
|
63
|
+
const currentContainer = value;
|
|
64
|
+
reconciler_1.reconcilor.updateContainer(null, currentContainer, null);
|
|
65
|
+
})), container.current.clear();
|
|
61
66
|
}), []);
|
|
62
67
|
return (0, react_1.useLayoutEffect)((() => () => {}), []), (0, react_1.useLayoutEffect)((() => {
|
|
63
68
|
var _a, _b, _c, _d;
|
|
64
|
-
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),
|
|
69
|
+
null == table || table.checkReactCustomLayout(removeAllContainer), 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),
|
|
65
70
|
null === (_c = table.reactCustomLayout) || void 0 === _c || _c.setReactRemoveGraphic(componentId, removeContainer, isHeaderCustomLayout),
|
|
66
71
|
null === (_d = table.reactCustomLayout) || void 0 === _d || _d.updateCustomCell(componentId, isHeaderCustomLayout)) : table && container.current.forEach(((value, key) => {
|
|
67
|
-
const [col, row] = key.split("-").map(Number), width =
|
|
72
|
+
const [col, row] = key.split("-").map(Number), {width: width, height: height} = getCellRect(col, row, table), currentContainer = value, args = {
|
|
68
73
|
col: col,
|
|
69
74
|
row: row,
|
|
70
75
|
dataValue: table.getCellOriginValue(col, row),
|
|
@@ -78,13 +83,14 @@ const react_1 = __importStar(require("react")), table_1 = __importDefault(requir
|
|
|
78
83
|
height: height
|
|
79
84
|
},
|
|
80
85
|
table: table
|
|
81
|
-
}
|
|
82
|
-
|
|
86
|
+
};
|
|
87
|
+
currentContainer.containerInfo;
|
|
88
|
+
reconcilorUpdateContainer(children, currentContainer, args), table.scenegraph.updateNextFrame();
|
|
83
89
|
}));
|
|
84
90
|
})), null;
|
|
85
91
|
};
|
|
86
92
|
|
|
87
|
-
function reconcilorUpdateContainer(children, currentContainer,
|
|
93
|
+
function reconcilorUpdateContainer(children, currentContainer, args) {
|
|
88
94
|
reconciler_1.reconcilor.updateContainer(react_1.default.cloneElement(children, Object.assign({}, args)), currentContainer, null);
|
|
89
95
|
}
|
|
90
96
|
|
|
@@ -92,5 +98,10 @@ function isReactElement(obj) {
|
|
|
92
98
|
return obj && obj.$$typeof === Symbol.for("react.element");
|
|
93
99
|
}
|
|
94
100
|
|
|
101
|
+
function getCellRect(col, row, table) {
|
|
102
|
+
const range = table.getCellRange(col, row);
|
|
103
|
+
return table.getCellsRect(range.start.col, range.start.row, range.end.col, range.end.row);
|
|
104
|
+
}
|
|
105
|
+
|
|
95
106
|
//# sourceMappingURL=custom-layout.js.map
|
|
96
107
|
exports.CustomLayout = CustomLayout;
|
|
@@ -1 +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, 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"]}
|
|
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;AAQnB,MAAM,YAAY,GAAgC,CAAC,KAA2C,EAAE,GAAG,EAAE,EAAE;IAC5G,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACxC,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,IAAI,CAAC,CAAC;YAC5D,KAAK,GAAG,gBAAgB,CAAC,aAAa,CAAC;SAExC;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,IAAI,CAAC,CAAC;SAG7D;QAED,OAAO;YACL,aAAa,EAAE,KAAK;YACpB,aAAa,EAAE,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAa;SAC9C,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,MAAM,kBAAkB,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAC1C,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;YACvC,MAAM,gBAAgB,GAAG,KAAK,CAAC;YAC/B,uBAAU,CAAC,eAAe,CAAC,IAAI,EAAE,gBAAgB,EAAE,IAAI,CAAC,CAAC;QAC3D,CAAC,CAAC,CAAC;QACH,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IAC5B,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,CAAC,kBAAkB,CAAC,CAAC;QAClD,IAAI,KAAK,IAAI,CAAC,CAAA,MAAA,KAAK,CAAC,iBAAiB,0CAAE,qBAAqB,CAAC,WAAW,EAAE,oBAAoB,CAAC,CAAA,EAAE;YAC/F,MAAA,KAAK,CAAC,iBAAiB,0CAAE,qBAAqB,CAC5C,WAAW,EACX,aAAa,EAEb,oBAAoB,CACrB,CAAC;YACF,MAAA,KAAK,CAAC,iBAAiB,0CAAE,qBAAqB,CAAC,WAAW,EAAE,eAAe,EAAE,oBAAoB,CAAC,CAAC;YACnG,MAAA,KAAK,CAAC,iBAAiB,0CAAE,gBAAgB,CAAC,WAAW,EAAE,oBAAoB,CAAC,CAAC;SAC9E;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;gBAG9C,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;gBACvD,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,IAAI,CAAC,CAAC;gBAE5D,KAAK,CAAC,UAAU,CAAC,eAAe,EAAE,CAAC;YACrC,CAAC,CAAC,CAAC;SACJ;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAvHW,QAAA,YAAY,gBAuHvB;AAEF,SAAS,yBAAyB,CAAC,QAAsB,EAAE,gBAAqB,EAAE,IAAS;IACzF,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;AAED,SAAS,WAAW,CAAC,GAAW,EAAE,GAAW,EAAE,KAAU;IACvD,MAAM,KAAK,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;IAC3C,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAChG,OAAO,IAAI,CAAC;AACd,CAAC","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, args);\n group = currentContainer.containerInfo;\n // 这里更新group，可能会残留dx dy\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, 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 const removeAllContainer = useCallback(() => {\n container.current.forEach((value, key) => {\n const currentContainer = value;\n reconcilor.updateContainer(null, currentContainer, null);\n });\n container.current.clear();\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(removeAllContainer); // 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 { width, height } = getCellRect(col, row, table);\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, 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, 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\nfunction getCellRect(col: number, row: number, table: any) {\n const range = table.getCellRange(col, row);\n const rect = table.getCellsRect(range.start.col, range.start.row, range.end.col, range.end.row);\n return rect;\n}\n"]}
|
package/cjs/index.d.ts
CHANGED
package/cjs/index.js
CHANGED
|
@@ -18,5 +18,5 @@ var __createBinding = this && this.__createBinding || (Object.create ? function(
|
|
|
18
18
|
Object.defineProperty(exports, "__esModule", {
|
|
19
19
|
value: !0
|
|
20
20
|
}), exports.version = void 0, __exportStar(require("./tables"), exports), __exportStar(require("./components"), exports),
|
|
21
|
-
__exportStar(require("./vtable"), exports), exports.version = "1.5.4
|
|
21
|
+
__exportStar(require("./vtable"), exports), exports.version = "1.5.4";
|
|
22
22
|
//# sourceMappingURL=index.js.map
|
package/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,2CAAyB;AACzB,+CAA6B;AAC7B,2CAAyB;AAEZ,QAAA,OAAO,GAAG,
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,2CAAyB;AACzB,+CAA6B;AAC7B,2CAAyB;AAEZ,QAAA,OAAO,GAAG,OAAO,CAAC","file":"index.js","sourcesContent":["export * from './tables';\nexport * from './components';\nexport * from './vtable';\n\nexport const version = \"1.5.4\";\n"]}
|
package/dist/react-vtable.js
CHANGED
|
@@ -13470,14 +13470,14 @@
|
|
|
13470
13470
|
let group;
|
|
13471
13471
|
if (container.current.has(key)) {
|
|
13472
13472
|
const currentContainer = container.current.get(key);
|
|
13473
|
-
reconcilorUpdateContainer(children, currentContainer,
|
|
13473
|
+
reconcilorUpdateContainer(children, currentContainer, args);
|
|
13474
13474
|
group = currentContainer.containerInfo;
|
|
13475
13475
|
}
|
|
13476
13476
|
else {
|
|
13477
13477
|
group = new Group$1({});
|
|
13478
13478
|
const currentContainer = reconcilor.createContainer(group, constantsExports.LegacyRoot, null, null, null, 'custom', null, null);
|
|
13479
13479
|
container.current.set(key, currentContainer);
|
|
13480
|
-
reconcilorUpdateContainer(children, currentContainer,
|
|
13480
|
+
reconcilorUpdateContainer(children, currentContainer, args);
|
|
13481
13481
|
}
|
|
13482
13482
|
return {
|
|
13483
13483
|
rootContainer: group,
|
|
@@ -13492,6 +13492,13 @@
|
|
|
13492
13492
|
container.current.delete(key);
|
|
13493
13493
|
}
|
|
13494
13494
|
}, []);
|
|
13495
|
+
const removeAllContainer = reactExports.useCallback(() => {
|
|
13496
|
+
container.current.forEach((value, key) => {
|
|
13497
|
+
const currentContainer = value;
|
|
13498
|
+
reconcilor.updateContainer(null, currentContainer, null);
|
|
13499
|
+
});
|
|
13500
|
+
container.current.clear();
|
|
13501
|
+
}, []);
|
|
13495
13502
|
reactExports.useLayoutEffect(() => {
|
|
13496
13503
|
console.log('init', props, table);
|
|
13497
13504
|
return () => {
|
|
@@ -13500,7 +13507,7 @@
|
|
|
13500
13507
|
}, []);
|
|
13501
13508
|
reactExports.useLayoutEffect(() => {
|
|
13502
13509
|
console.log('update props', props, table);
|
|
13503
|
-
table?.checkReactCustomLayout();
|
|
13510
|
+
table?.checkReactCustomLayout(removeAllContainer);
|
|
13504
13511
|
if (table && !table.reactCustomLayout?.hasReactCreateGraphic(componentId, isHeaderCustomLayout)) {
|
|
13505
13512
|
table.reactCustomLayout?.setReactCreateGraphic(componentId, createGraphic, isHeaderCustomLayout);
|
|
13506
13513
|
table.reactCustomLayout?.setReactRemoveGraphic(componentId, removeContainer, isHeaderCustomLayout);
|
|
@@ -13509,8 +13516,7 @@
|
|
|
13509
13516
|
else if (table) {
|
|
13510
13517
|
container.current.forEach((value, key) => {
|
|
13511
13518
|
const [col, row] = key.split('-').map(Number);
|
|
13512
|
-
const width =
|
|
13513
|
-
const height = table.getRowHeight(row);
|
|
13519
|
+
const { width, height } = getCellRect(col, row, table);
|
|
13514
13520
|
const currentContainer = value;
|
|
13515
13521
|
const args = {
|
|
13516
13522
|
col,
|
|
@@ -13527,17 +13533,22 @@
|
|
|
13527
13533
|
},
|
|
13528
13534
|
table
|
|
13529
13535
|
};
|
|
13530
|
-
|
|
13531
|
-
reconcilorUpdateContainer(children, currentContainer,
|
|
13536
|
+
currentContainer.containerInfo;
|
|
13537
|
+
reconcilorUpdateContainer(children, currentContainer, args);
|
|
13532
13538
|
table.scenegraph.updateNextFrame();
|
|
13533
13539
|
});
|
|
13534
13540
|
}
|
|
13535
13541
|
});
|
|
13536
13542
|
return null;
|
|
13537
13543
|
};
|
|
13538
|
-
function reconcilorUpdateContainer(children, currentContainer,
|
|
13544
|
+
function reconcilorUpdateContainer(children, currentContainer, args) {
|
|
13539
13545
|
reconcilor.updateContainer(React.cloneElement(children, { ...args }), currentContainer, null);
|
|
13540
13546
|
}
|
|
13547
|
+
function getCellRect(col, row, table) {
|
|
13548
|
+
const range = table.getCellRange(col, row);
|
|
13549
|
+
const rect = table.getCellsRect(range.start.col, range.start.row, range.end.col, range.end.row);
|
|
13550
|
+
return rect;
|
|
13551
|
+
}
|
|
13541
13552
|
|
|
13542
13553
|
const createComponent = (componentName, optionName, supportedEvents, isSingle) => {
|
|
13543
13554
|
const ignoreKeys = ['id', 'updateId', 'componentIndex', 'children'];
|
|
@@ -13750,7 +13761,7 @@
|
|
|
13750
13761
|
const Radio = 'radio';
|
|
13751
13762
|
const Checkbox = 'checkbox';
|
|
13752
13763
|
|
|
13753
|
-
const version = "1.5.4
|
|
13764
|
+
const version = "1.5.4";
|
|
13754
13765
|
|
|
13755
13766
|
exports.VTable = VTable__namespace;
|
|
13756
13767
|
exports.Arc = Arc;
|
package/dist/react-vtable.min.js
CHANGED
|
@@ -43,4 +43,4 @@
|
|
|
43
43
|
*
|
|
44
44
|
* This source code is licensed under the MIT license found in the
|
|
45
45
|
* LICENSE file in the root directory of this source tree.
|
|
46
|
-
*/"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,
|
|
46
|
+
*/"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,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,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)}}),[]),f=c.useCallback((()=>{i.current.forEach(((e,n)=>{const t=e;Ie.updateContainer(null,t,null)})),i.current.clear()}),[]);return c.useLayoutEffect((()=>(console.log("init",e,o),()=>{console.log("release",e,o)})),[]),c.useLayoutEffect((()=>{console.log("update props",e,o),o?.checkReactCustomLayout(f),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),{width:l,height:i}=function(e,n,t){const r=t.getCellRange(e,n),a=t.getCellsRect(r.start.col,r.start.row,r.end.col,r.end.row);return a}(t,a,o),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};u.containerInfo,Oe(r,u,s),o.scenegraph.updateNextFrame()}))})),null};function Oe(e,n,t){Ie.updateContainer(f.cloneElement(e,{...t}),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),Ge=Ue("EmptyTip","emptyTip",void 0,!0);function Ke(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=Ke(i,e.width)+"px",E=Ke(u,e.height)+"px","top-left"===h?(S=e.left+Ke(m,e.width)+"px",w=e.top+Ke(v,e.height)+"px"):"top-right"===h?(S=e.left+Ke(m,e.width)+e.width+"px",w=e.top+Ke(v,e.height)+"px"):"bottom-left"===h?(S=e.left+Ke(m,e.width)+"px",w=e.top+Ke(v,e.height)+e.height+"px"):"bottom-right"===h&&(S=e.left+Ke(m,e.width)+e.width+"px",w=e.top+Ke(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.EmptyTip=Ge,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.4"}));
|
|
@@ -18,11 +18,11 @@ export const CustomLayout = (props, ref) => {
|
|
|
18
18
|
let group;
|
|
19
19
|
if (container.current.has(key)) {
|
|
20
20
|
const currentContainer = container.current.get(key);
|
|
21
|
-
reconcilorUpdateContainer(children, currentContainer,
|
|
21
|
+
reconcilorUpdateContainer(children, currentContainer, args), group = currentContainer.containerInfo;
|
|
22
22
|
} else {
|
|
23
23
|
group = new Group({});
|
|
24
24
|
const currentContainer = reconcilor.createContainer(group, LegacyRoot, null, null, null, "custom", null, null);
|
|
25
|
-
container.current.set(key, currentContainer), reconcilorUpdateContainer(children, currentContainer,
|
|
25
|
+
container.current.set(key, currentContainer), reconcilorUpdateContainer(children, currentContainer, args);
|
|
26
26
|
}
|
|
27
27
|
return {
|
|
28
28
|
rootContainer: group,
|
|
@@ -34,13 +34,18 @@ export const CustomLayout = (props, ref) => {
|
|
|
34
34
|
const currentContainer = container.current.get(key);
|
|
35
35
|
reconcilor.updateContainer(null, currentContainer, null), container.current.delete(key);
|
|
36
36
|
}
|
|
37
|
+
}), []), removeAllContainer = useCallback((() => {
|
|
38
|
+
container.current.forEach(((value, key) => {
|
|
39
|
+
const currentContainer = value;
|
|
40
|
+
reconcilor.updateContainer(null, currentContainer, null);
|
|
41
|
+
})), container.current.clear();
|
|
37
42
|
}), []);
|
|
38
43
|
return useLayoutEffect((() => () => {}), []), useLayoutEffect((() => {
|
|
39
44
|
var _a, _b, _c, _d;
|
|
40
|
-
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),
|
|
45
|
+
null == table || table.checkReactCustomLayout(removeAllContainer), 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),
|
|
41
46
|
null === (_c = table.reactCustomLayout) || void 0 === _c || _c.setReactRemoveGraphic(componentId, removeContainer, isHeaderCustomLayout),
|
|
42
47
|
null === (_d = table.reactCustomLayout) || void 0 === _d || _d.updateCustomCell(componentId, isHeaderCustomLayout)) : table && container.current.forEach(((value, key) => {
|
|
43
|
-
const [col, row] = key.split("-").map(Number), width =
|
|
48
|
+
const [col, row] = key.split("-").map(Number), {width: width, height: height} = getCellRect(col, row, table), currentContainer = value, args = {
|
|
44
49
|
col: col,
|
|
45
50
|
row: row,
|
|
46
51
|
dataValue: table.getCellOriginValue(col, row),
|
|
@@ -54,17 +59,23 @@ export const CustomLayout = (props, ref) => {
|
|
|
54
59
|
height: height
|
|
55
60
|
},
|
|
56
61
|
table: table
|
|
57
|
-
}
|
|
58
|
-
|
|
62
|
+
};
|
|
63
|
+
currentContainer.containerInfo;
|
|
64
|
+
reconcilorUpdateContainer(children, currentContainer, args), table.scenegraph.updateNextFrame();
|
|
59
65
|
}));
|
|
60
66
|
})), null;
|
|
61
67
|
};
|
|
62
68
|
|
|
63
|
-
function reconcilorUpdateContainer(children, currentContainer,
|
|
69
|
+
function reconcilorUpdateContainer(children, currentContainer, args) {
|
|
64
70
|
reconcilor.updateContainer(React.cloneElement(children, Object.assign({}, args)), currentContainer, null);
|
|
65
71
|
}
|
|
66
72
|
|
|
67
73
|
function isReactElement(obj) {
|
|
68
74
|
return obj && obj.$$typeof === Symbol.for("react.element");
|
|
69
75
|
}
|
|
76
|
+
|
|
77
|
+
function getCellRect(col, row, table) {
|
|
78
|
+
const range = table.getCellRange(col, row);
|
|
79
|
+
return table.getCellsRect(range.start.col, range.start.row, range.end.col, range.end.row);
|
|
80
|
+
}
|
|
70
81
|
//# sourceMappingURL=custom-layout.js.map
|
|
@@ -1 +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, 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"]}
|
|
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, 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, args);\n group = currentContainer.containerInfo;\n // 这里更新group，可能会残留dx dy\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, 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 const removeAllContainer = useCallback(() => {\n container.current.forEach((value, key) => {\n const currentContainer = value;\n reconcilor.updateContainer(null, currentContainer, null);\n });\n container.current.clear();\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(removeAllContainer); // 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 { width, height } = getCellRect(col, row, table);\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, 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, 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\nfunction getCellRect(col: number, row: number, table: any) {\n const range = table.getCellRange(col, row);\n const rect = table.getCellsRect(range.start.col, range.start.row, range.end.col, range.end.row);\n return rect;\n}\n"]}
|
package/es/index.d.ts
CHANGED
package/es/index.js
CHANGED
package/es/index.js.map
CHANGED
|
@@ -1 +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,
|
|
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,OAAO,CAAC","file":"index.js","sourcesContent":["export * from './tables';\nexport * from './components';\nexport * from './vtable';\n\nexport const version = \"1.5.4\";\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@visactor/react-vtable",
|
|
3
|
-
"version": "1.5.4
|
|
3
|
+
"version": "1.5.4",
|
|
4
4
|
"description": "The react version of VTable",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -43,13 +43,13 @@
|
|
|
43
43
|
"access": "public"
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
|
-
"@visactor/vtable": "1.5.4-beta.0",
|
|
47
46
|
"@visactor/vutils": "~0.18.9",
|
|
48
47
|
"react-is": "^18.2.0",
|
|
49
|
-
"react-reconciler": "0.29.2"
|
|
48
|
+
"react-reconciler": "0.29.2",
|
|
49
|
+
"@visactor/vtable": "1.5.4"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
|
-
"@visactor/vchart": "1.11.
|
|
52
|
+
"@visactor/vchart": "1.11.10",
|
|
53
53
|
"@rushstack/eslint-patch": "~1.1.4",
|
|
54
54
|
"react": "^18.0.0",
|
|
55
55
|
"react-dom": "^18.0.0",
|
|
@@ -91,9 +91,9 @@
|
|
|
91
91
|
"@types/react-is": "^17.0.3",
|
|
92
92
|
"@arco-design/web-react": "2.60.2",
|
|
93
93
|
"@types/react-reconciler": "0.28.8",
|
|
94
|
-
"@internal/ts-config": "0.0.1",
|
|
95
94
|
"@internal/bundler": "0.0.1",
|
|
96
|
-
"@internal/eslint-config": "0.0.1"
|
|
95
|
+
"@internal/eslint-config": "0.0.1",
|
|
96
|
+
"@internal/ts-config": "0.0.1"
|
|
97
97
|
},
|
|
98
98
|
"scripts": {
|
|
99
99
|
"start": "vite ./demo",
|