@lunit/oui
Version:
Lunit Oncology UI components
55 lines (54 loc) • 3.01 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ArrowDown } from '../../icons';
import { useState } from 'react';
import { BaseDropdown, DropdownContainer, DropdownPlaceholder } from './Dropdown.styled';
import { handlePlaceholder } from './Dropdown.utils';
import theme from '../../theme';
import { InputMsg } from '../BaseTextField/BaseTextField.styled';
import { BUTTON_DROPDOWN_ITEM } from './DropdownItem.utils';
const Dropdown = (({ children, placeholder, value, error, helperMsg, onChange, sx, style, MenuProps = undefined, ContainerProps, ...otherProps }) => {
// Prevents selecting a DropdownItem with `asButton` property.
const handleChange = (e, child) => {
if (!!onChange && e.target.value !== BUTTON_DROPDOWN_ITEM) {
onChange(e, child);
}
};
const [isOpen, setOpen] = useState(false);
return (_jsxs(DropdownContainer, { ...ContainerProps, fullWidth: otherProps.fullWidth, children: [_jsx(BaseDropdown, { sx: sx, style: style, IconComponent: () => (_jsx(ArrowDown, { onClick: () => {
if (typeof otherProps.open === 'undefined')
setOpen(false);
}, style: isOpen || otherProps.open
? {
cursor: 'pointer',
transform: 'scaleY(-1)',
}
: undefined })), onClick: () => {
if (!otherProps.disabled)
setOpen(!isOpen);
},
// https://github.com/mui/material-ui/issues/26076#issuecomment-1014345564
onClose: () => {
setTimeout(() => {
document.activeElement.blur();
}, 0);
}, onChange: handleChange, error: !!error, open:
// eslint-disable-next-line no-nested-ternary
typeof otherProps.open !== 'undefined'
? otherProps.open
: otherProps.disabled
? false
: isOpen,
// MUI expects a value of '' if undefined :S
value: value ?? '', MenuProps: MenuProps ?? {
disablePortal: true,
sx: {
'.MuiPaper-root': {
marginTop: '4px',
borderRadius: '8px',
background: theme.palette.neutralGrey[85],
border: 'transparent',
},
},
}, ...otherProps, children: children }), handlePlaceholder(value) && placeholder && (_jsx(DropdownPlaceholder, { placeholder: placeholder, disabled: otherProps.disabled })), error ? (_jsx(InputMsg, { variant: "body5", error: true, children: error })) : (helperMsg && _jsx(InputMsg, { variant: "body5", children: helperMsg }))] }));
});
export default Dropdown;