@i-novus/ui-core
Version:
Базовые UI компоненты
55 lines (54 loc) • 2.04 kB
JavaScript
import { useEffect, useRef, useState } from 'react';
import dayjs from 'dayjs';
import { useMemoFunction } from '../../../core';
import { getActiveElement } from '../../../utils/get-active-dom-node';
export const useDatePickerInputEvents = (calendarOpen, calendarElem, { onFocus, onBlur, onEnterKeyDown }, dateRangeOptions) => {
const [isPreventFocusEvent, setIsPreventFocusEvent] = useState(false);
const isInit = useRef(false);
const handleKeyDown = useMemoFunction((event) => {
const isInputFocus = calendarElem.current?.contains(getActiveElement());
if ((event.key === 'Enter' || event.code === 'Space') && isInputFocus) {
event.preventDefault();
event.stopPropagation();
onEnterKeyDown?.();
}
});
const handleFocus = useMemoFunction(() => {
if (isPreventFocusEvent) {
return;
}
setIsPreventFocusEvent(true);
onFocus?.();
window?.addEventListener('keydown', handleKeyDown);
});
const onBlurEvent = useMemoFunction((event) => {
setIsPreventFocusEvent(false);
onBlur?.(event);
window?.removeEventListener('keydown', handleKeyDown);
});
const handleBlur = useMemoFunction((event, setValue) => {
const { maxDate, minDate, dateFormat, value } = dateRangeOptions || {};
const date = dayjs(event.target.value, dateFormat);
if (date.isAfter(maxDate) || date.isBefore(minDate)) {
setValue(dayjs(value).format(dateFormat));
}
if (calendarOpen) {
return;
}
onBlurEvent(event);
});
useEffect(() => {
if (!isInit.current) {
isInit.current = true;
return;
}
const isFireOnBlur = isInit.current && !calendarElem.current?.contains(getActiveElement());
if (isFireOnBlur) {
onBlurEvent();
}
}, [calendarOpen, onBlur, calendarElem, onBlurEvent]);
return ({
handleFocus,
handleBlur,
});
};