135 lines
3.2 KiB
JavaScript
135 lines
3.2 KiB
JavaScript
import React from 'react';
|
|
|
|
import FormControl from '@mui/material/FormControl';
|
|
import Grid from '@mui/material/Grid';
|
|
import InputLabel from '@mui/material/InputLabel';
|
|
import MenuItem from '@mui/material/MenuItem';
|
|
import Select from '@mui/material/Select';
|
|
import TextField from '@mui/material/TextField';
|
|
|
|
function isCustomOption(value, options) {
|
|
for (let o of options) {
|
|
if (o.value === value) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
export default function Component(props) {
|
|
const [$value, setValue] = React.useState({
|
|
value: props.value,
|
|
isCustom: isCustomOption(props.value, props.options),
|
|
custom: isCustomOption(props.value, props.options) === true ? props.value : '',
|
|
});
|
|
|
|
const handleChange = (event) => {
|
|
const v = event.target.value;
|
|
|
|
const value = $value;
|
|
|
|
value.isCustom = v === props.customKey ? true : false;
|
|
if (value.isCustom === true) {
|
|
value.custom = value.value;
|
|
}
|
|
value.value = v;
|
|
|
|
setValue({
|
|
...$value,
|
|
value: v,
|
|
isCustom: v === props.customKey ? true : false,
|
|
});
|
|
|
|
props.onChange(event);
|
|
};
|
|
|
|
const handleCustomChange = (event) => {
|
|
setValue({
|
|
...$value,
|
|
custom: event.target.value,
|
|
});
|
|
|
|
props.onChange(event);
|
|
};
|
|
|
|
const options = [];
|
|
|
|
for (let o of props.options) {
|
|
options.push(
|
|
<MenuItem key={o.value} value={o.value} disabled={o.disabled === true}>
|
|
{o.label}
|
|
</MenuItem>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Grid container spacing={2}>
|
|
{props.allowCustom === true ? (
|
|
<React.Fragment>
|
|
{$value.isCustom === true ? (
|
|
<React.Fragment>
|
|
<Grid item xs={6}>
|
|
<FormControl variant={props.variant} fullWidth>
|
|
<InputLabel>{props.label}</InputLabel>
|
|
<Select
|
|
value={$value.isCustom === false ? $value.value : props.customKey}
|
|
onChange={handleChange}
|
|
disabled={props.disabled}
|
|
label={props.label}
|
|
>
|
|
{options}
|
|
</Select>
|
|
</FormControl>
|
|
</Grid>
|
|
<Grid item xs={6}>
|
|
<TextField
|
|
variant={props.variant}
|
|
fullWidth
|
|
disabled={props.disabled === true || $value.isCustom === false}
|
|
label={props.customLabel ? props.customLabel : props.label}
|
|
value={$value.custom}
|
|
onChange={handleCustomChange}
|
|
/>
|
|
</Grid>
|
|
</React.Fragment>
|
|
) : (
|
|
<Grid item xs={12}>
|
|
<FormControl variant={props.variant} fullWidth>
|
|
<InputLabel>{props.label}</InputLabel>
|
|
<Select
|
|
value={$value.isCustom === false ? $value.value : props.customKey}
|
|
onChange={handleChange}
|
|
disabled={props.disabled}
|
|
label={props.label}
|
|
>
|
|
{options}
|
|
</Select>
|
|
</FormControl>
|
|
</Grid>
|
|
)}
|
|
</React.Fragment>
|
|
) : (
|
|
<Grid item xs={12}>
|
|
<FormControl variant={props.variant} fullWidth>
|
|
<InputLabel>{props.label}</InputLabel>
|
|
<Select value={$value.value} onChange={handleChange} disabled={props.disabled} label={props.label}>
|
|
{options}
|
|
</Select>
|
|
</FormControl>
|
|
</Grid>
|
|
)}
|
|
</Grid>
|
|
);
|
|
}
|
|
|
|
Component.defaultProps = {
|
|
variant: 'outlined',
|
|
label: '',
|
|
value: '',
|
|
disabled: false,
|
|
customKey: 'custom',
|
|
allowCustom: false,
|
|
onChange: function (event) {},
|
|
};
|