123 lines
3 KiB
TypeScript
123 lines
3 KiB
TypeScript
import FilledInput from "@material-ui/core/FilledInput";
|
|
import FormControl from "@material-ui/core/FormControl";
|
|
import FormHelperText from "@material-ui/core/FormHelperText";
|
|
import InputLabel from "@material-ui/core/InputLabel";
|
|
import MenuItem from "@material-ui/core/MenuItem";
|
|
import Select, { SelectProps } from "@material-ui/core/Select";
|
|
import { makeStyles } from "@material-ui/core/styles";
|
|
import React from "react";
|
|
import { FormattedMessage } from "react-intl";
|
|
|
|
import Checkbox from "../Checkbox";
|
|
|
|
const useStyles = makeStyles(
|
|
theme => ({
|
|
checkbox: {
|
|
marginRight: -theme.spacing(2)
|
|
},
|
|
formControl: {
|
|
width: "100%"
|
|
},
|
|
menuItem: {
|
|
alignItems: "center",
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
width: "100%"
|
|
}
|
|
}),
|
|
{ name: "MultiSelectField" }
|
|
);
|
|
|
|
interface MultiSelectFieldProps {
|
|
choices: Array<{
|
|
value: string;
|
|
label: string;
|
|
}>;
|
|
disabled?: boolean;
|
|
error?: boolean;
|
|
hint?: string;
|
|
label?: string;
|
|
name?: string;
|
|
selectProps?: SelectProps;
|
|
value?: string[];
|
|
onChange(event: any);
|
|
}
|
|
|
|
export const MultiSelectField: React.FC<MultiSelectFieldProps> = props => {
|
|
const {
|
|
disabled,
|
|
error,
|
|
label,
|
|
choices,
|
|
value,
|
|
onChange,
|
|
name,
|
|
hint,
|
|
selectProps
|
|
} = props;
|
|
const classes = useStyles(props);
|
|
|
|
const choicesByKey = disabled
|
|
? {}
|
|
: choices.reduce((prev, curr) => {
|
|
prev[curr.value] = curr.label;
|
|
return prev;
|
|
}, {});
|
|
|
|
return (
|
|
<FormControl
|
|
className={classes.formControl}
|
|
error={error}
|
|
disabled={disabled}
|
|
>
|
|
{label && <InputLabel>{label}</InputLabel>}
|
|
<Select
|
|
multiple
|
|
fullWidth
|
|
renderValue={choiceValues =>
|
|
(choiceValues as string[])
|
|
.map(choiceValue => choicesByKey[choiceValue])
|
|
.join(", ")
|
|
}
|
|
value={value}
|
|
name={name}
|
|
onChange={onChange}
|
|
input={<FilledInput name={name} />}
|
|
{...selectProps}
|
|
>
|
|
{choices.length > 0 ? (
|
|
choices.map(choice => {
|
|
const isSelected = !!value.find(
|
|
selectedChoice => selectedChoice === choice.value
|
|
);
|
|
|
|
return (
|
|
<MenuItem value={choice.value} key={choice.value}>
|
|
<div className={classes.menuItem}>
|
|
<span>{choice.label}</span>
|
|
<Checkbox
|
|
className={classes.checkbox}
|
|
checked={isSelected}
|
|
disableRipple={true}
|
|
disableTouchRipple={true}
|
|
/>
|
|
</div>
|
|
</MenuItem>
|
|
);
|
|
})
|
|
) : (
|
|
<MenuItem disabled={true}>
|
|
<FormattedMessage defaultMessage="No results found" />
|
|
</MenuItem>
|
|
)}
|
|
</Select>
|
|
{hint && <FormHelperText>{hint}</FormHelperText>}
|
|
</FormControl>
|
|
);
|
|
};
|
|
MultiSelectField.defaultProps = {
|
|
value: []
|
|
};
|
|
|
|
MultiSelectField.displayName = "MultiSelectField";
|
|
export default MultiSelectField;
|