@unicity/design-system
Version:
A comprehensive React component library built on Material-UI with advanced theming capabilities including neumorphism design support
42 lines • 2.77 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { InputLabel, MenuItem, FormHelperText, ListSubheader } from '@mui/material';
import { StyledSelect, StyledFormControl } from './Select.style';
export const Select = ({ label, options, value, onChange, error = false, helperText, required = false, disabled = false, fullWidth = false, size = 'medium', variant = 'outlined', placeholder, multiple = false, ...props }) => {
const handleChange = (event) => {
if (onChange) {
onChange(event.target.value);
}
};
const labelId = `select-label-${Math.random().toString(36).substr(2, 9)}`;
// Group options by group property
const groupedOptions = options.reduce((acc, option) => {
const group = option.group || 'default';
if (!acc[group]) {
acc[group] = [];
}
acc[group].push(option);
return acc;
}, {});
const renderOptions = () => {
const groups = Object.keys(groupedOptions);
if (groups.length === 1 && groups[0] === 'default') {
// No grouping
return groupedOptions.default.map((option) => (_jsx(MenuItem, { value: option.value, disabled: option.disabled, divider: option.divider, children: option.label }, option.value)));
}
// Render with groups
return groups.map((groupName) => {
const groupOptions = groupedOptions[groupName];
if (groupName === 'default') {
return groupOptions.map((option) => (_jsx(MenuItem, { value: option.value, disabled: option.disabled, divider: option.divider, children: option.label }, option.value)));
}
return [
_jsx(ListSubheader, { children: groupName }, `header-${groupName}`),
...groupOptions.map((option) => (_jsx(MenuItem, { value: option.value, disabled: option.disabled, divider: option.divider, children: option.label }, option.value)))
];
}).flat();
};
return (_jsxs(StyledFormControl, { variant: variant, size: size, fullWidth: fullWidth, error: error, disabled: disabled, required: required, children: [label && (_jsx(InputLabel, { id: labelId, children: label })), _jsxs(StyledSelect, { labelId: labelId, value: value, onChange: handleChange, label: label, multiple: multiple, displayEmpty: !!placeholder, renderValue: placeholder && !value
? () => _jsx("span", { style: { color: '#999' }, children: placeholder })
: undefined, ...props, children: [placeholder && !multiple && (_jsx(MenuItem, { value: "", disabled: true, children: placeholder })), renderOptions()] }), helperText && (_jsx(FormHelperText, { children: helperText }))] }));
};
//# sourceMappingURL=Select.js.map