@visactor/react-vtable 1.5.4-alpha.2 → 1.5.4-alpha.3
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 +6 -1
- 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 +7 -3
- package/dist/react-vtable.min.js +1 -1
- package/es/components/custom/custom-layout.js +6 -1
- 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 +4 -4
|
@@ -64,7 +64,7 @@ const react_1 = __importStar(require("react")), table_1 = __importDefault(requir
|
|
|
64
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),
|
|
65
65
|
null === (_c = table.reactCustomLayout) || void 0 === _c || _c.setReactRemoveGraphic(componentId, removeContainer, isHeaderCustomLayout),
|
|
66
66
|
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 =
|
|
67
|
+
const [col, row] = key.split("-").map(Number), {width: width, height: height} = getCellRect(col, row, table), currentContainer = value, args = {
|
|
68
68
|
col: col,
|
|
69
69
|
row: row,
|
|
70
70
|
dataValue: table.getCellOriginValue(col, row),
|
|
@@ -92,5 +92,10 @@ function isReactElement(obj) {
|
|
|
92
92
|
return obj && obj.$$typeof === Symbol.for("react.element");
|
|
93
93
|
}
|
|
94
94
|
|
|
95
|
+
function getCellRect(col, row, table) {
|
|
96
|
+
const range = table.getCellRange(col, row);
|
|
97
|
+
return table.getCellsRect(range.start.col, range.start.row, range.end.col, range.end.row);
|
|
98
|
+
}
|
|
99
|
+
|
|
95
100
|
//# sourceMappingURL=custom-layout.js.map
|
|
96
101
|
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":"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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"]}
|
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.3";
|
|
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.3\";\n"]}
|
package/dist/react-vtable.js
CHANGED
|
@@ -13509,8 +13509,7 @@
|
|
|
13509
13509
|
else if (table) {
|
|
13510
13510
|
container.current.forEach((value, key) => {
|
|
13511
13511
|
const [col, row] = key.split('-').map(Number);
|
|
13512
|
-
const width =
|
|
13513
|
-
const height = table.getRowHeight(row);
|
|
13512
|
+
const { width, height } = getCellRect(col, row, table);
|
|
13514
13513
|
const currentContainer = value;
|
|
13515
13514
|
const args = {
|
|
13516
13515
|
col,
|
|
@@ -13538,6 +13537,11 @@
|
|
|
13538
13537
|
function reconcilorUpdateContainer(children, currentContainer, group, args) {
|
|
13539
13538
|
reconcilor.updateContainer(React.cloneElement(children, { ...args }), currentContainer, null);
|
|
13540
13539
|
}
|
|
13540
|
+
function getCellRect(col, row, table) {
|
|
13541
|
+
const range = table.getCellRange(col, row);
|
|
13542
|
+
const rect = table.getCellsRect(range.start.col, range.start.row, range.end.col, range.end.row);
|
|
13543
|
+
return rect;
|
|
13544
|
+
}
|
|
13541
13545
|
|
|
13542
13546
|
const createComponent = (componentName, optionName, supportedEvents, isSingle) => {
|
|
13543
13547
|
const ignoreKeys = ['id', 'updateId', 'componentIndex', 'children'];
|
|
@@ -13750,7 +13754,7 @@
|
|
|
13750
13754
|
const Radio = 'radio';
|
|
13751
13755
|
const Checkbox = 'checkbox';
|
|
13752
13756
|
|
|
13753
|
-
const version = "1.5.4-alpha.
|
|
13757
|
+
const version = "1.5.4-alpha.3";
|
|
13754
13758
|
|
|
13755
13759
|
exports.VTable = VTable__namespace;
|
|
13756
13760
|
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,t,e),t=a.containerInfo}else{t=new De({});const a=Ie.createContainer(t,Re.LegacyRoot,null,null,null,"custom",null,null);i.current.set(n,a),Oe(r,a,t,e)}return{rootContainer:t,renderDefault:!!r.props.renderDefault}}),[r]),s=c.useCallback(((e,n)=>{const t=`${e}-${n}`;if(i.current.has(t)){const e=i.current.get(t);Ie.updateContainer(null,e,null),i.current.delete(t)}}),[]);return c.useLayoutEffect((()=>(console.log("init",e,o),()=>{console.log("release",e,o)})),[]),c.useLayoutEffect((()=>{console.log("update props",e,o),o?.checkReactCustomLayout(),o&&!o.reactCustomLayout?.hasReactCreateGraphic(t,l)?(o.reactCustomLayout?.setReactCreateGraphic(t,u,l),o.reactCustomLayout?.setReactRemoveGraphic(t,s,l),o.reactCustomLayout?.updateCustomCell(t,l)):o&&i.current.forEach(((e,n)=>{const[t,a]=n.split("-").map(Number),l=
|
|
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,t,e),t=a.containerInfo}else{t=new De({});const a=Ie.createContainer(t,Re.LegacyRoot,null,null,null,"custom",null,null);i.current.set(n,a),Oe(r,a,t,e)}return{rootContainer:t,renderDefault:!!r.props.renderDefault}}),[r]),s=c.useCallback(((e,n)=>{const t=`${e}-${n}`;if(i.current.has(t)){const e=i.current.get(t);Ie.updateContainer(null,e,null),i.current.delete(t)}}),[]);return c.useLayoutEffect((()=>(console.log("init",e,o),()=>{console.log("release",e,o)})),[]),c.useLayoutEffect((()=>{console.log("update props",e,o),o?.checkReactCustomLayout(),o&&!o.reactCustomLayout?.hasReactCreateGraphic(t,l)?(o.reactCustomLayout?.setReactCreateGraphic(t,u,l),o.reactCustomLayout?.setReactRemoveGraphic(t,s,l),o.reactCustomLayout?.updateCustomCell(t,l)):o&&i.current.forEach(((e,n)=>{const[t,a]=n.split("-").map(Number),{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},c=u.containerInfo;Oe(r,u,c,s),o.scenegraph.updateNextFrame()}))})),null};function Oe(e,n,t,r){Ie.updateContainer(f.cloneElement(e,{...r}),n,null)}const Ue=(e,n,t,r)=>{const a=["id","updateId","componentIndex","children"],o=t?Object.keys(t).concat(a):a,l=e=>{const n=c.useContext(d),r=f.useRef(null),a=f.useRef(e.updateId);if(e.updateId!==a.current){a.current=e.updateId;!!t&&B(n.table,e,r.current,t)&&(r.current=e)}return c.useEffect((()=>()=>{t&&B(n.table,null,r.current,t)}),[]),je(e.children,e.componentId)};return l.displayName=e,l.parseOption=e=>{const t=P(e,o);if(e.children){const{children:n}=e;f.Children.map(n,((n,r)=>{Fe(n,e,t,o,e.componentId+"-"+r)}))}return{option:t,optionName:n,isSingle:r}},l};function Fe(e,n,t,r,a){if("custom-layout"===e.props.role&&(t.customLayout="react-custom-layout",t.customLayoutComponentId=a),"header-custom-layout"===e.props.role&&(t.headerCustomLayout="react-custom-layout",t.headerCustomLayoutComponentId=a),"ListColumn"===e.type.displayName){t.columns||(t.columns=[]);const o=P(e.props,r);t.columns.push(o),o.componentId=a,e.props.children&&f.Children.map(e.props.children,((e,t)=>{Fe(e,n,o,r,a+"-"+t)}))}}function je(e,n){return(t=e)&&t.$$typeof===Symbol.for("react.element")||Array.isArray(e)?f.Children.map(e,((e,t)=>e.props.children?je(e.props.children,n+"-"+t):"custom-layout"===e.props.role||"header-custom-layout"===e.props.role?f.createElement(Me,{componentId:n},e):null)):null;var t}const Ae=Ue("ListColumn","columns"),He=Ue("PivotColumnDimension","columns"),We=Ue("PivotRowDimension","rows"),$e=Ue("PivotIndicator","indicators"),Be=Ue("PivotColumnHeaderTitle","columnHeaderTitle",void 0,!0),Ve=Ue("PivotRowHeaderTitle","rowHeaderTitle",void 0,!0),Qe=Ue("PivotCorner","corner",void 0,!0),qe=Ue("Menu","menu",void 0,!0),Ye=Ue("Tooltip","tooltip",void 0,!0),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.3"}));
|
|
@@ -40,7 +40,7 @@ export const CustomLayout = (props, ref) => {
|
|
|
40
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),
|
|
41
41
|
null === (_c = table.reactCustomLayout) || void 0 === _c || _c.setReactRemoveGraphic(componentId, removeContainer, isHeaderCustomLayout),
|
|
42
42
|
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 =
|
|
43
|
+
const [col, row] = key.split("-").map(Number), {width: width, height: height} = getCellRect(col, row, table), currentContainer = value, args = {
|
|
44
44
|
col: col,
|
|
45
45
|
row: row,
|
|
46
46
|
dataValue: table.getCellOriginValue(col, row),
|
|
@@ -67,4 +67,9 @@ function reconcilorUpdateContainer(children, currentContainer, group, args) {
|
|
|
67
67
|
function isReactElement(obj) {
|
|
68
68
|
return obj && obj.$$typeof === Symbol.for("react.element");
|
|
69
69
|
}
|
|
70
|
+
|
|
71
|
+
function getCellRect(col, row, table) {
|
|
72
|
+
const range = table.getCellRange(col, row);
|
|
73
|
+
return table.getCellsRect(range.start.col, range.start.row, range.end.col, range.end.row);
|
|
74
|
+
}
|
|
70
75
|
//# 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, 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"]}
|
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.3\";\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.3",
|
|
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.3",
|
|
47
47
|
"@visactor/vutils": "~0.18.9",
|
|
48
48
|
"react-is": "^18.2.0",
|
|
49
49
|
"react-reconciler": "0.29.2"
|
|
@@ -92,8 +92,8 @@
|
|
|
92
92
|
"@arco-design/web-react": "2.60.2",
|
|
93
93
|
"@types/react-reconciler": "0.28.8",
|
|
94
94
|
"@internal/bundler": "0.0.1",
|
|
95
|
-
"@internal/
|
|
96
|
-
"@internal/
|
|
95
|
+
"@internal/eslint-config": "0.0.1",
|
|
96
|
+
"@internal/ts-config": "0.0.1"
|
|
97
97
|
},
|
|
98
98
|
"scripts": {
|
|
99
99
|
"start": "vite ./demo",
|