@j2inn/fin5-ui-utils 1.0.2-beta.3 → 1.0.2-beta.4

package/dist/react/components/graphics/GraphicViewer.d.ts

@@ -0,0 +1,10 @@
+import { HRef } from 'haystack-core';
+import React from 'react';
+interface GraphicViewer {
+    projectName: string;
+    graphicId: HRef;
+    targetRef: HRef;
+    className?: string;
+}
+declare const GraphicViewer: React.FC<GraphicViewer>;
+export default GraphicViewer;

package/dist/react/components/graphics/GraphicViewer.jsx

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const react_jss_1 = require("react-jss");
+const useStyles = (0, react_jss_1.createUseStyles)({
+    iframe: {
+        width: '100%',
+        height: '100%',
+        border: 0,
+        overflow: 'hidden',
+    },
+});
+const GraphicViewer = ({ projectName, graphicId, targetRef, className, }) => {
+    const classes = useStyles();
+    const url = new URL(`${window.location.protocol}//${window.location.host}/fin5/${projectName}`);
+    url.hash = `targetRef=${targetRef.toAxon()}`;
+    url.searchParams.set('projectRef', graphicId.toAxon());
+    return (<iframe id={graphicId.toAxon()} className={(0, classnames_1.default)(classes.iframe, className)} src={url.toString()}/>);
+};
+exports.default = GraphicViewer;
+//# sourceMappingURL=GraphicViewer.jsx.map

package/dist/react/components/graphics/GraphicViewer.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphicViewer.jsx","sourceRoot":"","sources":["../../../../src/react/components/graphics/GraphicViewer.tsx"],"names":[],"mappings":";;;;;AAAA,4DAA2B;AAE3B,kDAAyB;AACzB,yCAA2C;AAE3C,MAAM,SAAS,GAAG,IAAA,2BAAe,EAAC;IACjC,MAAM,EAAE;QACP,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,CAAC;QACT,QAAQ,EAAE,QAAQ;KAClB;CACD,CAAC,CAAA;AASF,MAAM,aAAa,GAA4B,CAAC,EAC/C,WAAW,EACX,SAAS,EACT,SAAS,EACT,SAAS,GACT,EAAE,EAAE;IACJ,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,MAAM,GAAG,GAAG,IAAI,GAAG,CAClB,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,KAAK,MAAM,CAAC,QAAQ,CAAC,IAAI,SAAS,WAAW,EAAE,CAC1E,CAAA;IACD,GAAG,CAAC,IAAI,GAAG,aAAa,SAAS,CAAC,MAAM,EAAE,EAAE,CAAA;IAC5C,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,YAAY,EAAE,SAAS,CAAC,MAAM,EAAE,CAAC,CAAA;IAEtD,OAAO,CACN,CAAC,MAAM,CACN,EAAE,CAAC,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC,CACvB,SAAS,CAAC,CAAC,IAAA,oBAAE,EAAC,OAAO,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,CACzC,GAAG,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,EACnB,CACF,CAAA;AACF,CAAC,CAAA;AAED,kBAAe,aAAa,CAAA"}

package/dist/react/components/graphics/GraphicsTabViewer.d.ts

@@ -0,0 +1,9 @@
+import { HRef } from 'haystack-core';
+import React from 'react';
+interface GraphicsTabViewer {
+    projectName?: string;
+    targetRef: HRef;
+    className?: string;
+}
+declare const GraphicsTabViewer: React.FC<GraphicsTabViewer>;
+export default GraphicsTabViewer;

package/dist/react/components/graphics/GraphicsTabViewer.jsx

@@ -0,0 +1,80 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const ui_1 = require("@j2inn/ui");
+const classnames_1 = __importDefault(require("classnames"));
+const fin5Top_1 = require("fin5Top/fin5Top");
+const haystack_react_1 = require("haystack-react");
+const react_1 = __importStar(require("react"));
+const react_jss_1 = require("react-jss");
+const LoadingSpinner_1 = __importDefault(require("../LoadingSpinner"));
+const GraphicViewer_1 = __importDefault(require("./GraphicViewer"));
+const useStyles = (0, react_jss_1.createUseStyles)({
+    tabs: {
+        height: '100%',
+        [`& .${ui_1.ant_prefix}-tabs-content-holder`]: {
+            height: '100%',
+            [`& .${ui_1.ant_prefix}-tabs-content`]: {
+                height: '100%',
+                [`& .${ui_1.ant_prefix}-tabs-tabpane`]: {
+                    height: '100%',
+                },
+            },
+        },
+    },
+});
+const GraphicsTabViewer = ({ projectName = fin5Top_1.fin5Top?.finstack?.projectName, targetRef, className, }) => {
+    const client = (0, haystack_react_1.useClient)();
+    const classes = useStyles();
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [graphicsList, setGraphicsList] = (0, react_1.useState)([]);
+    (0, react_1.useEffect)(() => {
+        if (targetRef) {
+            client.ext
+                .eval(`readById(${targetRef.toAxon()}).finGraphicOn(true)`)
+                .then((grid) => {
+                setGraphicsList(grid.getRows());
+            })
+                .finally(() => setLoading(false));
+        }
+    }, [targetRef]);
+    const tabs = (0, react_1.useMemo)(() => {
+        return graphicsList
+            .sort((g1, g2) => g1.toDis().localeCompare(g2.toDis()))
+            .map((graphic) => {
+            return {
+                label: graphic.toDis(),
+                key: graphic.id.toAxon(),
+                children: (<GraphicViewer_1.default projectName={projectName ?? ''} targetRef={targetRef} graphicId={graphic.id}/>),
+            };
+        });
+    }, [graphicsList]);
+    return loading ? (<LoadingSpinner_1.default />) : (<ui_1.Tabs className={(0, classnames_1.default)(classes.tabs, className)} items={tabs}/>);
+};
+exports.default = GraphicsTabViewer;
+//# sourceMappingURL=GraphicsTabViewer.jsx.map

package/dist/react/components/graphics/GraphicsTabViewer.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphicsTabViewer.jsx","sourceRoot":"","sources":["../../../../src/react/components/graphics/GraphicsTabViewer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kCAA4C;AAC5C,4DAA2B;AAC3B,6CAAyC;AAEzC,mDAA0C;AAC1C,+CAA2D;AAC3D,yCAA2C;AAC3C,uEAA8C;AAC9C,oEAA2C;AAE3C,MAAM,SAAS,GAAG,IAAA,2BAAe,EAAC;IACjC,IAAI,EAAE;QACL,MAAM,EAAE,MAAM;QACd,CAAC,MAAM,eAAU,sBAAsB,CAAC,EAAE;YACzC,MAAM,EAAE,MAAM;YACd,CAAC,MAAM,eAAU,eAAe,CAAC,EAAE;gBAClC,MAAM,EAAE,MAAM;gBACd,CAAC,MAAM,eAAU,eAAe,CAAC,EAAE;oBAClC,MAAM,EAAE,MAAM;iBACd;aACD;SACD;KACD;CACD,CAAC,CAAA;AAYF,MAAM,iBAAiB,GAAgC,CAAC,EACvD,WAAW,GAAG,iBAAO,EAAE,QAAQ,EAAE,WAAW,EAC5C,SAAS,EACT,SAAS,GACT,EAAE,EAAE;IACJ,MAAM,MAAM,GAAG,IAAA,0BAAS,GAAE,CAAA;IAC1B,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAI,CAAC,CAAA;IAC5C,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAkB,EAAE,CAAC,CAAA;IAErE,IAAA,iBAAS,EAAC,GAAG,EAAE;QACd,IAAI,SAAS,EAAE;YACd,MAAM,CAAC,GAAG;iBACR,IAAI,CAAC,YAAY,SAAS,CAAC,MAAM,EAAE,sBAAsB,CAAC;iBAC1D,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE;gBACd,eAAe,CAAC,IAAI,CAAC,OAAO,EAAqB,CAAC,CAAA;YACnD,CAAC,CAAC;iBACD,OAAO,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAA;SAClC;IACF,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,MAAM,IAAI,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACzB,OAAO,YAAY;aACjB,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC;aACtD,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE;YAChB,OAAO;gBACN,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE;gBACtB,GAAG,EAAE,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE;gBACxB,QAAQ,EAAE,CACT,CAAC,uBAAa,CACb,WAAW,CAAC,CAAC,WAAW,IAAI,EAAE,CAAC,CAC/B,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,SAAS,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,EACrB,CACF;aACD,CAAA;QACF,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;IAElB,OAAO,OAAO,CAAC,CAAC,CAAC,CAChB,CAAC,wBAAc,CAAC,AAAD,EAAG,CAClB,CAAC,CAAC,CAAC,CACH,CAAC,SAAI,CAAC,SAAS,CAAC,CAAC,IAAA,oBAAE,EAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,EAAG,CAC7D,CAAA;AACF,CAAC,CAAA;AAED,kBAAe,iBAAiB,CAAA"}

package/dist_es/react/components/graphics/GraphicViewer.d.ts

@@ -0,0 +1,10 @@
+import { HRef } from 'haystack-core';
+import React from 'react';
+interface GraphicViewer {
+    projectName: string;
+    graphicId: HRef;
+    targetRef: HRef;
+    className?: string;
+}
+declare const GraphicViewer: React.FC<GraphicViewer>;
+export default GraphicViewer;

package/dist_es/react/components/graphics/GraphicViewer.jsx

@@ -0,0 +1,20 @@
+import cn from 'classnames';
+import React from 'react';
+import { createUseStyles } from 'react-jss';
+const useStyles = createUseStyles({
+    iframe: {
+        width: '100%',
+        height: '100%',
+        border: 0,
+        overflow: 'hidden',
+    },
+});
+const GraphicViewer = ({ projectName, graphicId, targetRef, className, }) => {
+    const classes = useStyles();
+    const url = new URL(`${window.location.protocol}//${window.location.host}/fin5/${projectName}`);
+    url.hash = `targetRef=${targetRef.toAxon()}`;
+    url.searchParams.set('projectRef', graphicId.toAxon());
+    return (<iframe id={graphicId.toAxon()} className={cn(classes.iframe, className)} src={url.toString()}/>);
+};
+export default GraphicViewer;
+//# sourceMappingURL=GraphicViewer.jsx.map

package/dist_es/react/components/graphics/GraphicViewer.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphicViewer.jsx","sourceRoot":"","sources":["../../../../src/react/components/graphics/GraphicViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAE3C,MAAM,SAAS,GAAG,eAAe,CAAC;IACjC,MAAM,EAAE;QACP,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,CAAC;QACT,QAAQ,EAAE,QAAQ;KAClB;CACD,CAAC,CAAA;AASF,MAAM,aAAa,GAA4B,CAAC,EAC/C,WAAW,EACX,SAAS,EACT,SAAS,EACT,SAAS,GACT,EAAE,EAAE;IACJ,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,MAAM,GAAG,GAAG,IAAI,GAAG,CAClB,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,KAAK,MAAM,CAAC,QAAQ,CAAC,IAAI,SAAS,WAAW,EAAE,CAC1E,CAAA;IACD,GAAG,CAAC,IAAI,GAAG,aAAa,SAAS,CAAC,MAAM,EAAE,EAAE,CAAA;IAC5C,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,YAAY,EAAE,SAAS,CAAC,MAAM,EAAE,CAAC,CAAA;IAEtD,OAAO,CACN,CAAC,MAAM,CACN,EAAE,CAAC,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC,CACvB,SAAS,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,CACzC,GAAG,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,EACnB,CACF,CAAA;AACF,CAAC,CAAA;AAED,eAAe,aAAa,CAAA"}

package/dist_es/react/components/graphics/GraphicsTabViewer.d.ts

@@ -0,0 +1,9 @@
+import { HRef } from 'haystack-core';
+import React from 'react';
+interface GraphicsTabViewer {
+    projectName?: string;
+    targetRef: HRef;
+    className?: string;
+}
+declare const GraphicsTabViewer: React.FC<GraphicsTabViewer>;
+export default GraphicsTabViewer;

package/dist_es/react/components/graphics/GraphicsTabViewer.jsx

@@ -0,0 +1,52 @@
+import { ant_prefix, Tabs } from '@j2inn/ui';
+import cn from 'classnames';
+import { fin5Top } from 'fin5Top/fin5Top';
+import { useClient } from 'haystack-react';
+import React, { useEffect, useMemo, useState } from 'react';
+import { createUseStyles } from 'react-jss';
+import LoadingSpinner from '../LoadingSpinner';
+import GraphicViewer from './GraphicViewer';
+const useStyles = createUseStyles({
+    tabs: {
+        height: '100%',
+        [`& .${ant_prefix}-tabs-content-holder`]: {
+            height: '100%',
+            [`& .${ant_prefix}-tabs-content`]: {
+                height: '100%',
+                [`& .${ant_prefix}-tabs-tabpane`]: {
+                    height: '100%',
+                },
+            },
+        },
+    },
+});
+const GraphicsTabViewer = ({ projectName = fin5Top?.finstack?.projectName, targetRef, className, }) => {
+    const client = useClient();
+    const classes = useStyles();
+    const [loading, setLoading] = useState(true);
+    const [graphicsList, setGraphicsList] = useState([]);
+    useEffect(() => {
+        if (targetRef) {
+            client.ext
+                .eval(`readById(${targetRef.toAxon()}).finGraphicOn(true)`)
+                .then((grid) => {
+                setGraphicsList(grid.getRows());
+            })
+                .finally(() => setLoading(false));
+        }
+    }, [targetRef]);
+    const tabs = useMemo(() => {
+        return graphicsList
+            .sort((g1, g2) => g1.toDis().localeCompare(g2.toDis()))
+            .map((graphic) => {
+            return {
+                label: graphic.toDis(),
+                key: graphic.id.toAxon(),
+                children: (<GraphicViewer projectName={projectName ?? ''} targetRef={targetRef} graphicId={graphic.id}/>),
+            };
+        });
+    }, [graphicsList]);
+    return loading ? (<LoadingSpinner />) : (<Tabs className={cn(classes.tabs, className)} items={tabs}/>);
+};
+export default GraphicsTabViewer;
+//# sourceMappingURL=GraphicsTabViewer.jsx.map

package/dist_es/react/components/graphics/GraphicsTabViewer.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphicsTabViewer.jsx","sourceRoot":"","sources":["../../../../src/react/components/graphics/GraphicsTabViewer.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@j2inn/fin5-ui-utils",
-	"version": "1.0.2-beta.3",
+	"version": "1.0.2-beta.4",
 	"description": "A set of useful client-side utilities useful for creating UI applications on top of FIN 5",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",