Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import React from 'react';
import { Tooltip } from '../../components/tooltip/Tooltip';
import Alert from '@mui/material/Alert';
import InfoIcon from '@mui/icons-material/Info';
import Autocomplete, {
AutocompleteProps,
AutocompleteRenderInputParams,
createFilterOptions,
} from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import * as Styles from './styles';
const filter = createFilterOptions<string>();
interface MultiSelectContainerProps extends Omit<AutocompleteProps<string, true, boolean, boolean>, 'renderInput'> {
name: string;
className?: string;
label: string;
errorMessage?: string;
required?: boolean;
renderInput?: (params: AutocompleteRenderInputParams) => React.ReactNode;
tooltip?: string;
disabledTooltip?: string;
}
const MultiSelectContainer: React.FunctionComponent<MultiSelectContainerProps> = ({
label,
required,
errorMessage,
disabled,
renderInput,
tooltip,
disabledTooltip,
freeSolo,
options,
...rest
}) => {
renderInput ??= (params: AutocompleteRenderInputParams) => (
<TextField {...params} variant="outlined" size="small" margin="dense" placeholder={label} />
);
// if disabled, display disabledTooltip (if present)
// otherwise, display tooltip (if present)
const tooltipComponent = disabled ? (
disabledTooltip ? (
<Tooltip title={disabledTooltip} className={Styles.tooltips}>
<InfoIcon />
</Tooltip>
) : (
<></>
)
) : tooltip ? (
<Tooltip title={tooltip} className={Styles.tooltips}>
<InfoIcon />
</Tooltip>
) : (
<></>
);
const errorComponent = errorMessage ? (
<div className={Styles.ErrorIconStyled}>
<Alert severity="error">{errorMessage}</Alert>
</div>
) : (
<></>
);
return (
<div className={Styles.SelectInputContainer}>
<div className={Styles.tooltipsContainer}>
<label className={Styles.InputLabel(required)}>{label}</label>
{tooltipComponent}
</div>
<Autocomplete
{...rest}
multiple
renderInput={renderInput}
freeSolo={freeSolo}
readOnly={disabled}
options={options}
filterOptions={(options, params) => {
const filtered = filter(options, params);
// Suggest the creation of a new value
Iif (params.inputValue !== '' && !options.includes(params.inputValue)) {
filtered.push(params.inputValue);
}
return filtered;
}}
renderOption={(props, option, state) => {
Iif (!options.includes(option)) {
option = `Add "${option}"`;
}
return <li {...props}>{option}</li>;
}}
componentsProps={{
...rest.componentsProps,
popupIndicator: {
...rest.componentsProps?.popupIndicator,
size: 'small',
},
clearIndicator: {
...rest.componentsProps?.clearIndicator,
size: 'small',
},
}}
/>
{errorComponent}
</div>
);
};
export { MultiSelectContainer, MultiSelectContainerProps };
|