intelicoreact 2.0.17 → 2.0.19

package/dist/es/Atomic/FormElements/InputDateRange/components/Datepicker.js

@@ -0,0 +1,422 @@
+import Button from "../../../UI/Button/Button.js";
+import Dropdown from "../../Dropdown/Dropdown.js";
+import Switcher from "../../Switcher/Switcher.js";
+import DateInput from "./DateInput.js";
+import RangeCalendar from "../../RangeCalendar/RangeCalendar.js";
+import { MAIN_FORMAT, MAIN_TIME_FORMAT, getActualDateRange, getIsDateValid } from "../dependencies.js";
+import cn from "classnames";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import moment from "moment-timezone";
+//#region src/Atomic/FormElements/InputDateRange/components/Datepicker.tsx
+var DATE_INPUT_FORMAT = "MM/DD/YYYY";
+function padTime(time) {
+	return `${time.toString().padStart(2, "0")}:00`;
+}
+var Datepicker = (props) => {
+	const { txt, className, buttonsTypes = {}, values = {}, onChange, onChangeMobile, onChangeCompare, onCancel, getSelectedMode, onChangeInterval, isCompareHidden, limitRange, setActiveInterval, isShortWeekNames, minDate, maxDate, momentMinDate, momentMaxDate, isDontLimitFuture, testId, mainId, withMobileLogic, isDoNotPullOutListOfMainContainer } = props;
+	const { start = null, end = null, compare = false } = values;
+	const startDateInputRef = useRef(null);
+	const endDateInputRef = useRef(null);
+	const [startDate, setStartDate] = useState(getIsDateValid(start) ? moment(start) : "");
+	const [endDate, setEndDate] = useState(getIsDateValid(end) ? moment(end) : "");
+	const dateInterval = getSelectedMode({
+		start: startDate,
+		end: endDate
+	});
+	const [startDateInput, setStartDateInput] = useState(null);
+	const [endDateInput, setEndDateInput] = useState(null);
+	const [isStartFocused, setIsStartFocused] = useState(false);
+	const [isEndFocused, setIsEndFocused] = useState(false);
+	const [startHour, setStartHour] = useState(start ? moment(start).hour() : 0);
+	const [endHour, setEndHour] = useState(end ? moment(end).hour() : 0);
+	const [isCompare, setIsCompare] = useState(compare);
+	const [date1, setDate1] = useState(start ? moment(start) : moment().subtract(1, "month"));
+	const [date2, setDate2] = useState(end ? moment(end) : moment());
+	const isNearby = useMemo(() => moment(date2).subtract(1, "month").isSame(moment(date1), "month"), [date1, date2]);
+	const isPreviousPeriodShowed = useMemo(() => isCompare && !isCompareHidden && startDate && endDate, [
+		startDate,
+		endDate,
+		isCompare
+	]);
+	const prevEndHour = useRef(endHour);
+	const startPrevDate = useMemo(() => {
+		if (isPreviousPeriodShowed) {
+			const intervalHoursCount = moment(endDate).diff(startDate, "hours");
+			return moment(startDate).subtract(intervalHoursCount, "hours").toDate();
+		} else return null;
+	}, [
+		startDate,
+		endDate,
+		isCompare
+	]);
+	const endPrevDate = useMemo(() => {
+		if (isPreviousPeriodShowed) return startDate;
+		else return null;
+	}, [
+		startDate,
+		endDate,
+		isCompare
+	]);
+	const title = useMemo(() => {
+		if (isCompare && !isCompareHidden && startDate && endDate) return `${moment(startPrevDate).format("ll")} (${moment(startPrevDate).format(MAIN_TIME_FORMAT)}) - ${moment(endPrevDate).format("ll")} (${moment(endPrevDate).format(MAIN_TIME_FORMAT)})`;
+		else return "";
+	}, [
+		startDate,
+		endDate,
+		isCompare
+	]);
+	const subtractDay = (date) => endHour === 0 ? moment(date).subtract(1, "days") : moment(date);
+	const addDay = (date) => endHour === 0 ? moment(date).add(1, "days") : moment(date);
+	const getCorrectedDateForDateInput = (key, date) => {
+		if (key === "startDateInput") return moment(date);
+		return subtractDay(moment(date));
+	};
+	const setInterval = () => {
+		setActiveInterval?.(getActualDateRange({
+			start: startDate,
+			end: endDate
+		}).intervalKey);
+	};
+	const handleClick = (date) => {
+		prevEndHour.current = 0;
+		if (!startDate || startDate && endDate && !(moment(startDate).add(1, "d").isSame(endDate, "day") && endHour === 0)) {
+			setStartDate(moment(date).startOf("day"));
+			setEndDate(moment(date).add(1, "d").startOf("day"));
+			setStartHour(0);
+			setEndHour(0);
+		} else if (moment(date).isBefore(moment(startDate), "day")) {
+			setEndDate(moment(startDate).add(1, "d").startOf("day"));
+			setStartDate(moment(date).set("hour", Number.parseInt(startHour.toString(), 10)));
+		} else if (moment(date).isAfter(moment(startDate), "day")) setEndDate(moment(date).add(1, "d").startOf("day"));
+	};
+	const handleChangeStartHour = (val) => {
+		setStartHour(Number(val));
+		setStartDate(moment(startDate || moment()).set("hour", Number(val)));
+	};
+	const handleChangeEndHour = (val) => {
+		const newHour = Number(val);
+		setEndHour(newHour);
+		let newEndDate = moment();
+		if (endDate) {
+			if (prevEndHour.current === 0 && newHour !== 0) newEndDate = moment(endDate).subtract(1, "days");
+			else if (prevEndHour.current !== 0 && newHour === 0) newEndDate = moment(endDate).add(1, "days");
+		}
+		prevEndHour.current = newHour;
+		setEndDate(moment(newEndDate).set("hour", newHour));
+	};
+	const handleDateInputFocus = (key, e) => {
+		const changeFlag = key === "startDateInput" ? setIsStartFocused : setIsEndFocused;
+		const set = key === "startDateInput" ? setStartDateInput : setEndDateInput;
+		const date = key === "startDateInput" ? startDate : endDate;
+		changeFlag(true);
+		set(date ? getCorrectedDateForDateInput(key, date).format("L") : "");
+		setTimeout(() => {
+			const defaultTarget = key === "startDateInput" ? startDateInputRef.current : endDateInputRef.current;
+			(e?.target ?? defaultTarget).select?.();
+		}, 0);
+	};
+	const doBlur = (type, e) => {
+		const executor = type === "startDateInput" ? setIsStartFocused : setIsEndFocused;
+		e.target.blur();
+		executor(false);
+	};
+	const processOverflow = (newDateAsString, valueForRollback, key) => {
+		const newDateAsMomentObj = moment(newDateAsString, DATE_INPUT_FORMAT);
+		if (!newDateAsMomentObj.isValid()) return valueForRollback;
+		else {
+			const beforeOfFuture = moment().endOf("day");
+			const hour = key === "startDateInput" ? startHour : endHour;
+			let output;
+			if (minDate && newDateAsMomentObj.isBefore(momentMinDate)) output = momentMinDate;
+			else if (maxDate && newDateAsMomentObj.isAfter(momentMaxDate)) output = momentMaxDate;
+			else if (!isDontLimitFuture && newDateAsMomentObj.isAfter(beforeOfFuture)) output = beforeOfFuture.startOf("day");
+			else output = newDateAsMomentObj;
+			if (key === "endDateInput") output = addDay(output);
+			return output.set("hour", Number.parseInt(hour.toString(), 10));
+		}
+	};
+	const handleDateInputBlur = (key, e) => {
+		const reserveValue = key === "startDateInput" ? startDateInput : endDateInput;
+		const valueForRollback = key === "startDateInput" ? startDate : endDate;
+		const execute = key === "startDateInput" ? setStartDate : setEndDate;
+		const executeForCalendar = key === "startDateInput" ? setDate1 : setDate2;
+		const prepareValueForCalendar = (newDate) => {
+			if (key === "endDateInput") return newDate;
+			return moment(newDate).isSameOrAfter(moment(date2), "month") ? moment(date2).subtract(1, "month") : moment(newDate);
+		};
+		const newDateValue = (e?.target)?.value ?? reserveValue;
+		const processedNewDate = processOverflow(newDateValue, valueForRollback, key);
+		execute(processedNewDate);
+		executeForCalendar(prepareValueForCalendar(processedNewDate));
+		doBlur(key, e);
+	};
+	const handleKeyPressed = (code, e, type) => {
+		if (code === 13) {
+			const syntheticEvent = {
+				target: e.target,
+				relatedTarget: null
+			};
+			handleDateInputBlur(type, syntheticEvent);
+		}
+		if (code === 27) doBlur(type, e);
+	};
+	const getStartHourItems = () => [...Array.from({ length: 24 }).keys()].map((hour) => ({
+		label: padTime(hour),
+		value: hour,
+		disabled: moment(startDate).isSame(endDate, "day") && endHour <= hour
+	}));
+	const getEndHourItems = () => [...Array.from({ length: 24 }).keys()].map((hour) => ({
+		label: padTime(hour + 1),
+		value: hour === 23 ? 0 : hour + 1,
+		disabled: (moment(startDate).isSame(endDate, "day") || moment(startDate).isSame(moment(endDate).subtract(1, "days"), "day") && endHour === 0) && hour < startHour
+	}));
+	const renderButtons = () => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+		className: "date-picker__button",
+		onClick: () => onCancel?.(),
+		variant: buttonsTypes?.cancel,
+		children: txt?.buttons?.cancel || "Cancel"
+	}), /* @__PURE__ */ jsx(Button, {
+		className: "date-picker__button",
+		variant: buttonsTypes?.apply,
+		disabled: !startDate || !endDate,
+		onClick: () => onChange?.({
+			start: moment(startDate).format(MAIN_FORMAT),
+			end: moment(endDate).format(MAIN_FORMAT),
+			startPrevDate: moment(startPrevDate).format(MAIN_FORMAT),
+			endPrevDate: moment(endPrevDate).format(MAIN_FORMAT),
+			compare: isCompare
+		}),
+		children: txt?.buttons?.apply || "apply"
+	})] });
+	const renderPreviousPeriod = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+		txt?.labels?.previousPeriod || "",
+		":",
+		" ",
+		/* @__PURE__ */ jsx("span", {
+			className: "date-picker__previous-period-interval",
+			children: title
+		})
+	] });
+	useEffect(() => {
+		if (moment(startDate).isSameOrAfter(endDate)) {
+			setStartDate(moment(endDate).subtract(1, "d"));
+			setDate1(moment(endDate).subtract(1, "d"));
+		}
+	}, [startDate]);
+	useEffect(() => {
+		if (moment(endDate).isSameOrBefore(startDate)) {
+			setEndDate(moment(startDate).add(1, "d"));
+			setDate2(moment(startDate).add(1, "d"));
+		}
+	}, [endDate]);
+	useEffect(() => {
+		if (moment(startDate).isBefore(moment(endDate), "month")) {
+			setDate1(moment(startDate));
+			setDate2(moment(endDate));
+		}
+		setInterval();
+	}, [startDate, endDate]);
+	useEffect(() => {
+		if (moment(date1).isSameOrAfter(moment(date2), "month") && !withMobileLogic) setDate1(moment(date2).subtract(1, "month"));
+	}, [date1, date2]);
+	useEffect(() => {
+		onChangeInterval(dateInterval);
+	}, [dateInterval]);
+	useEffect(() => {
+		if (typeof onChangeMobile === "function") onChangeMobile({
+			start: moment(startDate).format(MAIN_FORMAT),
+			end: moment(endDate).format(MAIN_FORMAT),
+			startPrevDate: moment(startPrevDate).format(MAIN_FORMAT),
+			endPrevDate: moment(endPrevDate).format(MAIN_FORMAT),
+			compare: isCompare
+		});
+	}, [
+		startDate,
+		endDate,
+		startPrevDate,
+		endPrevDate,
+		isCompare
+	]);
+	const renderRowStart = () => {
+		return /* @__PURE__ */ jsxs("div", {
+			className: "date-picker__date-row",
+			children: [/* @__PURE__ */ jsx(DateInput, {
+				ref: startDateInputRef,
+				testId: `datepicker-${testId}_start-date-input`,
+				RC: "date-picker__date-input",
+				className: cn("date-picker__date-input"),
+				isFocused: isStartFocused,
+				value: startDateInput,
+				date: getCorrectedDateForDateInput("startDateInput", startDate),
+				disabled: !startDate,
+				onChange: setStartDateInput,
+				onFocus: (e) => handleDateInputFocus("startDateInput", e),
+				onBlur: (e) => handleDateInputBlur("startDateInput", e),
+				onKeyUp: (code, e) => handleKeyPressed(+code, e, "startDateInput")
+			}), /* @__PURE__ */ jsx(Dropdown, {
+				testId,
+				id: `datepicker-id-${mainId}_start-hour-select-input`,
+				className: cn("date-picker__hour-select-input"),
+				onChange: (value) => handleChangeStartHour(value),
+				value: startHour,
+				options: getStartHourItems(),
+				disabled: !startDate,
+				isDoNotPullOutListOfMainContainer,
+				withMobileLogic
+			})]
+		});
+	};
+	const renderRowEnd = () => {
+		return /* @__PURE__ */ jsxs("div", {
+			className: "date-picker__date-row",
+			children: [/* @__PURE__ */ jsx(DateInput, {
+				ref: endDateInputRef,
+				testId: `datepicker-${testId}_start-date-input`,
+				RC: "date-picker__date-input",
+				className: cn("date-picker__date-input"),
+				isFocused: isEndFocused,
+				value: endDateInput,
+				date: getCorrectedDateForDateInput("endDateInput", endDate),
+				disabled: !endDate,
+				onChange: setEndDateInput,
+				onFocus: (e) => handleDateInputFocus("endDateInput", e),
+				onBlur: (e) => handleDateInputBlur("endDateInput", e),
+				onKeyUp: (code, e) => handleKeyPressed(+code, e, "endDateInput")
+			}), /* @__PURE__ */ jsx(Dropdown, {
+				testId,
+				id: `datepicker-id-${mainId}_end-hour-select-input`,
+				className: cn("date-picker__hour-select-input"),
+				onChange: (value) => handleChangeEndHour(value),
+				value: endHour,
+				options: getEndHourItems(),
+				disabled: !endDate,
+				isDoNotPullOutListOfMainContainer,
+				withMobileLogic
+			})]
+		});
+	};
+	const renderCalendarStart = () => {
+		return /* @__PURE__ */ jsx(RangeCalendar, {
+			testId,
+			className: "date-picker__calendar",
+			date: date1,
+			setDate: setDate1,
+			allowNext: withMobileLogic ? !moment(date1).startOf("month").isSameOrAfter(moment().startOf("day"), "months") : !isNearby,
+			startDate,
+			endDate,
+			startPrevDate,
+			endPrevDate,
+			onClick: handleClick,
+			limitRange,
+			isShortWeekNames,
+			minDate,
+			maxDate,
+			momentMinDate,
+			momentMaxDate
+		});
+	};
+	const renderCalendarEnd = () => {
+		return /* @__PURE__ */ jsx(RangeCalendar, {
+			className: "date-picker__calendar",
+			date: date2,
+			setDate: setDate2,
+			allowPrev: !isNearby,
+			startDate,
+			endDate,
+			startPrevDate,
+			endPrevDate,
+			onClick: handleClick,
+			isShortWeekNames,
+			minDate,
+			maxDate,
+			momentMinDate,
+			momentMaxDate,
+			isDontLimitFuture
+		});
+	};
+	const render = () => {
+		return /* @__PURE__ */ jsxs("div", {
+			className: cn("date-picker", className),
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "date-picker__header",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "date-picker__inputs-block",
+						children: [
+							renderRowStart(),
+							/* @__PURE__ */ jsx("div", {
+								className: "date-picker__inputs-separator date-picker__header--gray",
+								children: "—"
+							}),
+							renderRowEnd()
+						]
+					}), isCompare && !isCompareHidden && startDate && endDate && /* @__PURE__ */ jsx("div", {
+						className: "date-picker__previous-period",
+						children: renderPreviousPeriod()
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "date-picker__calendars",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "date-picker__calendars-wrapper",
+						children: [renderCalendarStart(), renderCalendarEnd()]
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: cn("date-picker__footer", { "date-picker__footer_once-element": isCompareHidden }),
+					children: [!isCompareHidden ? /* @__PURE__ */ jsx("div", {
+						className: "date-picker__compare-block",
+						children: /* @__PURE__ */ jsx("div", {
+							className: "mr5",
+							children: /* @__PURE__ */ jsx(Switcher, {
+								label: txt?.labels?.compare || "Compare",
+								isActive: isCompare,
+								onChange: () => {
+									onChangeCompare?.(!isCompare);
+									setIsCompare((state) => !state);
+								}
+							})
+						})
+					}) : /* @__PURE__ */ jsx("div", {}), /* @__PURE__ */ jsx("div", {
+						className: "date-picker__buttons-block",
+						children: renderButtons()
+					})]
+				})
+			]
+		});
+	};
+	const renderMobile = () => {
+		return /* @__PURE__ */ jsxs("div", {
+			className: cn("date-picker", className),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "date-picker__header",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "date-picker__inputs-block",
+					children: [
+						renderRowStart(),
+						/* @__PURE__ */ jsx("div", {
+							className: "date-picker__inputs-separator date-picker__header--gray",
+							children: "—"
+						}),
+						renderRowEnd()
+					]
+				}), isCompare && !isCompareHidden && startDate && endDate && /* @__PURE__ */ jsx("div", {
+					className: "date-picker__previous-period",
+					children: renderPreviousPeriod()
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "date-picker__calendars",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "date-picker__calendars-wrapper",
+					children: renderCalendarStart()
+				})
+			})]
+		});
+	};
+	return withMobileLogic ? renderMobile() : render();
+};
+//#endregion
+export { Datepicker as default };
+
+//# sourceMappingURL=Datepicker.js.map

package/dist/es/Atomic/FormElements/InputDateRange/components/Datepicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Datepicker.js","names":[],"sources":["../../../../../../src/Atomic/FormElements/InputDateRange/components/Datepicker.tsx"],"sourcesContent":["import type { Moment } from 'moment-timezone';\n\nimport type { FocusEvent, KeyboardEvent, ReactElement, ReactNode, RefObject } from 'react';\n\nimport type { IDatepickerProps } from '../InputDateRange.interface';\nimport cn from 'classnames';\nimport moment from 'moment-timezone';\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport Btn from '../../../UI/Button/Button';\n\nimport SelectInput from '../../Dropdown/Dropdown';\nimport Calendar from '../../RangeCalendar/RangeCalendar';\nimport Switcher from '../../Switcher/Switcher';\nimport {\n  getActualDateRange,\n  getIsDateValid,\n  MAIN_FORMAT,\n  MAIN_TIME_FORMAT,\n} from '../dependencies';\nimport DateInput from './DateInput';\n\nconst DATE_INPUT_FORMAT = 'MM/DD/YYYY';\n\nfunction padTime(time: number | string): string {\n  return `${time.toString().padStart(2, '0')}:00`;\n}\n\nconst Datepicker: React.FC<IDatepickerProps> = (props): ReactElement => {\n  const {\n    txt,\n    className,\n    buttonsTypes = {},\n    values = {},\n    onChange,\n    onChangeMobile,\n    onChangeCompare,\n    onCancel,\n    getSelectedMode,\n    onChangeInterval,\n    isCompareHidden,\n    limitRange,\n    setActiveInterval,\n    isShortWeekNames,\n    minDate,\n    maxDate,\n    momentMinDate,\n    momentMaxDate,\n    isDontLimitFuture,\n    testId,\n    mainId,\n    withMobileLogic,\n    isDoNotPullOutListOfMainContainer,\n  } = props;\n  const { start = null, end = null, compare = false } = values;\n\n  const startDateInputRef = useRef<Omit<HTMLInputElement, 'value'> | null>(null);\n  const endDateInputRef = useRef<Omit<HTMLInputElement, 'value'> | null>(null);\n\n  const [startDate, setStartDate] = useState<Moment | string>(\n    getIsDateValid(start) ? moment(start) : '',\n  );\n  const [endDate, setEndDate] = useState<Moment | string>(\n    getIsDateValid(end) ? moment(end) : '',\n  );\n  const dateInterval = getSelectedMode({ start: startDate, end: endDate });\n\n  const [startDateInput, setStartDateInput] = useState<string | null>(null);\n  const [endDateInput, setEndDateInput] = useState<string | null>(null);\n  const [isStartFocused, setIsStartFocused] = useState<boolean>(false);\n  const [isEndFocused, setIsEndFocused] = useState<boolean>(false);\n\n  const [startHour, setStartHour] = useState<number>(start ? moment(start).hour() : 0);\n  const [endHour, setEndHour] = useState<number>(end ? moment(end).hour() : 0);\n\n  const [isCompare, setIsCompare] = useState<boolean>(compare);\n\n  const [date1, setDate1] = useState<Moment>(\n    start ? moment(start) : moment().subtract(1, 'month'),\n  );\n  const [date2, setDate2] = useState<Moment>(end ? moment(end) : moment());\n\n  // ********************\n  // Constants\n  // ********************\n\n  const isNearby = useMemo<boolean>(\n    () => moment(date2).subtract(1, 'month').isSame(moment(date1), 'month'),\n    [date1, date2],\n  );\n\n  const isPreviousPeriodShowed = useMemo<string | false | moment.Moment>(\n    () => isCompare && !isCompareHidden && startDate && endDate,\n    [startDate, endDate, isCompare],\n  );\n\n  const prevEndHour = useRef<number>(endHour);\n\n  const startPrevDate = useMemo<Date | Moment | null>(() => {\n    if (isPreviousPeriodShowed) {\n      const intervalHoursCount = moment(endDate).diff(startDate, 'hours');\n      return moment(startDate).subtract(intervalHoursCount, 'hours').toDate();\n    }\n    else {\n      return null;\n    }\n  }, [startDate, endDate, isCompare]);\n\n  const endPrevDate = useMemo<Date | Moment | string | null>(() => {\n    if (isPreviousPeriodShowed) {\n      return startDate;\n    }\n    else {\n      return null;\n    }\n  }, [startDate, endDate, isCompare]);\n\n  const title = useMemo<string>(() => {\n    if (isCompare && !isCompareHidden && startDate && endDate) {\n      return `${moment(startPrevDate).format('ll')} (${moment(startPrevDate).format(MAIN_TIME_FORMAT)}) - ${moment(\n        endPrevDate,\n      ).format('ll')} (${moment(endPrevDate).format(MAIN_TIME_FORMAT)})`;\n    }\n    else {\n      return '';\n    }\n  }, [startDate, endDate, isCompare]);\n\n  // ********************\n  // Methods\n  // ********************\n\n  const subtractDay = (date: Date | Moment | string): Moment =>\n    endHour === 0 ? moment(date).subtract(1, 'days') : moment(date);\n  const addDay = (date: Date | Moment | string): Moment =>\n    endHour === 0 ? moment(date).add(1, 'days') : moment(date);\n\n  const getCorrectedDateForDateInput = (key: string, date: Date | Moment | string): Moment => {\n    if (key === 'startDateInput') return moment(date);\n    return subtractDay(moment(date));\n  };\n\n  const setInterval = (): void => {\n    setActiveInterval?.(\n      getActualDateRange({ start: startDate, end: endDate }).intervalKey as string,\n    );\n  };\n\n  // ********************\n  // Handlers\n  // ********************\n\n  const handleClick = (date: Date | Moment | string): void => {\n    prevEndHour.current = 0;\n    if (\n      !startDate\n      || (startDate\n        && endDate\n        && !(\n          moment(startDate).add(1, 'd').isSame(endDate, 'day') && endHour === 0\n        ))\n    ) {\n      setStartDate(moment(date).startOf('day'));\n      setEndDate(moment(date).add(1, 'd').startOf('day'));\n      setStartHour(0);\n      setEndHour(0);\n    }\n    else if (moment(date).isBefore(moment(startDate), 'day')) {\n      setEndDate(moment(startDate).add(1, 'd').startOf('day'));\n      setStartDate(moment(date).set('hour', Number.parseInt(startHour.toString(), 10)));\n    }\n    else if (moment(date).isAfter(moment(startDate), 'day')) {\n      setEndDate(moment(date).add(1, 'd').startOf('day'));\n    }\n  };\n\n  const handleChangeStartHour = (val: string | number): void => {\n    setStartHour(Number(val));\n    setStartDate(moment(startDate || moment()).set('hour', Number(val)));\n  };\n\n  const handleChangeEndHour = (val: string | number): void => {\n    const newHour = Number(val);\n    setEndHour(newHour);\n    let newEndDate = moment();\n\n    if (endDate) {\n      if (prevEndHour.current === 0 && newHour !== 0) {\n        newEndDate = moment(endDate).subtract(1, 'days');\n      }\n      else if (prevEndHour.current !== 0 && newHour === 0) {\n        newEndDate = moment(endDate).add(1, 'days');\n      }\n    }\n\n    prevEndHour.current = newHour;\n    setEndDate(moment(newEndDate).set('hour', newHour));\n  };\n\n  const handleDateInputFocus = (key: string, e: React.MouseEvent<HTMLDivElement, MouseEvent>): void => {\n    const changeFlag\n      = key === 'startDateInput' ? setIsStartFocused : setIsEndFocused;\n    const set = key === 'startDateInput' ? setStartDateInput : setEndDateInput;\n    const date = key === 'startDateInput' ? startDate : endDate;\n\n    changeFlag(true);\n    set(date ? getCorrectedDateForDateInput(key, date).format('L') : '');\n    setTimeout(() => {\n      const defaultTarget\n        = key === 'startDateInput'\n          ? startDateInputRef.current\n          : endDateInputRef.current;\n      const target = e?.target ?? defaultTarget;\n      (target as HTMLInputElement).select?.();\n    }, 0);\n  };\n\n  const doBlur = (type: string, e: React.MouseEvent<HTMLDivElement, MouseEvent>): void => {\n    const executor\n      = type === 'startDateInput' ? setIsStartFocused : setIsEndFocused;\n\n    (e.target as HTMLElement).blur();\n    executor(false);\n  };\n\n  const processOverflow = (newDateAsString: string, valueForRollback: string | Moment, key: string): string | Moment => {\n    const newDateAsMomentObj = moment(newDateAsString, DATE_INPUT_FORMAT);\n\n    // ? Если значение не валидно...\n    if (!newDateAsMomentObj.isValid()) {\n      // ? ... то откатываем к дате до набора руками\n      return valueForRollback;\n    }\n    else {\n      const beforeOfFuture = moment().endOf('day');\n      const hour = key === 'startDateInput' ? startHour : endHour;\n\n      let output;\n\n      // ? Если есть минимальная дата и введенная меньше минимальной, то ставим минимальную\n      if (minDate && newDateAsMomentObj.isBefore(momentMinDate)) {\n        output = momentMinDate;\n      }\n      // ? Если есть максимальная дата и введенная больше максимальной, то ставим максимальную\n      else if (maxDate && newDateAsMomentObj.isAfter(momentMaxDate)) {\n        output = momentMaxDate;\n      }\n      // ? Если нет установки не ограничивать дату по будущему...\n      else if (\n        !isDontLimitFuture\n        && newDateAsMomentObj.isAfter(beforeOfFuture)\n      ) {\n        output = beforeOfFuture.startOf('day');\n      }\n      else {\n        output = newDateAsMomentObj;\n      }\n\n      if (key === 'endDateInput') {\n        output = addDay(output as Moment);\n      }\n\n      return (output as Moment).set('hour', Number.parseInt(hour.toString(), 10));\n    }\n  };\n\n  const handleDateInputBlur = (key: string, e: FocusEvent<HTMLInputElement>): void => {\n    const reserveValue\n      = key === 'startDateInput' ? startDateInput : endDateInput;\n    const valueForRollback = key === 'startDateInput' ? startDate : endDate;\n\n    const execute = key === 'startDateInput' ? setStartDate : setEndDate;\n    const executeForCalendar = key === 'startDateInput' ? setDate1 : setDate2;\n    const prepareValueForCalendar = (newDate: Moment): Moment => {\n      if (key === 'endDateInput') return newDate;\n      return moment(newDate).isSameOrAfter(moment(date2), 'month')\n        ? moment(date2).subtract(1, 'month')\n        : moment(newDate);\n    };\n\n    const newDateValue = (e?.target as HTMLInputElement)?.value ?? reserveValue;\n    const processedNewDate = processOverflow(\n      newDateValue,\n      valueForRollback,\n      key,\n    );\n    execute(processedNewDate);\n    executeForCalendar(prepareValueForCalendar(processedNewDate as Moment));\n    doBlur(key, e as any);\n  };\n\n  const handleKeyPressed = (code: number, e: KeyboardEvent<HTMLInputElement>, type: string): void => {\n    if (code === 13) {\n      const syntheticEvent = {\n        target: e.target,\n        relatedTarget: null,\n      } as unknown as FocusEvent<HTMLInputElement>;\n      handleDateInputBlur(type, syntheticEvent);\n    }\n    if (code === 27) doBlur(type, e as any);\n  };\n\n  // ********************\n  // Render Functions\n  // ********************\n\n  const getStartHourItems = (): { label: string; value: number; disabled: boolean }[] =>\n    [...Array.from({ length: 24 }).keys()].map(hour => ({\n      label: padTime(hour),\n      value: hour,\n      disabled: moment(startDate).isSame(endDate, 'day') && endHour <= hour,\n    }));\n  const getEndHourItems = (): { label: string; value: number; disabled: boolean }[] =>\n    [...Array.from({ length: 24 }).keys()].map(hour => ({\n      label: padTime(hour + 1),\n      value: hour === 23 ? 0 : hour + 1,\n      disabled:\n        (moment(startDate).isSame(endDate, 'day')\n          || (moment(startDate).isSame(\n            moment(endDate).subtract(1, 'days'),\n            'day',\n          )\n          && endHour === 0))\n        && hour < startHour,\n    }));\n\n  const renderButtons = (): ReactNode => (\n    <>\n      <Btn\n        className=\"date-picker__button\"\n        onClick={() => onCancel?.()}\n        variant={buttonsTypes?.cancel}\n      >\n        {txt?.buttons?.cancel || 'Cancel'}\n      </Btn>\n      <Btn\n        className=\"date-picker__button\"\n        variant={buttonsTypes?.apply}\n        disabled={!startDate || !endDate}\n        onClick={() =>\n          onChange?.({\n            start: moment(startDate).format(MAIN_FORMAT),\n            end: moment(endDate).format(MAIN_FORMAT),\n            startPrevDate: moment(startPrevDate).format(MAIN_FORMAT),\n            endPrevDate: moment(endPrevDate).format(MAIN_FORMAT),\n            compare: isCompare,\n          })}\n      >\n        {txt?.buttons?.apply || 'apply'}\n      </Btn>\n    </>\n  );\n\n  const renderPreviousPeriod = (): ReactNode => (\n    <>\n      {txt?.labels?.previousPeriod || ''}\n      :\n      {' '}\n      <span className=\"date-picker__previous-period-interval\">{title}</span>\n    </>\n  );\n\n  // ********************\n  // useEffects\n  // ********************\n\n  useEffect(() => {\n    if (moment(startDate).isSameOrAfter(endDate)) {\n      setStartDate(moment(endDate).subtract(1, 'd'));\n      setDate1(moment(endDate).subtract(1, 'd'));\n    }\n  }, [startDate]);\n\n  useEffect(() => {\n    if (moment(endDate).isSameOrBefore(startDate)) {\n      setEndDate(moment(startDate).add(1, 'd'));\n      setDate2(moment(startDate).add(1, 'd'));\n    }\n  }, [endDate]);\n\n  useEffect(() => {\n    if (moment(startDate).isBefore(moment(endDate), 'month')) {\n      setDate1(moment(startDate));\n      setDate2(moment(endDate));\n    }\n    setInterval();\n  }, [startDate, endDate]);\n\n  useEffect(() => {\n    if (\n      moment(date1).isSameOrAfter(moment(date2), 'month')\n      && !withMobileLogic\n    ) {\n      setDate1(moment(date2).subtract(1, 'month'));\n    }\n  }, [date1, date2]);\n\n  useEffect(() => {\n    onChangeInterval(dateInterval);\n  }, [dateInterval]);\n\n  useEffect(() => {\n    if (typeof onChangeMobile === 'function') {\n      onChangeMobile({\n        start: moment(startDate).format(MAIN_FORMAT),\n        end: moment(endDate).format(MAIN_FORMAT),\n        startPrevDate: moment(startPrevDate).format(MAIN_FORMAT),\n        endPrevDate: moment(endPrevDate).format(MAIN_FORMAT),\n        compare: isCompare,\n      });\n    }\n  }, [startDate, endDate, startPrevDate, endPrevDate, isCompare]);\n\n  const renderRowStart = (): ReactNode => {\n    return (\n      <div className=\"date-picker__date-row\">\n        <DateInput\n          ref={startDateInputRef as RefObject<Omit<HTMLInputElement, 'value'>>}\n          testId={`datepicker-${testId}_start-date-input`}\n          RC=\"date-picker__date-input\"\n          className={cn('date-picker__date-input')}\n          isFocused={isStartFocused}\n          value={startDateInput as string}\n          date={getCorrectedDateForDateInput('startDateInput', startDate)}\n          disabled={!startDate}\n          onChange={setStartDateInput}\n          onFocus={e => handleDateInputFocus('startDateInput', e)}\n          onBlur={e => handleDateInputBlur('startDateInput', e)}\n          onKeyUp={(code, e) => handleKeyPressed(+code, e, 'startDateInput')}\n        />\n        <SelectInput\n          testId={testId}\n          id={`datepicker-id-${mainId}_start-hour-select-input`}\n          className={cn('date-picker__hour-select-input')}\n          onChange={value => handleChangeStartHour(value)}\n          value={startHour}\n          options={getStartHourItems()}\n          disabled={!startDate}\n          isDoNotPullOutListOfMainContainer={isDoNotPullOutListOfMainContainer}\n          withMobileLogic={withMobileLogic}\n        />\n      </div>\n    );\n  };\n  const renderRowEnd = (): ReactNode => {\n    return (\n      <div className=\"date-picker__date-row\">\n        <DateInput\n          ref={endDateInputRef as RefObject<Omit<HTMLInputElement, 'value'>>}\n          testId={`datepicker-${testId}_start-date-input`}\n          RC=\"date-picker__date-input\"\n          className={cn('date-picker__date-input')}\n          isFocused={isEndFocused}\n          value={endDateInput as string}\n          date={getCorrectedDateForDateInput('endDateInput', endDate)}\n          disabled={!endDate}\n          onChange={setEndDateInput}\n          onFocus={e => handleDateInputFocus('endDateInput', e)}\n          onBlur={e => handleDateInputBlur('endDateInput', e)}\n          onKeyUp={(code, e) => handleKeyPressed(+code, e, 'endDateInput')}\n        />\n        <SelectInput\n          testId={testId}\n          id={`datepicker-id-${mainId}_end-hour-select-input`}\n          className={cn('date-picker__hour-select-input')}\n          onChange={value => handleChangeEndHour(value)}\n          value={endHour}\n          options={getEndHourItems()}\n          disabled={!endDate}\n          isDoNotPullOutListOfMainContainer={isDoNotPullOutListOfMainContainer}\n          withMobileLogic={withMobileLogic}\n        />\n      </div>\n    );\n  };\n\n  const renderCalendarStart = (): ReactNode => {\n    return (\n      <Calendar\n        testId={testId}\n        className=\"date-picker__calendar\"\n        date={date1}\n        setDate={setDate1}\n        allowNext={\n          withMobileLogic\n            ? !moment(date1)\n                .startOf('month')\n                .isSameOrAfter(moment().startOf('day'), 'months')\n            : !isNearby\n        }\n        startDate={startDate}\n        endDate={endDate}\n        startPrevDate={startPrevDate}\n        endPrevDate={endPrevDate}\n        onClick={handleClick}\n        limitRange={limitRange}\n        isShortWeekNames={isShortWeekNames}\n        minDate={minDate}\n        maxDate={maxDate}\n        momentMinDate={momentMinDate}\n        momentMaxDate={momentMaxDate}\n      />\n    );\n  };\n  const renderCalendarEnd = (): ReactNode => {\n    return (\n      <Calendar\n        className=\"date-picker__calendar\"\n        date={date2}\n        setDate={setDate2}\n        allowPrev={!isNearby}\n        startDate={startDate}\n        endDate={endDate}\n        startPrevDate={startPrevDate}\n        endPrevDate={endPrevDate}\n        onClick={handleClick}\n        isShortWeekNames={isShortWeekNames}\n        minDate={minDate}\n        maxDate={maxDate}\n        momentMinDate={momentMinDate}\n        momentMaxDate={momentMaxDate}\n        isDontLimitFuture={isDontLimitFuture}\n      />\n    );\n  };\n\n  const render = (): ReactElement => {\n    return (\n      <div className={cn('date-picker', className)}>\n        <div className=\"date-picker__header\">\n          <div className=\"date-picker__inputs-block\">\n            {renderRowStart()}\n            <div className=\"date-picker__inputs-separator date-picker__header--gray\">\n              —\n            </div>\n            {renderRowEnd()}\n          </div>\n          {isCompare && !isCompareHidden && startDate && endDate && (\n            <div className=\"date-picker__previous-period\">\n              {renderPreviousPeriod()}\n            </div>\n          )}\n        </div>\n\n        <div className=\"date-picker__calendars\">\n          <div className=\"date-picker__calendars-wrapper\">\n            {renderCalendarStart()}\n            {renderCalendarEnd()}\n          </div>\n        </div>\n        <div\n          className={cn('date-picker__footer', {\n            'date-picker__footer_once-element': isCompareHidden,\n          })}\n        >\n          {!isCompareHidden\n            ? (\n                <div className=\"date-picker__compare-block\">\n                  <div className=\"mr5\">\n                    <Switcher\n                      label={txt?.labels?.compare || 'Compare'}\n                      isActive={isCompare}\n                      onChange={() => {\n                        onChangeCompare?.(!isCompare);\n                        setIsCompare(state => !state);\n                      }}\n                    />\n                  </div>\n                </div>\n              )\n            : (\n                <div />\n              )}\n          <div className=\"date-picker__buttons-block\">{renderButtons()}</div>\n        </div>\n      </div>\n    );\n  };\n  const renderMobile = (): ReactElement => {\n    return (\n      <div className={cn('date-picker', className)}>\n        <div className=\"date-picker__header\">\n          <div className=\"date-picker__inputs-block\">\n            {renderRowStart()}\n            <div className=\"date-picker__inputs-separator date-picker__header--gray\">\n              —\n            </div>\n            {renderRowEnd()}\n          </div>\n          {isCompare && !isCompareHidden && startDate && endDate && (\n            <div className=\"date-picker__previous-period\">\n              {renderPreviousPeriod()}\n            </div>\n          )}\n        </div>\n\n        <div className=\"date-picker__calendars\">\n          <div className=\"date-picker__calendars-wrapper\">\n            {renderCalendarStart()}\n          </div>\n        </div>\n      </div>\n    );\n  };\n  return withMobileLogic ? renderMobile() : render();\n}\n\nexport default Datepicker;\n"],"mappings":"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"}

package/dist/es/Atomic/FormElements/InputDateRange/components/OpenedPart.js

@@ -0,0 +1,171 @@
+import { capitalized } from "../../../../Functions/utils.js";
+import useIsMobile from "../../../../Functions/useIsMobile/useIsMobile.js";
+import Dropdown from "../../Dropdown/Dropdown.js";
+import { CUSTOM_INTERVAL_KEY, INTERVALS } from "../dependencies.js";
+import Datepicker from "./Datepicker.js";
+import { useResize } from "../../../../Functions/useResize.js";
+import Modal from "../../../UI/Modal/Modal.js";
+import SelectItem from "./SelectItem.js";
+import cn from "classnames";
+import { useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import moment from "moment-timezone";
+//#region src/Atomic/FormElements/InputDateRange/components/OpenedPart.tsx
+var OpenedPart = (props) => {
+	const { dateRangeContainerId, txt, buttonsTypes, actualValues, onChange = () => {}, isCompact = false, isIntervalsHidden = false, isCompareHidden = false, limitRange, isOptionsRight, current, setCurrent, isCompare, setIsCompare, toggleOff, isShortWeekNames, minDate, maxDate, momentMinDate, momentMaxDate, isDontLimitFuture, isListTop, mainId, testId, withMobileLogic, isDoNotPullOutListOfMainContainer, renderIntervals = [
+		"today",
+		"yesterday",
+		"thisWeek",
+		"lastWeek",
+		"last7Days",
+		"last14Days",
+		"last30Days",
+		"thisMonth",
+		"lastMonth",
+		"last6Months",
+		"thisYear",
+		"lastYear",
+		"allTime"
+	] } = props;
+	const { isMobile } = useIsMobile();
+	const boxRef = useRef();
+	const { elemPosition } = useResize(boxRef);
+	const [mobileChange, setMobileChange] = useState({});
+	const openedPartClass = cn("date-range-input__opened-part", "opened-part", { [`opened-part--${elemPosition}`]: elemPosition }, { "opened-part--top": isListTop });
+	const openedPartWrapperClass = cn("opened-part__wrapper", { "opened-part__wrapper_right-position-once-element": isOptionsRight && (isCompact || isIntervalsHidden) });
+	const filteredIntervals = renderIntervals ? Object.keys(INTERVALS).filter((key) => renderIntervals.includes(key)).reduce((result, key) => {
+		return {
+			...result,
+			[key]: INTERVALS?.[key]
+		};
+	}, {}) : INTERVALS;
+	const items = isCompact ? [...Object.keys(filteredIntervals)] : [...Object.keys(filteredIntervals), CUSTOM_INTERVAL_KEY];
+	const [activeInterval, setActiveInterval] = useState(actualValues?.intervalKey ?? "");
+	const handleItemClick = (item) => {
+		if (item !== "customDate") {
+			onChange({
+				intervalKey: item,
+				compare: isCompare
+			});
+			setTimeout(() => toggleOff(), 0);
+		}
+		setCurrent(item);
+	};
+	const getSelectedMode = (newValues) => {
+		const { start, end } = newValues;
+		if (moment(start).get("hour") !== 0 || moment(end).get("hour") !== 0) return CUSTOM_INTERVAL_KEY;
+		for (const [key, interval] of Object.entries(filteredIntervals)) if (moment(start).isSame(interval.start()) && moment(end).isSame(interval.end())) return key;
+		return CUSTOM_INTERVAL_KEY;
+	};
+	const renderDatepicker = () => {
+		return /* @__PURE__ */ jsx(Datepicker, {
+			mainId,
+			testId,
+			className: cn("opened-part__date-picker"),
+			buttonsTypes,
+			values: actualValues,
+			onChangeMobile: setMobileChange,
+			onChange: (data) => {
+				onChange({
+					intervalKey: current,
+					...data
+				});
+				toggleOff();
+			},
+			getSelectedMode,
+			onChangeInterval: (val) => setCurrent(val),
+			onChangeCompare: (data) => setIsCompare?.(data),
+			onCancel: toggleOff,
+			isCompareHidden,
+			limitRange,
+			setActiveInterval,
+			isShortWeekNames,
+			minDate,
+			maxDate,
+			momentMinDate,
+			momentMaxDate,
+			isDontLimitFuture,
+			withMobileLogic: withMobileLogic && isMobile,
+			isDoNotPullOutListOfMainContainer
+		});
+	};
+	const renderOpenedPart = () => {
+		return /* @__PURE__ */ jsx("div", {
+			className: openedPartClass,
+			ref: boxRef,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: openedPartWrapperClass,
+				children: [!isIntervalsHidden && /* @__PURE__ */ jsx("div", {
+					className: cn("opened-part__intervals-list"),
+					children: items.map((item, index) => {
+						if (filteredIntervals[item]?.isHidden) return null;
+						return /* @__PURE__ */ jsx(SelectItem, {
+							testId,
+							item,
+							label: txt?.labels && txt?.labels[item] || filteredIntervals[item]?.label || (item === "customDate" ? "Custom Date" : item),
+							isActive: activeInterval === item,
+							onItemClick: () => handleItemClick(item),
+							disabled: !!(item === "customDate" || minDate && filteredIntervals[item]?.start?.()?.isBefore?.(momentMinDate))
+						}, index);
+					})
+				}), !isCompact && renderDatepicker()]
+			})
+		});
+	};
+	const renderMobileOpenedPart = () => {
+		return /* @__PURE__ */ jsxs(Modal, {
+			zIndex: 101,
+			variant: "title",
+			className: "modal-fin date-picker-modal",
+			isOpen: true,
+			title: "Select Interval",
+			onlyTitle: true,
+			confirmBtnLabel: "Apply",
+			onConfirm: () => {
+				onChange({
+					intervalKey: current,
+					...mobileChange
+				});
+				setMobileChange({});
+				toggleOff();
+			},
+			closeModal: () => {
+				setMobileChange({});
+				toggleOff();
+			},
+			onDecline: () => {
+				setMobileChange({});
+				toggleOff();
+			},
+			withMobileLogic,
+			children: [/* @__PURE__ */ jsx(Dropdown, {
+				label: "Select Interval",
+				value: activeInterval,
+				className: "dropdown-fin",
+				onChange: (v) => handleItemClick(v.toString()),
+				options: items?.filter((item) => !filteredIntervals[item]?.isHidden)?.map((item) => {
+					return {
+						label: capitalized(txt?.labels && txt?.labels[item] || filteredIntervals[item]?.label || (item === "customDate" ? "Custom Date" : item)),
+						value: item
+					};
+				}),
+				withMobileLogic,
+				sortAlphabetical: false
+			}), renderDatepicker()]
+		});
+	};
+	const getDateRangeContainer = () => {
+		return document.getElementById(dateRangeContainerId);
+	};
+	const renderDateRangeMobileContainer = () => {
+		const dateRangeContainer = getDateRangeContainer();
+		if (!dateRangeContainer) return /* @__PURE__ */ jsx(Fragment, {});
+		return createPortal(renderMobileOpenedPart(), dateRangeContainer);
+	};
+	return withMobileLogic && isMobile ? renderDateRangeMobileContainer() : renderOpenedPart();
+};
+//#endregion
+export { OpenedPart as default };
+
+//# sourceMappingURL=OpenedPart.js.map