@j2inn/fin5-ui-utils 8.2.0 → 9.0.0-beta.0

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

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

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

@@ -1,30 +1,30 @@
-"use strict";
-/*
- * Copyright (c) 2022, J2 Innovations. All Rights Reserved
- */
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GraphicViewer = void 0;
-const classnames_1 = __importDefault(require("classnames"));
-const react_1 = __importDefault(require("react"));
-const react_jss_1 = require("react-jss");
-const fin5Top_1 = require("../../../fin5Top/fin5Top");
-const useStyles = (0, react_jss_1.createUseStyles)({
-    iframe: {
-        width: '100%',
-        height: '100%',
-        border: 0,
-        overflow: 'hidden',
-    },
-});
-const GraphicViewer = ({ projectName = fin5Top_1.fin5Top?.finstack?.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 (react_1.default.createElement("iframe", { id: graphicId.toAxon(), className: (0, classnames_1.default)(classes.iframe, className), src: url.toString() }));
-};
-exports.GraphicViewer = GraphicViewer;
+"use strict";
+/*
+ * Copyright (c) 2022, J2 Innovations. All Rights Reserved
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GraphicViewer = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const react_jss_1 = require("react-jss");
+const fin5Top_1 = require("../../../fin5Top/fin5Top");
+const useStyles = (0, react_jss_1.createUseStyles)({
+    iframe: {
+        width: '100%',
+        height: '100%',
+        border: 0,
+        overflow: 'hidden',
+    },
+});
+const GraphicViewer = ({ projectName = fin5Top_1.fin5Top?.finstack?.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 (react_1.default.createElement("iframe", { id: graphicId.toAxon(), className: (0, classnames_1.default)(classes.iframe, className), src: url.toString() }));
+};
+exports.GraphicViewer = GraphicViewer;
 //# sourceMappingURL=GraphicViewer.js.map

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

@@ -1,17 +1,17 @@
-import { HRef } from 'haystack-core';
-import React from 'react';
-interface GraphicsTabViewer {
-    projectName?: string;
-    targetRef: HRef;
-    className?: string;
-    /**
-     * Set it to true if you want to query also for related graphics (graphics applicable to objects linked by refs),
-     * false to just get the graphics on this target.
-     * @default false
-     */
-    queryRelated?: boolean;
-    fallbackClassName?: string;
-    fallbackText?: string;
-}
-export declare const GraphicsTabViewer: React.FC<GraphicsTabViewer>;
-export {};
+import { HRef } from 'haystack-core';
+import React from 'react';
+interface GraphicsTabViewer {
+    projectName?: string;
+    targetRef: HRef;
+    className?: string;
+    /**
+     * Set it to true if you want to query also for related graphics (graphics applicable to objects linked by refs),
+     * false to just get the graphics on this target.
+     * @default false
+     */
+    queryRelated?: boolean;
+    fallbackClassName?: string;
+    fallbackText?: string;
+}
+export declare const GraphicsTabViewer: React.FC<GraphicsTabViewer>;
+export {};

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

@@ -1,91 +1,101 @@
-"use strict";
-/*
- * Copyright (c) 2022, J2 Innovations. All Rights Reserved
- */
-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 });
-exports.GraphicsTabViewer = void 0;
-const ui_1 = require("@j2inn/ui");
-const classnames_1 = __importDefault(require("classnames"));
-const haystack_react_1 = require("haystack-react");
-const react_1 = __importStar(require("react"));
-const react_jss_1 = require("react-jss");
-const fin5Top_1 = require("../../../fin5Top/fin5Top");
-const LoadingSpinner_1 = require("../LoadingSpinner");
-const GraphicViewer_1 = 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%',
-                },
-            },
-        },
-    },
-    fallback: {
-        height: '100%',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        fontSize: '1.1em',
-    },
-});
-const GraphicsTabViewer = ({ projectName = fin5Top_1.fin5Top?.finstack?.projectName, targetRef, className, queryRelated = false, fallbackText = 'No graphics found.', fallbackClassName, }) => {
-    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(${queryRelated})`)
-                .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: (react_1.default.createElement(GraphicViewer_1.GraphicViewer, { projectName: projectName ?? '', targetRef: targetRef, graphicId: graphic.id })),
-            };
-        });
-    }, [graphicsList]);
-    return loading ? (react_1.default.createElement(LoadingSpinner_1.LoadingSpinner, null)) : tabs.length > 0 ? (react_1.default.createElement(ui_1.Tabs, { className: (0, classnames_1.default)(classes.tabs, className), items: tabs })) : (react_1.default.createElement("div", { className: (0, classnames_1.default)(classes.fallback, fallbackClassName) }, fallbackText));
-};
-exports.GraphicsTabViewer = GraphicsTabViewer;
+"use strict";
+/*
+ * Copyright (c) 2022, J2 Innovations. All Rights Reserved
+ */
+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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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 });
+exports.GraphicsTabViewer = void 0;
+const ui_1 = require("@j2inn/ui");
+const classnames_1 = __importDefault(require("classnames"));
+const haystack_react_1 = require("haystack-react");
+const react_1 = __importStar(require("react"));
+const react_jss_1 = require("react-jss");
+const fin5Top_1 = require("../../../fin5Top/fin5Top");
+const LoadingSpinner_1 = require("../LoadingSpinner");
+const GraphicViewer_1 = 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%',
+                },
+            },
+        },
+    },
+    fallback: {
+        height: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        fontSize: '1.1em',
+    },
+});
+const GraphicsTabViewer = ({ projectName = fin5Top_1.fin5Top?.finstack?.projectName, targetRef, className, queryRelated = false, fallbackText = 'No graphics found.', fallbackClassName, }) => {
+    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(${queryRelated})`)
+                .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: (react_1.default.createElement(GraphicViewer_1.GraphicViewer, { projectName: projectName ?? '', targetRef: targetRef, graphicId: graphic.id })),
+            };
+        });
+    }, [graphicsList]);
+    return loading ? (react_1.default.createElement(LoadingSpinner_1.LoadingSpinner, null)) : tabs.length > 0 ? (react_1.default.createElement(ui_1.Tabs, { className: (0, classnames_1.default)(classes.tabs, className), items: tabs })) : (react_1.default.createElement("div", { className: (0, classnames_1.default)(classes.fallback, fallbackClassName) }, fallbackText));
+};
+exports.GraphicsTabViewer = GraphicsTabViewer;
 //# sourceMappingURL=GraphicsTabViewer.js.map

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

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

package/dist/react/components/makeCustomElement.d.ts

@@ -1,16 +1,16 @@
-import React from 'react';
-interface CustomElementOptions {
-    useShadowDom?: boolean;
-}
-/**
- * Generate a custom element constructor that wraps the given react component.
- */
-export declare const makeCustomElement: <T extends object>(Component: React.FC<T>, options?: CustomElementOptions) => CustomElementConstructor;
-/**
- * Create a custom element wrapping a React component and register it.
- * @param webComponentName the name of the Web component (tag name)
- * @param ReactComponent the React component to wrap
- * @returns
- */
-export declare const registerReactWebComponent: <T extends object>(webComponentName: string, ReactComponent: React.FC<T>, options?: CustomElementOptions) => void;
-export {};
+import React from 'react';
+interface CustomElementOptions {
+    useShadowDom?: boolean;
+}
+/**
+ * Generate a custom element constructor that wraps the given react component.
+ */
+export declare const makeCustomElement: <T extends object>(Component: React.FC<T>, options?: CustomElementOptions) => CustomElementConstructor;
+/**
+ * Create a custom element wrapping a React component and register it.
+ * @param webComponentName the name of the Web component (tag name)
+ * @param ReactComponent the React component to wrap
+ * @returns
+ */
+export declare const registerReactWebComponent: <T extends object>(webComponentName: string, ReactComponent: React.FC<T>, options?: CustomElementOptions) => void;
+export {};