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 | 247x 247x 264x 277x 6x 6x 4x | import React, {memo, useState} from "react";
import {Autocomplete, Box, Button, Stack, TextField} from "@mui/material";
import AddIcon from "@mui/icons-material/Add";
import {AiOption} from "./Ai";
type Props = {
onCommit: (value: AiOption) => void,
onChange?: (value: AiOption) => void,
aiOptions: AiOption[]
width?: number | string,
defaultValue?: AiOption,
commitMode: boolean,
submitText?: string
}
function AddAutopilot(props: Props) {
const [value, setValue] = useState(props.defaultValue || null) // if this was undefined, the input would be uncontrolled
return (
<Stack spacing={2}>
<Autocomplete
disablePortal
id={"aiChooser"}
options={props.aiOptions}
sx={{ width: props.width || 250 }}
value={value}
isOptionEqualToValue={(option, value) => option.id === value.id}
renderInput={(params) => <TextField {...params} label="AI Strategy" />}
onChange={(e, newValue) => {
newValue && setValue(newValue);
props.onChange && newValue && props.onChange(newValue)
}}
/>
{props.commitMode &&
<Button
aria-label="done"
disabled={value === null}
onClick={_ => value && props.onCommit(value)}
variant="outlined"
>
{props.submitText || "Add Autopilot"}
<AddIcon/>
</Button>
}
<Box sx={{ width: props.width || 250 }}>
{value && value.description}
</Box>
</Stack>
);
}
export default memo(AddAutopilot);
|