@unicity/design-system
Version:
A comprehensive React component library built on Material-UI with advanced theming capabilities including neumorphism design support
77 lines • 3.7 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from 'react';
import { SpeedDial as MuiSpeedDial, SpeedDialAction, SpeedDialIcon, Backdrop, Fab, useTheme, } from '@mui/material';
import { Add, Close } from '@mui/icons-material';
import { styled } from '@mui/material/styles';
const StyledSpeedDial = styled(MuiSpeedDial)(({ theme, variant = 'default', size = 'medium' }) => ({
'& .MuiSpeedDial-fab': {
...(size === 'small' && {
width: 40,
height: 40,
}),
...(size === 'large' && {
width: 64,
height: 64,
}),
...(variant === 'extended' && {
borderRadius: `calc(${theme.shape.borderRadius}px * 6)`,
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(2),
minWidth: 120,
}),
},
'& .MuiSpeedDialAction-fab': {
...(size === 'small' && {
width: 36,
height: 36,
}),
...(size === 'large' && {
width: 48,
height: 48,
}),
},
}));
export const SpeedDial = ({ actions, open: openProp, onOpenChange, icon = _jsx(Add, {}), openIcon = _jsx(Close, {}), direction = 'up', variant = 'default', size = 'medium', color = 'primary', position = { bottom: 16, right: 16 }, showBackdrop = false, label, hidden = false, closeOnActionClick = true, sx, }) => {
const [internalOpen, setInternalOpen] = React.useState(false);
const theme = useTheme();
const isControlled = openProp !== undefined;
const open = isControlled ? openProp : internalOpen;
const handleOpenChange = (newOpen) => {
if (!isControlled) {
setInternalOpen(newOpen);
}
onOpenChange?.(newOpen);
};
const handleActionClick = (action) => {
action.onClick?.();
if (closeOnActionClick) {
handleOpenChange(false);
}
};
const getActionColor = (actionColor) => {
return actionColor || 'default';
};
return (_jsxs(_Fragment, { children: [showBackdrop && (_jsx(Backdrop, { open: open, sx: { zIndex: theme.zIndex.speedDial - 1 }, onClick: () => handleOpenChange(false) })), _jsx(StyledSpeedDial, { ariaLabel: "speed-dial", open: open, onOpen: () => handleOpenChange(true), onClose: () => handleOpenChange(false), icon: variant === 'extended' && label ? (_jsxs(Fab, { variant: "extended", color: color, size: size, sx: {
boxShadow: 'none',
'&:hover': {
boxShadow: theme.shadows[6],
},
}, children: [open ? openIcon : icon, !open && label] })) : (_jsx(SpeedDialIcon, { icon: icon, openIcon: openIcon })), direction: direction, variant: variant, size: size, hidden: hidden, sx: {
position: 'fixed',
...position,
...sx,
}, FabProps: {
color,
size,
}, children: actions.map((action) => (_jsx(SpeedDialAction, { icon: action.icon, tooltipTitle: action.label, onClick: () => !action.disabled && handleActionClick(action), FabProps: {
color: getActionColor(action.color),
size: size === 'large' ? 'medium' : 'small',
disabled: action.disabled,
}, sx: {
...(action.disabled && {
opacity: 0.5,
pointerEvents: 'none',
}),
} }, action.id))) })] }));
};
//# sourceMappingURL=SpeedDial.js.map