josenanodev-react-components-library 1.0.2 → 1.0.4

package/dist/esm/components/Multicalendar/Multicalendar.js

@@ -0,0 +1,341 @@
+import React, { useEffect, useState, useRef } from "react";
+import * as Funciones from "./MulticalendarOwnFunctions";
+import "./Multicalendar.css";
+//Assets
+import { BsChevronLeft, BsChevronRight } from "react-icons/bs";
+//Componentes
+import DatesRow from "./subcomponents/individuals/DatesRow/DatesRow";
+import ListElementsColumn from "./subcomponents/composites/ListElementsColumn/ListElementsColumn";
+import DatesGrid from "./subcomponents/composites/DatesGrid/DatesGrid";
+import DropdownMonthNavigation from "./subcomponents/individuals/DropdownMonthNavigation/DropdownMonthNavigation";
+//Hooks
+import useWindowSize from "../../hooks/useWindowsSize";
+//Utils
+import sqlToJsDate from "../../utils/sqlToJsDate";
+//Services
+import { getMulticalendarScrollLeftPosition, getMulticalendarScrollTopPosition, setMulticalendarScrollLeftPosition, setMulticalendarScrollTopPosition, } from "../../Services/MulticalendarStatesAndSettings";
+const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChildren, listElementsIdsArray, language, pastDatesVisible = true, cellsWidth = 120, cellsHeight = 80, verticalAxisWidth = 280, pastDaysInitialQuantity = 365, futureDaysInitialQuantity = 365, chunkRenderX = 0, chunkRenderY = 0, dynamicDaysQuantity = false, authomaticScrollOnDraggingOverEdges = false, waitTimeForCalls = 500, callsOnInitialView, callsOnScrollingStops, aditionalControlsComponents, upperLeftComponent, autoSavePosition, onScrollTopChanges, onScrollLeftChanges, }) => {
+    var _a, _b;
+    //Constantes del componente
+    const initialDateOffset = 1 + chunkRenderX;
+    //Refs
+    const datesRowRef = useRef(null);
+    const destiniesColumnRef = useRef(null);
+    const gridWrapperRef = useRef(null);
+    const controlsWrapperRef = useRef(null);
+    const horizontalAxisWrapperRef = useRef(null);
+    //Estados
+    const [firtsCallOnInitialViewDone, setFirtsCallOnInitialViewDone] = useState(false);
+    const [windowWidth, windowHeight] = useWindowSize();
+    const [futureDaysQuantity, setFutureDaysQuantity] = useState(Math.ceil(futureDaysInitialQuantity));
+    const [pastDaysQuantity, setPastDaysQuantity] = useState(pastDatesVisible ? Math.ceil(pastDaysInitialQuantity) : 0);
+    const [paginationWidth, setPaginationWidth] = useState(0);
+    const [paginationHeight, setPaginationHeight] = useState(0);
+    const [xOffset, setXOffset] = useState(1);
+    const [yOffset, setYOffset] = useState(0);
+    const [visibleDates, setVisibleDates] = useState([]);
+    const [visibleListElementsIds, setVisibleListElementsIds] = useState([]);
+    const [updateList, setUpdateList] = useState(false);
+    const [origin, setOrigin] = useState({
+        x: getMulticalendarScrollLeftPosition(multicalendarId)
+            ? Number(getMulticalendarScrollLeftPosition(multicalendarId))
+            : pastDatesVisible
+                ? Math.ceil(pastDaysInitialQuantity) * cellsWidth
+                : 0,
+        y: getMulticalendarScrollTopPosition(multicalendarId)
+            ? Number(getMulticalendarScrollTopPosition(multicalendarId))
+            : 0,
+    });
+    const [xPosition, setXPosition] = useState(origin.x);
+    const [yPosition, setYPosition] = useState(origin.y);
+    const [renderCoordinates, setRenderCoordinates] = useState({
+        x: origin.x,
+        y: origin.y,
+    });
+    const [initialPositioningDone, setInitialPositioningDone] = useState(false);
+    const [minimumVisibleDate, setMinimumVisibleDate] = useState(new Date());
+    const [idTimeoutForCalls, setIdTimeoutForCalls] = useState(undefined);
+    const [clientXPositionOnGrid, setClientXPositionOnGrid] = useState(undefined);
+    const [clientYPositionOnGrid, setClientYPositionOnGrid] = useState(undefined);
+    const [scrollingOnCourse, setScrollingOnCourse] = useState(false);
+    const [controlsWrapperHeight, setControlsWrapperHeight] = useState(((_a = controlsWrapperRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) ? controlsWrapperRef.current.clientHeight : 0);
+    const [horizontalAxisWrapperHeight, setHorizontalAxisWrapperHeight] = useState(((_b = horizontalAxisWrapperRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)
+        ? horizontalAxisWrapperRef.current.clientHeight
+        : 0);
+    const [userIsHoldingMouseDown, setUserIsHoldingMouseDown] = useState(false);
+    //UseEffect
+    useEffect(() => {
+        setOrigin({
+            x: pastDatesVisible ? Math.ceil(pastDaysInitialQuantity) * cellsWidth : 0,
+            y: 0,
+        });
+    }, [pastDatesVisible, pastDaysInitialQuantity, cellsWidth]);
+    useEffect(() => {
+        //Cached positions
+        if (gridWrapperRef.current && initialPositioningDone === false) {
+            gridWrapperRef.current.scrollTop = origin.y;
+            gridWrapperRef.current.scrollLeft = origin.x;
+            setInitialPositioningDone(true);
+        }
+    }, [origin.y, origin.x, initialPositioningDone]);
+    useEffect(() => {
+        if (onScrollLeftChanges) {
+            onScrollLeftChanges(xPosition);
+        }
+        if (onScrollTopChanges) {
+            onScrollTopChanges(yPosition);
+        }
+        return () => {
+            if (autoSavePosition) {
+                if (yPosition !== origin.y) {
+                    setMulticalendarScrollTopPosition(multicalendarId, String(yPosition));
+                }
+                if (xPosition !== origin.x) {
+                    setMulticalendarScrollLeftPosition(multicalendarId, String(xPosition));
+                }
+            }
+        };
+    }, [autoSavePosition, yPosition, xPosition, origin.y, origin.x]);
+    useEffect(() => {
+        if (pastDatesVisible) {
+            setPastDaysQuantity(Math.ceil(pastDaysInitialQuantity));
+        }
+        else {
+            setPastDaysQuantity(0);
+        }
+    }, [pastDatesVisible, pastDaysInitialQuantity]);
+    useEffect(() => {
+        if (!firtsCallOnInitialViewDone &&
+            visibleListElementsIds.length > 0 &&
+            visibleDates.length > 0 &&
+            callsOnInitialView) {
+            setFirtsCallOnInitialViewDone(true);
+            callsOnInitialView(visibleListElementsIds, visibleDates);
+        }
+    }, [
+        firtsCallOnInitialViewDone,
+        visibleListElementsIds,
+        visibleDates,
+        callsOnInitialView,
+    ]);
+    useEffect(() => {
+        var _a, _b;
+        const localConstControlsWrapperHeight = ((_a = controlsWrapperRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight)
+            ? controlsWrapperRef.current.clientHeight
+            : 0;
+        const localConstHorizontalAxisWrapperHeight = ((_b = horizontalAxisWrapperRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)
+            ? horizontalAxisWrapperRef.current.clientHeight
+            : 0;
+        setControlsWrapperHeight(localConstControlsWrapperHeight);
+        setHorizontalAxisWrapperHeight(localConstHorizontalAxisWrapperHeight);
+        setUpdateList(true);
+        // Dimensiones de paginacion, requiere agregar 1 para no ver espacios en blanco
+        setPaginationWidth(Math.ceil((windowWidth - verticalAxisWidth) / cellsWidth) + 1);
+        setPaginationHeight(Math.ceil((windowHeight -
+            localConstControlsWrapperHeight -
+            localConstHorizontalAxisWrapperHeight) /
+            cellsHeight) + 1);
+        // Redefinicion de posicion X ante cambios en el tamaño de la ventana
+        if (gridWrapperRef.current !== null) {
+            setXPosition(gridWrapperRef.current.scrollLeft);
+            setRenderCoordinates({
+                x: gridWrapperRef.current.scrollLeft,
+                y: gridWrapperRef.current.scrollTop,
+            });
+            setXOffset(Math.floor(gridWrapperRef.current.scrollLeft / cellsWidth) - chunkRenderX);
+        }
+    }, [
+        windowWidth,
+        windowHeight,
+        verticalAxisWidth,
+        cellsHeight,
+        cellsWidth,
+        chunkRenderX,
+    ]);
+    useEffect(() => {
+        // Definicion de visibilidad y renderizacion del Eje Y
+        if ((renderCoordinates.x === origin.x && renderCoordinates.y === origin.y) ||
+            Math.abs(renderCoordinates.y - yPosition) / cellsHeight > chunkRenderY ||
+            updateList) {
+            if (!(renderCoordinates.x === origin.x && renderCoordinates.y === origin.y)) {
+                if (gridWrapperRef.current !== null)
+                    setRenderCoordinates({
+                        x: gridWrapperRef.current.scrollLeft,
+                        y: gridWrapperRef.current.scrollTop,
+                    });
+            }
+            let desfase = Funciones.defineYOffset(yPosition, cellsHeight, chunkRenderY);
+            setYOffset(desfase);
+            setVisibleListElementsIds(Funciones.defineListElementsArrayVisibleList(paginationHeight, chunkRenderY, desfase, listElementsIdsArray));
+            if (updateList)
+                setUpdateList(false);
+        }
+    }, [
+        updateList,
+        yPosition,
+        cellsHeight,
+        chunkRenderY,
+        origin.x,
+        origin.y,
+        paginationHeight,
+        renderCoordinates.x,
+        renderCoordinates.y,
+        listElementsIdsArray,
+    ]);
+    useEffect(() => {
+        // Definicion de visibilidad y renderizacion del Eje X
+        if ((renderCoordinates.x === origin.x && renderCoordinates.y === origin.y) ||
+            xPosition < cellsWidth ||
+            Math.abs(renderCoordinates.x - xPosition) / cellsWidth > chunkRenderX ||
+            updateList) {
+            setVisibleDates([]);
+            if (!(renderCoordinates.x === origin.x && renderCoordinates.y === origin.y)) {
+                if (gridWrapperRef.current !== null)
+                    setRenderCoordinates({
+                        x: gridWrapperRef.current.scrollLeft,
+                        y: gridWrapperRef.current.scrollTop,
+                    });
+            }
+            setXOffset(Funciones.defineXOffset(xPosition, cellsWidth, chunkRenderX));
+            const fechaMinimaMilisegundos = Funciones.minimalDateMilliseconds(xPosition, cellsWidth, pastDaysQuantity, initialDateOffset);
+            setMinimumVisibleDate(Funciones.defineMinimalVisibleDate(fechaMinimaMilisegundos, initialDateOffset));
+            if (updateList)
+                setUpdateList(false);
+            setVisibleDates(Funciones.defineVisibleDatesArray(paginationWidth, chunkRenderX, fechaMinimaMilisegundos));
+        }
+    }, [
+        updateList,
+        paginationWidth,
+        xPosition,
+        chunkRenderX,
+        cellsWidth,
+        initialDateOffset,
+        pastDaysQuantity,
+        renderCoordinates.x,
+        renderCoordinates.y,
+        origin.x,
+        origin.y,
+    ]);
+    useEffect(() => {
+        setScrollingOnCourse(true);
+        clearTimeout(idTimeoutForCalls);
+        setIdTimeoutForCalls(undefined);
+        // eslint-disable-next-line
+    }, [xPosition, yPosition]);
+    useEffect(() => {
+        if (idTimeoutForCalls === undefined) {
+            let _id = setTimeout(() => setScrollingOnCourse(false), waitTimeForCalls);
+            setIdTimeoutForCalls(_id);
+        }
+    }, [xPosition, yPosition, idTimeoutForCalls, waitTimeForCalls]);
+    useEffect(() => {
+        if (!scrollingOnCourse && callsOnScrollingStops) {
+            callsOnScrollingStops(visibleListElementsIds, visibleDates);
+        }
+        // eslint-disable-next-line
+    }, [scrollingOnCourse, visibleListElementsIds, visibleDates]);
+    //Cancelar idIntervalo Autoscroll de rango cuando se deja de seleccionar
+    useEffect(() => {
+        if (!authomaticScrollOnDraggingOverEdges) {
+            if (clientXPositionOnGrid !== undefined)
+                setClientXPositionOnGrid(undefined);
+            if (clientYPositionOnGrid !== undefined)
+                setClientYPositionOnGrid(undefined);
+        }
+    }, [authomaticScrollOnDraggingOverEdges, clientXPositionOnGrid, clientYPositionOnGrid]);
+    useEffect(() => {
+        document.body.addEventListener("mousedown", () => {
+            setUserIsHoldingMouseDown(true);
+        });
+        document.body.addEventListener("mouseup", () => {
+            setUserIsHoldingMouseDown(false);
+        });
+        return () => {
+            document.body.removeEventListener("mousedown", () => {
+                setUserIsHoldingMouseDown(true);
+            });
+            document.body.removeEventListener("mouseup", () => {
+                setUserIsHoldingMouseDown(false);
+            });
+        };
+    }, [authomaticScrollOnDraggingOverEdges]);
+    //Render
+    return (React.createElement("div", { key: multicalendarId, id: multicalendarId, "data-testid": multicalendarId, className: "trc-multicalendar", style: {
+            gridTemplateColumns: `${verticalAxisWidth}px`,
+            gridTemplateRows: `auto auto calc(100% - ${controlsWrapperHeight + horizontalAxisWrapperHeight}px`,
+        } },
+        React.createElement("div", { ref: controlsWrapperRef, className: "controls" },
+            React.createElement("div", { className: "div-dates-navigation" },
+                React.createElement(DropdownMonthNavigation, { visibleYear: minimumVisibleDate.getFullYear(), visibleMonth: minimumVisibleDate.getMonth(), onChangeAction: (valorDeOpcion) => {
+                        Funciones.scrollByDate(new Date(Number(Date.parse(sqlToJsDate(valorDeOpcion).toString()))), gridWrapperRef, pastDaysQuantity, cellsWidth);
+                    }, options: Funciones.defineMonthsArray(pastDaysQuantity, futureDaysQuantity, language) }),
+                React.createElement("button", { onClick: () => Funciones.scrollByDate(new Date(), gridWrapperRef, pastDaysQuantity, cellsWidth) }, language["Today"])),
+            aditionalControlsComponents && (React.createElement("div", { className: "div-aditional-controls-components" }, aditionalControlsComponents))),
+        React.createElement("div", { className: "div-upper-left-component" }, upperLeftComponent),
+        React.createElement("div", { className: "vertical-axis" },
+            React.createElement("div", { ref: destiniesColumnRef, className: "div-list-element-column", onScroll: (e) => {
+                    // Se puede hacer funcion
+                    if (gridWrapperRef.current !== null)
+                        gridWrapperRef.current.scrollTop = e.target.scrollTop;
+                } },
+                React.createElement(ListElementsColumn, { listHeight: cellsHeight * listElementsIdsArray.length, yOffset: yOffset, elementsHeight: cellsHeight, idsArray: visibleListElementsIds, ReactListElementChildren: ReactListElementChildren }))),
+        React.createElement("div", { ref: horizontalAxisWrapperRef, className: "horizontal-axis" },
+            React.createElement("div", { className: "div-weeks-buttons" },
+                React.createElement("button", { className: "past-week-button", onClick: () => {
+                        // Se puede hacer funcion
+                        if (datesRowRef.current !== null)
+                            datesRowRef.current.scroll({
+                                left: datesRowRef.current.scrollLeft - cellsWidth * 7,
+                            });
+                    } },
+                    React.createElement(BsChevronLeft, null)),
+                React.createElement("button", { onClick: () => {
+                        // Se puede hacer funcion
+                        if (datesRowRef.current !== null)
+                            datesRowRef.current.scroll({
+                                left: datesRowRef.current.scrollLeft + cellsWidth * 7,
+                            });
+                    }, className: "next-week-button" },
+                    React.createElement(BsChevronRight, null))),
+            React.createElement("div", { ref: datesRowRef, className: "div-dates-row", onScroll: (e) => {
+                    if (gridWrapperRef.current !== null)
+                        gridWrapperRef.current.scrollLeft = e.target.scrollLeft;
+                } },
+                React.createElement(DatesRow, { visibleDates: visibleDates, width: (pastDaysQuantity + futureDaysQuantity) * cellsWidth, height: 74, cellsWidth: cellsWidth, cellsHeight: 74, offset: xOffset, language: language }))),
+        React.createElement("div", { className: "div-main-container" },
+            React.createElement("div", { ref: gridWrapperRef, className: "main-container", onScroll: (e) => {
+                    if (datesRowRef.current !== null) {
+                        const scrollLeft = e.target.scrollLeft;
+                        datesRowRef.current.scrollLeft = scrollLeft;
+                        setXPosition(scrollLeft);
+                    }
+                    if (destiniesColumnRef.current !== null) {
+                        const scrollTop = e.target.scrollTop;
+                        destiniesColumnRef.current.scrollTop = scrollTop;
+                        setYPosition(scrollTop);
+                    }
+                    if (dynamicDaysQuantity &&
+                        e.target.scrollLeft +
+                            e.target.offsetWidth >
+                            (pastDaysQuantity + futureDaysQuantity) * cellsWidth - cellsWidth) {
+                        setFutureDaysQuantity(futureDaysQuantity + 1);
+                    }
+                    if (pastDatesVisible &&
+                        dynamicDaysQuantity &&
+                        e.target.scrollLeft < cellsWidth) {
+                        setPastDaysQuantity(pastDaysQuantity + 1);
+                        e.target.scrollLeft = cellsWidth * 3;
+                    }
+                    Funciones.authomaticScrollInGrid(userIsHoldingMouseDown, clientXPositionOnGrid, clientYPositionOnGrid, cellsWidth * 0.8, cellsHeight * 0.8, e.target);
+                }, onMouseMove: (e) => {
+                    if (gridWrapperRef.current !== null && userIsHoldingMouseDown) {
+                        let x = e.clientX - gridWrapperRef.current.getBoundingClientRect().left;
+                        let y = e.clientY - gridWrapperRef.current.getBoundingClientRect().top;
+                        setClientXPositionOnGrid(x);
+                        setClientYPositionOnGrid(y);
+                        Funciones.startAuthomaticScrollInGrid(userIsHoldingMouseDown, x, y, cellsWidth * 0.8, cellsHeight * 0.8, gridWrapperRef);
+                    }
+                } },
+                React.createElement(DatesGrid, { gridWidth: (pastDaysQuantity + futureDaysQuantity) * cellsWidth, gridHeight: cellsHeight * listElementsIdsArray.length, xOffset: xOffset, yOffset: yOffset, cellsWidth: cellsWidth, cellsHeight: cellsHeight, visibleListElementsIdsArray: visibleListElementsIds, visibleDates: visibleDates, ReactCellChildren: ReactCellChildren })))));
+};
+export default Multicalendar;

package/dist/esm/components/Multicalendar/MulticalendarOwnFunctions.d.ts

@@ -0,0 +1,86 @@
+import React from "react";
+import { languageType } from "../../languages/types";
+/**
+ *
+ * @param dateObject Date Object
+ * @param elementRef ref of the element that will be scrolled
+ * @param leftPagination number of cells to the left
+ * @param cellsWidth width of cells
+ */
+export declare function scrollByDate(dateObject: Date, elementRef: React.RefObject<HTMLDivElement>, leftPagination: number, cellsWidth: number): void;
+/**
+ *
+ * @param xPosition position X of grid
+ * @param cellsWidth width of grid cells
+ * @param leftPagination number of cells to the left
+ * @param initialDateOffset offset of cells for the initial date
+ * @returns milliseconds of the minimal date
+ */
+export declare function minimalDateMilliseconds(xPosition: number, cellsWidth: number, leftPagination: number, initialDateOffset: number): number;
+/**
+ *
+ * @param millisecondsOfMinimalDate milliseconds of the minimal date
+ * @param initialDateOffset offset of number of cells for initial date
+ * @returns The minimal visible date object
+ */
+export declare function defineMinimalVisibleDate(millisecondsOfMinimalDate: number, initialDateOffset: number): Date;
+/**
+ *
+ * @param xPosition current x position in the grid horizontal scroll
+ * @param cellsWidth width of grid cells
+ * @param chunkRenderX extra rendered cells in a row
+ * @returns number X offset
+ */
+export declare function defineXOffset(xPosition: number, cellsWidth: number, chunkRenderX: number): number;
+/**
+ *
+ * @param paginationWidth width of pagination of horizontal axis of the grid
+ * @param chunkRenderX extra rendered cells in every row
+ * @param minimalDateMilliseconds milliseconds of the minimal date
+ * @returns an array containing all the dates that should be rendered base on position of x scroll
+ */
+export declare function defineVisibleDatesArray(paginationWidth: number, chunkRenderX: number, minimalDateMilliseconds: number): Date[];
+/**
+ *
+ * @param yPosition current y position in the grid vertical scroll
+ * @param cellsHeight height of grid cells
+ * @param chunkRenderY extra rendered cells in every column
+ * @returns number Y offset
+ */
+export declare function defineYOffset(yPosition: number, cellsHeight: number, chunkRenderY: number): number;
+/**
+ *
+ * @param paginationHeight height of pagination of the vertical axis of the grid
+ * @param chunkRenderY extra rendered cells in every column
+ * @param offset offset from top of the list
+ * @param listElementsIds all ids array
+ * @returns Array of the destinies that will be rendered
+ */
+export declare function defineListElementsArrayVisibleList(paginationHeight: number, chunkRenderY: number, offset: number, listElementsIds: string[] | number[]): string[] | number[];
+/**
+ *
+ * @param leftPagination number of cells to the left
+ * @param language language object for traductions
+ * @returns string of the date, month followed by year
+ */
+export declare function defineMonthsArray(leftPagination: number, rightPagination: number, language: languageType): JSX.Element[];
+/**
+ *
+ * @param holdingClic boolean to know if mouse id down
+ * @param xClientPosition position x of the client
+ * @param yClientPosition position y of the client
+ * @param widthHorizontalBorder horizontal border of activation
+ * @param widthVerticalBorder vertical border of activation
+ * @param gridRef ref ofthe grid container
+ */
+export declare function startAuthomaticScrollInGrid(holdingClic: boolean, xClientPosition: number, yClientPosition: number, widthHorizontalBorder: number, widthVerticalBorder: number, gridRef: React.RefObject<HTMLDivElement>): void;
+/**
+ *
+ * @param holdingClic boolean to know if mouse id down
+ * @param xClientPosition position x of the client
+ * @param yClientPosition position y of the client
+ * @param widthHorizontalBorder horizontal border of activation
+ * @param widthVerticalBorder vertical border of activation
+ * @param gridContainer grid container
+ */
+export declare function authomaticScrollInGrid(holdingClic: boolean, xClientPosition: number | undefined, yClientPosition: number | undefined, widthHorizontalBorder: number, widthVerticalBorder: number, gridContainer: HTMLDivElement): void;

package/dist/esm/components/Multicalendar/MulticalendarOwnFunctions.js

@@ -0,0 +1,176 @@
+import React from "react";
+//Utils
+import jsToSqlDate from "../../utils/jsToSqlDate";
+import monthYearString from "../../utils/monthYearString";
+//Variables
+import { millisecondsOfOneDay } from "../../common/constants";
+/**
+ *
+ * @param dateObject Date Object
+ * @param elementRef ref of the element that will be scrolled
+ * @param leftPagination number of cells to the left
+ * @param cellsWidth width of cells
+ */
+export function scrollByDate(dateObject, elementRef, leftPagination, cellsWidth) {
+    //nueva posicion de scroll horizontal = cantidad de dias hasta hoy * ancho de celda
+    if (elementRef.current !== null) {
+        elementRef.current.scrollLeft =
+            ((Date.parse(dateObject.toString()) -
+                (Date.parse(new Date().toString()) -
+                    (leftPagination) * millisecondsOfOneDay)) /
+                millisecondsOfOneDay) *
+                cellsWidth;
+    }
+}
+/**
+ *
+ * @param xPosition position X of grid
+ * @param cellsWidth width of grid cells
+ * @param leftPagination number of cells to the left
+ * @param initialDateOffset offset of cells for the initial date
+ * @returns milliseconds of the minimal date
+ */
+export function minimalDateMilliseconds(xPosition, cellsWidth, leftPagination, initialDateOffset) {
+    let minimalDate = new Date(Date.parse(new Date().toString()) +
+        millisecondsOfOneDay *
+            (Math.floor(xPosition / cellsWidth) - leftPagination - initialDateOffset));
+    minimalDate.setHours(12, 0, 0, 0);
+    return Date.parse(minimalDate.toString());
+}
+/**
+ *
+ * @param millisecondsOfMinimalDate milliseconds of the minimal date
+ * @param initialDateOffset offset of number of cells for initial date
+ * @returns The minimal visible date object
+ */
+export function defineMinimalVisibleDate(millisecondsOfMinimalDate, initialDateOffset) {
+    return new Date(millisecondsOfMinimalDate + initialDateOffset * millisecondsOfOneDay);
+}
+/**
+ *
+ * @param xPosition current x position in the grid horizontal scroll
+ * @param cellsWidth width of grid cells
+ * @param chunkRenderX extra rendered cells in a row
+ * @returns number X offset
+ */
+export function defineXOffset(xPosition, cellsWidth, chunkRenderX) {
+    return Math.floor(xPosition / cellsWidth) - chunkRenderX;
+}
+/**
+ *
+ * @param paginationWidth width of pagination of horizontal axis of the grid
+ * @param chunkRenderX extra rendered cells in every row
+ * @param minimalDateMilliseconds milliseconds of the minimal date
+ * @returns an array containing all the dates that should be rendered base on position of x scroll
+ */
+export function defineVisibleDatesArray(paginationWidth, chunkRenderX, minimalDateMilliseconds) {
+    let array = [];
+    for (let index = 0; index < paginationWidth + chunkRenderX * 2; index++) {
+        array[index] = new Date(minimalDateMilliseconds + millisecondsOfOneDay * (index + 1));
+    }
+    return array;
+}
+/**
+ *
+ * @param yPosition current y position in the grid vertical scroll
+ * @param cellsHeight height of grid cells
+ * @param chunkRenderY extra rendered cells in every column
+ * @returns number Y offset
+ */
+export function defineYOffset(yPosition, cellsHeight, chunkRenderY) {
+    let desfase = Math.floor(yPosition / cellsHeight) - chunkRenderY;
+    if (desfase < 0)
+        desfase = 0;
+    return desfase;
+}
+/**
+ *
+ * @param paginationHeight height of pagination of the vertical axis of the grid
+ * @param chunkRenderY extra rendered cells in every column
+ * @param offset offset from top of the list
+ * @param listElementsIds all ids array
+ * @returns Array of the destinies that will be rendered
+ */
+export function defineListElementsArrayVisibleList(paginationHeight, chunkRenderY, offset, listElementsIds) {
+    let array = [];
+    for (let index = 0; index < paginationHeight + chunkRenderY * 2; index++) {
+        if (listElementsIds[index + offset] && index + offset >= 0)
+            array[index] = listElementsIds[index + offset];
+    }
+    return array;
+}
+/**
+ *
+ * @param leftPagination number of cells to the left
+ * @param language language object for traductions
+ * @returns string of the date, month followed by year
+ */
+export function defineMonthsArray(leftPagination, rightPagination, language) {
+    let minimumDateMilliseconds = Date.parse(new Date().toString()) - leftPagination * millisecondsOfOneDay;
+    let maximumDateMilliseconds = Date.parse(new Date().toString()) + rightPagination * millisecondsOfOneDay;
+    let array = [];
+    let sideArray = [];
+    for (let index = 0; index * millisecondsOfOneDay + minimumDateMilliseconds < maximumDateMilliseconds; index++) {
+        let dateObject = new Date(millisecondsOfOneDay * index + minimumDateMilliseconds);
+        let firstDayOfTheMonth = dateObject;
+        firstDayOfTheMonth.setDate(1);
+        firstDayOfTheMonth.setHours(12, 0, 0, 0);
+        let dateString = monthYearString(dateObject, language);
+        if (!sideArray.includes(dateString)) {
+            sideArray.push(dateString);
+            array.push(React.createElement("option", {
+                key: jsToSqlDate(firstDayOfTheMonth),
+                value: jsToSqlDate(firstDayOfTheMonth),
+            }, dateString));
+        }
+    }
+    return array;
+}
+/**
+ *
+ * @param holdingClic boolean to know if mouse id down
+ * @param xClientPosition position x of the client
+ * @param yClientPosition position y of the client
+ * @param widthHorizontalBorder horizontal border of activation
+ * @param widthVerticalBorder vertical border of activation
+ * @param gridRef ref ofthe grid container
+ */
+export function startAuthomaticScrollInGrid(holdingClic, xClientPosition, yClientPosition, widthHorizontalBorder, widthVerticalBorder, gridRef) {
+    if (holdingClic && gridRef.current !== null) {
+        if (xClientPosition < widthHorizontalBorder)
+            gridRef.current.scrollLeft -= 10;
+        if (xClientPosition > gridRef.current.offsetWidth - widthHorizontalBorder)
+            gridRef.current.scrollLeft += 10;
+        if (yClientPosition < widthVerticalBorder)
+            gridRef.current.scrollTop -= 10;
+        if (yClientPosition > gridRef.current.offsetHeight - widthVerticalBorder)
+            gridRef.current.scrollTop += 10;
+    }
+}
+/**
+ *
+ * @param holdingClic boolean to know if mouse id down
+ * @param xClientPosition position x of the client
+ * @param yClientPosition position y of the client
+ * @param widthHorizontalBorder horizontal border of activation
+ * @param widthVerticalBorder vertical border of activation
+ * @param gridContainer grid container
+ */
+export function authomaticScrollInGrid(holdingClic, xClientPosition, yClientPosition, widthHorizontalBorder, widthVerticalBorder, gridContainer) {
+    if (holdingClic) {
+        if (xClientPosition) {
+            if (xClientPosition < widthHorizontalBorder)
+                gridContainer.scrollLeft -= widthHorizontalBorder - xClientPosition;
+            if (xClientPosition > gridContainer.offsetWidth - widthHorizontalBorder)
+                gridContainer.scrollLeft +=
+                    xClientPosition + widthHorizontalBorder - gridContainer.offsetWidth;
+        }
+        if (yClientPosition) {
+            if (yClientPosition < widthVerticalBorder)
+                gridContainer.scrollTop -= widthVerticalBorder - yClientPosition;
+            if (yClientPosition > gridContainer.offsetHeight - widthVerticalBorder)
+                gridContainer.scrollTop +=
+                    yClientPosition + widthVerticalBorder - gridContainer.offsetHeight;
+        }
+    }
+}

package/dist/esm/components/Multicalendar/subcomponents/composites/CellsRow/CellsRow.css

@@ -0,0 +1,5 @@
+.cells-row {
+  display: flex;
+  flex-flow: row;
+}
+

package/dist/esm/components/Multicalendar/subcomponents/composites/CellsRow/CellsRow.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import "./CellsRow.css";
+import { CellsRowsPropsType } from "./types";
+declare const CellsRow: ({ listElementId, visibleDatesArray, width, height, cellsWidth, cellsHeight, ReactCellChildren, }: CellsRowsPropsType) => React.JSX.Element;
+export default CellsRow;

package/dist/esm/components/Multicalendar/subcomponents/composites/CellsRow/CellsRow.js

@@ -0,0 +1,15 @@
+import React from "react";
+import "./CellsRow.css";
+//Componentes
+import Cell from "../../individuals/Cell/Cell";
+//Utils
+import jsToSqlDate from "../../../../../utils/jsToSqlDate";
+const CellsRow = ({ listElementId, visibleDatesArray, width, height, cellsWidth, cellsHeight, ReactCellChildren, }) => {
+    //Render
+    return (React.createElement("div", { className: "cells-row", style: {
+            width: width,
+            height: height,
+        } }, visibleDatesArray.length > 0 &&
+        visibleDatesArray.map((date) => (React.createElement(Cell, { key: listElementId + date.toString(), date: jsToSqlDate(date), listElementId: listElementId, width: cellsWidth, heigth: cellsHeight, ReactCellChildren: ReactCellChildren })))));
+};
+export default CellsRow;

package/dist/esm/components/Multicalendar/subcomponents/composites/CellsRow/types.d.ts

@@ -0,0 +1,11 @@
+import { ReactCellChildrenType } from "../../../types";
+
+export interface CellsRowsPropsType {
+  listElementId: string | number;
+  visibleDatesArray: Date[];
+  width: number;
+  height: number;
+  cellsWidth: number;
+  cellsHeight: number;
+  ReactCellChildren: ReactCellChildrenType;
+}

package/dist/esm/components/Multicalendar/subcomponents/composites/DatesGrid/DatesGrid.css

@@ -0,0 +1,6 @@
+.dates-grid {
+  box-sizing: border-box;
+}
+.dates-grid .div-cells-row-height {
+  box-sizing: border-box;
+}

package/dist/esm/components/Multicalendar/subcomponents/composites/DatesGrid/DatesGrid.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import "./DatesGrid.css";
+import { DatesGridPropTypes } from "./types";
+declare const DatesGrid: ({ gridWidth, gridHeight, xOffset, yOffset, cellsWidth, cellsHeight, visibleListElementsIdsArray, visibleDates, ReactCellChildren, }: DatesGridPropTypes) => React.JSX.Element;
+export default DatesGrid;