Я добавил 2 анимированных GIF для большей специфичности проблемы.
Здравствуйте, я работаю над проектом реагирования, чтобы объединить airbnb/react-dates с пользовательским компонентом timepicker.
Рабочий процесс:
1. Пользователь выбирает день в первом открытом календаре <SingleDatePicker />
2. <SingleDatePicker> скрыт и отображается timepicker component.
3. Пользователь выбирает время и timepicker, календарную дату / время обновляется, а затем его скрывают.
4. 2nd <SingleDatePicker> включен, сфокусирован и открыт.
5. Та же процедура, что и 1-го <SingleDatePicker>
Проблема
Я не могу судить, когда показывать таймер, а когда нет.
Это из-за функции focusChange:
focusChange({ focused }, calendar, timePicker) {
// handle the visiblility of calendars & timepickers
this.setState({
[calendar]: focused,
[ показать $ {timePicker} ]: !focused
});
}
случаи:
1. Календарь открыт, пользователь нажимает снаружи => календарь закрывается, но открывается окно выбора времени. (Должен также скрыть таймер)
См. GIF:
2. Пользователь выбирает день и время (1-й календарь) => 2-й календарь открывается.
Когда мы щелкаем взаимозаменяемо между календарями (входами) 1-го и 2-го, всегда открывается противоположный таймер.
См. GIF:
Что мне нужно, это знать, когда календарь закрывает базу выбора дня, чтобы открыть таймер и когда он закрывается из-за clickoutside, чтобы не отображать timepicker.
Любая помощь приветствуется.