@visactor/react-vtable 1.5.4-alpha.3 → 1.5.4-alpha.5
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 +12 -6
- 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 +14 -7
- package/dist/react-vtable.min.js +1 -1
- package/es/components/custom/custom-layout.js +12 -6
- 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 +2 -2
|
@@ -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,10 +58,15 @@ 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
72
|
const [col, row] = key.split("-").map(Number), {width: width, height: height} = getCellRect(col, row, table), currentContainer = value, args = {
|
|
@@ -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
|
|
|
@@ -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 { 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, 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\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"]}
|
|
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/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-alpha.
|
|
21
|
+
__exportStar(require("./vtable"), exports), exports.version = "1.5.4-alpha.5";
|
|
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,eAAe,CAAC","file":"index.js","sourcesContent":["export * from './tables';\nexport * from './components';\nexport * from './vtable';\n\nexport const version = \"1.5.4-alpha.
|
|
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.4-alpha.5\";\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);
|
|
@@ -13526,15 +13533,15 @@
|
|
|
13526
13533
|
},
|
|
13527
13534
|
table
|
|
13528
13535
|
};
|
|
13529
|
-
|
|
13530
|
-
reconcilorUpdateContainer(children, currentContainer,
|
|
13536
|
+
currentContainer.containerInfo;
|
|
13537
|
+
reconcilorUpdateContainer(children, currentContainer, args);
|
|
13531
13538
|
table.scenegraph.updateNextFrame();
|
|
13532
13539
|
});
|
|
13533
13540
|
}
|
|
13534
13541
|
});
|
|
13535
13542
|
return null;
|
|
13536
13543
|
};
|
|
13537
|
-
function reconcilorUpdateContainer(children, currentContainer,
|
|
13544
|
+
function reconcilorUpdateContainer(children, currentContainer, args) {
|
|
13538
13545
|
reconcilor.updateContainer(React.cloneElement(children, { ...args }), currentContainer, null);
|
|
13539
13546
|
}
|
|
13540
13547
|
function getCellRect(col, row, table) {
|
|
@@ -13754,7 +13761,7 @@
|
|
|
13754
13761
|
const Radio = 'radio';
|
|
13755
13762
|
const Checkbox = 'checkbox';
|
|
13756
13763
|
|
|
13757
|
-
const version = "1.5.4-alpha.
|
|
13764
|
+
const version = "1.5.4-alpha.5";
|
|
13758
13765
|
|
|
13759
13766
|
exports.VTable = VTable__namespace;
|
|
13760
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-alpha.5"}));
|
|
@@ -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,10 +34,15 @@ 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
48
|
const [col, row] = key.split("-").map(Number), {width: width, height: height} = getCellRect(col, row, table), currentContainer = value, args = {
|
|
@@ -54,13 +59,14 @@ 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
|
|
|
@@ -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 { 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, 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\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"]}
|
|
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,eAAe,CAAC","file":"index.js","sourcesContent":["export * from './tables';\nexport * from './components';\nexport * from './vtable';\n\nexport const version = \"1.5.4-alpha.
|
|
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.4-alpha.5\";\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@visactor/react-vtable",
|
|
3
|
-
"version": "1.5.4-alpha.
|
|
3
|
+
"version": "1.5.4-alpha.5",
|
|
4
4
|
"description": "The react version of VTable",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"access": "public"
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
|
-
"@visactor/vtable": "1.5.4-alpha.
|
|
46
|
+
"@visactor/vtable": "1.5.4-alpha.5",
|
|
47
47
|
"@visactor/vutils": "~0.18.9",
|
|
48
48
|
"react-is": "^18.2.0",
|
|
49
49
|
"react-reconciler": "0.29.2"
|