cesnimda
89 lines
2.8 KiB
React
89 lines
2.8 KiB
React
// @project
|
|
import { generateFocusStyle } from '@/utils/generateFocusStyle';
|
|
|
|
// @assets
|
|
import { IconX } from '@tabler/icons-react';
|
|
|
|
const validPaletteKeys = ['primary', 'secondary', 'error', 'warning', 'info', 'success'];
|
|
const isValidPaletteKey = (value) => validPaletteKeys.includes(value);
|
|
|
|
/*************************** OVERRIDES - CHIP ***************************/
|
|
|
|
export default function Chip(theme) {
|
|
return {
|
|
MuiChip: {
|
|
defaultProps: {
|
|
variant: 'light', // Default variant is 'light'
|
|
deleteIcon: <IconX size={16} />
|
|
},
|
|
styleOverrides: {
|
|
root: {
|
|
height: '100%',
|
|
'&.Mui-focusVisible': {
|
|
...generateFocusStyle(theme.vars.palette.primary.main)
|
|
},
|
|
variants: [
|
|
{
|
|
props: { variant: 'text' }, // Variant for text Chip
|
|
style: ({ ownerState }) => {
|
|
const paletteColor = isValidPaletteKey(ownerState.color) ? theme.vars.palette[ownerState.color] : undefined;
|
|
return {
|
|
backgroundColor: 'transparent', // Transparent background for text variant
|
|
...(paletteColor && {
|
|
color: paletteColor.main
|
|
}),
|
|
'& .MuiChip-label': {
|
|
padding: 0
|
|
},
|
|
'& .MuiChip-icon': {
|
|
marginRight: 2,
|
|
marginLeft: 0
|
|
},
|
|
'& .MuiChip-avatar': {
|
|
marginLeft: 0,
|
|
marginRight: 4,
|
|
...(paletteColor && {
|
|
color: paletteColor.main,
|
|
backgroundColor: paletteColor.light
|
|
})
|
|
},
|
|
'&[position="right"]': {
|
|
'& .MuiChip-icon': {
|
|
marginLeft: 2, // Adjust margin when icon is on the right
|
|
marginRight: 0
|
|
},
|
|
'& .MuiChip-avatar': {
|
|
marginLeft: 4, // Adjust margin when avatar is on the right
|
|
marginRight: 0
|
|
}
|
|
}
|
|
};
|
|
}
|
|
}
|
|
]
|
|
},
|
|
avatar: {
|
|
borderRadius: '50%', // Circular avatar
|
|
padding: 2
|
|
},
|
|
icon: {
|
|
fontSize: 10,
|
|
lineHeight: 14,
|
|
fontWeight: 400,
|
|
width: 20,
|
|
height: 20,
|
|
borderRadius: '50%', // Circular icon
|
|
padding: 3
|
|
},
|
|
avatarSmall: {
|
|
width: 16,
|
|
height: 16,
|
|
padding: 1.5,
|
|
...theme.typography.caption // Small avatar typography
|
|
},
|
|
labelSmall: theme.typography.caption1 // Small label typography
|
|
}
|
|
}
|
|
};
|
|
}
|