@elacity-js/uikit/dist/contexts/ModalContext.js

React / Material UI Design kit for Elacity project

import { __rest, __awaiter } from '../node_modules/tslib/tslib.es6.js';
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import React__default from 'react';
import { Formik } from 'formik';
import { Dialog, DialogTitle, Box, DialogContent, Typography, LinearProgress, Alert, AlertTitle, DialogActions, Button, CircularProgress } from '@mui/material';
import { FullLogo } from '../assets/Logo.js';

const TheModal = (_a) => {
    var { Component, ActionsWrapper, additionalActions, title, open, onClose, maxWidth, centerActions, okLabel, onOk, formData, formValidator, withProgress, progress, withoutLogo } = _a, props = __rest(_a, ["Component", "ActionsWrapper", "additionalActions", "title", "open", "onClose", "maxWidth", "centerActions", "okLabel", "onOk", "formData", "formValidator", "withProgress", "progress", "withoutLogo"]);
    const [err, setError] = React__default.useState(null);
    React__default.useRef({});
    const handleClose = () => {
        onClose();
        // flush progress if any
        setError(null);
        if (progress) {
            progress === null || progress === void 0 ? void 0 : progress.set(null, 0);
        }
    };
    return (jsxs(Dialog, Object.assign({ fullWidth: true, maxWidth: maxWidth || 'md', open: Boolean(open), onClose: (event, reason) => {
            if (reason !== 'backdropClick') {
                handleClose();
            }
        } }, { children: [jsxs(DialogTitle, Object.assign({ sx: {
                    mb: 0,
                    pt: { xs: 1, sm: 2, md: 3 },
                    pb: { xs: 1, sm: 1, md: 2 },
                    fontSize: 16,
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'center',
                    alignItems: 'center',
                } }, { children: [!withoutLogo && (jsx(Box, Object.assign({ sx: { display: 'inline-flex', mt: { xs: 1, md: 2 } } }, { children: jsx(FullLogo, { size: 170, responsive: true }) }))), title && jsx(Box, Object.assign({ sx: { mt: 2 } }, { children: title }))] })), jsx(Formik, Object.assign({ initialValues: formData, validate: formValidator, validateOnChange: false, validateOnBlur: true, onSubmit: (values, helpers) => __awaiter(void 0, void 0, void 0, function* () {
                    if (onOk) {
                        try {
                            setError(null);
                            progress.set('Processing...', 0);
                            yield onOk(values, helpers);
                            progress.set('Process done', 100);
                            handleClose();
                        }
                        catch (e) {
                            setError(e);
                        }
                    }
                }) }, { children: ({ isSubmitting, handleSubmit }) => (jsx("form", Object.assign({ onSubmit: handleSubmit }, { children: jsxs(Fragment, { children: [jsxs(DialogContent, Object.assign({ sx: { mt: 0, pt: 0, pb: 0 } }, { children: [jsx(Component, Object.assign({}, (props || {}))), isSubmitting && withProgress && (jsxs(Box, Object.assign({ sx: { width: '100%' } }, { children: [jsx(Typography, Object.assign({ variant: "subtitle2", fontWeight: "light" }, { children: progress === null || progress === void 0 ? void 0 : progress.label })), jsx(LinearProgress, { variant: "determinate", value: progress === null || progress === void 0 ? void 0 : progress.value })] }))), err && (jsxs(Alert, Object.assign({ severity: "error", color: "error", onClose: () => setError(null) }, { children: [jsx(AlertTitle, { children: err.name }), err.reason || err.message] })))] })), jsx(DialogActions, Object.assign({ sx: Object.assign({ pb: { xs: 2, lg: 3 }, px: 3, justifyContent: centerActions ? 'center' : 'flex-end' }, (centerActions && {
                                    alignItems: 'center',
                                    display: 'flex',
                                    flexDirection: 'column',
                                    '& > *': {
                                        marginTop: 1,
                                        ml: '0!important',
                                    },
                                })) }, { children: jsxs(ActionsWrapper, { children: [additionalActions, onOk && (jsx(Button, Object.assign({ type: "submit", variant: "contained", disabled: isSubmitting, startIcon: isSubmitting ? jsx(CircularProgress, { size: "1rem" }) : null }, { children: okLabel || 'OK' }))), jsx(Button, Object.assign({ onClick: handleClose, disabled: isSubmitting }, { children: "Cancel" }))] }) }))] }) }))) }))] })));
};
TheModal.defaultProps = {
    ActionsWrapper: React__default.Fragment,
    additionalActions: null,
};
const ModalContext = React__default.createContext({
    openModal: () => { },
});
const ModalProvider = ({ children, }) => {
    const [open, setOpen] = React__default.useState(false);
    const [progressState, setProgressState] = React__default.useState({ value: 0, label: null });
    const [modalProps, setModalProps] = React__default.useState({ Component: () => null });
    const openModal = (o) => {
        setModalProps(o);
        setOpen(true);
    };
    const onClose = () => {
        setProgressState({ value: 0, label: null });
        setOpen(false);
    };
    const updateProgress = (label, value) => {
        setProgressState({ label, value: value || 0 });
    };
    return (jsxs(ModalContext.Provider, Object.assign({ value: {
            openModal,
            updateProgress,
            closeModal: onClose,
        } }, { children: [children, jsx(TheModal, Object.assign({ onClose: onClose, open: open, progress: Object.assign(Object.assign({}, progressState), { set: updateProgress }) }, modalProps))] })));
};

export { ModalProvider, ModalContext as default };
//# sourceMappingURL=ModalContext.js.map