2019-10-24 16:04:39 +02:00
|
|
|
import React from 'react';
|
2021-09-27 13:35:32 +02:00
|
|
|
import { FormControl, InputLabel, MenuItem, Select } from '@material-ui/core';
|
2022-03-28 10:49:59 +02:00
|
|
|
import { SELECT_ITEM_ID } from 'testIds';
|
2019-10-24 16:04:39 +02:00
|
|
|
|
2021-09-27 13:35:32 +02:00
|
|
|
export interface ISelectOption {
|
|
|
|
key: string;
|
|
|
|
title?: string;
|
2021-09-30 11:44:30 +02:00
|
|
|
label?: string;
|
2021-09-27 13:35:32 +02:00
|
|
|
}
|
|
|
|
export interface ISelectMenuProps {
|
|
|
|
name: string;
|
|
|
|
id: string;
|
|
|
|
value?: string;
|
|
|
|
label?: string;
|
|
|
|
options: ISelectOption[];
|
|
|
|
style?: object;
|
|
|
|
onChange?: (
|
|
|
|
event: React.ChangeEvent<{ name?: string; value: unknown }>,
|
|
|
|
child: React.ReactNode
|
2021-09-30 11:44:30 +02:00
|
|
|
) => void;
|
|
|
|
disabled?: boolean;
|
2021-09-27 13:35:32 +02:00
|
|
|
className?: string;
|
|
|
|
classes?: any;
|
|
|
|
}
|
|
|
|
|
|
|
|
const SelectMenu: React.FC<ISelectMenuProps> = ({
|
2021-04-12 15:04:03 +02:00
|
|
|
name,
|
2021-09-27 13:35:32 +02:00
|
|
|
value = '',
|
|
|
|
label = '',
|
2021-04-12 15:04:03 +02:00
|
|
|
options,
|
|
|
|
onChange,
|
|
|
|
id,
|
|
|
|
disabled = false,
|
|
|
|
className,
|
|
|
|
classes,
|
|
|
|
...rest
|
|
|
|
}) => {
|
2021-03-30 15:14:02 +02:00
|
|
|
const renderSelectItems = () =>
|
|
|
|
options.map(option => (
|
2021-09-30 11:44:30 +02:00
|
|
|
<MenuItem
|
|
|
|
key={option.key}
|
|
|
|
value={option.key}
|
|
|
|
title={option.title || ''}
|
|
|
|
data-test={`${SELECT_ITEM_ID}-${option.label}`}
|
|
|
|
>
|
2021-03-30 15:14:02 +02:00
|
|
|
{option.label}
|
|
|
|
</MenuItem>
|
|
|
|
));
|
|
|
|
|
2019-10-24 16:04:39 +02:00
|
|
|
return (
|
2021-04-12 15:04:03 +02:00
|
|
|
<FormControl variant="outlined" size="small" classes={classes}>
|
2021-03-30 15:14:02 +02:00
|
|
|
<InputLabel htmlFor={id} id={id}>
|
|
|
|
{label}
|
|
|
|
</InputLabel>
|
|
|
|
<Select
|
2019-10-24 16:04:39 +02:00
|
|
|
name={name}
|
2020-08-07 11:25:24 +02:00
|
|
|
disabled={disabled}
|
2019-10-24 16:04:39 +02:00
|
|
|
onChange={onChange}
|
2021-03-30 15:14:02 +02:00
|
|
|
className={className}
|
|
|
|
label={label}
|
|
|
|
id={id}
|
2019-10-24 16:04:39 +02:00
|
|
|
value={value}
|
2021-03-30 15:14:02 +02:00
|
|
|
{...rest}
|
2019-10-24 16:04:39 +02:00
|
|
|
>
|
2021-03-30 15:14:02 +02:00
|
|
|
{renderSelectItems()}
|
|
|
|
</Select>
|
|
|
|
</FormControl>
|
2019-10-24 16:04:39 +02:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2021-03-30 15:14:02 +02:00
|
|
|
export default SelectMenu;
|