@vmscloud/moz-ui-chart-react 0.1.1 → 0.1.2

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";var e=Object.defineProperty,t=(t,r,o)=>((t,r,o)=>r in t?e(t,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[r]=o)(t,"symbol"!=typeof r?r+"":r,o);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),o=require("react"),n=require("@vmscloud/moz-ui-chart-core"),a=require("react-dom/client"),l=new Set;let u=null;function i(e){l.add(e),null==u&&(u=setTimeout(()=>{u=null;const e=Array.from(l);l.clear();for(const t of e)t.unmount()},0))}class c{constructor(){t(this,"contextWrapper",null),t(this,"roots",new Set)}setContextWrapper(e){this.contextWrapper=e}mountInstance(e,t,r){const n=a.createRoot(e);this.roots.add(n);const l=e=>{const r=o.createElement(t,e);n.render(this.contextWrapper?this.contextWrapper(r):r)};return l(r),{update:e=>l(e),destroy:()=>{this.roots.delete(n),i(n)}}}unmountAll(){for(const e of this.roots)i(e);this.roots.clear()}get size(){return this.roots.size}}const s=o.createContext(n.koKR);function p(){return o.useContext(s)}const f=[["tool-left","toolLeft"],["tool-items","toolItems"],["tool-items-after","toolItemsAfter"]],h=({node:e})=>r.jsx(r.Fragment,{children:e??null}),d=o.forwardRef(function(e,t){const a=o.useRef(null),l=o.useRef(null),u=o.useRef(new c),i=o.useRef(new Map),s=o.useRef(null),d=o.useRef(e);d.current=e;const m=p(),g=()=>({id:e.id,itemsSource:e.itemsSource??[],chartDef:e.chartDef,viewDef:e.viewDef,filterDef:e.filterDef,chartDefTemplate:e.chartDefTemplate,isFetching:e.isFetching,useToolBox:e.useToolBox,useChartSetting:e.useChartSetting,useChartPopupIcon:e.useChartPopupIcon,chartPopupTitle:e.chartPopupTitle,useStackBarHover:e.useStackBarHover,onInitialized:e.onInitialized});return o.useLayoutEffect(()=>{const e=a.current;if(!e)return;const t=u.current,r={};for(const[n,a]of f)r[n]=e=>{const r=t.mountInstance(e,h,{node:d.current[a]});return i.current.set(n,r),{update:()=>r.update({node:d.current[a]}),dispose:()=>{i.current.delete(n),r.destroy()}}};const o=new n.ChartChrome(e,g(),{locale:m,slots:r,onOpenPopup:(e,t,r)=>{var a;const l=d.current;if(l.onOpenPopup)return void l.onOpenPopup(e,t,r);null==(a=s.current)||a.close();const u=(l.popupPath??(e=>`/chartPopup/${e}`))(t);s.current=n.openChartPopupWindow({href:u,name:t,payload:e,title:r??o.locale.Chart.chartPopup,onBlocked:()=>n.showMessage(o.locale.Chart.errorMessage,!1)})}});return o.on("chartDef:change",e=>{var t,r;return null==(r=(t=d.current).onChartDefChange)?void 0:r.call(t,e)}),o.on("viewDef:change",e=>{var t,r;return null==(r=(t=d.current).onViewDefChange)?void 0:r.call(t,{...e})}),o.on("filterDef:change",e=>{var t,r;return null==(r=(t=d.current).onFilterDefChange)?void 0:r.call(t,[...e])}),l.current=o,o.mount(),()=>{var e;null==(e=s.current)||e.close(),o.destroy(),l.current=null,t.unmountAll()}},[]),o.useEffect(()=>{var e;null==(e=l.current)||e.update(g())},[e.id,e.itemsSource,e.chartDef,e.viewDef,e.filterDef,e.chartDefTemplate,e.isFetching,e.useToolBox,e.useChartSetting,e.useChartPopupIcon,e.chartPopupTitle,e.useStackBarHover,e.onInitialized]),o.useEffect(()=>{var t;for(const[r,o]of f)null==(t=i.current.get(r))||t.update({node:e[o]})},[e.toolLeft,e.toolItems,e.toolItemsAfter]),o.useEffect(()=>{var e;null==(e=l.current)||e.setLocale(m)},[m]),o.useImperativeHandle(t,()=>({get chrome(){return l.current},get mozEChart(){var e;return null==(e=l.current)?void 0:e.mozEChart},get state(){var e;return null==(e=l.current)?void 0:e.state},get chartKey(){var e;return null==(e=l.current)?void 0:e.chartKey},get chartOptionModal(){var e;return!!(null==(e=l.current)?void 0:e.optionModalOpen)},set chartOptionModal(e){l.current&&(l.current.optionModalOpen=e)},get chartFilterModel(){var e;return!!(null==(e=l.current)?void 0:e.filterModalOpen)},set chartFilterModel(e){l.current&&(l.current.filterModalOpen=e)},openOptionModal:()=>{l.current&&(l.current.optionModalOpen=!0)},closeOptionModal:()=>{l.current&&(l.current.optionModalOpen=!1)},openFilter:()=>{l.current&&(l.current.filterModalOpen=!0)},closeFilter:()=>{l.current&&(l.current.filterModalOpen=!1)},initializeDefinition:e=>{var t;return null==(t=l.current)?void 0:t.initializeDefinition(e)},clickChartPopup:()=>{var e;return null==(e=l.current)?void 0:e.clickChartPopup()},getDefinition:()=>{var e;return null==(e=l.current)?void 0:e.getDefinitionWithoutData()},importDefinition:e=>{var t;return null==(t=l.current)?void 0:t.importDefinition(e)}}),[]),r.jsx("div",{ref:a,className:["mzch-react-echart-host",e.className].filter(Boolean).join(" "),style:{width:"100%",height:"100%",minHeight:0,...e.style},"data-chart-id":e.id})}),m={itemsSource:[],chartDef:{},viewDef:{fields:[],rowFields:[],columnFields:[],valueFields:[]},filterDef:[],chartDefTemplate:{},chartPopupTitle:"",ready:!1};Object.defineProperty(exports,"Aggregate",{enumerable:!0,get:()=>n.Aggregate}),Object.defineProperty(exports,"ChartChrome",{enumerable:!0,get:()=>n.ChartChrome}),Object.defineProperty(exports,"DataType",{enumerable:!0,get:()=>n.DataType}),Object.defineProperty(exports,"MozEChart",{enumerable:!0,get:()=>n.MozEChart}),Object.defineProperty(exports,"RENDER_LIMIT",{enumerable:!0,get:()=>n.RENDER_LIMIT}),Object.defineProperty(exports,"enUS",{enumerable:!0,get:()=>n.enUS}),Object.defineProperty(exports,"jaJP",{enumerable:!0,get:()=>n.jaJP}),Object.defineProperty(exports,"koKR",{enumerable:!0,get:()=>n.koKR}),Object.defineProperty(exports,"showConfirm",{enumerable:!0,get:()=>n.showConfirm}),Object.defineProperty(exports,"showDialog",{enumerable:!0,get:()=>n.showDialog}),Object.defineProperty(exports,"showMessage",{enumerable:!0,get:()=>n.showMessage}),Object.defineProperty(exports,"zhCN",{enumerable:!0,get:()=>n.zhCN}),exports.ChartLocaleContext=s,exports.ChartLocaleProvider=function({locale:e,children:t}){return r.jsx(s.Provider,{value:e??n.koKR,children:t})},exports.EChart=d,exports.useChartLocale=p,exports.useEChartPopupView=function(){const[e,t]=o.useState(m);return o.useEffect(()=>n.listenChartPopupPayload(e=>{t({itemsSource:e.itemsSource,chartDef:e.chartDef,viewDef:e.viewDef,filterDef:e.filterDef,chartDefTemplate:e.chartDefTemplate??{},chartPopupTitle:e.title??"",ready:!0})}),[]),e};
+"use strict";var e=Object.defineProperty,t=(t,r,o)=>((t,r,o)=>r in t?e(t,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[r]=o)(t,"symbol"!=typeof r?r+"":r,o);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),o=require("react"),n=require("@vmscloud/moz-ui-chart-core"),a=require("react-dom/client"),u=new Set;let l=null;function c(e){u.add(e),null==l&&(l=setTimeout(()=>{l=null;const e=Array.from(u);u.clear();for(const t of e)t.unmount()},0))}class i{constructor(){t(this,"contextWrapper",null),t(this,"roots",new Set)}setContextWrapper(e){this.contextWrapper=e}mountInstance(e,t,r){const n=a.createRoot(e);this.roots.add(n);const u=e=>{const r=o.createElement(t,e);n.render(this.contextWrapper?this.contextWrapper(r):r)};return u(r),{update:e=>u(e),destroy:()=>{this.roots.delete(n),c(n)}}}unmountAll(){for(const e of this.roots)c(e);this.roots.clear()}get size(){return this.roots.size}}const s=o.createContext(n.koKR);function p(){return o.useContext(s)}const f=[["tool-left","toolLeft"],["tool-items","toolItems"],["tool-items-after","toolItemsAfter"]],h=({node:e})=>r.jsx(r.Fragment,{children:e??null}),d=e=>null!=e&&!1!==e&&!0!==e&&""!==e&&(!Array.isArray(e)||e.some(e=>d(e))),m=o.forwardRef(function(e,t){const a=o.useRef(null),u=o.useRef(null),l=o.useRef(new i),c=o.useRef(new Map),s=o.useRef(new Set),m=o.useRef(null),g=o.useRef(e);g.current=e;const v=(e,t)=>r=>{const o=l.current.mountInstance(r,h,{node:g.current[t]});return c.current.set(e,o),{update:()=>o.update({node:g.current[t]}),dispose:()=>{c.current.delete(e),o.destroy()}}},D=p(),C=()=>({id:e.id,itemsSource:e.itemsSource??[],chartDef:e.chartDef,viewDef:e.viewDef,filterDef:e.filterDef,chartDefTemplate:e.chartDefTemplate,isFetching:e.isFetching,useToolBox:e.useToolBox,useChartSetting:e.useChartSetting,useChartPopupIcon:e.useChartPopupIcon,chartPopupTitle:e.chartPopupTitle,useStackBarHover:e.useStackBarHover,onInitialized:e.onInitialized});return o.useLayoutEffect(()=>{const e=a.current;if(!e)return;const t=l.current,r={};for(const[n,a]of f)d(g.current[a])&&(r[n]=v(n,a),s.current.add(n));const o=new n.ChartChrome(e,C(),{locale:D,slots:r,onOpenPopup:(e,t,r)=>{var a;const u=g.current;if(u.onOpenPopup)return void u.onOpenPopup(e,t,r);null==(a=m.current)||a.close();const l=(u.popupPath??(e=>`/chartPopup/${e}`))(t);m.current=n.openChartPopupWindow({href:l,name:t,payload:e,title:r??o.locale.Chart.chartPopup,onBlocked:()=>n.showMessage(o.locale.Chart.errorMessage,!1)})}});return o.on("chartDef:change",e=>{var t,r;return null==(r=(t=g.current).onChartDefChange)?void 0:r.call(t,e)}),o.on("viewDef:change",e=>{var t,r;return null==(r=(t=g.current).onViewDefChange)?void 0:r.call(t,{...e})}),o.on("filterDef:change",e=>{var t,r;return null==(r=(t=g.current).onFilterDefChange)?void 0:r.call(t,[...e])}),u.current=o,o.mount(),()=>{var e;null==(e=m.current)||e.close(),o.destroy(),u.current=null,s.current.clear(),t.unmountAll()}},[]),o.useEffect(()=>{var e;null==(e=u.current)||e.update(C())},[e.id,e.itemsSource,e.chartDef,e.viewDef,e.filterDef,e.chartDefTemplate,e.isFetching,e.useToolBox,e.useChartSetting,e.useChartPopupIcon,e.chartPopupTitle,e.useStackBarHover,e.onInitialized]),o.useEffect(()=>{var t;const r=u.current;if(r)for(const[o,n]of f){const a=e[n],u=s.current.has(o);d(a)?u?null==(t=c.current.get(o))||t.update({node:a}):(r.setSlot(o,v(o,n)),s.current.add(o)):u&&(r.setSlot(o,null),s.current.delete(o))}},[e.toolLeft,e.toolItems,e.toolItemsAfter]),o.useEffect(()=>{var e;null==(e=u.current)||e.setLocale(D)},[D]),o.useImperativeHandle(t,()=>({get chrome(){return u.current},get mozEChart(){var e;return null==(e=u.current)?void 0:e.mozEChart},get state(){var e;return null==(e=u.current)?void 0:e.state},get chartKey(){var e;return null==(e=u.current)?void 0:e.chartKey},get chartOptionModal(){var e;return!!(null==(e=u.current)?void 0:e.optionModalOpen)},set chartOptionModal(e){u.current&&(u.current.optionModalOpen=e)},get chartFilterModel(){var e;return!!(null==(e=u.current)?void 0:e.filterModalOpen)},set chartFilterModel(e){u.current&&(u.current.filterModalOpen=e)},openOptionModal:()=>{u.current&&(u.current.optionModalOpen=!0)},closeOptionModal:()=>{u.current&&(u.current.optionModalOpen=!1)},openFilter:()=>{u.current&&(u.current.filterModalOpen=!0)},closeFilter:()=>{u.current&&(u.current.filterModalOpen=!1)},initializeDefinition:e=>{var t;return null==(t=u.current)?void 0:t.initializeDefinition(e)},clickChartPopup:()=>{var e;return null==(e=u.current)?void 0:e.clickChartPopup()},getDefinition:()=>{var e;return null==(e=u.current)?void 0:e.getDefinitionWithoutData()},importDefinition:e=>{var t;return null==(t=u.current)?void 0:t.importDefinition(e)}}),[]),r.jsx("div",{ref:a,className:["mzch-react-echart-host",e.className].filter(Boolean).join(" "),style:{width:"100%",height:"100%",minHeight:0,...e.style},"data-chart-id":e.id})}),g={itemsSource:[],chartDef:{},viewDef:{fields:[],rowFields:[],columnFields:[],valueFields:[]},filterDef:[],chartDefTemplate:{},chartPopupTitle:"",ready:!1};Object.defineProperty(exports,"Aggregate",{enumerable:!0,get:()=>n.Aggregate}),Object.defineProperty(exports,"ChartChrome",{enumerable:!0,get:()=>n.ChartChrome}),Object.defineProperty(exports,"DataType",{enumerable:!0,get:()=>n.DataType}),Object.defineProperty(exports,"MozEChart",{enumerable:!0,get:()=>n.MozEChart}),Object.defineProperty(exports,"RENDER_LIMIT",{enumerable:!0,get:()=>n.RENDER_LIMIT}),Object.defineProperty(exports,"enUS",{enumerable:!0,get:()=>n.enUS}),Object.defineProperty(exports,"jaJP",{enumerable:!0,get:()=>n.jaJP}),Object.defineProperty(exports,"koKR",{enumerable:!0,get:()=>n.koKR}),Object.defineProperty(exports,"showConfirm",{enumerable:!0,get:()=>n.showConfirm}),Object.defineProperty(exports,"showDialog",{enumerable:!0,get:()=>n.showDialog}),Object.defineProperty(exports,"showMessage",{enumerable:!0,get:()=>n.showMessage}),Object.defineProperty(exports,"zhCN",{enumerable:!0,get:()=>n.zhCN}),exports.ChartLocaleContext=s,exports.ChartLocaleProvider=function({locale:e,children:t}){return r.jsx(s.Provider,{value:e??n.koKR,children:t})},exports.EChart=m,exports.useChartLocale=p,exports.useEChartPopupView=function(){const[e,t]=o.useState(g);return o.useEffect(()=>n.listenChartPopupPayload(e=>{t({itemsSource:e.itemsSource,chartDef:e.chartDef,viewDef:e.viewDef,filterDef:e.filterDef,chartDefTemplate:e.chartDefTemplate??{},chartPopupTitle:e.title??"",ready:!0})}),[]),e};

package/dist/index.js

@@ -63,14 +63,31 @@ const SLOT_PROPS = [
   ["tool-items-after", "toolItemsAfter"]
 ];
 const SlotContent = ({ node }) => /* @__PURE__ */ jsx(Fragment, { children: node ?? null });
+const hasSlotNode = (node) => {
+  if (node == null || node === false || node === true || node === "") return false;
+  if (Array.isArray(node)) return node.some((n) => hasSlotNode(n));
+  return true;
+};
 const EChart = forwardRef(function EChart2(props, ref) {
   const hostRef = useRef(null);
   const chromeRef = useRef(null);
   const rendererRef = useRef(new ReactRenderer());
   const slotHandles = useRef(/* @__PURE__ */ new Map());
+  const registeredSlots = useRef(/* @__PURE__ */ new Set());
   const popupHandle = useRef(null);
   const propsRef = useRef(props);
   propsRef.current = props;
+  const makeSlotRenderer = (slotName, propName) => (el) => {
+    const handle = rendererRef.current.mountInstance(el, SlotContent, { node: propsRef.current[propName] });
+    slotHandles.current.set(slotName, handle);
+    return {
+      update: () => handle.update({ node: propsRef.current[propName] }),
+      dispose: () => {
+        slotHandles.current.delete(slotName);
+        handle.destroy();
+      }
+    };
+  };
   const locale = useChartLocale();
   const coreProps = () => ({
     id: props.id,
@@ -93,17 +110,10 @@ const EChart = forwardRef(function EChart2(props, ref) {
     const renderer = rendererRef.current;
     const slots = {};
     for (const [slotName, propName] of SLOT_PROPS) {
-      slots[slotName] = (el) => {
-        const handle = renderer.mountInstance(el, SlotContent, { node: propsRef.current[propName] });
-        slotHandles.current.set(slotName, handle);
-        return {
-          update: () => handle.update({ node: propsRef.current[propName] }),
-          dispose: () => {
-            slotHandles.current.delete(slotName);
-            handle.destroy();
-          }
-        };
-      };
+      if (hasSlotNode(propsRef.current[propName])) {
+        slots[slotName] = makeSlotRenderer(slotName, propName);
+        registeredSlots.current.add(slotName);
+      }
     }
     const chrome = new ChartChrome(host, coreProps(), {
       locale,
@@ -145,6 +155,7 @@ const EChart = forwardRef(function EChart2(props, ref) {
       (_a = popupHandle.current) == null ? void 0 : _a.close();
       chrome.destroy();
       chromeRef.current = null;
+      registeredSlots.current.clear();
       renderer.unmountAll();
     };
   }, []);
@@ -168,7 +179,22 @@ const EChart = forwardRef(function EChart2(props, ref) {
   ]);
   useEffect(() => {
     var _a;
-    for (const [slotName, propName] of SLOT_PROPS) (_a = slotHandles.current.get(slotName)) == null ? void 0 : _a.update({ node: props[propName] });
+    const chrome = chromeRef.current;
+    if (!chrome) return;
+    for (const [slotName, propName] of SLOT_PROPS) {
+      const node = props[propName];
+      const registered = registeredSlots.current.has(slotName);
+      if (hasSlotNode(node)) {
+        if (registered) (_a = slotHandles.current.get(slotName)) == null ? void 0 : _a.update({ node });
+        else {
+          chrome.setSlot(slotName, makeSlotRenderer(slotName, propName));
+          registeredSlots.current.add(slotName);
+        }
+      } else if (registered) {
+        chrome.setSlot(slotName, null);
+        registeredSlots.current.delete(slotName);
+      }
+    }
   }, [props.toolLeft, props.toolItems, props.toolItemsAfter]);
   useEffect(() => {
     var _a;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vmscloud/moz-ui-chart-react",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "license": "ISC",
   "type": "module",
   "sideEffects": [
@@ -65,7 +65,7 @@
     "directory": "components/frontend/moz-ui-chart-react"
   },
   "dependencies": {
-    "@vmscloud/moz-ui-chart-core": "^0.1.0"
+    "@vmscloud/moz-ui-chart-core": "^0.1.2"
   },
   "peerDependencies": {
     "react": ">=18.2.0",