@unicity/design-system
Version:
A comprehensive React component library built on Material-UI with advanced theming capabilities including neumorphism design support
87 lines • 4.77 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { Dialog as MuiDialog, DialogTitle, DialogContent, DialogContentText, DialogActions, IconButton, Button, Typography, Box, Slide, Zoom, Fade, useTheme, useMediaQuery, } from '@mui/material';
import { Close, Warning, Error } from '@mui/icons-material';
import { styled } from '@mui/material/styles';
const StyledDialog = styled(MuiDialog)(({ theme, variant = 'default', size = 'medium' }) => ({
'& .MuiDialog-paper': {
borderRadius: theme.shape.borderRadius * 2,
...(size === 'small' && {
minWidth: 320,
maxWidth: 400,
}),
...(size === 'medium' && {
minWidth: 400,
maxWidth: 600,
}),
...(size === 'large' && {
minWidth: 600,
maxWidth: 900,
}),
...(size === 'fullscreen' && {
margin: theme.spacing(2),
maxHeight: `calc(100vh - ${theme.spacing(4)})`,
}),
...(variant === 'alert' && {
'& .MuiDialogTitle-root': {
backgroundColor: theme.palette.error.main,
color: theme.palette.error.contrastText,
},
}),
...(variant === 'confirmation' && {
'& .MuiDialogTitle-root': {
backgroundColor: theme.palette.warning.main,
color: theme.palette.warning.contrastText,
},
}),
},
}));
const DialogHeader = styled(DialogTitle)(({ theme }) => ({
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: theme.spacing(2, 3),
'& .MuiTypography-root': {
fontWeight: 600,
},
}));
// Transition components
const SlideTransition = React.forwardRef((props, ref) => _jsx(Slide, { direction: "up", ref: ref, ...props }));
const ZoomTransition = React.forwardRef((props, ref) => _jsx(Zoom, { ref: ref, ...props }));
const FadeTransition = React.forwardRef((props, ref) => _jsx(Fade, { ref: ref, ...props }));
const getVariantIcon = (variant) => {
switch (variant) {
case 'alert':
return _jsx(Error, { color: "error" });
case 'confirmation':
return _jsx(Warning, { color: "warning" });
default:
return null;
}
};
const getTransitionComponent = (transition) => {
switch (transition) {
case 'slide':
return SlideTransition;
case 'zoom':
return ZoomTransition;
case 'fade':
return FadeTransition;
default:
return undefined;
}
};
export const Dialog = ({ open, onClose, title, subtitle, children, content, variant = 'default', size = 'medium', actions = [], showCloseButton = true, closeButtonLabel = 'Close', disableBackdropClick = false, disableEscapeKeyDown = false, transition = 'slide', maxWidth = 'sm', fullWidth = true, fullScreen: fullScreenProp = false, icon, scroll = 'paper', sx, }) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
const fullScreen = fullScreenProp || (isMobile && size !== 'small');
const handleClose = () => {
if (!disableBackdropClick) {
onClose?.();
}
};
const TransitionComponent = getTransitionComponent(transition);
const variantIcon = icon || getVariantIcon(variant);
return (_jsxs(StyledDialog, { open: open, onClose: handleClose, variant: variant, size: size, maxWidth: maxWidth, fullWidth: fullWidth, fullScreen: fullScreen, scroll: scroll, TransitionComponent: TransitionComponent, disableEscapeKeyDown: disableEscapeKeyDown, sx: sx, children: [(title || showCloseButton) && (_jsxs(DialogHeader, { children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [variantIcon, _jsxs(Box, { children: [title && (_jsx(Typography, { variant: "h6", component: "div", children: title })), subtitle && (_jsx(Typography, { variant: "body2", color: "textSecondary", children: subtitle }))] })] }), showCloseButton && onClose && (_jsx(IconButton, { onClick: onClose, size: "small", "aria-label": closeButtonLabel, sx: { ml: 1 }, children: _jsx(Close, {}) }))] })), _jsxs(DialogContent, { dividers: scroll === 'paper', children: [content && _jsx(DialogContentText, { children: content }), children] }), actions.length > 0 && (_jsx(DialogActions, { sx: { p: 2, gap: 1 }, children: actions.map((action, index) => (_jsx(Button, { variant: action.variant || 'text', color: action.color || 'primary', onClick: action.onClick, disabled: action.disabled || action.loading, autoFocus: action.autoFocus, startIcon: action.icon, sx: { minWidth: 80 }, children: action.label }, index))) }))] }));
};
//# sourceMappingURL=Dialog.js.map