-
Notifications
You must be signed in to change notification settings - Fork 330
/
DiagnosisSelectFormField.tsx
45 lines (40 loc) · 1.52 KB
/
DiagnosisSelectFormField.tsx
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
import { useAsyncOptions } from "../../Common/hooks/useAsyncOptions";
import { listICD11Diagnosis } from "../../Redux/actions";
import { ICD11DiagnosisModel } from "../Facility/models";
import { AutocompleteMutliSelect } from "../Form/FormFields/AutocompleteMultiselect";
import FormField from "../Form/FormFields/FormField";
import {
FormFieldBaseProps,
resolveFormFieldChangeEventHandler,
} from "../Form/FormFields/Utils";
type Props =
// | ({ multiple?: false | undefined } & FormFieldBaseProps<ICD11DiagnosisModel>) // uncomment when single select form field is required and implemented.
{ multiple: true } & FormFieldBaseProps<ICD11DiagnosisModel[]>;
export function DiagnosisSelectFormField(props: Props) {
const { name } = props;
const handleChange = resolveFormFieldChangeEventHandler(props);
const { fetchOptions, isLoading, options } =
useAsyncOptions<ICD11DiagnosisModel>("id");
if (!props.multiple) {
return (
<div className="bg-danger-500 text-white font-bold">
Component not implemented
</div>
);
}
return (
<FormField props={props}>
<AutocompleteMutliSelect
id={props.id}
disabled={props.disabled}
value={props.value || []}
options={options(props.value)}
optionLabel={(option) => option.label}
optionValue={(option) => option}
onQuery={(query) => fetchOptions(listICD11Diagnosis({ query }, ""))}
isLoading={isLoading}
onChange={(value) => handleChange({ name, value })}
/>
</FormField>
);
}