@etsoo/react 1.5.80 → 1.5.83

package/lib/mu/NotifierMU.js

@@ -1,387 +0,0 @@
-import { NotificationAlign, NotificationMessageType, NotificationType } from '@etsoo/notificationbase';
-import { Alert, AlertTitle, Backdrop, Box, Button, CircularProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Fade, Slider, Snackbar, styled, Switch, TextField, Typography } from '@mui/material';
-import { Error, Info, Help, Warning, Done } from '@mui/icons-material';
-import React from 'react';
-import { Labels } from '../app/Labels';
-import { NotificationReact, NotifierReact } from '../notifier/Notifier';
-import { DraggablePaperComponent } from './DraggablePaperComponent';
-import { LoadingButton } from './LoadingButton';
-// Custom icon dialog title bar
-const IconDialogTitle = styled(DialogTitle) `
-    ${({ theme }) => `
-        cursor: move;
-        display: flex;
-        align-items: center;
-        & .dialogTitle {
-            font-weight: bold;
-            font-size: 1.17em;
-            padding-left: ${theme.spacing(1)};
-        }
-    `}
-`;
-/**
- * MU notification
- */
-export class NotificationMU extends NotificationReact {
-    // On return
-    // Dismiss first, then run callback
-    async returnValue(value) {
-        if (this.onReturn) {
-            const result = await this.onReturn(value);
-            if (result === false)
-                return;
-        }
-        this.dismiss();
-    }
-    // Create alert
-    createAlert(_props, className) {
-        var _a;
-        const labels = Labels.NotificationMU;
-        const { inputs, fullScreen, fullWidth = true, maxWidth, okLabel = labels.alertOK, primaryButton } = (_a = this.inputProps) !== null && _a !== void 0 ? _a : {};
-        let title = this.title;
-        let icon;
-        if (this.type === NotificationMessageType.Success) {
-            icon = React.createElement(Done, { color: "primary" });
-            title !== null && title !== void 0 ? title : (title = labels.success);
-        }
-        else if (this.type === NotificationMessageType.Info) {
-            icon = React.createElement(Info, null);
-            title !== null && title !== void 0 ? title : (title = labels.info);
-        }
-        else if (this.type === NotificationMessageType.Warning) {
-            icon = React.createElement(Warning, { color: "secondary" });
-            title !== null && title !== void 0 ? title : (title = labels.warning);
-        }
-        else {
-            icon = React.createElement(Error, { color: "error" });
-            title !== null && title !== void 0 ? title : (title = labels.alertTitle);
-        }
-        const setupProps = {
-            color: 'primary'
-        };
-        // Setup callback
-        if (this.renderSetup)
-            this.renderSetup(setupProps);
-        return (React.createElement(Dialog, { key: this.id, open: this.open, PaperComponent: DraggablePaperComponent, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen },
-            React.createElement(IconDialogTitle, { className: "draggable-dialog-title" },
-                icon,
-                React.createElement("span", { className: "dialogTitle" }, title)),
-            React.createElement(DialogContent, null,
-                React.createElement(DialogContentText, null, this.content),
-                inputs),
-            React.createElement(DialogActions, null,
-                React.createElement(LoadingButton, { ...setupProps, onClick: async () => await this.returnValue(undefined), autoFocus: true, ...primaryButton }, okLabel))));
-    }
-    // Create confirm
-    createConfirm(_props, className) {
-        var _a, _b;
-        const labels = Labels.NotificationMU;
-        const title = (_a = this.title) !== null && _a !== void 0 ? _a : labels.confirmTitle;
-        const { okLabel = labels.confirmYes, cancelLabel = labels.confirmNo, cancelButton = true, inputs, fullScreen, fullWidth = true, maxWidth, primaryButton } = (_b = this.inputProps) !== null && _b !== void 0 ? _b : {};
-        return (React.createElement(Dialog, { key: this.id, open: this.open, PaperComponent: DraggablePaperComponent, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen },
-            React.createElement(IconDialogTitle, { className: "draggable-dialog-title" },
-                React.createElement(Help, { color: "action" }),
-                React.createElement("span", { className: "dialogTitle" }, title)),
-            React.createElement(DialogContent, null,
-                React.createElement(DialogContentText, null, this.content),
-                inputs),
-            React.createElement(DialogActions, null,
-                cancelButton && (React.createElement(LoadingButton, { color: "secondary", onClick: async () => await this.returnValue(false) }, cancelLabel)),
-                React.createElement(LoadingButton, { color: "primary", onClick: async () => await this.returnValue(true), autoFocus: true, ...primaryButton }, okLabel))));
-    }
-    createMessageColor() {
-        if (this.type === NotificationMessageType.Danger)
-            return 'error';
-        if (this.type === NotificationMessageType.Success)
-            return 'success';
-        if (this.type === NotificationMessageType.Warning)
-            return 'warning';
-        return 'info';
-    }
-    // Create message
-    createMessage(_props, className) {
-        if (!this.open)
-            return React.createElement(React.Fragment, { key: this.id });
-        const setupProps = {
-            severity: this.createMessageColor(),
-            variant: 'filled'
-        };
-        // Setup callback
-        if (this.renderSetup)
-            this.renderSetup(setupProps);
-        return (React.createElement(Fade, { in: true, key: this.id },
-            React.createElement(Alert, { ...setupProps, onClose: () => this.dismiss(), className: className },
-                this.title && React.createElement(AlertTitle, null, this.title),
-                this.content)));
-    }
-    // Create prompt
-    createPrompt(_props, className) {
-        var _a, _b;
-        const labels = Labels.NotificationMU;
-        const title = (_a = this.title) !== null && _a !== void 0 ? _a : labels.promptTitle;
-        const { cancelLabel = labels.promptCancel, okLabel = labels.promptOK, cancelButton = true, inputs, type, fullScreen, fullWidth = true, maxWidth, primaryButton, ...rest } = (_b = this.inputProps) !== null && _b !== void 0 ? _b : {};
-        const inputRef = React.createRef();
-        const errorRef = React.createRef();
-        const setError = (error) => {
-            if (errorRef.current == null)
-                return;
-            errorRef.current.innerText = error !== null && error !== void 0 ? error : '';
-        };
-        const handleSubmit = async (event) => {
-            // Result
-            let result = undefined;
-            const input = inputRef.current;
-            if (this.onReturn) {
-                // Inputs case, no HTMLForm set to value, set the current form
-                if (inputs && value == null)
-                    value = event.currentTarget.form;
-                if (input) {
-                    if (type === 'date') {
-                        const dateValue = input.valueAsDate;
-                        if (dateValue == null && input.required) {
-                            input.focus();
-                            return;
-                        }
-                        result = this.onReturn(dateValue);
-                    }
-                    else if (type === 'number') {
-                        const numberValue = input.valueAsNumber;
-                        if (isNaN(numberValue) && input.required) {
-                            input.focus();
-                            return;
-                        }
-                        result = this.onReturn(numberValue);
-                    }
-                    else if (type === 'switch') {
-                        const boolValue = input.value === 'true';
-                        result = this.onReturn(boolValue);
-                    }
-                    else {
-                        const textValue = input.value.trim();
-                        if (textValue === '' && input.required) {
-                            input.focus();
-                            return;
-                        }
-                        result = this.onReturn(textValue);
-                    }
-                }
-                else if (value != null) {
-                    result = this.onReturn(value);
-                }
-            }
-            // Get the value
-            // returns false to prevent default dismiss
-            const v = await result;
-            if (v === false) {
-                input === null || input === void 0 ? void 0 : input.focus();
-                return;
-            }
-            if (typeof v === 'string') {
-                setError(v);
-                input === null || input === void 0 ? void 0 : input.focus();
-                return;
-            }
-            this.dismiss();
-        };
-        let localInputs;
-        let value = undefined;
-        if (inputs == null) {
-            if (type === 'switch') {
-                localInputs = (React.createElement(Switch, { inputRef: inputRef, ...rest, value: "true", autoFocus: true, required: true }));
-            }
-            else if (type === 'slider') {
-                localInputs = React.createElement(Slider, { onChange: (_e, v) => (value = v) });
-            }
-            else {
-                localInputs = (React.createElement(TextField, { inputRef: inputRef, onChange: () => setError(undefined), autoFocus: true, margin: "dense", fullWidth: true, type: type, required: true, ...rest }));
-            }
-        }
-        else {
-            localInputs = inputs;
-        }
-        return (React.createElement(Dialog, { key: this.id, open: this.open, PaperComponent: DraggablePaperComponent, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen },
-            React.createElement("form", { onSubmit: (event) => {
-                    var _a;
-                    event.preventDefault();
-                    (_a = event.currentTarget.elements.namedItem('okButton')) === null || _a === void 0 ? void 0 : _a.click();
-                    return false;
-                } },
-                React.createElement(IconDialogTitle, { className: "draggable-dialog-title" },
-                    React.createElement(Info, { color: "primary" }),
-                    React.createElement("span", { className: "dialogTitle" }, title)),
-                React.createElement(DialogContent, null,
-                    React.createElement(DialogContentText, null, this.content),
-                    localInputs,
-                    React.createElement(Typography, { variant: "caption", display: "block", ref: errorRef, color: (theme) => theme.palette.error.main })),
-                React.createElement(DialogActions, null,
-                    cancelButton && (React.createElement(Button, { color: "secondary", onClick: () => {
-                            if (this.onReturn)
-                                this.onReturn(undefined);
-                            this.dismiss();
-                        } }, cancelLabel)),
-                    React.createElement(LoadingButton, { color: "primary", autoFocus: true, onClick: handleSubmit, name: "okButton", ...primaryButton }, okLabel)))));
-    }
-    // Create loading
-    createLoading(_props, className) {
-        var _a;
-        // Properties
-        const setupProps = { color: 'primary' };
-        const labels = Labels.NotificationMU;
-        // Input props
-        const { maxWidth = 'xs' } = (_a = this.inputProps) !== null && _a !== void 0 ? _a : {};
-        // Content
-        let content = this.content;
-        if (content === '@')
-            content = labels.loading.toString();
-        // Setup callback
-        if (this.renderSetup)
-            this.renderSetup(setupProps);
-        return (React.createElement(Backdrop, { key: this.id, className: className, sx: {
-                color: '#fff',
-                zIndex: (theme) => theme.zIndex.modal + 1
-            }, open: this.open },
-            React.createElement(Box, { display: "flex", flexDirection: "column", flexWrap: "nowrap", alignItems: "center", sx: {
-                    '& > :not(style) + :not(style)': {
-                        marginTop: (theme) => theme.spacing(1)
-                    }
-                } },
-                React.createElement(CircularProgress, { ...setupProps }),
-                content && (React.createElement(Box, { maxWidth: maxWidth === false ? undefined : maxWidth }, content)))));
-    }
-    /**
-     * Render method
-     * @param props Props
-     * @param className Style class name
-     * @param classes Style classes
-     */
-    render(props, className) {
-        // Loading bar
-        if (this.type === NotificationType.Loading) {
-            return this.createLoading(props, className);
-        }
-        else if (this.type === NotificationType.Confirm) {
-            return this.createConfirm(props, className);
-        }
-        else if (this.type === NotificationType.Prompt) {
-            return this.createPrompt(props, className);
-        }
-        else if (this.type === NotificationType.Error ||
-            (this.modal && this.type in NotificationMessageType)) {
-            // Alert or modal message
-            return this.createAlert(props, className);
-        }
-        else {
-            return this.createMessage(props, className);
-        }
-    }
-}
-/**
- * Antd notifier
- */
-export class NotifierMU extends NotifierReact {
-    constructor() {
-        super(...arguments);
-        /**
-         * Create align container
-         * @param align Align
-         * @param children Children
-         * @param options Other options
-         */
-        this.createContainer = (align, children) => {
-            // Each align group, class equal to something similar to 'align-topleft'
-            const alignText = NotificationAlign[align].toLowerCase();
-            let className = `align-${alignText}`;
-            if (children.length === 0) {
-                return React.createElement("div", { key: `empty-${alignText}`, className: className });
-            }
-            if (align === NotificationAlign.Unknown) {
-                // div container for style control
-                return (React.createElement("div", { key: `div-${alignText}`, className: className }, children));
-            }
-            // Use SnackBar for layout
-            return (React.createElement(Snackbar, { anchorOrigin: NotifierMU.getOrigin(align), className: className, key: `layout-${alignText}`, sx: align === NotificationAlign.Center
-                    ? { position: 'fixed', top: '50%!important' }
-                    : undefined, open: true },
-                React.createElement(Box, { display: "flex", flexDirection: "column", flexWrap: "nowrap", key: `box-${alignText}`, sx: {
-                        '& > :not(style) + :not(style)': {
-                            marginTop: (theme) => theme.spacing(1)
-                        }
-                    } }, children)));
-        };
-    }
-    /**
-     * Create state and return provider
-     * @param className Style class name
-     * @returns Provider
-     */
-    static setup(className = 'notifier-mu') {
-        // Create an instance
-        const instance = new NotifierMU();
-        const provider = instance.createProvider(className);
-        NotifierReact.updateInstance(instance);
-        return provider;
-    }
-    // Calculate origin from align property
-    static getOrigin(align) {
-        if (align === NotificationAlign.TopLeft) {
-            return {
-                horizontal: 'left',
-                vertical: 'top'
-            };
-        }
-        if (align === NotificationAlign.TopCenter) {
-            return {
-                horizontal: 'center',
-                vertical: 'top'
-            };
-        }
-        if (align === NotificationAlign.TopRight) {
-            return {
-                horizontal: 'right',
-                vertical: 'top'
-            };
-        }
-        if (align === NotificationAlign.BottomLeft) {
-            return {
-                horizontal: 'left',
-                vertical: 'bottom'
-            };
-        }
-        if (align === NotificationAlign.BottomCenter) {
-            return {
-                horizontal: 'center',
-                vertical: 'bottom'
-            };
-        }
-        if (align === NotificationAlign.BottomRight) {
-            return {
-                horizontal: 'right',
-                vertical: 'bottom'
-            };
-        }
-        return {
-            horizontal: 'center',
-            vertical: 'top'
-        };
-    }
-    /**
-     * Add raw definition
-     * @param data Notification data definition
-     * @param modal Show as modal
-     */
-    addRaw(data, modal) {
-        // Destruct
-        const { type, content, title, align, timespan = modal ? 0 : undefined, ...rest } = data;
-        // Setup
-        const n = new NotificationMU(type, content, title, align, timespan);
-        // Assign other properties
-        Object.assign(n, rest);
-        // Is modal
-        if (modal != null)
-            n.modal = modal;
-        // Add to the collection
-        this.add(n);
-        // Return
-        return n;
-    }
-}

package/lib/mu/NotifierPromptProps.d.ts

@@ -1,22 +0,0 @@
-/// <reference types="react" />
-/**
- * Notifier prompt props
- */
-export declare type NotifierPromptProps = Record<string, any> & {
-    /**
-     * Cancel label
-     */
-    cancelLabel?: string;
-    /**
-     * OK label
-     */
-    okLabel?: string;
-    /**
-     * Multiple inputs
-     */
-    inputs: React.ReactNode;
-    /**
-     * Single type
-     */
-    type?: string;
-};

package/lib/mu/NotifierPromptProps.js

@@ -1 +0,0 @@
-export {};

package/lib/mu/OptionGroup.d.ts

@@ -1,58 +0,0 @@
-/// <reference types="react" />
-import { DataTypes, IdDefaultType, LabelDefaultType, ListType } from '@etsoo/shared';
-import { FormControlProps } from '@mui/material';
-/**
- * OptionGroup props
- */
-export declare type OptionGroupProps<T extends object, D extends DataTypes.Keys<T>, L extends DataTypes.Keys<T, string>> = Omit<FormControlProps<'fieldset'>, 'defaultValue'> & {
-    /**
-     * Default value
-     */
-    defaultValue?: T[D] | T[D][];
-    /**
-     * Get option label function
-     */
-    getOptionLabel?: (option: T) => string;
-    /**
-     * Id field
-     */
-    idField?: D;
-    /**
-     * Label
-     */
-    label?: string;
-    /**
-     * Label field
-     */
-    labelField?: L;
-    /**
-     * Multiple choose item
-     */
-    multiple?: boolean;
-    /**
-     * Field name
-     */
-    name: string;
-    /**
-     * On value change handler
-     */
-    onValueChange?: (value: T[D] | T[D][] | undefined) => void;
-    /**
-     * Array of options.
-     */
-    options: ReadonlyArray<T>;
-    /**
-     * Is the field read only?
-     */
-    readOnly?: boolean;
-    /**
-     * Display group of elements in a compact row
-     */
-    row?: boolean;
-};
-/**
- * OptionGroup
- * @param props Props
- * @returns Component
- */
-export declare function OptionGroup<T extends object = ListType, D extends DataTypes.Keys<T> = IdDefaultType<T>, L extends DataTypes.Keys<T, string> = LabelDefaultType<T>>(props: OptionGroupProps<T, D, L>): JSX.Element;

package/lib/mu/OptionGroup.js

@@ -1,81 +0,0 @@
-import { DataTypes, Utils } from '@etsoo/shared';
-import { Checkbox, FormControl, FormControlLabel, FormGroup, FormLabel, Radio, RadioGroup } from '@mui/material';
-import React from 'react';
-/**
- * OptionGroup
- * @param props Props
- * @returns Component
- */
-export function OptionGroup(props) {
-    // Destruct
-    const { getOptionLabel, defaultValue, idField = 'id', label, labelField = 'label', multiple = false, name, onValueChange, options, readOnly, row, size, ...rest } = props;
-    // Get option value
-    // D type should be the source id type
-    const getOptionValue = (option) => {
-        const value = DataTypes.getValue(option, idField);
-        if (value == null)
-            return null;
-        return value;
-    };
-    // Checkbox values
-    const [values, setValues] = React.useState(defaultValue == null
-        ? []
-        : Array.isArray(defaultValue)
-            ? defaultValue
-            : [defaultValue]);
-    // Item checked
-    const itemChecked = (option) => {
-        // Value
-        const value = getOptionValue(option);
-        if (value == null)
-            return false;
-        return values.includes(value);
-    };
-    // First item value
-    const firstOptionValue = getOptionValue(options[0]);
-    // Items
-    const list = options.map((option) => {
-        // Control
-        const control = multiple ? (React.createElement(Checkbox, { name: name, readOnly: readOnly, size: size, checked: itemChecked(option), onChange: (event) => {
-                if (firstOptionValue == null)
-                    return;
-                const typeValue = Utils.parseString(event.target.value, firstOptionValue);
-                const changedValues = [...values];
-                if (event.target.checked) {
-                    if (changedValues.includes(typeValue))
-                        return;
-                    changedValues.push(typeValue);
-                }
-                else {
-                    const index = changedValues.findIndex((v) => v === typeValue);
-                    if (index === -1)
-                        return;
-                    changedValues.splice(index, 1);
-                }
-                if (onValueChange)
-                    onValueChange(changedValues);
-                setValues(changedValues);
-            } })) : (React.createElement(Radio, { size: size, readOnly: readOnly }));
-        // Label
-        const label = getOptionLabel == null
-            ? `${option[labelField]}`
-            : getOptionLabel(option);
-        // Value, convert to string
-        // Will fail when type is number
-        const value = getOptionValue(option);
-        return (React.createElement(FormControlLabel, { key: value, control: control, value: value, label: label }));
-    });
-    // Group
-    const group = multiple ? (React.createElement(FormGroup, { row: row }, list)) : (React.createElement(RadioGroup, { row: row, name: name, value: values[0], onChange: (_event, value) => {
-            if (firstOptionValue == null)
-                return;
-            const typeValue = Utils.parseString(value, firstOptionValue);
-            if (onValueChange)
-                onValueChange(typeValue);
-            setValues([typeValue]);
-        } }, list));
-    // Layout
-    return (React.createElement(FormControl, { component: "fieldset", ...rest },
-        label && React.createElement(FormLabel, { component: "legend" }, label),
-        group));
-}

package/lib/mu/PList.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-/**
- * Paragraph items list props
- */
-export interface PListProps {
-    /**
-     * List items
-     */
-    items?: string[];
-}
-/**
- * Paragraph items list
- * @param items Items
- */
-export declare function PList(props: PListProps): JSX.Element;

package/lib/mu/PList.js

@@ -1,12 +0,0 @@
-import React from 'react';
-/**
- * Paragraph items list
- * @param items Items
- */
-export function PList(props) {
-    const { items } = props;
-    return (React.createElement(React.Fragment, null, items != null &&
-        items.map((item, index) => {
-            return React.createElement("p", { key: index }, item);
-        })));
-}

package/lib/mu/ProgressCount.d.ts

@@ -1,44 +0,0 @@
-/// <reference types="react" />
-/**
- * Process count props
- */
-export interface ProgressCountProps {
-    /**
-     * Is countdown or opposite
-     * @default 'true'
-     */
-    countdown?: boolean;
-    /**
-     * Is linear or circular
-     * @default 'true'
-     */
-    linear?: boolean;
-    /**
-     * Min width
-     * @default 36
-     */
-    minWidth?: number;
-    /**
-     * On complete callback, return false will stop it
-     */
-    onComplete?: () => boolean;
-    /**
-     * On progress callback
-     */
-    onProgress?: (value: number) => void;
-    /**
-     * Seconds for count
-     */
-    seconds: number;
-    /**
-     * Value unit, like 's' or '%'
-     * @default ''
-     */
-    valueUnit?: string;
-}
-/**
- * Progress count
- * @param props Props
- * @returns Component
- */
-export declare function ProgressCount(props: ProgressCountProps): JSX.Element;