@etsoo/materialui 1.0.1

package/lib/MoreFab.js

@@ -0,0 +1,95 @@
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import React from 'react';
+import { Divider, Fab, IconButton, ListItemIcon, ListItemText, Menu, MenuItem } from '@mui/material';
+import { Link } from 'react-router-dom';
+function getActions(input) {
+    // Actions
+    const actions = [];
+    input.forEach((action) => {
+        if (typeof action === 'boolean')
+            return;
+        actions.push(action);
+    });
+    return actions;
+}
+/**
+ * More fab
+ * @returns Component
+ */
+export function MoreFab(props) {
+    // Destruct
+    const { actions, drawArrow = true, anchorOrigin = {
+        vertical: 'top',
+        horizontal: 'right'
+    }, color = 'primary', icon = React.createElement(MoreHorizIcon, null), iconButton = false, PaperProps = drawArrow
+        ? {
+            elevation: 0,
+            sx: {
+                overflow: 'visible',
+                filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
+                mt: -0.4,
+                '& .MuiAvatar-root': {
+                    width: 32,
+                    height: 32,
+                    ml: -0.5,
+                    mr: 1
+                },
+                '&:before': {
+                    content: '""',
+                    display: 'block',
+                    position: 'absolute',
+                    top: 0,
+                    right: 14,
+                    width: 10,
+                    height: 10,
+                    bgcolor: 'background.paper',
+                    transform: 'translateY(-50%) rotate(45deg)',
+                    zIndex: 0
+                }
+            }
+        }
+        : undefined, size, title, transformOrigin = {
+        vertical: 'bottom',
+        horizontal: 'right'
+    } } = props;
+    // State
+    const [anchorEl, setAnchorEl] = React.useState();
+    // Open state
+    const open = Boolean(anchorEl);
+    // Handle click
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    // Handle close
+    const handleClose = () => {
+        setAnchorEl(undefined);
+    };
+    // No actions
+    if (actions == null || actions.length == 0)
+        return React.createElement(React.Fragment, null);
+    // Actions
+    const actionsLocal = getActions(actions);
+    // Has any icon
+    const hasIcon = actionsLocal.some((action) => action.icon != null);
+    // Main
+    const main = iconButton ? (React.createElement(IconButton, { color: color, size: size, title: title, onClick: handleClick }, icon)) : (React.createElement(Fab, { color: color, size: size, title: title, onClick: handleClick }, icon));
+    return (React.createElement(React.Fragment, null,
+        main,
+        React.createElement(Menu, { disableScrollLock: true, anchorEl: anchorEl, anchorOrigin: anchorOrigin, keepMounted: true, transformOrigin: transformOrigin, open: open, onClose: handleClose, PaperProps: PaperProps }, actionsLocal.map(({ label, icon, action }, index) => label === '-' ? (React.createElement(Divider, { key: index })) : (React.createElement(MenuItem, { key: label, ...(typeof action === 'string'
+                ? action.includes('://')
+                    ? {
+                        component: 'a',
+                        href: action,
+                        target: '_blank'
+                    }
+                    : { component: Link, to: action }
+                : {
+                    onClick: () => {
+                        handleClose();
+                        if (typeof action === 'function')
+                            action();
+                    }
+                }) },
+            icon != null && (React.createElement(ListItemIcon, null, icon)),
+            React.createElement(ListItemText, { inset: icon == null && hasIcon }, label)))))));
+}

package/lib/NotifierMU.d.ts

@@ -0,0 +1,47 @@
+import { NotificationAlign, NotificationRenderProps } from '@etsoo/notificationbase';
+import React from 'react';
+import { INotificationBaseReact, INotificationReact, NotificationReact, NotifierReact } from '@etsoo/react';
+/**
+ * MU notification
+ */
+export declare class NotificationMU extends NotificationReact {
+    private returnValue;
+    private createAlert;
+    private createConfirm;
+    private createMessageColor;
+    private createMessage;
+    private createPrompt;
+    private createLoading;
+    /**
+     * Render method
+     * @param props Props
+     * @param className Style class name
+     * @param classes Style classes
+     */
+    render(props: NotificationRenderProps, className: string): JSX.Element;
+}
+/**
+ * Antd notifier
+ */
+export declare class NotifierMU extends NotifierReact {
+    /**
+     * Create state and return provider
+     * @param className Style class name
+     * @returns Provider
+     */
+    static setup(className?: string): React.FunctionComponent<React.PropsWithChildren<import("@etsoo/react").NotificationReactRenderProps>>;
+    private static getOrigin;
+    /**
+     * Create align container
+     * @param align Align
+     * @param children Children
+     * @param options Other options
+     */
+    protected createContainer: (align: NotificationAlign, children: React.ReactNode[]) => JSX.Element;
+    /**
+     * Add raw definition
+     * @param data Notification data definition
+     * @param modal Show as modal
+     */
+    protected addRaw(data: INotificationBaseReact, modal?: boolean): INotificationReact;
+}

package/lib/NotifierMU.js

@@ -0,0 +1,387 @@
+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 { NotificationReact, NotifierReact } from '@etsoo/react';
+import { DraggablePaperComponent } from './DraggablePaperComponent';
+import { LoadingButton } from './LoadingButton';
+import { Labels } from './app/Labels';
+// 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/NotifierPromptProps.d.ts

@@ -0,0 +1,22 @@
+/// <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/NotifierPromptProps.js

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

package/lib/OptionGroup.d.ts

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