@lunit/oui
Version:
Lunit Oncology UI components
72 lines (71 loc) • 2.19 kB
JavaScript
import { Select, styled } from '@mui/material';
const baseIconDropdownStyle = (theme) => {
return {
fontFamily: 'Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
fontSize: '14px',
fontWeight: '400',
background: theme.palette.neutralGrey[85],
width: '52px',
borderRadius: '8px',
border: '1px solid transparent',
padding: '0 2px 0 0',
height: '36px',
color: theme.palette.neutralGrey[5],
'& fieldset': {
border: 'none',
},
'&.Mui-focused': {
border: `1px solid transparent !important`,
},
'&.Mui-disabled': {
opacity: '0.4',
},
'.MuiSvgIcon-root ': {
cursor: 'pointer',
color: theme.palette.neutralGrey[5],
'&.Mui-disabled': {
color: theme.palette.neutralGrey[45],
},
},
'.MuiSelect-select': {
display: 'flex',
padding: '0 0 0 8px !important',
width: 'fit-content',
},
'&:hover': {
backgroundColor: theme.palette.neutralGrey[70],
opacity: 0.8,
border: `1px solid transparent`,
'&.Mui-disabled': {
border: '1px solid transparent',
},
},
};
};
const toggledIconDropdownStyle = (theme) => {
return {
backgroundColor: theme.palette.neutralGrey[70],
border: `1px solid transparent`,
};
};
const BaseIconDropdown = styled(Select, {
shouldForwardProp: (prop) => !['small', 'isToggled'].includes(prop.toString()),
})(({ theme, isToggled }) => {
let style = baseIconDropdownStyle(theme);
if (isToggled) {
style = {
...style,
...toggledIconDropdownStyle(theme),
};
}
return style;
});
const DropdownContainer = styled('div')(() => {
return {
position: 'relative',
display: 'flex',
flexDirection: 'column',
minWidth: '32px',
};
});
export { BaseIconDropdown, DropdownContainer };