| 1 | import { Theme, alpha } from '@mui/material/styles';
|
|---|
| 2 | import { ToggleButtonProps, toggleButtonClasses } from '@mui/material/ToggleButton';
|
|---|
| 3 |
|
|---|
| 4 | // ----------------------------------------------------------------------
|
|---|
| 5 |
|
|---|
| 6 | const COLORS = ['primary', 'secondary', 'info', 'success', 'warning', 'error'] as const;
|
|---|
| 7 |
|
|---|
| 8 | // ----------------------------------------------------------------------
|
|---|
| 9 |
|
|---|
| 10 | export function toggleButton(theme: Theme) {
|
|---|
| 11 | const rootStyles = (ownerState: ToggleButtonProps) => {
|
|---|
| 12 | const defaultStyle = {
|
|---|
| 13 | [`&.${toggleButtonClasses.selected}`]: {
|
|---|
| 14 | borderColor: 'currentColor',
|
|---|
| 15 | boxShadow: '0 0 0 0.5px currentColor',
|
|---|
| 16 | },
|
|---|
| 17 | };
|
|---|
| 18 |
|
|---|
| 19 | const colorStyle = COLORS.map((color) => ({
|
|---|
| 20 | ...(ownerState.color === color && {
|
|---|
| 21 | '&:hover': {
|
|---|
| 22 | borderColor: alpha(theme.palette[color].main, 0.48),
|
|---|
| 23 | backgroundColor: alpha(theme.palette[color].main, theme.palette.action.hoverOpacity),
|
|---|
| 24 | },
|
|---|
| 25 | }),
|
|---|
| 26 | }));
|
|---|
| 27 |
|
|---|
| 28 | const disabledState = {
|
|---|
| 29 | [`&.${toggleButtonClasses.disabled}`]: {
|
|---|
| 30 | [`&.${toggleButtonClasses.selected}`]: {
|
|---|
| 31 | color: theme.palette.action.disabled,
|
|---|
| 32 | backgroundColor: theme.palette.action.selected,
|
|---|
| 33 | borderColor: theme.palette.action.disabledBackground,
|
|---|
| 34 | },
|
|---|
| 35 | },
|
|---|
| 36 | };
|
|---|
| 37 |
|
|---|
| 38 | return [defaultStyle, ...colorStyle, disabledState];
|
|---|
| 39 | };
|
|---|
| 40 |
|
|---|
| 41 | return {
|
|---|
| 42 | MuiToggleButton: {
|
|---|
| 43 | styleOverrides: {
|
|---|
| 44 | root: ({ ownerState }: { ownerState: ToggleButtonProps }) => rootStyles(ownerState),
|
|---|
| 45 | },
|
|---|
| 46 | },
|
|---|
| 47 | MuiToggleButtonGroup: {
|
|---|
| 48 | styleOverrides: {
|
|---|
| 49 | root: {
|
|---|
| 50 | borderRadius: theme.shape.borderRadius,
|
|---|
| 51 | backgroundColor: theme.palette.background.paper,
|
|---|
| 52 | border: `solid 1px ${alpha(theme.palette.grey[500], 0.08)}`,
|
|---|
| 53 | },
|
|---|
| 54 | grouped: {
|
|---|
| 55 | margin: 4,
|
|---|
| 56 | [`&.${toggleButtonClasses.selected}`]: {
|
|---|
| 57 | boxShadow: 'none',
|
|---|
| 58 | },
|
|---|
| 59 | '&:not(:first-of-type), &:not(:last-of-type)': {
|
|---|
| 60 | borderRadius: theme.shape.borderRadius,
|
|---|
| 61 | borderColor: 'transparent',
|
|---|
| 62 | },
|
|---|
| 63 | },
|
|---|
| 64 | },
|
|---|
| 65 | },
|
|---|
| 66 | };
|
|---|
| 67 | }
|
|---|
