@j2inn/fin5-ui-utils 5.2.2-beta.9 → 6.0.1

package/dist/react/components/ErrorDisplayer.js

@@ -1,37 +1,37 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ErrorDisplayer = exports.DefaultErrorBoundary = void 0;
-const ui_1 = require("@j2inn/ui");
-const react_1 = __importDefault(require("react"));
-class DefaultErrorBoundary extends react_1.default.Component {
-    state = {};
-    static getDerivedStateFromError(error) {
-        // Update state so the next render will show the fallback UI.
-        return { error: error };
-    }
-    componentDidCatch(error, errorInfo) {
-        // You can also log the error to an error reporting service
-        console.error(error, errorInfo);
-    }
-    render() {
-        if (this.state.error) {
-            // You can render any custom fallback UI
-            return (react_1.default.createElement(exports.ErrorDisplayer, { error: this.state.error, extra: [
-                    react_1.default.createElement(ui_1.Button, { type: 'primary', key: 'refresh', onClick: () => window.location.reload() }, "Refresh The Page"),
-                ] }));
-        }
-        return this.props.children;
-    }
-}
-exports.DefaultErrorBoundary = DefaultErrorBoundary;
-const ErrorDisplayer = ({ error, extra, }) => {
-    return (react_1.default.createElement(ui_1.Result, { status: 'error', title: 'Ouch... Something Went Wrong', subTitle: react_1.default.createElement(ui_1.Container, { center: true },
-            react_1.default.createElement(ui_1.Collapse, { style: { width: 600, textAlign: 'left' } },
-                react_1.default.createElement(ui_1.Collapse.Panel, { header: `${error.toString()}`, key: '1' },
-                    react_1.default.createElement(ui_1.Typography.Text, { style: { width: 400 } }, error.stack)))), extra: extra }));
-};
-exports.ErrorDisplayer = ErrorDisplayer;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorDisplayer = exports.DefaultErrorBoundary = void 0;
+const ui_1 = require("@j2inn/ui");
+const react_1 = __importDefault(require("react"));
+class DefaultErrorBoundary extends react_1.default.Component {
+    state = {};
+    static getDerivedStateFromError(error) {
+        // Update state so the next render will show the fallback UI.
+        return { error: error };
+    }
+    componentDidCatch(error, errorInfo) {
+        // You can also log the error to an error reporting service
+        console.error(error, errorInfo);
+    }
+    render() {
+        if (this.state.error) {
+            // You can render any custom fallback UI
+            return (react_1.default.createElement(exports.ErrorDisplayer, { error: this.state.error, extra: [
+                    react_1.default.createElement(ui_1.Button, { type: 'primary', key: 'refresh', onClick: () => window.location.reload() }, "Refresh The Page"),
+                ] }));
+        }
+        return this.props.children;
+    }
+}
+exports.DefaultErrorBoundary = DefaultErrorBoundary;
+const ErrorDisplayer = ({ error, extra, }) => {
+    return (react_1.default.createElement(ui_1.Result, { status: 'error', title: 'Ouch... Something Went Wrong', subTitle: react_1.default.createElement(ui_1.Container, { center: true },
+            react_1.default.createElement(ui_1.Collapse, { style: { width: 600, textAlign: 'left' } },
+                react_1.default.createElement(ui_1.Collapse.Panel, { header: `${error.toString()}`, key: '1' },
+                    react_1.default.createElement(ui_1.Typography.Text, { style: { width: 400 } }, error.stack)))), extra: extra }));
+};
+exports.ErrorDisplayer = ErrorDisplayer;
 //# sourceMappingURL=ErrorDisplayer.js.map

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

@@ -1,9 +1,9 @@
-import React from 'react';
-/**
- * A simple UI loader.
- */
-declare const Loader: ({ loading, children, }: {
-    loading: boolean;
-    children?: React.ReactNode;
-}) => JSX.Element;
-export default Loader;
+import React from 'react';
+/**
+ * A simple UI loader.
+ */
+declare const Loader: ({ loading, children, }: {
+    loading: boolean;
+    children?: React.ReactNode;
+}) => JSX.Element;
+export default Loader;

package/dist/react/components/Loader.js

@@ -1,18 +1,18 @@
-"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 });
-const react_1 = __importDefault(require("react"));
-const LoadingSpinner_1 = require("./LoadingSpinner");
-/**
- * A simple UI loader.
- */
-const Loader = ({ loading, children, }) => {
-    return loading ? react_1.default.createElement(LoadingSpinner_1.LoadingSpinner, null) : react_1.default.createElement(react_1.default.Fragment, null, children);
-};
-exports.default = Loader;
+"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 });
+const react_1 = __importDefault(require("react"));
+const LoadingSpinner_1 = require("./LoadingSpinner");
+/**
+ * A simple UI loader.
+ */
+const Loader = ({ loading, children, }) => {
+    return loading ? react_1.default.createElement(LoadingSpinner_1.LoadingSpinner, null) : react_1.default.createElement(react_1.default.Fragment, null, children);
+};
+exports.default = Loader;
 //# sourceMappingURL=Loader.js.map

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

@@ -1,2 +1,2 @@
-import React from 'react';
-export declare const LoadingSpinner: React.FC;
+import React from 'react';
+export declare const LoadingSpinner: React.FC;

package/dist/react/components/LoadingSpinner.js

@@ -1,28 +1,28 @@
-"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.LoadingSpinner = void 0;
-const ui_1 = require("@j2inn/ui");
-const react_1 = __importDefault(require("react"));
-const react_jss_1 = require("react-jss");
-const useStyles = (0, react_jss_1.createUseStyles)({
-    container: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        height: '100%',
-        width: '100%',
-    },
-});
-const LoadingSpinner = () => {
-    const classes = useStyles();
-    return (react_1.default.createElement("div", { className: classes.container },
-        react_1.default.createElement(ui_1.Spin, { size: 'large' })));
-};
-exports.LoadingSpinner = LoadingSpinner;
+"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.LoadingSpinner = void 0;
+const ui_1 = require("@j2inn/ui");
+const react_1 = __importDefault(require("react"));
+const react_jss_1 = require("react-jss");
+const useStyles = (0, react_jss_1.createUseStyles)({
+    container: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100%',
+        width: '100%',
+    },
+});
+const LoadingSpinner = () => {
+    const classes = useStyles();
+    return (react_1.default.createElement("div", { className: classes.container },
+        react_1.default.createElement(ui_1.Spin, { size: 'large' })));
+};
+exports.LoadingSpinner = LoadingSpinner;
 //# sourceMappingURL=LoadingSpinner.js.map

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

@@ -1,20 +1,20 @@
-import { HRef } from 'haystack-core';
-import React from 'react';
-export interface RecordImageProps {
-    /**
-     * Ref of the image bin record.
-     */
-    imageRef?: HRef;
-    /**
-     * Fallback component to be displayed if the imageRef is not valid or the image is not found.
-     */
-    fallbackComponent?: React.ReactElement;
-    /**
-     * Props for img customization
-     */
-    imgProps?: Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'src'>;
-}
-/**
- * Displays an image from a bin record or a fallback if the given imageRef is not valid or if the image can't be found.
- */
-export declare const RecordImage: ({ imageRef, fallbackComponent, imgProps, }: RecordImageProps) => JSX.Element;
+import { HRef } from 'haystack-core';
+import React from 'react';
+export interface RecordImageProps {
+    /**
+     * Ref of the image bin record.
+     */
+    imageRef?: HRef;
+    /**
+     * Fallback component to be displayed if the imageRef is not valid or the image is not found.
+     */
+    fallbackComponent?: React.ReactElement;
+    /**
+     * Props for img customization
+     */
+    imgProps?: Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'src'>;
+}
+/**
+ * Displays an image from a bin record or a fallback if the given imageRef is not valid or if the image can't be found.
+ */
+export declare const RecordImage: ({ imageRef, fallbackComponent, imgProps, }: RecordImageProps) => JSX.Element;

package/dist/react/components/RecordImage.js

@@ -1,52 +1,52 @@
-"use strict";
-/*
- * Copyright (c) 2023, 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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RecordImage = void 0;
-const react_1 = __importStar(require("react"));
-const useFin5BinUrl_1 = require("../hooks/useFin5BinUrl");
-/**
- * Displays an image from a bin record or a fallback if the given imageRef is not valid or if the image can't be found.
- */
-const RecordImage = ({ imageRef, fallbackComponent, imgProps, }) => {
-    const imgUrl = (0, useFin5BinUrl_1.useFin5BinUrl)(imageRef);
-    // State used to identify whether there is an error in loading the image, to display the fallback component if necessary
-    const [hasImage, setHasImage] = (0, react_1.useState)(true);
-    const shouldDisplayFallback = !!fallbackComponent && (!hasImage || !imgUrl);
-    if (shouldDisplayFallback) {
-        return fallbackComponent;
-    }
-    else {
-        return (react_1.default.createElement("img", { ...imgProps, onError: (event) => {
-                // This will happen if the resource is not found for some reason
-                setHasImage(false);
-                imgProps?.onError?.(event);
-            }, src: imgUrl }));
-    }
-};
-exports.RecordImage = RecordImage;
+"use strict";
+/*
+ * Copyright (c) 2023, 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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RecordImage = void 0;
+const react_1 = __importStar(require("react"));
+const useFin5BinUrl_1 = require("../hooks/useFin5BinUrl");
+/**
+ * Displays an image from a bin record or a fallback if the given imageRef is not valid or if the image can't be found.
+ */
+const RecordImage = ({ imageRef, fallbackComponent, imgProps, }) => {
+    const imgUrl = (0, useFin5BinUrl_1.useFin5BinUrl)(imageRef);
+    // State used to identify whether there is an error in loading the image, to display the fallback component if necessary
+    const [hasImage, setHasImage] = (0, react_1.useState)(true);
+    const shouldDisplayFallback = !!fallbackComponent && (!hasImage || !imgUrl);
+    if (shouldDisplayFallback) {
+        return fallbackComponent;
+    }
+    else {
+        return (react_1.default.createElement("img", { ...imgProps, onError: (event) => {
+                // This will happen if the resource is not found for some reason
+                setHasImage(false);
+                imgProps?.onError?.(event);
+            }, src: imgUrl }));
+    }
+};
+exports.RecordImage = RecordImage;
 //# sourceMappingURL=RecordImage.js.map

package/dist/react/components/charts/QRCode.d.ts

@@ -1,25 +1,25 @@
-import React from 'react';
-interface QRCodeProps {
-    /**
-     * The value the QR code holds (can be an URI or a plain string)
-     */
-    value: string;
-    /**
-     * True to show a link to copy QR code to clipboard, false otherwise.
-     * @default true
-     */
-    copyable?: boolean;
-    /**
-     * The text of the link to copy the QR code to clipboard.
-     * @default 'Copy QR code to clipboard'
-     */
-    copyText?: string;
-    /**
-     * The size of the QR code in pixels.
-     * @default 350
-     */
-    size?: number;
-    className?: string;
-}
-export declare const QRCode: React.FC<QRCodeProps>;
-export {};
+import React from 'react';
+interface QRCodeProps {
+    /**
+     * The value the QR code holds (can be an URI or a plain string)
+     */
+    value: string;
+    /**
+     * True to show a link to copy QR code to clipboard, false otherwise.
+     * @default true
+     */
+    copyable?: boolean;
+    /**
+     * The text of the link to copy the QR code to clipboard.
+     * @default 'Copy QR code to clipboard'
+     */
+    copyText?: string;
+    /**
+     * The size of the QR code in pixels.
+     * @default 350
+     */
+    size?: number;
+    className?: string;
+}
+export declare const QRCode: React.FC<QRCodeProps>;
+export {};

package/dist/react/components/charts/QRCode.js

@@ -1,83 +1,83 @@
-"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 });
-exports.QRCode = void 0;
-const ui_1 = require("@j2inn/ui");
-const classnames_1 = __importDefault(require("classnames"));
-const qrious_1 = __importDefault(require("qrious"));
-const react_1 = __importStar(require("react"));
-const react_jss_1 = require("react-jss");
-const useStyles = (0, react_jss_1.createUseStyles)({
-    qrCode: {
-        display: 'flex',
-        flexDirection: 'column',
-        [`& .${ui_1.ant_prefix}-typography`]: {
-            textAlign: 'center',
-            paddingBottom: '0.5em',
-        },
-    },
-});
-const QRCode = ({ value, size = 350, copyable = true, copyText = 'Copy QR code to clipboard', className, }) => {
-    const classes = useStyles();
-    const canvasRef = (0, react_1.useRef)(null);
-    const [qrCode, setQrCode] = (0, react_1.useState)();
-    (0, react_1.useLayoutEffect)(() => {
-        if (canvasRef.current) {
-            setQrCode(new qrious_1.default({
-                element: canvasRef.current,
-                value,
-                size,
-            }));
-        }
-    }, [value, canvasRef.current]);
-    (0, react_1.useEffect)(() => {
-        if (qrCode && qrCode.size !== size) {
-            qrCode.size = size;
-        }
-    }, [size]);
-    const copyQrCodeToClipboard = (0, react_1.useCallback)(async () => {
-        if (canvasRef.current) {
-            await canvasRef.current.toBlob((blob) => {
-                if (blob) {
-                    navigator.clipboard.write([
-                        new ClipboardItem({
-                            'image/png': blob,
-                        }),
-                    ]);
-                }
-            });
-        }
-    }, [canvasRef.current]);
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(className, classes.qrCode) },
-        copyable && (react_1.default.createElement(ui_1.Typography.Text, { copyable: {
-                onCopy: () => copyQrCodeToClipboard(),
-            } }, copyText)),
-        react_1.default.createElement("canvas", { ref: canvasRef })));
-};
-exports.QRCode = QRCode;
+"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 });
+exports.QRCode = void 0;
+const ui_1 = require("@j2inn/ui");
+const classnames_1 = __importDefault(require("classnames"));
+const qrious_1 = __importDefault(require("qrious"));
+const react_1 = __importStar(require("react"));
+const react_jss_1 = require("react-jss");
+const useStyles = (0, react_jss_1.createUseStyles)({
+    qrCode: {
+        display: 'flex',
+        flexDirection: 'column',
+        [`& .${ui_1.ant_prefix}-typography`]: {
+            textAlign: 'center',
+            paddingBottom: '0.5em',
+        },
+    },
+});
+const QRCode = ({ value, size = 350, copyable = true, copyText = 'Copy QR code to clipboard', className, }) => {
+    const classes = useStyles();
+    const canvasRef = (0, react_1.useRef)(null);
+    const [qrCode, setQrCode] = (0, react_1.useState)();
+    (0, react_1.useLayoutEffect)(() => {
+        if (canvasRef.current) {
+            setQrCode(new qrious_1.default({
+                element: canvasRef.current,
+                value,
+                size,
+            }));
+        }
+    }, [value, canvasRef.current]);
+    (0, react_1.useEffect)(() => {
+        if (qrCode && qrCode.size !== size) {
+            qrCode.size = size;
+        }
+    }, [size]);
+    const copyQrCodeToClipboard = (0, react_1.useCallback)(async () => {
+        if (canvasRef.current) {
+            await canvasRef.current.toBlob((blob) => {
+                if (blob) {
+                    navigator.clipboard.write([
+                        new ClipboardItem({
+                            'image/png': blob,
+                        }),
+                    ]);
+                }
+            });
+        }
+    }, [canvasRef.current]);
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(className, classes.qrCode) },
+        copyable && (react_1.default.createElement(ui_1.Typography.Text, { copyable: {
+                onCopy: () => copyQrCodeToClipboard(),
+            } }, copyText)),
+        react_1.default.createElement("canvas", { ref: canvasRef })));
+};
+exports.QRCode = QRCode;
 //# sourceMappingURL=QRCode.js.map