@elacity-js/uikit/dist/components/StepProgress.js

React / Material UI Design kit for Elacity project

import { jsxs, jsx } from 'react/jsx-runtime';
import { Dialog, Box, Stack, CircularProgress, Typography, LinearProgress, DialogActions, Button } from '@mui/material';
import CheckIcon from '@mui/icons-material/Check';
import ClearIcon from '@mui/icons-material/Clear';

const StepProgress = ({ open, onClose, isSubmitting, step, stepStatus, steps, stepsError, }) => (jsxs(Dialog, Object.assign({ fullWidth: true, maxWidth: "xs", open: open, 
    // Forbid outside clicks
    onBackdropClick: () => { }, onClose: () => { } }, { children: [jsx(Box, Object.assign({ sx: { p: 3 } }, { children: jsxs(Stack, Object.assign({ justifyContent: "center", alignItems: "center", spacing: 4 }, { children: [stepStatus === 'ongoing' && jsx(CircularProgress, {}), stepStatus === 'finished' && jsx(CheckIcon, { sx: { color: 'green', fontSize: '2rem' } }), stepStatus === 'error' && jsx(ClearIcon, { sx: { color: 'red', fontSize: '2rem' } }), jsx(Typography, Object.assign({ variant: "h5", color: "textPrimary" }, { children: stepStatus === 'error' ? stepsError[step] : steps[step] })), jsx(LinearProgress, { variant: "determinate", value: ((step + 1) / steps.length) * 100, style: { width: '100%' } })] })) })), jsx(DialogActions, { children: jsx(Button, Object.assign({ size: "large", onClick: onClose, disabled: isSubmitting }, { children: "Close" })) })] })));

export { StepProgress as default };
//# sourceMappingURL=StepProgress.js.map