@j2inn/fin5-ui-utils 1.0.8-react-router.6 → 1.0.9

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

@@ -0,0 +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;

package/dist_es/react/components/RecordImage.js

@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2023, J2 Innovations. All Rights Reserved
+ */
+import React, { useState } from 'react';
+import { useFin5BinUrl } from '../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.
+ */
+export const RecordImage = ({ imageRef, fallbackComponent, imgProps, }) => {
+    const imgUrl = 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] = useState(true);
+    const shouldDisplayFallback = !!fallbackComponent && (!hasImage || !imgUrl);
+    if (shouldDisplayFallback) {
+        return fallbackComponent;
+    }
+    else {
+        return (React.createElement("img", { ...imgProps, onError: (event) => {
+                // This will happen if the resource is not found for some reason
+                setHasImage(false);
+                imgProps?.onError?.(event);
+            }, src: imgUrl }));
+    }
+};
+//# sourceMappingURL=RecordImage.js.map

package/dist_es/react/components/RecordImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecordImage.js","sourceRoot":"","sources":["../../../src/react/components/RecordImage.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAuBtD;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC3B,QAAQ,EACR,iBAAiB,EACjB,QAAQ,GACU,EAAE,EAAE;IACtB,MAAM,MAAM,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAA;IACtC,wHAAwH;IACxH,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;IAC9C,MAAM,qBAAqB,GAAG,CAAC,CAAC,iBAAiB,IAAI,CAAC,CAAC,QAAQ,IAAI,CAAC,MAAM,CAAC,CAAA;IAE3E,IAAI,qBAAqB,EAAE;QAC1B,OAAO,iBAAiB,CAAA;KACxB;SAAM;QACN,OAAO,CACN,gCACK,QAAQ,EACZ,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;gBAClB,gEAAgE;gBAChE,WAAW,CAAC,KAAK,CAAC,CAAA;gBAClB,QAAQ,EAAE,OAAO,EAAE,CAAC,KAAK,CAAC,CAAA;YAC3B,CAAC,EACD,GAAG,EAAE,MAAM,GACV,CACF,CAAA;KACD;AACF,CAAC,CAAA"}

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

@@ -0,0 +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;
+}
+declare const QRCode: React.FC<QRCodeProps>;
+export default QRCode;

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

@@ -0,0 +1,54 @@
+import { Typography, ant_prefix } from '@j2inn/ui';
+import cn from 'classnames';
+import QRious from 'qrious';
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState, } from 'react';
+import { createUseStyles } from 'react-jss';
+const useStyles = createUseStyles({
+    qrCode: {
+        display: 'flex',
+        flexDirection: 'column',
+        [`& .${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 = useRef(null);
+    const [qrCode, setQrCode] = useState();
+    useLayoutEffect(() => {
+        if (canvasRef.current) {
+            setQrCode(new QRious({
+                element: canvasRef.current,
+                value,
+                size,
+            }));
+        }
+    }, [value, canvasRef.current]);
+    useEffect(() => {
+        if (qrCode && qrCode.size !== size) {
+            qrCode.size = size;
+        }
+    }, [size]);
+    const copyQrCodeToClipboard = useCallback(async () => {
+        if (canvasRef.current) {
+            await canvasRef.current.toBlob((blob) => {
+                if (blob) {
+                    navigator.clipboard.write([
+                        new ClipboardItem({
+                            'image/png': blob,
+                        }),
+                    ]);
+                }
+            });
+        }
+    }, [canvasRef.current]);
+    return (React.createElement("div", { className: cn(className, classes.qrCode) },
+        copyable && (React.createElement(Typography.Text, { copyable: {
+                onCopy: () => copyQrCodeToClipboard(),
+            } }, copyText)),
+        React.createElement("canvas", { ref: canvasRef })));
+};
+export default QRCode;
+//# sourceMappingURL=QRCode.js.map

package/dist_es/react/components/charts/QRCode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QRCode.js","sourceRoot":"","sources":["../../../../src/react/components/charts/QRCode.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AAClD,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,MAAM,MAAM,QAAQ,CAAA;AAC3B,OAAO,KAAK,EAAE,EACb,WAAW,EACX,SAAS,EACT,eAAe,EACf,MAAM,EACN,QAAQ,GACR,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAE3C,MAAM,SAAS,GAAG,eAAe,CAAC;IACjC,MAAM,EAAE;QACP,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,CAAC,MAAM,UAAU,aAAa,CAAC,EAAE;YAChC,SAAS,EAAE,QAAQ;YACnB,aAAa,EAAE,OAAO;SACtB;KACD;CACD,CAAC,CAAA;AAyBF,MAAM,MAAM,GAA0B,CAAC,EACtC,KAAK,EACL,IAAI,GAAG,GAAG,EACV,QAAQ,GAAG,IAAI,EACf,QAAQ,GAAG,2BAA2B,EACtC,SAAS,GACT,EAAE,EAAE;IACJ,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAA;IACjD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,EAAiB,CAAA;IAErD,eAAe,CAAC,GAAG,EAAE;QACpB,IAAI,SAAS,CAAC,OAAO,EAAE;YACtB,SAAS,CACR,IAAI,MAAM,CAAC;gBACV,OAAO,EAAE,SAAS,CAAC,OAAO;gBAC1B,KAAK;gBACL,IAAI;aACJ,CAAC,CACF,CAAA;SACD;IACF,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;IAE9B,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,MAAM,IAAI,MAAM,CAAC,IAAI,KAAK,IAAI,EAAE;YACnC,MAAM,CAAC,IAAI,GAAG,IAAI,CAAA;SAClB;IACF,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,MAAM,qBAAqB,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QACpD,IAAI,SAAS,CAAC,OAAO,EAAE;YACtB,MAAM,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE;gBACvC,IAAI,IAAI,EAAE;oBACT,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC;wBACzB,IAAI,aAAa,CAAC;4BACjB,WAAW,EAAE,IAAI;yBACjB,CAAC;qBACF,CAAC,CAAA;iBACF;YACF,CAAC,CAAC,CAAA;SACF;IACF,CAAC,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;IAEvB,OAAO,CACN,6BAAK,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,MAAM,CAAC;QAC3C,QAAQ,IAAI,CACZ,oBAAC,UAAU,CAAC,IAAI,IACf,QAAQ,EAAE;gBACT,MAAM,EAAE,GAAG,EAAE,CAAC,qBAAqB,EAAE;aACrC,IACA,QAAQ,CACQ,CAClB;QACD,gCAAQ,GAAG,EAAE,SAAS,GAAW,CAC5B,CACN,CAAA;AACF,CAAC,CAAA;AAED,eAAe,MAAM,CAAA"}

package/dist_es/react/components/charts/pie/PieChart.d.ts

@@ -0,0 +1,93 @@
+import * as am5 from '@amcharts/amcharts5';
+import * as am5percent from '@amcharts/amcharts5/percent';
+import React from 'react';
+export declare type PieChartInterfaceColors = {
+    [Property in keyof am5.IInterfaceColorsSettings]: string;
+};
+export interface PieChartColorPalette {
+    interfaceColors?: Partial<PieChartInterfaceColors>;
+    series?: string[];
+}
+export interface PieChartSliceData {
+    value: number;
+    category: string;
+}
+export interface PieChartProps {
+    /**
+     * Data used to populate the chart
+     */
+    data: PieChartSliceData[];
+    /**
+     * Color palette for the chart slices and interface colors @see https://www.amcharts.com/docs/v5/concepts/colors-gradients-and-patterns/#Interface_colors
+     */
+    colorPalette?: Partial<PieChartColorPalette>;
+    /**
+     * Number formatting options @see https://www.amcharts.com/docs/v5/tutorials/formatting-date-time-and-numbers-using-intl-object/#Formatting_numbers
+     */
+    numberFormat?: Intl.NumberFormatOptions;
+    /**
+     * amcharts5 theme classes to be used by the chart @see https://www.amcharts.com/docs/v5/concepts/themes/
+     */
+    chartThemes?: typeof am5.Theme[];
+    /**
+     * Settings for chart customization @see https://www.amcharts.com/docs/v5/reference/piechart/#Settings
+     * The function accepts the chart root as a parameter to allow layout configuration.
+     */
+    chartSettingsProvider?: (root: am5.Root) => am5percent.IPieChartSettings;
+    /**
+     * Function to get settings for legend customization @see https://www.amcharts.com/docs/v5/reference/legend/#Settings
+     * The function accepts the chart root as a parameter to allow layout configuration.
+     */
+    legendSettingsProvider?: (root: am5.Root) => am5.ILegendSettings;
+    /**
+     * Settings for legend labels customization @see https://www.amcharts.com/docs/v5/reference/label/#Settings
+     */
+    legendLabelsSettings?: Partial<am5.ILabelSettings>;
+    /**
+     * Settings for legend value labels customization @see https://www.amcharts.com/docs/v5/reference/label/#Settings
+     */
+    legendValueLabelsSettings?: Partial<am5.ILabelSettings>;
+    /**
+     * Settings for legend markers customization @see https://www.amcharts.com/docs/v5/reference/label/#Settings
+     */
+    legendMarkersSettings?: Partial<am5.ILabelSettings>;
+    /**
+     * Settings for chart series customization @see https://www.amcharts.com/docs/v5/reference/pieseries/#Settings
+     */
+    seriesSettings?: am5percent.IPieSeriesSettings;
+    /**
+     * Settings for series labels customization @see https://www.amcharts.com/docs/v5/reference/pieseries/#Settings
+     */
+    seriesLabelsSettings?: Partial<am5.IRadialLabelSettings>;
+    /**
+     * Settings for central label customization, useful for donut charts, if not specified no center label will be shown @see https://www.amcharts.com/docs/v5/reference/radiallabel/#Settings
+     */
+    centerLabelSettings?: am5.ILabelSettings;
+    /**
+     * Settings for pie slices customization @see https://www.amcharts.com/docs/v5/reference/slice/#Settings
+     */
+    slicesSettings?: Partial<am5.ISliceSettings>;
+    /**
+     * List of adapters to be applied to the slices @see https://www.amcharts.com/docs/v5/concepts/settings/adapters
+     */
+    sliceAdapters?: SliceAdapter[];
+    /**
+     * Optional DOM id for the chart container, if not specified it will be automatically generated
+     */
+    DOMtargetId?: string;
+}
+export declare type SliceAdapter<T extends keyof am5.ISliceSettings = keyof am5.ISliceSettings> = [
+    T,
+    (context: {
+        root: am5.Root;
+        chart: am5percent.PieChart;
+        series: am5percent.PieSeries;
+    }) => (value: am5.ISliceSettings[T], target: am5.Slice, key: T) => am5.ISliceSettings[T]
+];
+/**
+ * Highly customizable pie chart component based on amcharts5
+ * @see https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
+ *
+ * This component wraps some of the chart configuration trying to make it more react-friendly
+ */
+export declare const PieChart: React.FC<PieChartProps>;

package/dist_es/react/components/charts/pie/PieChart.js

@@ -0,0 +1,176 @@
+/*
+ * Copyright (c) 2023, J2 Innovations. All Rights Reserved
+ */
+import * as am5 from '@amcharts/amcharts5';
+import * as am5percent from '@amcharts/amcharts5/percent';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createUseStyles, useTheme } from 'react-jss';
+const useStyles = createUseStyles({
+    root: {
+        width: '100%',
+        height: '100%',
+    },
+});
+/**
+ * Returns a color palette selecting some colors from the theme.
+ * @param theme The theme
+ * @returns An array of colors
+ */
+const getDefaultChartColors = (theme) => {
+    return {
+        interfaceColors: {
+            text: theme.textColor,
+        },
+        series: [
+            theme.palette.lime,
+            theme.palette.cyan,
+            theme.palette.red,
+            theme.palette.volcano,
+            theme.palette.orange,
+            theme.palette.gold,
+            theme.palette.yellow,
+            theme.palette.green,
+            theme.palette.purple,
+            theme.palette.magenta,
+            theme.palette.blue,
+            theme.palette.grey,
+        ],
+    };
+};
+/**
+ * Highly customizable pie chart component based on amcharts5
+ * @see https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
+ *
+ * This component wraps some of the chart configuration trying to make it more react-friendly
+ */
+export const PieChart = ({ DOMtargetId, data, colorPalette, numberFormat, chartThemes, chartSettingsProvider, legendSettingsProvider, legendLabelsSettings, legendValueLabelsSettings, legendMarkersSettings, seriesSettings, seriesLabelsSettings, centerLabelSettings, slicesSettings, sliceAdapters, }) => {
+    // Colors configuration
+    const theme = useTheme();
+    const colors = { ...getDefaultChartColors(theme), ...colorPalette };
+    // Chart lifecycle
+    const [id, setId] = useState(DOMtargetId ?? `amchart-${Math.random()}`);
+    const rootRef = useRef(null);
+    const chartRef = useRef(null);
+    const legendRef = useRef(null);
+    useEffect(() => {
+        if (DOMtargetId && DOMtargetId !== id) {
+            setId(DOMtargetId);
+        }
+    }, [DOMtargetId]);
+    // Chart setup
+    useLayoutEffect(() => {
+        const root = am5.Root.new(id);
+        // Setup amcharts theme
+        if (chartThemes) {
+            root.setThemes(chartThemes.map((t) => t.new(root)));
+        }
+        // Setup interface colors, see https://www.amcharts.com/docs/v5/concepts/colors-gradients-and-patterns/#Interface_colors
+        if (colors.interfaceColors) {
+            // Remap settings to use amcharts Color objects
+            for (const setting in colors.interfaceColors) {
+                const color = colors.interfaceColors[setting];
+                // Apply defined interfaceColor on the chart
+                root.interfaceColors.set(setting, am5.color(color));
+            }
+        }
+        // Setup chart settings
+        const chart = root.container.children.push(am5percent.PieChart.new(root, {
+            layout: root.verticalLayout,
+            ...chartSettingsProvider?.(root),
+        }));
+        // Setup legend
+        const legend = chart.children.push(am5.Legend.new(root, {
+            layout: root.horizontalLayout,
+            ...legendSettingsProvider?.(root),
+        }));
+        if (legendLabelsSettings) {
+            legend.labels.template.setAll(legendLabelsSettings);
+        }
+        if (legendValueLabelsSettings) {
+            legend.valueLabels.template.setAll(legendValueLabelsSettings);
+        }
+        if (legendMarkersSettings) {
+            legend.markers.template.setAll(legendMarkersSettings);
+        }
+        rootRef.current = root;
+        chartRef.current = chart;
+        legendRef.current = legend;
+        // clean up before component removal from the DOM
+        return () => {
+            legendRef.current?.dispose();
+            legendRef.current = null;
+            chartRef.current?.dispose();
+            chartRef.current = null;
+            root?.dispose();
+            rootRef.current = null;
+        };
+    }, [
+        id,
+        colors,
+        chartThemes,
+        chartSettingsProvider,
+        legendSettingsProvider,
+        legendValueLabelsSettings,
+        legendMarkersSettings,
+    ]);
+    // Set data
+    useEffect(() => {
+        const root = rootRef.current;
+        const chart = chartRef.current;
+        if (chart && root) {
+            chart.series.clear();
+            if (data?.length) {
+                // Setup series
+                const series = chart.series.push(am5percent.PieSeries.new(root, {
+                    valueField: 'value',
+                    categoryField: 'category',
+                    ...seriesSettings,
+                }));
+                // Setup series labels
+                if (seriesLabelsSettings) {
+                    series.labels.template.setAll(seriesLabelsSettings);
+                }
+                // Setup center label
+                if (centerLabelSettings) {
+                    series.children.push(am5.Label.new(root, {
+                        ...centerLabelSettings,
+                    }));
+                }
+                // Setup series slices
+                if (slicesSettings) {
+                    series.slices.template.setAll(slicesSettings);
+                }
+                // Setup slice adapters
+                if (sliceAdapters) {
+                    sliceAdapters.forEach(([key, callbackMaker]) => series.slices.template.adapters.add(key, callbackMaker({
+                        root: root,
+                        chart: chart,
+                        series,
+                    })));
+                }
+                // Setup series colors
+                if (colors?.series) {
+                    series.get('colors')?.set('colors', colors.series.map((c) => am5.color(c)));
+                }
+                series.data.setAll(data);
+                legendRef.current?.data.setAll(series.dataItems);
+            }
+        }
+    }, [
+        data,
+        chartRef.current,
+        colors?.series,
+        seriesSettings,
+        slicesSettings,
+        seriesLabelsSettings,
+        sliceAdapters,
+    ]);
+    useEffect(() => {
+        if (numberFormat) {
+            rootRef.current?.numberFormatter.set('numberFormat', numberFormat);
+        }
+    }, [rootRef.current, numberFormat]);
+    const classes = useStyles();
+    return React.createElement("div", { id: id, className: classes.root });
+};
+//# sourceMappingURL=PieChart.js.map

package/dist_es/react/components/charts/pie/PieChart.js.map

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

package/dist_es/react/components/charts/pie/SimplePieChart.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { PieChartColorPalette, PieChartSliceData } from './PieChart';
+export interface SimplePieChartProps {
+    data: PieChartSliceData[];
+    donut?: boolean;
+    animated?: boolean;
+    colorPalette?: Partial<PieChartColorPalette>;
+    tooltipFormat?: string;
+    numberFormat?: Intl.NumberFormatOptions;
+    hideLabels?: boolean;
+    /**
+     * Optional DOM id for the chart container, if not specified it will be automatically generated
+     */
+    DOMtargetId?: string;
+}
+/**
+ * Simplified version of the pie chart for quick usage and easy configuration.
+ * Serves also as an example of how to use the underlying PieChart component.
+ */
+export declare const SimplePieChart: React.FC<SimplePieChartProps>;

package/dist_es/react/components/charts/pie/SimplePieChart.js

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2023, J2 Innovations. All Rights Reserved
+ */
+import * as am5 from '@amcharts/amcharts5';
+import am5themes_Animated from '@amcharts/amcharts5/themes/Animated';
+import React from 'react';
+import { PieChart } from './PieChart';
+/**
+ * Simplified version of the pie chart for quick usage and easy configuration.
+ * Serves also as an example of how to use the underlying PieChart component.
+ */
+export const SimplePieChart = ({ data, donut, animated, colorPalette, tooltipFormat, numberFormat = {
+    style: 'decimal',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 1,
+}, hideLabels, DOMtargetId, }) => {
+    return (React.createElement(PieChart, { DOMtargetId: DOMtargetId, colorPalette: colorPalette, data: data, chartThemes: animated ? [am5themes_Animated] : undefined, chartSettingsProvider: () => ({
+            innerRadius: donut ? am5.percent(55) : undefined,
+        }), numberFormat: numberFormat, legendSettingsProvider: () => ({
+            centerX: am5.percent(50),
+            x: am5.percent(50),
+        }), seriesLabelsSettings: { forceHidden: hideLabels }, seriesSettings: { alignLabels: false }, slicesSettings: {
+            tooltipText: tooltipFormat,
+        } }));
+};
+//# sourceMappingURL=SimplePieChart.js.map

package/dist_es/react/components/charts/pie/SimplePieChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimplePieChart.js","sourceRoot":"","sources":["../../../../../src/react/components/charts/pie/SimplePieChart.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,GAAG,MAAM,qBAAqB,CAAA;AAC1C,OAAO,kBAAkB,MAAM,qCAAqC,CAAA;AACpE,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAA2C,MAAM,YAAY,CAAA;AAgB9E;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,EAC7D,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,YAAY,GAAG;IACd,KAAK,EAAE,SAAS;IAChB,qBAAqB,EAAE,CAAC;IACxB,qBAAqB,EAAE,CAAC;CACxB,EACD,UAAU,EACV,WAAW,GACX,EAAe,EAAE;IACjB,OAAO,CACN,oBAAC,QAAQ,IACR,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,SAAS,EACxD,qBAAqB,EAAE,GAAG,EAAE,CAAC,CAAC;YAC7B,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS;SAChD,CAAC,EACF,YAAY,EAAE,YAAY,EAC1B,sBAAsB,EAAE,GAAG,EAAE,CAAC,CAAC;YAC9B,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACxB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;SAClB,CAAC,EACF,oBAAoB,EAAE,EAAE,WAAW,EAAE,UAAU,EAAE,EACjD,cAAc,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,EACtC,cAAc,EAAE;YACf,WAAW,EAAE,aAAa;SAC1B,GACA,CACF,CAAA;AACF,CAAC,CAAA"}

package/dist_es/react/components/navigation/BasicLayout.d.ts

@@ -1,21 +1,14 @@
-import { ThemeDef } from '@j2inn/ui';
 import { LayoutProps, MenuProps, SiderProps } from 'antd';
-import { PropsWithChildren, ReactElement } from 'react';
+import React from 'react';
 import { MenuPage } from './MenuPage';
-export declare const HEADER_HEIGHT = 45;
-interface StyleVariables {
-    isMobile?: boolean;
-    compactSider?: boolean;
-    siderWidth?: number | string;
-}
-export declare const useStyles: (data?: (StyleVariables & {
-    theme?: ThemeDef | undefined;
-}) | undefined) => import("jss").Classes<"content" | "header" | "sider" | "menuTrigger">;
-export interface BasicLayoutProps<T extends MenuPage> extends PropsWithChildren {
-    pages?: T[];
+export interface BasicLayoutProps {
+    /**
+     * List of pages for the menu and the routing
+     */
+    page?: string;
+    pages?: MenuPage[];
     defaultPage?: string;
-    selectedPages?: string[];
-    onSelect?: (key: string) => void;
+    onPageChange?: (page: string) => void;
     compactSider?: boolean;
     layoutProps?: LayoutProps;
     mobileHeaderProps?: LayoutProps;
@@ -24,14 +17,6 @@ export interface BasicLayoutProps<T extends MenuPage> extends PropsWithChildren
     menuProps?: Omit<MenuProps, 'items' | 'selectedKeys' | 'onSelect'>;
 }
 /**
- * Copy the array and recursively remove pages having the `showInMenu` flag set to false.
- * @param pages
- * @returns
- */
-export declare const getMenuPages: (pages: MenuPage[]) => MenuPage<Record<string, unknown>>[];
-/**
- * Basic layout with sider and mobile navigation management.
- * Routing management can be plugged in, for examples @see ReactRouterLayout @see RouterLayout
+ * Basic layout that combines menu and routing into one.
  */
-export declare function BasicLayout<T extends MenuPage>({ pages, defaultPage, selectedPages, onSelect, compactSider, layoutProps, mobileHeaderProps, siderProps, contentProps, menuProps, children, }: BasicLayoutProps<T>): ReactElement;
-export {};
+export declare const BasicLayout: React.FC<BasicLayoutProps>;

package/dist_es/react/components/navigation/BasicLayout.js

@@ -1,13 +1,16 @@
 /*
- * Copyright (c) 2023, J2 Innovations. All Rights Reserved
+ * Copyright (c) 2022, J2 Innovations. All Rights Reserved
  */
 import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
-import { Layout, Menu } from '@j2inn/ui';
+import { Button, Layout, Menu } from '@j2inn/ui';
 import classNames from 'classnames';
-import React, { useMemo, useState, } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { createUseStyles } from 'react-jss';
-export const HEADER_HEIGHT = 45;
-export const useStyles = createUseStyles((theme) => {
+import { ErrorDisplayer } from '../ErrorDisplayer';
+import { findPageByName } from './MenuPage';
+import { Router } from './Router';
+const HEADER_HEIGHT = 45;
+const useStyles = createUseStyles((theme) => {
     return {
         header: {
             position: 'fixed',
@@ -55,7 +58,7 @@ const Content = Layout.Content;
  * @param pages
  * @returns
  */
-export const getMenuPages = (pages) => {
+const getMenuPages = (pages) => {
     const menuPages = [];
     pages.forEach((page) => {
         const show = page.showInMenu == null || page.showInMenu;
@@ -73,10 +76,19 @@ export const getMenuPages = (pages) => {
     return menuPages;
 };
 /**
- * Basic layout with sider and mobile navigation management.
- * Routing management can be plugged in, for examples @see ReactRouterLayout @see RouterLayout
+ * Basic layout that combines menu and routing into one.
  */
-export function BasicLayout({ pages = [], defaultPage, selectedPages = [], onSelect, compactSider, layoutProps, mobileHeaderProps, siderProps, contentProps, menuProps, children, }) {
+export const BasicLayout = ({ pages = [], defaultPage = pages?.[0].key ?? '', onPageChange, compactSider, layoutProps, mobileHeaderProps, siderProps, contentProps, menuProps, page, }) => {
+    const [currentPage, setCurrentPage] = useState(page ?? defaultPage);
+    useEffect(() => {
+        if (page) {
+            setCurrentPage(page);
+        }
+    }, [page]);
+    // Fire onChange
+    useEffect(() => {
+        onPageChange?.(currentPage);
+    }, [currentPage]);
     // manage mobile navigation
     const [isMobile, setIsMobile] = useState(false);
     const [hiddenSider, setHiddenSider] = useState(false);
@@ -97,12 +109,18 @@ export function BasicLayout({ pages = [], defaultPage, selectedPages = [], onSel
                 : compactSider
                     ? HEADER_HEIGHT
                     : 0, trigger: null },
-            React.createElement(Menu, { ...menuProps, defaultSelectedKeys: defaultPage ? [defaultPage] : undefined, items: menuPages, selectedKeys: selectedPages, onSelect: ({ key }) => {
+            React.createElement(Menu, { ...menuProps, items: menuPages, selectedKeys: [currentPage], onSelect: ({ key }) => {
                     if (!hiddenSider) {
                         setHiddenSider(true);
                     }
-                    onSelect?.(key);
+                    const page = findPageByName(pages, key);
+                    if (page?.component) {
+                        setCurrentPage(key);
+                    }
                 } })),
-        React.createElement(Content, { ...contentProps, className: classNames(classes.content, contentProps?.className) }, children)));
-}
+        React.createElement(Content, { ...contentProps, className: classNames(classes.content, contentProps?.className) },
+            React.createElement(Router, { pages: pages, currentPage: currentPage, fallbackComponent: React.createElement(ErrorDisplayer, { error: new Error('Page Not Found'), extra: [
+                        React.createElement(Button, { type: 'primary', key: 'refresh', onClick: () => setCurrentPage(defaultPage) }, "Go Home"),
+                    ] }) }))));
+};
 //# sourceMappingURL=BasicLayout.js.map

package/dist_es/react/components/navigation/BasicLayout.js.map

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

package/dist_es/react/components/navigation/HeaderSiderLayout.d.ts

@@ -0,0 +1,13 @@
+import { LayoutProps } from 'antd';
+import React, { ReactElement } from 'react';
+import { BasicLayoutProps } from './BasicLayout';
+import { MenuPage } from './MenuPage';
+export declare type HeaderSiderLayoutProps<T extends MenuPage> = Omit<BasicLayoutProps<T>, 'mobileHeaderProps'> & {
+    header?: React.ReactNode;
+    headerProps?: LayoutProps;
+};
+/**
+ * Layout with header and sider. Sider is collapsed on mobile.
+ * Routing management can be plugged in, for examples @see ReactRouterLayout @see RouterLayout
+ */
+export declare function HeaderSiderLayout<T extends MenuPage>({ pages, defaultPage, selectedPages, onSelect, compactSider, layoutProps, header, headerProps, siderProps, contentProps, menuProps, menuBefore, menuAfter, menuTriggerClassName, headerHeight, children, }: HeaderSiderLayoutProps<T>): ReactElement;