josenanodev-react-components-library 1.0.2 → 1.0.4

package/dist/cjs/components/CalendarDatePicker/CalendarDatePicker.js

@@ -0,0 +1,191 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const CalendarDatePicker_module_scss_1 = __importDefault(require("./CalendarDatePicker.module.scss"));
+const bs_1 = require("react-icons/bs");
+const InputBoxWithConfirmation_1 = __importDefault(require("../InputBoxWithConfirmation/InputBoxWithConfirmation"));
+const CalendarScrollableSection_1 = __importDefault(require("./subcomponents/CalendarScrollableSection"));
+const calendarDatePickerDictionary = {
+    en: {
+        january: "january",
+        february: "february",
+        march: "march",
+        april: "april",
+        may: "may",
+        june: "june",
+        july: "july",
+        august: "august",
+        september: "september",
+        october: "october",
+        november: "november",
+        december: "december",
+        monday: "monday",
+        tuesday: "tuesday",
+        wednesday: "wednesday",
+        thursday: "thursday",
+        friday: "friday",
+        saturday: "saturday",
+        sunday: "sunday",
+        today: "today",
+    },
+    es: {
+        january: "enero",
+        february: "febrero",
+        march: "marzo",
+        april: "abril",
+        may: "mayo",
+        june: "junio",
+        july: "julio",
+        august: "agosto",
+        september: "septiembre",
+        october: "octubre",
+        november: "noviembre",
+        december: "diciembre",
+        monday: "lunes",
+        tuesday: "martes",
+        wednesday: "miércoles",
+        thursday: "jueves",
+        friday: "viernes",
+        saturday: "sábado",
+        sunday: "domingo",
+        today: "hoy",
+    },
+};
+const getMonthName = (month, language) => {
+    switch (month) {
+        case 0:
+            return calendarDatePickerDictionary[language].january;
+        case 1:
+            return calendarDatePickerDictionary[language].february;
+        case 2:
+            return calendarDatePickerDictionary[language].march;
+        case 3:
+            return calendarDatePickerDictionary[language].april;
+        case 4:
+            return calendarDatePickerDictionary[language].may;
+        case 5:
+            return calendarDatePickerDictionary[language].june;
+        case 6:
+            return calendarDatePickerDictionary[language].july;
+        case 7:
+            return calendarDatePickerDictionary[language].august;
+        case 8:
+            return calendarDatePickerDictionary[language].september;
+        case 9:
+            return calendarDatePickerDictionary[language].october;
+        case 10:
+            return calendarDatePickerDictionary[language].november;
+        case 11:
+            return calendarDatePickerDictionary[language].december;
+        default:
+            return "";
+    }
+};
+const CalendarDatePicker = ({ mode, onSelectedDatesChange = () => { }, language = "en", customDates = [], title, minimumDate = new Date(1970, 0, 1), maximumDate = new Date(new Date().getFullYear() + 100, 1, 1), customStyle, }) => {
+    const [dates, setDates] = (0, react_1.useState)([]);
+    const [year, setYear] = (0, react_1.useState)(new Date().getFullYear());
+    const [month, setMonth] = (0, react_1.useState)(new Date().getMonth());
+    const [reloadKey, setReloadKey] = (0, react_1.useState)(Math.random());
+    const isDateValidForChange = (date) => {
+        const minimumMonthFirstDate = new Date(minimumDate.getFullYear(), minimumDate.getMonth(), 1);
+        const maximumMonthLastDate = new Date(maximumDate.getFullYear(), maximumDate.getMonth() + 1, 0);
+        const isDateHigherThanMinimumMonthFirstDate = date.valueOf() >= minimumMonthFirstDate.valueOf();
+        const isDateLowerThanMaximumMonthLastDate = date.valueOf() <= maximumMonthLastDate.valueOf();
+        return isDateHigherThanMinimumMonthFirstDate && isDateLowerThanMaximumMonthLastDate;
+    };
+    return (react_1.default.createElement("div", { className: CalendarDatePicker_module_scss_1.default["calendar-date-picker"], style: customStyle },
+        react_1.default.createElement("section", { className: CalendarDatePicker_module_scss_1.default["title"] },
+            react_1.default.createElement(bs_1.BsFillCalendar3WeekFill, null),
+            title,
+            react_1.default.createElement("button", { className: CalendarDatePicker_module_scss_1.default["today-button"], onClick: () => {
+                    const today = new Date();
+                    if (isDateValidForChange(today)) {
+                        setMonth(today.getMonth());
+                        setYear(today.getFullYear());
+                        setReloadKey(Math.random());
+                    }
+                } }, calendarDatePickerDictionary[language]["today"].slice(0, 1).toUpperCase() +
+                calendarDatePickerDictionary[language]["today"].slice(1))),
+        react_1.default.createElement("section", { className: CalendarDatePicker_module_scss_1.default["month-and-year"] },
+            react_1.default.createElement("select", { style: { fontFamily: customStyle === null || customStyle === void 0 ? void 0 : customStyle.fontFamily }, className: CalendarDatePicker_module_scss_1.default["month-input"], value: month, onChange: (event) => {
+                    const numericValue = Number(event.target.value);
+                    setMonth(numericValue);
+                    setReloadKey(Math.random());
+                } }, Array(12)
+                .fill(0)
+                .map((_, index) => {
+                const referenceDate = new Date(year, index, 1);
+                const isDisabled = !isDateValidForChange(referenceDate);
+                return (react_1.default.createElement("option", { key: getMonthName(index, language), value: index, disabled: isDisabled }, getMonthName(index, language)));
+            })),
+            react_1.default.createElement(InputBoxWithConfirmation_1.default, { inputType: "number", divWrapperCustomStyle: {
+                    width: "4ch",
+                    border: "none",
+                    backgroundColor: "transparent",
+                    fontFamily: customStyle === null || customStyle === void 0 ? void 0 : customStyle.fontFamily,
+                }, inputBoxCustomStyle: {
+                    padding: 0,
+                    fontFamily: customStyle === null || customStyle === void 0 ? void 0 : customStyle.fontFamily,
+                }, maxLength: 4, defaultValue: year.toString(), overrideCurrentValue: year.toString(), minimumValue: minimumDate.getFullYear().toString(), maximumValue: maximumDate.getFullYear().toString(), onConfirmAction: (inputCurrentValue) => {
+                    let numericValue = Number(inputCurrentValue);
+                    const referenceDate = new Date(numericValue, month, 1);
+                    if (!isDateValidForChange(referenceDate)) {
+                        if (referenceDate.valueOf() < minimumDate.valueOf()) {
+                            setYear(minimumDate.getFullYear());
+                            setMonth(minimumDate.getMonth());
+                            setReloadKey(Math.random());
+                        }
+                        else if (referenceDate.valueOf() > maximumDate.valueOf()) {
+                            setYear(maximumDate.getFullYear());
+                            setMonth(maximumDate.getMonth());
+                            setReloadKey(Math.random());
+                        }
+                    }
+                    else {
+                        setYear(numericValue);
+                        setReloadKey(Math.random());
+                    }
+                } })),
+        react_1.default.createElement("section", { className: CalendarDatePicker_module_scss_1.default["week-days"] },
+            react_1.default.createElement("p", null, calendarDatePickerDictionary[language].monday.slice(0, 1).toUpperCase()),
+            react_1.default.createElement("p", null, calendarDatePickerDictionary[language].tuesday.slice(0, 1).toUpperCase()),
+            react_1.default.createElement("p", null, calendarDatePickerDictionary[language].wednesday.slice(0, 1).toUpperCase()),
+            react_1.default.createElement("p", null, calendarDatePickerDictionary[language].thursday.slice(0, 1).toUpperCase()),
+            react_1.default.createElement("p", null, calendarDatePickerDictionary[language].friday.slice(0, 1).toUpperCase()),
+            react_1.default.createElement("p", null, calendarDatePickerDictionary[language].saturday.slice(0, 1).toUpperCase()),
+            react_1.default.createElement("p", null, calendarDatePickerDictionary[language].sunday.slice(0, 1).toUpperCase())),
+        react_1.default.createElement(CalendarScrollableSection_1.default, { key: reloadKey, dates: dates, year: year, month: month, mode: mode, onSelectedDatesChange: (selectedDates) => {
+                onSelectedDatesChange(selectedDates);
+                setDates(selectedDates);
+            }, onFocusedMonth: (month, year) => {
+                setMonth(month);
+                setYear(year);
+            }, customDates: customDates, minimumDate: minimumDate, maximumDate: maximumDate })));
+};
+exports.default = CalendarDatePicker;

package/dist/cjs/components/CalendarDatePicker/CalendarDatePicker.module.scss

@@ -0,0 +1,104 @@
+@property --angle {
+  sintax: "<angle>";
+  inherits: false;
+  initial-value: 270deg;
+}
+
+@property --color-default {
+  sintax: "<color>";
+  inherits: false;
+  initial-value: white;
+}
+
+@property --color-selected {
+  sintax: "<color>";
+  inherits: false;
+  initial-value: #e3f3e3;
+}
+
+@property --percentage-default {
+  sintax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --percentage-selected {
+  sintax: "<percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+
+.calendar-date-picker {
+  font-family: Arial, Helvetica, sans-serif;
+  width: 390px;
+  color: #959595;
+  font-weight: 600;
+  font-style: normal;
+  line-height: normal;
+  .title {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    font-size: 16px;
+    svg {
+      margin: 0px 5px;
+    }
+  }
+  .today-button {
+    position: absolute;
+    top: 0px;
+    right: 5px;
+    border: solid 2px #787878;
+    border-radius: 6px;
+    padding: 4px 8px;
+    background-color: white;
+    color: #787878;
+    transition: all 0.1s ease-in-out;
+    cursor: pointer;
+    &:hover {
+      background-color: #f3f3f3;
+    }
+    &:active {
+      background-color: #cfcfcf;
+    }
+  }
+  .month-and-year {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    text-align: center;
+    font-size: 22px;
+    padding: 10px 0px;
+    .month-input {
+      width: fit-content;
+      background-color: transparent;
+      border: transparent;
+      text-align: right;
+      font-size: 18px;
+      color: #959595;
+      cursor: pointer;
+      &:focus {
+        outline: transparent;
+      }
+      option {
+        background-color: white;
+        color: #959595;
+        &:disabled {
+          color: #cfcfcf;
+        }
+      }
+    }
+  }
+  .week-days {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #ebebeb;
+    p {
+      width: calc(100% / 7);
+      margin: 0px;
+      text-align: center;
+    }
+  }
+}

package/dist/{components → cjs/components}/CalendarDatePicker/subcomponents/CalendarScrollableSection.d.ts

@@ -1,15 +1,15 @@
-import React from "react";
-import { CalendarDatePickerProps } from "../CalendarDatePicker";
-type CalendarScrollableSectionProps = {
-    dates: Date[];
-    month: number;
-    year: number;
-    mode: CalendarDatePickerProps["mode"];
-    onSelectedDatesChange: CalendarDatePickerProps["onSelectedDatesChange"];
-    onFocusedMonth: (month: number, year: number) => void;
-    customDates: CalendarDatePickerProps["customDates"];
-    minimumDate?: CalendarDatePickerProps["minimumDate"];
-    maximumDate?: CalendarDatePickerProps["maximumDate"];
-};
-declare const CalendarScrollableSection: ({ dates, month, year, mode, onSelectedDatesChange, onFocusedMonth, customDates, minimumDate, maximumDate, }: CalendarScrollableSectionProps) => React.JSX.Element;
-export default CalendarScrollableSection;
+import React from "react";
+import { CalendarDatePickerProps } from "../CalendarDatePicker";
+type CalendarScrollableSectionProps = {
+    dates: Date[];
+    month: number;
+    year: number;
+    mode: CalendarDatePickerProps["mode"];
+    onSelectedDatesChange: CalendarDatePickerProps["onSelectedDatesChange"];
+    onFocusedMonth: (month: number, year: number) => void;
+    customDates: CalendarDatePickerProps["customDates"];
+    minimumDate?: CalendarDatePickerProps["minimumDate"];
+    maximumDate?: CalendarDatePickerProps["maximumDate"];
+};
+declare const CalendarScrollableSection: ({ dates, month, year, mode, onSelectedDatesChange, onFocusedMonth, customDates, minimumDate, maximumDate, }: CalendarScrollableSectionProps) => React.JSX.Element;
+export default CalendarScrollableSection;

package/dist/cjs/components/CalendarDatePicker/subcomponents/CalendarScrollableSection.js

@@ -0,0 +1,300 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const CalendarScrollableSection_module_scss_1 = __importDefault(require("./CalendarScrollableSection.module.scss"));
+const dayOfTheWeekStartingOnMonday_1 = __importDefault(require("../../../utils/dayOfTheWeekStartingOnMonday"));
+const numberOfWeeksInAMonth_1 = __importDefault(require("../../../utils/numberOfWeeksInAMonth"));
+const jsToSqlDate_1 = __importDefault(require("../../../utils/jsToSqlDate"));
+const useIntersectionObserver_1 = __importDefault(require("../../../hooks/useIntersectionObserver"));
+const reducer = (state, action) => {
+    const isAValidDateChange = (year, month) => {
+        const referenceDate = new Date(year, month, 1);
+        const minimumMonthDate = new Date(state.minimumDate.getFullYear(), state.minimumDate.getMonth(), 1);
+        const maximumMonthDate = new Date(state.maximumDate.getFullYear(), state.maximumDate.getMonth() + 1, 0);
+        const isReferenceDateLowerThanMinimumMonthDate = referenceDate.valueOf() < minimumMonthDate.valueOf();
+        const isReferenceDateHigherThanMaximumMonthDate = referenceDate.valueOf() > maximumMonthDate.valueOf();
+        if (isReferenceDateLowerThanMinimumMonthDate ||
+            isReferenceDateHigherThanMaximumMonthDate) {
+            return false;
+        }
+        return true;
+    };
+    const actionsDictionary = {
+        setMonth: () => {
+            if (isAValidDateChange(state.year, action.value)) {
+                return Object.assign(Object.assign({}, state), { month: action.value });
+            }
+            else {
+                return Object.assign({}, state);
+            }
+        },
+        setYear: () => {
+            if (isAValidDateChange(action.value, state.month)) {
+                return Object.assign(Object.assign({}, state), { year: action.value });
+            }
+            else {
+                return Object.assign({}, state);
+            }
+        },
+        setMinimumDate: () => {
+            return Object.assign(Object.assign({}, state), { minimumDate: new Date(action.value) });
+        },
+        setMaximumdate: () => {
+            return Object.assign(Object.assign({}, state), { maximumDate: new Date(action.value) });
+        },
+        changeByMonthOffset: () => {
+            const referenceDate = new Date(state.year, state.month + action.value, 1);
+            if (isAValidDateChange(state.year, state.month + action.value)) {
+                return Object.assign(Object.assign({}, state), { year: referenceDate.getFullYear(), month: referenceDate.getMonth() });
+            }
+            else {
+                return Object.assign({}, state);
+            }
+        },
+    };
+    const newState = actionsDictionary[action.type]();
+    if (newState) {
+        return newState;
+    }
+    else {
+        return Object.assign({}, state);
+    }
+};
+const CalendarScrollableSection = ({ dates, month, year, mode, onSelectedDatesChange, onFocusedMonth, customDates = [], minimumDate = new Date(1970, 0, 1), maximumDate = new Date(new Date().getFullYear() + 100, 1, 1), }) => {
+    const [state, dispatch] = (0, react_1.useReducer)(reducer, {
+        month: month,
+        year: year,
+        minimumDate: minimumDate,
+        maximumDate: maximumDate,
+    });
+    const monthsContainerRef = (0, react_1.useRef)(null);
+    const firstMonthRef = (0, react_1.useRef)(null);
+    const secondMonthRef = (0, react_1.useRef)(null);
+    const fourthMonthRef = (0, react_1.useRef)(null);
+    const fifthMonthRef = (0, react_1.useRef)(null);
+    const isFirstMonthVisible = (0, useIntersectionObserver_1.default)(firstMonthRef, {
+        rootMargin: "0px",
+        threshold: 1.0,
+    });
+    const isSecondMonthVisible = (0, useIntersectionObserver_1.default)(secondMonthRef, {
+        rootMargin: "0px",
+        threshold: 1.0,
+    });
+    const isFourthMonthVisible = (0, useIntersectionObserver_1.default)(fourthMonthRef, {
+        rootMargin: "0px",
+        threshold: 1.0,
+    });
+    const isFifthMonthVisible = (0, useIntersectionObserver_1.default)(fifthMonthRef, {
+        rootMargin: "0px",
+        threshold: 1.0,
+    });
+    const isDateSelectable = (date) => {
+        // * If date is not found in custom dates or selectable preoperty is set to true, it returns true
+        const isNotSelectable = customDates.some((customDate) => {
+            return (customDate.dates.some((includedDate) => includedDate.valueOf() === date.valueOf()) && !customDate.selectable);
+        });
+        return !isNotSelectable;
+    };
+    const dayCellClassName = (date) => {
+        let className = CalendarScrollableSection_module_scss_1.default["day-cell"];
+        const isCrosssed = customDates.some((customDate) => {
+            return (customDate.dates.some((includedDate) => includedDate.valueOf() === date.valueOf()) && customDate.crossed);
+        });
+        if (isCrosssed) {
+            className += ` ${CalendarScrollableSection_module_scss_1.default["crossed"]}`;
+        }
+        return className;
+    };
+    const dateClassName = (date) => {
+        let className = CalendarScrollableSection_module_scss_1.default["day"];
+        const isToday = (0, jsToSqlDate_1.default)(date) === (0, jsToSqlDate_1.default)(new Date());
+        if (isToday) {
+            className += ` ${CalendarScrollableSection_module_scss_1.default["today"]}`;
+        }
+        if (date.getMonth() === state.month) {
+            className += ` ${CalendarScrollableSection_module_scss_1.default["in-month"]}`;
+        }
+        else {
+            className += ` ${CalendarScrollableSection_module_scss_1.default["not-in-month"]}`;
+        }
+        const isDateSelected = dates.some((includedDate) => includedDate.valueOf() === date.valueOf());
+        const isDateInRange = (mode === "range" || mode === "booking") &&
+            dates.length === 2 &&
+            dates[0].valueOf() < date.valueOf() &&
+            date.valueOf() < dates[1].valueOf();
+        if (isDateSelected || isDateInRange) {
+            className += ` ${CalendarScrollableSection_module_scss_1.default["selected"]}`;
+        }
+        if (mode === "booking") {
+            const isCheckInDate = dates.length === 2 && date.valueOf() === dates[0].valueOf();
+            if (isCheckInDate) {
+                className += ` ${CalendarScrollableSection_module_scss_1.default["check-in"]}`;
+            }
+            const isCheckOutDate = dates.length === 2 && date.valueOf() === dates[1].valueOf();
+            if (isCheckOutDate) {
+                className += ` ${CalendarScrollableSection_module_scss_1.default["check-out"]}`;
+            }
+        }
+        if (isDateSelectable(date)) {
+            className += ` ${CalendarScrollableSection_module_scss_1.default["selectable"]}`;
+        }
+        else {
+            className += ` ${CalendarScrollableSection_module_scss_1.default["not-selectable"]}`;
+        }
+        const isOutOfSelection = date.valueOf() < minimumDate.valueOf() || date.valueOf() > maximumDate.valueOf();
+        if (isOutOfSelection) {
+            className += ` ${CalendarScrollableSection_module_scss_1.default["out-of-selection"]}`;
+        }
+        return className;
+    };
+    const handleDateSelection = (date) => {
+        // custom side effects
+        customDates.forEach((customDate) => {
+            if (customDate.dates.some((includedDate) => includedDate.valueOf() === date.valueOf()) &&
+                customDate.clickSideEffect) {
+                customDate.clickSideEffect(date);
+            }
+        });
+        const isSelectable = isDateSelectable(date);
+        if (!isSelectable) {
+            return;
+        }
+        const isOutOfSelection = date.valueOf() < minimumDate.valueOf() || date.valueOf() > maximumDate.valueOf();
+        if (isOutOfSelection) {
+            return;
+        }
+        let datesClone = [...dates];
+        if (mode === "single") {
+            datesClone = [date];
+        }
+        if (mode === "multiple") {
+            if (dates.some((includedDate) => includedDate.valueOf() === date.valueOf())) {
+                datesClone = dates.filter((includedDate) => includedDate.valueOf() !== date.valueOf());
+            }
+            else {
+                datesClone = [...dates, date];
+            }
+        }
+        if (mode === "range") {
+            if (dates.length === 0) {
+                datesClone = [date];
+            }
+            else if (dates.length === 1) {
+                if (dates[0].valueOf() < date.valueOf()) {
+                    datesClone = [...dates, date];
+                }
+                else {
+                    datesClone = [date, dates[0]];
+                }
+            }
+            else {
+                datesClone = [];
+            }
+        }
+        if (mode === "booking") {
+            if (dates.length === 0) {
+                datesClone = [date];
+            }
+            else if (dates[0].valueOf() === date.valueOf()) {
+                datesClone = [];
+            }
+            else if (dates.length === 1) {
+                if (dates[0].valueOf() < date.valueOf()) {
+                    datesClone = [...dates, date];
+                }
+                else {
+                    datesClone = [date, dates[0]];
+                }
+            }
+            else {
+                datesClone = [];
+            }
+        }
+        onSelectedDatesChange(datesClone);
+    };
+    const customColorStyleObject = (date) => {
+        const customDate = customDates.find((customDate) => customDate.dates.some((includedDate) => includedDate.valueOf() === date.valueOf()));
+        if (customDate) {
+            return {
+                backgroundColor: customDate.color,
+            };
+        }
+        else {
+            return undefined;
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (monthsContainerRef.current) {
+            monthsContainerRef.current.scrollTop = 416;
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        onFocusedMonth(state.month, state.year);
+    }, [state.year, state.month, onFocusedMonth]);
+    (0, react_1.useEffect)(() => {
+        if (isSecondMonthVisible || isFirstMonthVisible) {
+            dispatch({ type: "changeByMonthOffset", value: -1 });
+        }
+    }, [isFirstMonthVisible, isSecondMonthVisible]);
+    (0, react_1.useEffect)(() => {
+        if (isFourthMonthVisible || isFifthMonthVisible) {
+            dispatch({ type: "changeByMonthOffset", value: 1 });
+        }
+    }, [isFourthMonthVisible, isFifthMonthVisible]);
+    return (react_1.default.createElement("section", { ref: monthsContainerRef, className: CalendarScrollableSection_module_scss_1.default["calendar-scrollable-section"] }, Array(5)
+        .fill(0)
+        .map((_, gridIndex) => {
+        const monthOffset = gridIndex - 2;
+        const referenceDate = new Date(state.year, state.month + monthOffset, 1);
+        const lastDayOfTheMonth = new Date(state.year, state.month + monthOffset + 1, 0);
+        const isLastDayOfTheMonthSunday = lastDayOfTheMonth.getDay() === 0;
+        let numberOfWeeksInMonth = (0, numberOfWeeksInAMonth_1.default)(referenceDate);
+        if (!isLastDayOfTheMonthSunday) {
+            numberOfWeeksInMonth = numberOfWeeksInMonth - 1;
+        }
+        const firstDayInMonthDayOfWeek = (0, dayOfTheWeekStartingOnMonday_1.default)(referenceDate);
+        return (react_1.default.createElement("div", { ref: [firstMonthRef, secondMonthRef, null, fourthMonthRef, fifthMonthRef][gridIndex], className: CalendarScrollableSection_module_scss_1.default["days-grid"], key: `grid:${(0, jsToSqlDate_1.default)(referenceDate)}}` }, Array(numberOfWeeksInMonth)
+            .fill(0)
+            .map((_, rowIndex) => (react_1.default.createElement("div", { className: CalendarScrollableSection_module_scss_1.default["days-row"], key: `grid:${(0, jsToSqlDate_1.default)(referenceDate)}-row:${rowIndex}` }, Array(7)
+            .fill(0)
+            .map((_, columnIndex) => {
+            const numberOfMonth = state.month + monthOffset;
+            const numberOfDay = rowIndex * 7 + columnIndex + 1 - firstDayInMonthDayOfWeek;
+            const date = new Date(state.year, numberOfMonth, numberOfDay);
+            return (react_1.default.createElement("div", { className: dayCellClassName(date), key: (0, jsToSqlDate_1.default)(date), onClick: () => handleDateSelection(date) },
+                react_1.default.createElement("div", { className: CalendarScrollableSection_module_scss_1.default["cross-line"] }),
+                react_1.default.createElement("div", { className: dateClassName(date) },
+                    react_1.default.createElement("div", { className: CalendarScrollableSection_module_scss_1.default["background"] },
+                        react_1.default.createElement("div", { className: CalendarScrollableSection_module_scss_1.default["first-half"], style: customColorStyleObject(date) }),
+                        react_1.default.createElement("div", { className: CalendarScrollableSection_module_scss_1.default["second-half"], style: customColorStyleObject(date) })),
+                    react_1.default.createElement("p", null, date.getDate()))));
+        }))))));
+    })));
+};
+exports.default = CalendarScrollableSection;