@unicity/design-system
Version:
A comprehensive React component library built on Material-UI with advanced theming capabilities including neumorphism design support
108 lines • 4.72 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from 'react';
import { Button, CircularProgress, Box, LinearProgress, } from '@mui/material';
import { styled } from '@mui/material/styles';
const StyledLoadingButton = styled(Button)(({ theme, loading, loadingPosition = 'center' }) => ({
position: 'relative',
...(loading && {
pointerEvents: 'none',
...(loadingPosition === 'center' && {
'& .MuiButton-startIcon, & .MuiButton-endIcon': {
opacity: 0,
},
}),
}),
}));
const LoadingIndicator = styled(Box)(({ theme, loadingPosition, size }) => ({
position: loadingPosition === 'center' ? 'absolute' : 'relative',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
...(loadingPosition === 'center' && {
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
}),
...(loadingPosition === 'start' && {
marginRight: theme.spacing(1),
}),
...(loadingPosition === 'end' && {
marginLeft: theme.spacing(1),
}),
'& .MuiCircularProgress-root': {
width: `${size}px !important`,
height: `${size}px !important`,
},
}));
const ProgressOverlay = styled(LinearProgress)(({ theme }) => ({
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
height: 2,
borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`,
}));
const DotsIndicator = ({ color = 'currentColor' }) => (_jsxs(Box, { sx: {
display: 'flex',
gap: 0.5,
'& .dot': {
width: 4,
height: 4,
borderRadius: '50%',
backgroundColor: color,
animation: 'loadingDots 1.4s infinite ease-in-out',
'&:nth-of-type(1)': { animationDelay: '-0.32s' },
'&:nth-of-type(2)': { animationDelay: '-0.16s' },
},
'@keyframes loadingDots': {
'0%, 80%, 100%': {
transform: 'scale(0)',
},
'40%': {
transform: 'scale(1)',
},
},
}, children: [_jsx(Box, { className: "dot" }), _jsx(Box, { className: "dot" }), _jsx(Box, { className: "dot" })] }));
export const LoadingButton = ({ loading = false, loadingPosition = 'center', loadingIndicator = 'circular', loadingSize = 16, loadingColor = 'inherit', loadingText, showProgress = false, progress = 0, startIcon, endIcon, disableOnLoading = true, customLoadingComponent, children, disabled, onClick, ...props }) => {
const isDisabled = disabled || (loading && disableOnLoading);
const buttonText = loading && loadingText ? loadingText : children;
const handleClick = (event) => {
if (!loading && onClick) {
onClick(event);
}
};
const renderLoadingIndicator = () => {
if (customLoadingComponent) {
return customLoadingComponent;
}
switch (loadingIndicator) {
case 'circular':
return (_jsx(CircularProgress, { size: loadingSize, color: loadingColor, thickness: 4 }));
case 'linear':
return (_jsx(ProgressOverlay, { variant: showProgress ? 'determinate' : 'indeterminate', value: showProgress ? progress : undefined, color: loadingColor }));
case 'dots':
return _jsx(DotsIndicator, {});
default:
if (React.isValidElement(loadingIndicator)) {
return loadingIndicator;
}
return (_jsx(CircularProgress, { size: loadingSize, color: loadingColor, thickness: 4 }));
}
};
const renderContent = () => {
if (loadingIndicator === 'linear') {
return (_jsxs(_Fragment, { children: [buttonText, loading && renderLoadingIndicator()] }));
}
const indicator = loading && (_jsx(LoadingIndicator, { loadingPosition: loadingPosition, size: loadingSize, children: renderLoadingIndicator() }));
if (loadingPosition === 'start') {
return (_jsxs(_Fragment, { children: [indicator, buttonText] }));
}
if (loadingPosition === 'end') {
return (_jsxs(_Fragment, { children: [buttonText, indicator] }));
}
// Center position
return (_jsxs(_Fragment, { children: [buttonText, indicator] }));
};
return (_jsx(StyledLoadingButton, { loading: loading, loadingPosition: loadingPosition, disabled: isDisabled, onClick: handleClick, startIcon: !loading ? startIcon : undefined, endIcon: !loading ? endIcon : undefined, ...props, children: renderContent() }));
};
//# sourceMappingURL=LoadingButton.js.map