ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Calendar Modal: Fix frozen time when scheduling (#1399)

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-08-17 09:26:18 +03:00
parent 6367a487b3
commit 262bf7982d
1 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/common/CalendarModal.tsx
View File

@ -6,6 +6,7 @@ import buildClassName from '../../util/buildClassName';
import { formatTime, formatDateToString } from '../../util/dateFormat'; import { formatTime, formatDateToString } from '../../util/dateFormat';
import useLang, { LangFn } from '../../hooks/useLang'; import useLang, { LangFn } from '../../hooks/useLang';
import usePrevious from '../../hooks/usePrevious'; import usePrevious from '../../hooks/usePrevious';
import useFlag from '../../hooks/useFlag';
import Modal from '../ui/Modal'; import Modal from '../ui/Modal';
import Button from '../ui/Button'; import Button from '../ui/Button';
@ -54,6 +55,7 @@ const CalendarModal: FC<OwnProps> = ({
const defaultSelectedDate = useMemo(() => (selectedAt ? new Date(selectedAt) : new Date()), [selectedAt]); const defaultSelectedDate = useMemo(() => (selectedAt ? new Date(selectedAt) : new Date()), [selectedAt]);
const maxDate = maxAt ? new Date(maxAt) : undefined; const maxDate = maxAt ? new Date(maxAt) : undefined;
const prevIsOpen = usePrevious(isOpen); const prevIsOpen = usePrevious(isOpen);
const [isTimeInputFocused, markTimeInputAsFocused, unmarkTimeInputAsFocused] = useFlag(false);
const [selectedDate, setSelectedDate] = useState<Date>(defaultSelectedDate); const [selectedDate, setSelectedDate] = useState<Date>(defaultSelectedDate);
const [selectedHours, setSelectedHours] = useState<string>( const [selectedHours, setSelectedHours] = useState<string>(
@ -74,12 +76,12 @@ const CalendarModal: FC<OwnProps> = ({
}, [isOpen, defaultSelectedDate, prevIsOpen]); }, [isOpen, defaultSelectedDate, prevIsOpen]);
useEffect(() => { useEffect(() => {
if (isFutureMode && selectedDate.getTime() < defaultSelectedDate.getTime()) { if (isFutureMode && !isTimeInputFocused && selectedDate.getTime() < defaultSelectedDate.getTime()) {
setSelectedDate(defaultSelectedDate); setSelectedDate(defaultSelectedDate);
setSelectedHours(formatInputTime(defaultSelectedDate.getHours())); setSelectedHours(formatInputTime(defaultSelectedDate.getHours()));
setSelectedMinutes(formatInputTime(defaultSelectedDate.getMinutes())); setSelectedMinutes(formatInputTime(defaultSelectedDate.getMinutes()));
} }
}, [defaultSelectedDate, isFutureMode, selectedDate]); }, [defaultSelectedDate, isTimeInputFocused, isFutureMode, selectedDate]);
const shouldDisableNextMonth = (isPastMode && currentYear >= now.getFullYear() && currentMonth >= now.getMonth()) const shouldDisableNextMonth = (isPastMode && currentYear >= now.getFullYear() && currentMonth >= now.getMonth())
|| (maxDate && currentYear >= maxDate.getFullYear() && currentMonth >= maxDate.getMonth()); || (maxDate && currentYear >= maxDate.getFullYear() && currentMonth >= maxDate.getMonth());
@ -167,6 +169,8 @@ const CalendarModal: FC<OwnProps> = ({
inputMode="decimal" inputMode="decimal"
value={selectedHours} value={selectedHours}
onChange={handleChangeHours} onChange={handleChangeHours}
onFocus={markTimeInputAsFocused}
onBlur={unmarkTimeInputAsFocused}
/> />
: :
<input <input
@ -175,6 +179,8 @@ const CalendarModal: FC<OwnProps> = ({
inputMode="decimal" inputMode="decimal"
value={selectedMinutes} value={selectedMinutes}
onChange={handleChangeMinutes} onChange={handleChangeMinutes}
onFocus={markTimeInputAsFocused}
onBlur={unmarkTimeInputAsFocused}
/> />
</div> </div>
); );