josenanodev-react-components-library 1.0.3 → 1.0.4

package/dist/cjs/components/Modal/Modal.js

@@ -0,0 +1,82 @@
+"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 react_dom_1 = __importDefault(require("react-dom"));
+require("./Modal.css");
+//Hooks
+const useOutsideClick_1 = __importDefault(require("../../hooks/useOutsideClick"));
+const Modal = ({ children, visibility, forced = false, onOpen, onClose, transitionTime = 500, }) => {
+    //Refs
+    const modalRef = (0, react_1.useRef)(null);
+    //Estados
+    const [visible, setVisible] = (0, react_1.useState)(visibility);
+    //Hooks
+    (0, useOutsideClick_1.default)(modalRef, () => {
+        if (modalRef.current !== null && !forced) {
+            modalRef.current.className = "close-modal";
+            setTimeout(() => {
+                setVisible(false);
+                if (onClose)
+                    onClose();
+            }, transitionTime - 50);
+        }
+    });
+    //UseEffect
+    (0, react_1.useEffect)(() => {
+        if (visibility) {
+            setVisible(true);
+            if (onOpen)
+                onOpen();
+        }
+        else if (!visibility) {
+            setTimeout(() => {
+                setVisible(false);
+                if (onClose)
+                    onClose();
+            }, transitionTime - 50);
+        }
+    }, [visibility, transitionTime, onOpen, onClose]);
+    //Render
+    if (visible) {
+        return react_dom_1.default.createPortal(react_1.default.createElement("div", { ref: modalRef, className: visibility ? "trc-modal" : "trc-close-modal", style: { animationDuration: `${transitionTime}ms` }, onClick: (event) => {
+                if (event.target.id === "modal" && !forced) {
+                    event.target.id = "close-modal";
+                    setTimeout(() => {
+                        setVisible(false);
+                        if (onClose)
+                            onClose();
+                    }, transitionTime - 50);
+                }
+            } }, children), document.getElementById("root") || document.body);
+    }
+    else {
+        return react_1.default.createElement(react_1.default.Fragment, null);
+    }
+};
+exports.default = Modal;

package/dist/cjs/components/Modal/types.d.ts

@@ -0,0 +1,8 @@
+export interface ModalPropsType {
+  children: JSX.Element;
+  visibility: boolean;
+  forced?: boolean;
+  onOpen?: Function;
+  onClose?: Function;
+  transitionTime?: number;
+}

package/dist/cjs/components/Multicalendar/Multicalendar.css

@@ -0,0 +1,191 @@
+.trc-multicalendar {
+  display: grid;
+  color: black;
+  width: 100%;
+  height: 100%;
+  grid-template-areas:
+    "fil con"
+    "fil hor"
+    "ver gri";
+  text-align: center;
+  transition: 0.5s;
+}
+
+.trc-multicalendar .div-upper-left-component {
+  grid-area: fil;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  background-color: white;
+  border-bottom: 1px solid rgb(235, 235, 235);
+  border-right: 1px solid rgb(235, 235, 235);
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.trc-multicalendar .controls {
+  grid-area: con;
+  height: 100%;
+  padding: 2px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap-reverse;
+  box-sizing: border-box;
+  border-bottom: var(--border-tenues);
+}
+
+.trc-multicalendar .div-upper-left-component {
+  grid-area: fil;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  background-color: white;
+  border-bottom: 1px solid rgb(235, 235, 235);
+  border-right: 1px solid rgb(235, 235, 235);
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: column;
+  justify-content: flex-end;
+}
+
+
+.trc-multicalendar .vertical-axis {
+  grid-area: ver;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  box-shadow: rgb(0 0 0 / 15%) 0px 0px 16px 5px;
+  z-index: 1;
+}
+
+.trc-multicalendar .horizontal-axis {
+  grid-area: hor;
+  position: relative;
+  max-width: 100%;
+  height: 90px;
+}
+
+.trc-multicalendar .controls .div-dates-navigation {
+  display: flex;
+  align-items: center;
+}
+
+.trc-multicalendar .controls .div-dates-navigation button {
+  cursor: pointer;
+  margin: 0px;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  border: 1px solid rgb(216, 216, 216);
+  padding: 4px 8px;
+  box-sizing: border-box;
+  color: black;
+  font-size: 14px;
+  touch-action: manipulation;
+  border-radius: 6px;
+  background: rgb(255, 255, 255);
+  font-weight: normal;
+  height: calc(100% - 16px);
+}
+
+.trc-multicalendar .controls .div-aditional-controls-components {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  flex-grow: 1;
+}
+
+.trc-multicalendar .div-main-container {
+  grid-area: gri;
+  height: 100%;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+.trc-multicalendar .div-main-container .div-cargando-contenedor-principal {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 2;
+  background-color: rgba(236, 236, 236, 0.8);
+}
+
+.trc-multicalendar .main-container {
+  position: relative;
+  min-width: 100%;
+  height: 100%;
+  overflow-x: scroll;
+}
+
+.trc-multicalendar .vertical-axis .div-list-element-column {
+  height: 100%;
+  overflow-y: scroll;
+  box-sizing: border-box;
+}
+
+.trc-multicalendar .horizontal-axis .div-weeks-buttons {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 74px;
+}
+
+.trc-multicalendar .horizontal-axis .div-weeks-buttons .past-week-button,
+.trc-multicalendar .horizontal-axis .div-weeks-buttons .next-week-button {
+  z-index: 2;
+  position: absolute;
+  background-color: transparent;
+  border: none;
+  height: 100%;
+  width: 32px;
+  font-size: 1em;
+  color: var(--primary-color);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.3s;
+  height: 75%;
+  background: rgb(255 255 255);
+  box-shadow: 0px 0px 8px 8px white;
+}
+
+.trc-multicalendar .horizontal-axis .div-weeks-buttons .past-week-button:hover,
+.trc-multicalendar .horizontal-axis .div-weeks-buttons .next-week-button:hover {
+  background: rgb(247, 247, 247);
+  box-shadow: 0px 0px 8px 8px rgb(247 247 247);
+}
+
+.trc-multicalendar .horizontal-axis .div-weeks-buttons .past-week-button:active,
+.trc-multicalendar .horizontal-axis .div-weeks-buttons .next-week-button:active {
+  background: rgb(167, 167, 167);
+  box-shadow: 0px 0px 8px 8px rgb(167, 167, 167);
+}
+
+.trc-multicalendar .horizontal-axis .div-weeks-buttons .past-week-button {
+  left: 5px;
+}
+
+.trc-multicalendar .horizontal-axis .div-weeks-buttons .next-week-button {
+  right: 5px;
+}
+
+.trc-multicalendar .horizontal-axis .div-dates-row {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  overflow-x: scroll;
+  border-bottom: 1px solid rgb(235, 235, 235);
+  box-sizing: border-box;
+}

package/dist/cjs/components/Multicalendar/Multicalendar.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import "./Multicalendar.css";
+import { MulticalendarPropsType } from "./types";
+declare const Multicalendar: ({ multicalendarId, ReactCellChildren, ReactListElementChildren, listElementsIdsArray, language, pastDatesVisible, cellsWidth, cellsHeight, verticalAxisWidth, pastDaysInitialQuantity, futureDaysInitialQuantity, chunkRenderX, chunkRenderY, dynamicDaysQuantity, authomaticScrollOnDraggingOverEdges, waitTimeForCalls, callsOnInitialView, callsOnScrollingStops, aditionalControlsComponents, upperLeftComponent, autoSavePosition, onScrollTopChanges, onScrollLeftChanges, }: MulticalendarPropsType) => React.JSX.Element;
+export default Multicalendar;

package/dist/cjs/components/Multicalendar/Multicalendar.js

@@ -0,0 +1,369 @@
+"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 Funciones = __importStar(require("./MulticalendarOwnFunctions"));
+require("./Multicalendar.css");
+//Assets
+const bs_1 = require("react-icons/bs");
+//Componentes
+const DatesRow_1 = __importDefault(require("./subcomponents/individuals/DatesRow/DatesRow"));
+const ListElementsColumn_1 = __importDefault(require("./subcomponents/composites/ListElementsColumn/ListElementsColumn"));
+const DatesGrid_1 = __importDefault(require("./subcomponents/composites/DatesGrid/DatesGrid"));
+const DropdownMonthNavigation_1 = __importDefault(require("./subcomponents/individuals/DropdownMonthNavigation/DropdownMonthNavigation"));
+//Hooks
+const useWindowsSize_1 = __importDefault(require("../../hooks/useWindowsSize"));
+//Utils
+const sqlToJsDate_1 = __importDefault(require("../../utils/sqlToJsDate"));
+//Services
+const MulticalendarStatesAndSettings_1 = require("../../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 = (0, react_1.useRef)(null);
+    const destiniesColumnRef = (0, react_1.useRef)(null);
+    const gridWrapperRef = (0, react_1.useRef)(null);
+    const controlsWrapperRef = (0, react_1.useRef)(null);
+    const horizontalAxisWrapperRef = (0, react_1.useRef)(null);
+    //Estados
+    const [firtsCallOnInitialViewDone, setFirtsCallOnInitialViewDone] = (0, react_1.useState)(false);
+    const [windowWidth, windowHeight] = (0, useWindowsSize_1.default)();
+    const [futureDaysQuantity, setFutureDaysQuantity] = (0, react_1.useState)(Math.ceil(futureDaysInitialQuantity));
+    const [pastDaysQuantity, setPastDaysQuantity] = (0, react_1.useState)(pastDatesVisible ? Math.ceil(pastDaysInitialQuantity) : 0);
+    const [paginationWidth, setPaginationWidth] = (0, react_1.useState)(0);
+    const [paginationHeight, setPaginationHeight] = (0, react_1.useState)(0);
+    const [xOffset, setXOffset] = (0, react_1.useState)(1);
+    const [yOffset, setYOffset] = (0, react_1.useState)(0);
+    const [visibleDates, setVisibleDates] = (0, react_1.useState)([]);
+    const [visibleListElementsIds, setVisibleListElementsIds] = (0, react_1.useState)([]);
+    const [updateList, setUpdateList] = (0, react_1.useState)(false);
+    const [origin, setOrigin] = (0, react_1.useState)({
+        x: (0, MulticalendarStatesAndSettings_1.getMulticalendarScrollLeftPosition)(multicalendarId)
+            ? Number((0, MulticalendarStatesAndSettings_1.getMulticalendarScrollLeftPosition)(multicalendarId))
+            : pastDatesVisible
+                ? Math.ceil(pastDaysInitialQuantity) * cellsWidth
+                : 0,
+        y: (0, MulticalendarStatesAndSettings_1.getMulticalendarScrollTopPosition)(multicalendarId)
+            ? Number((0, MulticalendarStatesAndSettings_1.getMulticalendarScrollTopPosition)(multicalendarId))
+            : 0,
+    });
+    const [xPosition, setXPosition] = (0, react_1.useState)(origin.x);
+    const [yPosition, setYPosition] = (0, react_1.useState)(origin.y);
+    const [renderCoordinates, setRenderCoordinates] = (0, react_1.useState)({
+        x: origin.x,
+        y: origin.y,
+    });
+    const [initialPositioningDone, setInitialPositioningDone] = (0, react_1.useState)(false);
+    const [minimumVisibleDate, setMinimumVisibleDate] = (0, react_1.useState)(new Date());
+    const [idTimeoutForCalls, setIdTimeoutForCalls] = (0, react_1.useState)(undefined);
+    const [clientXPositionOnGrid, setClientXPositionOnGrid] = (0, react_1.useState)(undefined);
+    const [clientYPositionOnGrid, setClientYPositionOnGrid] = (0, react_1.useState)(undefined);
+    const [scrollingOnCourse, setScrollingOnCourse] = (0, react_1.useState)(false);
+    const [controlsWrapperHeight, setControlsWrapperHeight] = (0, react_1.useState)(((_a = controlsWrapperRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) ? controlsWrapperRef.current.clientHeight : 0);
+    const [horizontalAxisWrapperHeight, setHorizontalAxisWrapperHeight] = (0, react_1.useState)(((_b = horizontalAxisWrapperRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)
+        ? horizontalAxisWrapperRef.current.clientHeight
+        : 0);
+    const [userIsHoldingMouseDown, setUserIsHoldingMouseDown] = (0, react_1.useState)(false);
+    //UseEffect
+    (0, react_1.useEffect)(() => {
+        setOrigin({
+            x: pastDatesVisible ? Math.ceil(pastDaysInitialQuantity) * cellsWidth : 0,
+            y: 0,
+        });
+    }, [pastDatesVisible, pastDaysInitialQuantity, cellsWidth]);
+    (0, react_1.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]);
+    (0, react_1.useEffect)(() => {
+        if (onScrollLeftChanges) {
+            onScrollLeftChanges(xPosition);
+        }
+        if (onScrollTopChanges) {
+            onScrollTopChanges(yPosition);
+        }
+        return () => {
+            if (autoSavePosition) {
+                if (yPosition !== origin.y) {
+                    (0, MulticalendarStatesAndSettings_1.setMulticalendarScrollTopPosition)(multicalendarId, String(yPosition));
+                }
+                if (xPosition !== origin.x) {
+                    (0, MulticalendarStatesAndSettings_1.setMulticalendarScrollLeftPosition)(multicalendarId, String(xPosition));
+                }
+            }
+        };
+    }, [autoSavePosition, yPosition, xPosition, origin.y, origin.x]);
+    (0, react_1.useEffect)(() => {
+        if (pastDatesVisible) {
+            setPastDaysQuantity(Math.ceil(pastDaysInitialQuantity));
+        }
+        else {
+            setPastDaysQuantity(0);
+        }
+    }, [pastDatesVisible, pastDaysInitialQuantity]);
+    (0, react_1.useEffect)(() => {
+        if (!firtsCallOnInitialViewDone &&
+            visibleListElementsIds.length > 0 &&
+            visibleDates.length > 0 &&
+            callsOnInitialView) {
+            setFirtsCallOnInitialViewDone(true);
+            callsOnInitialView(visibleListElementsIds, visibleDates);
+        }
+    }, [
+        firtsCallOnInitialViewDone,
+        visibleListElementsIds,
+        visibleDates,
+        callsOnInitialView,
+    ]);
+    (0, react_1.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,
+    ]);
+    (0, react_1.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,
+    ]);
+    (0, react_1.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,
+    ]);
+    (0, react_1.useEffect)(() => {
+        setScrollingOnCourse(true);
+        clearTimeout(idTimeoutForCalls);
+        setIdTimeoutForCalls(undefined);
+        // eslint-disable-next-line
+    }, [xPosition, yPosition]);
+    (0, react_1.useEffect)(() => {
+        if (idTimeoutForCalls === undefined) {
+            let _id = setTimeout(() => setScrollingOnCourse(false), waitTimeForCalls);
+            setIdTimeoutForCalls(_id);
+        }
+    }, [xPosition, yPosition, idTimeoutForCalls, waitTimeForCalls]);
+    (0, react_1.useEffect)(() => {
+        if (!scrollingOnCourse && callsOnScrollingStops) {
+            callsOnScrollingStops(visibleListElementsIds, visibleDates);
+        }
+        // eslint-disable-next-line
+    }, [scrollingOnCourse, visibleListElementsIds, visibleDates]);
+    //Cancelar idIntervalo Autoscroll de rango cuando se deja de seleccionar
+    (0, react_1.useEffect)(() => {
+        if (!authomaticScrollOnDraggingOverEdges) {
+            if (clientXPositionOnGrid !== undefined)
+                setClientXPositionOnGrid(undefined);
+            if (clientYPositionOnGrid !== undefined)
+                setClientYPositionOnGrid(undefined);
+        }
+    }, [authomaticScrollOnDraggingOverEdges, clientXPositionOnGrid, clientYPositionOnGrid]);
+    (0, react_1.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_1.default.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_1.default.createElement("div", { ref: controlsWrapperRef, className: "controls" },
+            react_1.default.createElement("div", { className: "div-dates-navigation" },
+                react_1.default.createElement(DropdownMonthNavigation_1.default, { visibleYear: minimumVisibleDate.getFullYear(), visibleMonth: minimumVisibleDate.getMonth(), onChangeAction: (valorDeOpcion) => {
+                        Funciones.scrollByDate(new Date(Number(Date.parse((0, sqlToJsDate_1.default)(valorDeOpcion).toString()))), gridWrapperRef, pastDaysQuantity, cellsWidth);
+                    }, options: Funciones.defineMonthsArray(pastDaysQuantity, futureDaysQuantity, language) }),
+                react_1.default.createElement("button", { onClick: () => Funciones.scrollByDate(new Date(), gridWrapperRef, pastDaysQuantity, cellsWidth) }, language["Today"])),
+            aditionalControlsComponents && (react_1.default.createElement("div", { className: "div-aditional-controls-components" }, aditionalControlsComponents))),
+        react_1.default.createElement("div", { className: "div-upper-left-component" }, upperLeftComponent),
+        react_1.default.createElement("div", { className: "vertical-axis" },
+            react_1.default.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_1.default.createElement(ListElementsColumn_1.default, { listHeight: cellsHeight * listElementsIdsArray.length, yOffset: yOffset, elementsHeight: cellsHeight, idsArray: visibleListElementsIds, ReactListElementChildren: ReactListElementChildren }))),
+        react_1.default.createElement("div", { ref: horizontalAxisWrapperRef, className: "horizontal-axis" },
+            react_1.default.createElement("div", { className: "div-weeks-buttons" },
+                react_1.default.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_1.default.createElement(bs_1.BsChevronLeft, null)),
+                react_1.default.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_1.default.createElement(bs_1.BsChevronRight, null))),
+            react_1.default.createElement("div", { ref: datesRowRef, className: "div-dates-row", onScroll: (e) => {
+                    if (gridWrapperRef.current !== null)
+                        gridWrapperRef.current.scrollLeft = e.target.scrollLeft;
+                } },
+                react_1.default.createElement(DatesRow_1.default, { visibleDates: visibleDates, width: (pastDaysQuantity + futureDaysQuantity) * cellsWidth, height: 74, cellsWidth: cellsWidth, cellsHeight: 74, offset: xOffset, language: language }))),
+        react_1.default.createElement("div", { className: "div-main-container" },
+            react_1.default.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_1.default.createElement(DatesGrid_1.default, { gridWidth: (pastDaysQuantity + futureDaysQuantity) * cellsWidth, gridHeight: cellsHeight * listElementsIdsArray.length, xOffset: xOffset, yOffset: yOffset, cellsWidth: cellsWidth, cellsHeight: cellsHeight, visibleListElementsIdsArray: visibleListElementsIds, visibleDates: visibleDates, ReactCellChildren: ReactCellChildren })))));
+};
+exports.default = Multicalendar;