|
5 | 5 | */ |
6 | 6 |
|
7 | 7 | import React, { FC, useState, useContext, useEffect } from 'react'; |
8 | | -import { EuiComboBox, EuiComboBoxOptionProps } from '@elastic/eui'; |
| 8 | +import { EuiComboBox, EuiComboBoxOptionProps, EuiComboBoxProps } from '@elastic/eui'; |
9 | 9 | import { JobCreatorContext } from '../../../../../job_creator_context'; |
10 | 10 | import { Description } from './description'; |
11 | 11 | import { ml } from '../../../../../../../../../services/ml_api_service'; |
| 12 | +import { Calendar } from '../../../../../../../../../../../common/types/calendars'; |
12 | 13 |
|
13 | 14 | export const CalendarsSelection: FC = () => { |
14 | 15 | const { jobCreator, jobCreatorUpdate } = useContext(JobCreatorContext); |
15 | | - const [selectedCalendars, setSelectedCalendars] = useState(jobCreator.calendars); |
16 | | - const [selectedOptions, setSelectedOptions] = useState<EuiComboBoxOptionProps[]>([]); |
17 | | - const [options, setOptions] = useState<EuiComboBoxOptionProps[]>([]); |
| 16 | + const [selectedCalendars, setSelectedCalendars] = useState<Calendar[]>(jobCreator.calendars); |
| 17 | + const [selectedOptions, setSelectedOptions] = useState<Array<EuiComboBoxOptionProps<Calendar>>>( |
| 18 | + [] |
| 19 | + ); |
| 20 | + const [options, setOptions] = useState<Array<EuiComboBoxOptionProps<Calendar>>>([]); |
18 | 21 | const [isLoading, setIsLoading] = useState(false); |
19 | 22 |
|
20 | 23 | async function loadCalendars() { |
21 | 24 | setIsLoading(true); |
22 | 25 | const calendars = await ml.calendars(); |
23 | | - setOptions(calendars.map(c => ({ label: c.calendar_id }))); |
24 | | - setSelectedOptions(selectedCalendars.map(c => ({ label: c }))); |
| 26 | + setOptions(calendars.map(c => ({ label: c.calendar_id, value: c }))); |
| 27 | + setSelectedOptions(selectedCalendars.map(c => ({ label: c.calendar_id, value: c }))); |
25 | 28 | setIsLoading(false); |
26 | 29 | } |
27 | 30 |
|
28 | 31 | useEffect(() => { |
29 | 32 | loadCalendars(); |
30 | 33 | }, []); |
31 | 34 |
|
32 | | - function onChange(optionsIn: EuiComboBoxOptionProps[]) { |
33 | | - setSelectedOptions(optionsIn); |
34 | | - setSelectedCalendars(optionsIn.map(o => o.label)); |
35 | | - } |
36 | | - |
37 | 35 | useEffect(() => { |
38 | 36 | jobCreator.calendars = selectedCalendars; |
39 | 37 | jobCreatorUpdate(); |
40 | 38 | }, [selectedCalendars.join()]); |
41 | 39 |
|
| 40 | + const comboBoxProps: EuiComboBoxProps<Calendar> = { |
| 41 | + async: true, |
| 42 | + options, |
| 43 | + selectedOptions, |
| 44 | + isLoading, |
| 45 | + onChange: optionsIn => { |
| 46 | + setSelectedOptions(optionsIn); |
| 47 | + setSelectedCalendars(optionsIn.map(o => o.value as Calendar)); |
| 48 | + }, |
| 49 | + }; |
| 50 | + |
42 | 51 | return ( |
43 | 52 | <Description> |
44 | | - <EuiComboBox |
45 | | - async |
46 | | - options={options} |
47 | | - selectedOptions={selectedOptions} |
48 | | - isLoading={isLoading} |
49 | | - onChange={onChange} |
50 | | - /> |
| 53 | + <EuiComboBox {...comboBoxProps} /> |
51 | 54 | </Description> |
52 | 55 | ); |
53 | 56 | }; |
0 commit comments