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

package/dist_es/react/components/navigation/customRouting/RouterLayout.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
-import { BasicLayoutProps } from '../BasicLayout';
-import { MenuPage } from '../MenuPage';
-export interface RouterLayoutProps extends BasicLayoutProps<MenuPage> {
-    page?: string;
-    onPageChange?: (page: string) => void;
-}
-/**
- * Basic layout that uses a custom router.
- */
-export declare const RouterLayout: React.FC<RouterLayoutProps>;
+import React from 'react';
+import { BasicLayoutProps } from '../BasicLayout';
+import { MenuPage } from '../MenuPage';
+export interface RouterLayoutProps extends BasicLayoutProps<MenuPage> {
+    page?: string;
+    onPageChange?: (page: string) => void;
+}
+/**
+ * Basic layout that uses a custom router.
+ */
+export declare const RouterLayout: React.FC<RouterLayoutProps>;

package/dist_es/react/components/navigation/customRouting/RouterLayout.js

@@ -1,35 +1,35 @@
-/*
- * Copyright (c) 2022, J2 Innovations. All Rights Reserved
- */
-import { Button } from '@j2inn/ui';
-import React, { useCallback, useEffect, useState } from 'react';
-import { ErrorDisplayer } from '../../ErrorDisplayer';
-import { BasicLayout } from '../BasicLayout';
-import { findPageByName } from '../MenuPage';
-import { Router } from './Router';
-/**
- * Basic layout that uses a custom router.
- */
-export const RouterLayout = ({ pages = [], defaultPage = pages?.[0].key ?? '', onPageChange, page, ...otherProps }) => {
-    const [currentPage, setCurrentPage] = useState(page ?? defaultPage);
-    useEffect(() => {
-        if (page) {
-            setCurrentPage(page);
-        }
-    }, [page]);
-    // Fire onChange
-    useEffect(() => {
-        onPageChange?.(currentPage);
-    }, [currentPage]);
-    const onSelect = useCallback((key) => {
-        const page = findPageByName(pages, key);
-        if (page?.component) {
-            setCurrentPage(key);
-        }
-    }, [pages]);
-    return (React.createElement(BasicLayout, { ...otherProps, pages: pages, defaultPage: defaultPage, onSelect: onSelect, selectedPages: [currentPage] },
-        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"),
-                ] }) })));
-};
+/*
+ * Copyright (c) 2022, J2 Innovations. All Rights Reserved
+ */
+import { Button } from '@j2inn/ui';
+import React, { useCallback, useEffect, useState } from 'react';
+import { ErrorDisplayer } from '../../ErrorDisplayer';
+import { BasicLayout } from '../BasicLayout';
+import { findPageByName } from '../MenuPage';
+import { Router } from './Router';
+/**
+ * Basic layout that uses a custom router.
+ */
+export const RouterLayout = ({ pages = [], defaultPage = pages?.[0].key ?? '', onPageChange, page, ...otherProps }) => {
+    const [currentPage, setCurrentPage] = useState(page ?? defaultPage);
+    useEffect(() => {
+        if (page) {
+            setCurrentPage(page);
+        }
+    }, [page]);
+    // Fire onChange
+    useEffect(() => {
+        onPageChange?.(currentPage);
+    }, [currentPage]);
+    const onSelect = useCallback((key) => {
+        const page = findPageByName(pages, key);
+        if (page?.component) {
+            setCurrentPage(key);
+        }
+    }, [pages]);
+    return (React.createElement(BasicLayout, { ...otherProps, pages: pages, defaultPage: defaultPage, onSelect: onSelect, selectedPages: [currentPage] },
+        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=RouterLayout.js.map

package/dist_es/react/components/resolvable/configurationForm/ConfigurationForm.d.ts

@@ -1,27 +1,27 @@
-/// <reference types="react" />
-import { ParametersOfSection, UiElementData } from '@j2inn/resolvable-ui-elements';
-import { HDict } from 'haystack-core';
-declare type Layout = 'horizontal' | 'vertical';
-interface ConfigurationFormProps<T extends UiElementData> {
-    section: T;
-    params: ParametersOfSection<T>;
-    readOnlySection?: UiElementData;
-    onSave: (config: HDict) => void | Promise<unknown>;
-    saveText?: string;
-    formatKey?: (key: string) => string;
-    options?: HDict;
-    layout?: Layout;
-    className?: string;
-    entryClassName?: string;
-    saveBtnClassName?: string;
-    animateSaveButton?: boolean;
-}
-export declare const ConfigurationForm: <T extends UiElementData<import("@j2inn/resolvable-ui-elements/dist/resolvableElements/elements/UiElement").UiElementMeta>>({ section, params, readOnlySection, onSave, formatKey, saveText, options, layout, className, entryClassName, saveBtnClassName, animateSaveButton, }: ConfigurationFormProps<T>) => JSX.Element;
-interface ConfigurationFormReadOnlyEntriesProps<T extends UiElementData> {
-    params: ParametersOfSection<T>;
-    readOnlySection: T;
-    formatKey?: (key: string) => string;
-    className?: string;
-}
-export declare const ConfigurationFormReadOnlyEntries: <T extends UiElementData<import("@j2inn/resolvable-ui-elements/dist/resolvableElements/elements/UiElement").UiElementMeta>>({ readOnlySection, params, formatKey, className, }: ConfigurationFormReadOnlyEntriesProps<T>) => JSX.Element;
-export {};
+/// <reference types="react" />
+import { ParametersOfSection, UiElementData } from '@j2inn/resolvable-ui-elements';
+import { HDict } from 'haystack-core';
+declare type Layout = 'horizontal' | 'vertical';
+interface ConfigurationFormProps<T extends UiElementData> {
+    section: T;
+    params: ParametersOfSection<T>;
+    readOnlySection?: UiElementData;
+    onSave: (config: HDict) => void | Promise<unknown>;
+    saveText?: string;
+    formatKey?: (key: string) => string;
+    options?: HDict;
+    layout?: Layout;
+    className?: string;
+    entryClassName?: string;
+    saveBtnClassName?: string;
+    animateSaveButton?: boolean;
+}
+export declare const ConfigurationForm: <T extends UiElementData<import("@j2inn/resolvable-ui-elements/dist/resolvableElements/elements/UiElement").UiElementMeta>>({ section, params, readOnlySection, onSave, formatKey, saveText, options, layout, className, entryClassName, saveBtnClassName, animateSaveButton, }: ConfigurationFormProps<T>) => JSX.Element;
+interface ConfigurationFormReadOnlyEntriesProps<T extends UiElementData> {
+    params: ParametersOfSection<T>;
+    readOnlySection: T;
+    formatKey?: (key: string) => string;
+    className?: string;
+}
+export declare const ConfigurationFormReadOnlyEntries: <T extends UiElementData<import("@j2inn/resolvable-ui-elements/dist/resolvableElements/elements/UiElement").UiElementMeta>>({ readOnlySection, params, formatKey, className, }: ConfigurationFormReadOnlyEntriesProps<T>) => JSX.Element;
+export {};

package/dist_es/react/components/resolvable/configurationForm/ConfigurationForm.js

@@ -1,65 +1,65 @@
-/*
- * Copyright (c) 2023, J2 Innovations. All Rights Reserved
- */
-import { useResolveSection, } from '@j2inn/resolvable-ui-elements';
-import { Button } from '@j2inn/ui';
-import cn from 'classnames';
-import { HDict } from 'haystack-core';
-import React, { useMemo, useState } from 'react';
-import { createUseStyles } from 'react-jss';
-import { ConfigurationFormEntry, } from './ConfigurationFormEntry';
-import { getSectionDefault } from './getSectionDefault';
-const useStyles = createUseStyles({
-    formGrid: ({ layout }) => ({
-        display: 'grid',
-        gridTemplateColumns: layout === 'horizontal' ? '1fr 1fr' : '1fr',
-        gap: '0.5em 2em',
-    }),
-    saveButtonRow: ({ layout }) => ({
-        gridColumn: layout === 'horizontal' ? 'span 2' : 'span 1',
-        transition: 'transform 0.75s, max-height 0.75s, opacity 0.75s',
-        maxHeight: 200,
-        transform: 'scaleY(1)',
-        marginTop: '1em',
-    }),
-    saveButtonRowNotVisible: {
-        transform: 'scaleY(0)',
-        maxHeight: 0,
-        opacity: 0,
-    },
-    saveButton: {
-        transition: 'all 0.75s',
-        width: 120,
-        float: 'right',
-    },
-});
-export const ConfigurationForm = ({ section, params, readOnlySection, onSave, formatKey, saveText, options, layout = 'horizontal', className, entryClassName, saveBtnClassName, animateSaveButton = true, }) => {
-    const classes = useStyles({ layout });
-    const [resolvedSection] = useResolveSection(section, params);
-    const entries = useMemo(() => getSectionDefault(section), [section]);
-    const [changes, setChanges] = useState();
-    const [canSave, setCanSave] = useState(false);
-    const [isSaving, setIsSaving] = useState(false);
-    return (React.createElement("div", { className: cn(classes.formGrid, className) },
-        Object.entries(entries).map(([key, defaultValue]) => (React.createElement(ConfigurationFormEntry, { key: key, options: options?.get(key), name: formatKey ? formatKey(key) : key, value: resolvedSection[key] ?? defaultValue, onChange: (val) => {
-                setChanges({ ...changes, [key]: val });
-                setCanSave(true);
-            }, className: entryClassName }))),
-        readOnlySection && (React.createElement(ConfigurationFormReadOnlyEntries, { readOnlySection: readOnlySection, formatKey: formatKey, params: params, className: entryClassName })),
-        React.createElement("div", { className: cn(classes.saveButtonRow, {
-                [classes.saveButtonRowNotVisible]: animateSaveButton && !canSave,
-            }) },
-            React.createElement(Button, { disabled: !canSave, className: cn(classes.saveButton, saveBtnClassName), type: 'primary', loading: isSaving, onClick: async () => {
-                    setIsSaving(true);
-                    await onSave(HDict.make(changes));
-                    setChanges(undefined); // Reset changes dict
-                    setIsSaving(false);
-                    setCanSave(false);
-                } }, saveText ?? 'Save'))));
-};
-export const ConfigurationFormReadOnlyEntries = ({ readOnlySection, params, formatKey, className, }) => {
-    const [resolvedReadOnlySection] = useResolveSection(readOnlySection, params);
-    return (React.createElement(React.Fragment, null, resolvedReadOnlySection &&
-        Object.entries(resolvedReadOnlySection).map(([key, value]) => (React.createElement(ConfigurationFormEntry, { key: key, name: formatKey ? formatKey(key) : key, disabled: true, value: value, className: className })))));
-};
+/*
+ * Copyright (c) 2023, J2 Innovations. All Rights Reserved
+ */
+import { useResolveSection, } from '@j2inn/resolvable-ui-elements';
+import { Button } from '@j2inn/ui';
+import cn from 'classnames';
+import { HDict } from 'haystack-core';
+import React, { useMemo, useState } from 'react';
+import { createUseStyles } from 'react-jss';
+import { ConfigurationFormEntry, } from './ConfigurationFormEntry';
+import { getSectionDefault } from './getSectionDefault';
+const useStyles = createUseStyles({
+    formGrid: ({ layout }) => ({
+        display: 'grid',
+        gridTemplateColumns: layout === 'horizontal' ? '1fr 1fr' : '1fr',
+        gap: '0.5em 2em',
+    }),
+    saveButtonRow: ({ layout }) => ({
+        gridColumn: layout === 'horizontal' ? 'span 2' : 'span 1',
+        transition: 'transform 0.75s, max-height 0.75s, opacity 0.75s',
+        maxHeight: 200,
+        transform: 'scaleY(1)',
+        marginTop: '1em',
+    }),
+    saveButtonRowNotVisible: {
+        transform: 'scaleY(0)',
+        maxHeight: 0,
+        opacity: 0,
+    },
+    saveButton: {
+        transition: 'all 0.75s',
+        width: 120,
+        float: 'right',
+    },
+});
+export const ConfigurationForm = ({ section, params, readOnlySection, onSave, formatKey, saveText, options, layout = 'horizontal', className, entryClassName, saveBtnClassName, animateSaveButton = true, }) => {
+    const classes = useStyles({ layout });
+    const [resolvedSection] = useResolveSection(section, params);
+    const entries = useMemo(() => getSectionDefault(section), [section]);
+    const [changes, setChanges] = useState();
+    const [canSave, setCanSave] = useState(false);
+    const [isSaving, setIsSaving] = useState(false);
+    return (React.createElement("div", { className: cn(classes.formGrid, className) },
+        Object.entries(entries).map(([key, defaultValue]) => (React.createElement(ConfigurationFormEntry, { key: key, options: options?.get(key), name: formatKey ? formatKey(key) : key, value: resolvedSection[key] ?? defaultValue, onChange: (val) => {
+                setChanges({ ...changes, [key]: val });
+                setCanSave(true);
+            }, className: entryClassName }))),
+        readOnlySection && (React.createElement(ConfigurationFormReadOnlyEntries, { readOnlySection: readOnlySection, formatKey: formatKey, params: params, className: entryClassName })),
+        React.createElement("div", { className: cn(classes.saveButtonRow, {
+                [classes.saveButtonRowNotVisible]: animateSaveButton && !canSave,
+            }) },
+            React.createElement(Button, { disabled: !canSave, className: cn(classes.saveButton, saveBtnClassName), type: 'primary', loading: isSaving, onClick: async () => {
+                    setIsSaving(true);
+                    await onSave(HDict.make(changes));
+                    setChanges(undefined); // Reset changes dict
+                    setIsSaving(false);
+                    setCanSave(false);
+                } }, saveText ?? 'Save'))));
+};
+export const ConfigurationFormReadOnlyEntries = ({ readOnlySection, params, formatKey, className, }) => {
+    const [resolvedReadOnlySection] = useResolveSection(readOnlySection, params);
+    return (React.createElement(React.Fragment, null, resolvedReadOnlySection &&
+        Object.entries(resolvedReadOnlySection).map(([key, value]) => (React.createElement(ConfigurationFormEntry, { key: key, name: formatKey ? formatKey(key) : key, disabled: true, value: value, className: className })))));
+};
 //# sourceMappingURL=ConfigurationForm.js.map

package/dist_es/react/components/resolvable/configurationForm/ConfigurationFormEntry.d.ts

@@ -1,16 +1,16 @@
-/// <reference types="react" />
-import { HDict, HGrid, HNum, HRef, HStr, HVal } from 'haystack-core';
-export interface ConfigurationFormEntryOption extends HDict {
-    value: HStr | HNum | HRef;
-    label: HStr;
-}
-interface ConfigurationFormEntryProps {
-    name: string;
-    value: HVal | unknown;
-    onChange?: (val: HVal) => void;
-    disabled?: boolean;
-    options?: HGrid<ConfigurationFormEntryOption>;
-    className?: string;
-}
-export declare const ConfigurationFormEntry: ({ name, value, onChange, disabled, options, className, }: ConfigurationFormEntryProps) => JSX.Element;
-export {};
+/// <reference types="react" />
+import { HDict, HGrid, HNum, HRef, HStr, HVal } from 'haystack-core';
+export interface ConfigurationFormEntryOption extends HDict {
+    value: HStr | HNum | HRef;
+    label: HStr;
+}
+interface ConfigurationFormEntryProps {
+    name: string;
+    value: HVal | unknown;
+    onChange?: (val: HVal) => void;
+    disabled?: boolean;
+    options?: HGrid<ConfigurationFormEntryOption>;
+    className?: string;
+}
+export declare const ConfigurationFormEntry: ({ name, value, onChange, disabled, options, className, }: ConfigurationFormEntryProps) => JSX.Element;
+export {};

package/dist_es/react/components/resolvable/configurationForm/ConfigurationFormEntry.js

@@ -1,59 +1,59 @@
-/*
- * Copyright (c) 2023, J2 Innovations. All Rights Reserved
- */
-import { ant_prefix, HInput, Input, Select } from '@j2inn/ui';
-import cn from 'classnames';
-import { HNum, HRef, HStr, isHVal, Kind, valueIsKind, } from 'haystack-core';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { createUseStyles } from 'react-jss';
-const useStyles = createUseStyles((theme) => ({
-    formEntry: {
-        [`& .${ant_prefix}-input`]: {
-            height: 32,
-        },
-    },
-    entryTitle: {
-        fontWeight: 600,
-        fontSize: '1em',
-        color: theme.textColorSecondary,
-    },
-    select: {
-        width: '100%',
-    },
-}));
-const getHValFromSelectValue = (selectValue, initialHVal) => {
-    if (valueIsKind(initialHVal, Kind.Number)) {
-        return HNum.make(selectValue, initialHVal.unit);
-    }
-    else if (valueIsKind(initialHVal, Kind.Ref)) {
-        return HRef.make(selectValue);
-    }
-    return HStr.make(selectValue);
-};
-export const ConfigurationFormEntry = ({ name, value, onChange, disabled, options, className, }) => {
-    const classes = useStyles();
-    if (!isHVal(value)) {
-        return React.createElement(React.Fragment, null, `${name} = ${value}`);
-    }
-    const [showedVal, setShowedVal] = useState(value);
-    useEffect(() => {
-        setShowedVal(value);
-    }, [value]);
-    const selectOptions = useMemo(() => options?.getRows().map((cfeOpt) => ({
-        value: cfeOpt.value.value,
-        label: cfeOpt.label.value,
-    })), [options]);
-    const onInputChange = useCallback((val) => {
-        setShowedVal(val);
-        onChange?.(val);
-    }, [onChange]);
-    return (React.createElement("div", { className: cn(classes.formEntry, className) },
-        React.createElement("div", { className: classes.entryTitle }, name),
-        selectOptions ? (React.createElement(Select, { showSearch: true, className: classes.select, value: showedVal.value, options: selectOptions, disabled: disabled, onChange: (val) => {
-                if (val != null) {
-                    const newVal = getHValFromSelectValue(val, value);
-                    onInputChange(newVal);
-                }
-            } })) : !disabled ? (React.createElement(HInput, { value: showedVal, editable: true, onChange: onInputChange })) : (React.createElement(Input, { disabled: true, value: showedVal.toString() }))));
-};
+/*
+ * Copyright (c) 2023, J2 Innovations. All Rights Reserved
+ */
+import { ant_prefix, HInput, Input, Select } from '@j2inn/ui';
+import cn from 'classnames';
+import { HNum, HRef, HStr, isHVal, Kind, valueIsKind, } from 'haystack-core';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { createUseStyles } from 'react-jss';
+const useStyles = createUseStyles((theme) => ({
+    formEntry: {
+        [`& .${ant_prefix}-input`]: {
+            height: 32,
+        },
+    },
+    entryTitle: {
+        fontWeight: 600,
+        fontSize: '1em',
+        color: theme.textColorSecondary,
+    },
+    select: {
+        width: '100%',
+    },
+}));
+const getHValFromSelectValue = (selectValue, initialHVal) => {
+    if (valueIsKind(initialHVal, Kind.Number)) {
+        return HNum.make(selectValue, initialHVal.unit);
+    }
+    else if (valueIsKind(initialHVal, Kind.Ref)) {
+        return HRef.make(selectValue);
+    }
+    return HStr.make(selectValue);
+};
+export const ConfigurationFormEntry = ({ name, value, onChange, disabled, options, className, }) => {
+    const classes = useStyles();
+    if (!isHVal(value)) {
+        return React.createElement(React.Fragment, null, `${name} = ${value}`);
+    }
+    const [showedVal, setShowedVal] = useState(value);
+    useEffect(() => {
+        setShowedVal(value);
+    }, [value]);
+    const selectOptions = useMemo(() => options?.getRows().map((cfeOpt) => ({
+        value: cfeOpt.value.value,
+        label: cfeOpt.label.value,
+    })), [options]);
+    const onInputChange = useCallback((val) => {
+        setShowedVal(val);
+        onChange?.(val);
+    }, [onChange]);
+    return (React.createElement("div", { className: cn(classes.formEntry, className) },
+        React.createElement("div", { className: classes.entryTitle }, name),
+        selectOptions ? (React.createElement(Select, { showSearch: true, className: classes.select, value: showedVal.value, options: selectOptions, disabled: disabled, onChange: (val) => {
+                if (val != null) {
+                    const newVal = getHValFromSelectValue(val, value);
+                    onInputChange(newVal);
+                }
+            } })) : !disabled ? (React.createElement(HInput, { value: showedVal, editable: true, onChange: onInputChange })) : (React.createElement(Input, { disabled: true, value: showedVal.toString() }))));
+};
 //# sourceMappingURL=ConfigurationFormEntry.js.map

package/dist_es/react/components/resolvable/configurationForm/getSectionDefault.d.ts

@@ -1,16 +1,16 @@
-import { UiElementData } from '@j2inn/resolvable-ui-elements';
-import { HVal } from 'haystack-core';
-/**
- * Get default values for all elements that should resolve into an HVal.
- * @param section a section element
- * @returns an object containing as key the section element name and as value the default HVal.
- */
-export declare const getSectionDefault: (section: UiElementData) => {
-    [key: string]: HVal;
-};
-/**
- * Get a default for a specific kind of HVal.
- * @param kind can be expressed as new or old Hayson, or alternatively the haystack-core type name
- * @returns
- */
-export declare const getDefaultHVal: (kind?: string) => HVal | undefined;
+import { UiElementData } from '@j2inn/resolvable-ui-elements';
+import { HVal } from 'haystack-core';
+/**
+ * Get default values for all elements that should resolve into an HVal.
+ * @param section a section element
+ * @returns an object containing as key the section element name and as value the default HVal.
+ */
+export declare const getSectionDefault: (section: UiElementData) => {
+    [key: string]: HVal;
+};
+/**
+ * Get a default for a specific kind of HVal.
+ * @param kind can be expressed as new or old Hayson, or alternatively the haystack-core type name
+ * @returns
+ */
+export declare const getDefaultHVal: (kind?: string) => HVal | undefined;