cesnimda
102 lines
2.7 KiB
JavaScript
102 lines
2.7 KiB
JavaScript
// @project
|
|
import { withAlpha } from '@/utils/colorUtils';
|
|
import { generateFocusStyle } from '@/utils/generateFocusStyle';
|
|
|
|
const colors = ['primary', 'secondary', 'success', 'error', 'warning', 'info'];
|
|
|
|
/*************************** COMPONENT - ICON BUTTON ***************************/
|
|
|
|
export default function IconButton(theme) {
|
|
const createColorVariant = (color, variant, styleFn, theme) => {
|
|
const paletteColor = theme.vars.palette[color];
|
|
return {
|
|
props: { variant, color },
|
|
style: styleFn(paletteColor)
|
|
};
|
|
};
|
|
|
|
const commonDisabledStyles = {
|
|
'&.Mui-disabled': {
|
|
backgroundColor: theme.vars.palette.action.disabledBackground
|
|
},
|
|
'&.Mui-disabled:not(.MuiIconButton-loading)': {
|
|
color: theme.vars.palette.action.disabled
|
|
}
|
|
};
|
|
|
|
const colorTextVariants = colors.map((color) =>
|
|
createColorVariant(
|
|
color,
|
|
undefined,
|
|
(paletteColor) => ({
|
|
color: paletteColor.main
|
|
}),
|
|
theme
|
|
)
|
|
);
|
|
|
|
const colorContainedVariants = colors.map((color) =>
|
|
createColorVariant(
|
|
color,
|
|
'contained',
|
|
(paletteColor) => ({
|
|
color: paletteColor.contrastText,
|
|
backgroundColor: paletteColor.main,
|
|
'&:hover': {
|
|
backgroundColor: paletteColor.dark
|
|
},
|
|
...commonDisabledStyles
|
|
}),
|
|
theme
|
|
)
|
|
);
|
|
|
|
const colorOutlinedVariants = colors.map((color) =>
|
|
createColorVariant(
|
|
color,
|
|
'outlined',
|
|
(paletteColor) => ({
|
|
color: paletteColor.main,
|
|
border: `1px solid ${paletteColor.lighter}`,
|
|
...(color === 'secondary' && { color: theme.vars.palette.text.primary, borderColor: theme.vars.palette.divider }),
|
|
'&.Mui-disabled': {
|
|
backgroundColor: withAlpha(theme.vars.palette.grey[700], 0.04),
|
|
borderColor: theme.vars.palette.action.disabledBackground
|
|
},
|
|
'&.Mui-disabled:not(.MuiIconButton-loading)': {
|
|
color: theme.vars.palette.action.disabled
|
|
}
|
|
}),
|
|
theme
|
|
)
|
|
);
|
|
|
|
return {
|
|
MuiIconButton: {
|
|
defaultProps: {
|
|
disableFocusRipple: true,
|
|
color: 'primary'
|
|
},
|
|
styleOverrides: {
|
|
root: {
|
|
borderRadius: 8,
|
|
'& .MuiTouchRipple-root span': {
|
|
borderRadius: 8
|
|
},
|
|
'&.Mui-disabled': {
|
|
pointerEvents: 'auto',
|
|
cursor: 'not-allowed'
|
|
},
|
|
'&:focus-visible': {
|
|
...generateFocusStyle(theme.vars.palette.primary.main)
|
|
},
|
|
variants: [...colorTextVariants, ...colorContainedVariants, ...colorOutlinedVariants]
|
|
},
|
|
sizeSmall: { width: 36, height: 36 },
|
|
sizeMedium: { width: 42, height: 42 },
|
|
sizeLarge: { width: 48, height: 48 }
|
|
}
|
|
}
|
|
};
|
|
}
|