fix(striker-ui): allow array options in SelectWithLabel

main
Tsu-ba-me 2 years ago
parent 916ec54dd0
commit 182837c93b
  1. 125
      striker-ui/components/SelectWithLabel.tsx

@ -1,4 +1,4 @@
import { FC } from 'react'; import { FC, useCallback, useMemo } from 'react';
import { import {
Checkbox as MUICheckbox, Checkbox as MUICheckbox,
FormControl as MUIFormControl, FormControl as MUIFormControl,
@ -28,7 +28,7 @@ type SelectWithLabelOptionalProps = {
type SelectWithLabelProps = SelectWithLabelOptionalProps & { type SelectWithLabelProps = SelectWithLabelOptionalProps & {
id: string; id: string;
selectItems: SelectItem[]; selectItems: Array<SelectItem | string>;
}; };
const SELECT_WITH_LABEL_DEFAULT_PROPS: Required<SelectWithLabelOptionalProps> = const SELECT_WITH_LABEL_DEFAULT_PROPS: Required<SelectWithLabelOptionalProps> =
@ -54,51 +54,86 @@ const SelectWithLabel: FC<SelectWithLabelProps> = ({
inputLabelProps, inputLabelProps,
isReadOnly, isReadOnly,
messageBoxProps, messageBoxProps,
selectProps, selectProps = {},
isCheckableItems = selectProps?.multiple, isCheckableItems = selectProps?.multiple,
}) => ( }) => {
<MUIFormControl> const { sx: selectSx } = selectProps;
{label && (
<OutlinedInputLabel {...{ htmlFor: id, ...inputLabelProps }}>
{label}
</OutlinedInputLabel>
)}
<Select
{...{
id,
input: <OutlinedInput {...{ label }} />,
readOnly: isReadOnly,
...selectProps,
sx: isReadOnly
? {
[`& .${muiSelectClasses.icon}`]: {
visibility: 'hidden',
},
...selectProps?.sx, const combinedSx = useMemo(
} () =>
: selectProps?.sx, isReadOnly
}} ? {
> [`& .${muiSelectClasses.icon}`]: {
{selectItems.map(({ value, displayValue = value }) => ( visibility: 'hidden',
<MenuItem },
disabled={disableItem?.call(null, value)}
key={`${id}-${value}`} ...selectSx,
sx={{ }
display: hideItem?.call(null, value) ? 'none' : undefined, : selectSx,
}} [isReadOnly, selectSx],
value={value} );
>
{isCheckableItems && ( const createCheckbox = useCallback(
<MUICheckbox checked={checkItem?.call(null, value)} /> (value) =>
)} isCheckableItems && (
{displayValue} <MUICheckbox checked={checkItem?.call(null, value)} />
</MenuItem> ),
))} [checkItem, isCheckableItems],
</Select> );
<InputMessageBox {...messageBoxProps} /> const createMenuItem = useCallback(
</MUIFormControl> (value, displayValue) => (
); <MenuItem
disabled={disableItem?.call(null, value)}
key={`${id}-${value}`}
sx={{
display: hideItem?.call(null, value) ? 'none' : undefined,
}}
value={value}
>
{createCheckbox(value)}
{displayValue}
</MenuItem>
),
[createCheckbox, disableItem, hideItem, id],
);
const inputElement = useMemo(() => <OutlinedInput label={label} />, [label]);
const labelElement = useMemo(
() =>
label && (
<OutlinedInputLabel htmlFor={id} {...inputLabelProps}>
{label}
</OutlinedInputLabel>
),
[id, inputLabelProps, label],
);
const menuItemElements = useMemo(
() =>
selectItems.map((item) => {
const { value, displayValue = value }: SelectItem =
typeof item === 'string' ? { value: item } : item;
return createMenuItem(value, displayValue);
}),
[createMenuItem, selectItems],
);
return (
<MUIFormControl>
{labelElement}
<Select
id={id}
input={inputElement}
readOnly={isReadOnly}
{...selectProps}
sx={combinedSx}
>
{menuItemElements}
</Select>
<InputMessageBox {...messageBoxProps} />
</MUIFormControl>
);
};
SelectWithLabel.defaultProps = SELECT_WITH_LABEL_DEFAULT_PROPS; SelectWithLabel.defaultProps = SELECT_WITH_LABEL_DEFAULT_PROPS;

Loading…
Cancel
Save