josenanodev-react-components-library 0.2.13 → 0.2.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/cjs/components/Multicalendar/Multicalendar.css +2 -2
  2. package/dist/cjs/components/Multicalendar/Multicalendar.d.ts +1 -1
  3. package/dist/cjs/components/Multicalendar/Multicalendar.js +47 -17
  4. package/dist/cjs/components/Multicalendar/types.d.ts +1 -1
  5. package/dist/esm/components/Multicalendar/Multicalendar.css +2 -2
  6. package/dist/esm/components/Multicalendar/Multicalendar.d.ts +1 -1
  7. package/dist/esm/components/Multicalendar/Multicalendar.js +47 -17
  8. package/dist/esm/components/Multicalendar/types.d.ts +1 -1
  9. package/package.json +1 -1
package/dist/cjs/components/Multicalendar/Multicalendar.css CHANGED
@@ -69,7 +69,7 @@
69
69
  grid-area: hor;
70
70
  position: relative;
71
71
  max-width: 100%;
72
- height: 100%;
72
+ height: 90px;
73
73
  }
74
74
 
75
75
  .multicalendar .controls .div-dates-navigation {
@@ -140,7 +140,7 @@
140
140
  position: absolute;
141
141
  bottom: 0;
142
142
  width: 100%;
143
- height: 64px;
143
+ height: 74px;
144
144
  }
145
145
 
146
146
  .multicalendar .horizontal-axis .div-weeks-buttons .past-week-button,
package/dist/cjs/components/Multicalendar/Multicalendar.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
2
  import "./Multicalendar.css";
3
3
  import { MulticalendarPropsType } from "./types";
4
- declare const Multicalendar: ({ multicalendarId, ReactCellChildren, ReactListElementChildren, listElementsIdsArray, language, pastDatesVisible, cellsWidth, cellsHeight, verticalAxisWidth, horizontalAxisHeight, pastDaysInitialQuantity, futureDaysInitialQuantity, chunkRenderX, chunkRenderY, dynamicDaysQuantity, draggingOverDateCells, waitTimeForCalls, callsOnInitialView, callsOnScrollingStops, aditionalControlsComponents, upperLeftComponent, autoSavePosition, onScrollTopChanges, onScrollLeftChanges, }: MulticalendarPropsType) => JSX.Element;
4
+ 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) => JSX.Element;
5
5
  export default Multicalendar;
package/dist/cjs/components/Multicalendar/Multicalendar.js CHANGED
@@ -42,7 +42,7 @@ const useWindowsSize_1 = __importDefault(require("../../hooks/useWindowsSize"));
42
42
  const sqlToJsDate_1 = __importDefault(require("../../utils/sqlToJsDate"));
43
43
  //Services
44
44
  const MulticalendarStatesAndSettings_1 = require("../../Services/MulticalendarStatesAndSettings");
45
- const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChildren, listElementsIdsArray, language, pastDatesVisible = true, cellsWidth = 120, cellsHeight = 80, verticalAxisWidth = 280, horizontalAxisHeight = 148, pastDaysInitialQuantity = 365, futureDaysInitialQuantity = 365, chunkRenderX = 0, chunkRenderY = 0, dynamicDaysQuantity = false, draggingOverDateCells = false, waitTimeForCalls = 500, callsOnInitialView, callsOnScrollingStops, aditionalControlsComponents, upperLeftComponent, autoSavePosition, onScrollTopChanges, onScrollLeftChanges, }) => {
45
+ 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, }) => {
46
46
  var _a, _b;
47
47
  //Constantes del componente
48
48
  const initialDateOffset = 1 + chunkRenderX;
@@ -51,6 +51,7 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
51
51
  const destiniesColumnRef = (0, react_1.useRef)(null);
52
52
  const gridWrapperRef = (0, react_1.useRef)(null);
53
53
  const controlsWrapperRef = (0, react_1.useRef)(null);
54
+ const horizontalAxisWrapperRef = (0, react_1.useRef)(null);
54
55
  //Estados
55
56
  const [firtsCallOnInitialViewDone, setFirtsCallOnInitialViewDone] = (0, react_1.useState)(false);
56
57
  const [windowWidth, windowHeight] = (0, useWindowsSize_1.default)();
@@ -85,7 +86,12 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
85
86
  const [clientXPositionOnGrid, setClientXPositionOnGrid] = (0, react_1.useState)(undefined);
86
87
  const [clientYPositionOnGrid, setClientYPositionOnGrid] = (0, react_1.useState)(undefined);
87
88
  const [scrollingOnCourse, setScrollingOnCourse] = (0, react_1.useState)(false);
88
- //UseEffects
89
+ const [controlsWrapperHeight, setControlsWrapperHeight] = (0, react_1.useState)(((_a = controlsWrapperRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) ? controlsWrapperRef.current.clientHeight : 0);
90
+ const [horizontalAxisWrapperHeight, setHorizontalAxisWrapperHeight] = (0, react_1.useState)(((_b = horizontalAxisWrapperRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)
91
+ ? horizontalAxisWrapperRef.current.clientHeight
92
+ : 0);
93
+ const [userIsHoldingMouseDown, setUserIsHoldingMouseDown] = (0, react_1.useState)(false);
94
+ //UseEffect
89
95
  (0, react_1.useEffect)(() => {
90
96
  setOrigin({
91
97
  x: pastDatesVisible ? Math.ceil(pastDaysInitialQuantity) * cellsWidth : 0,
@@ -141,10 +147,22 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
141
147
  callsOnInitialView,
142
148
  ]);
143
149
  (0, react_1.useEffect)(() => {
150
+ var _a, _b;
151
+ const localConstControlsWrapperHeight = ((_a = controlsWrapperRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight)
152
+ ? controlsWrapperRef.current.clientHeight
153
+ : 0;
154
+ const localConstHorizontalAxisWrapperHeight = ((_b = horizontalAxisWrapperRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)
155
+ ? horizontalAxisWrapperRef.current.clientHeight
156
+ : 0;
157
+ setControlsWrapperHeight(localConstControlsWrapperHeight);
158
+ setHorizontalAxisWrapperHeight(localConstHorizontalAxisWrapperHeight);
144
159
  setUpdateList(true);
145
160
  // Dimensiones de paginacion, requiere agregar 1 para no ver espacios en blanco
146
161
  setPaginationWidth(Math.ceil((windowWidth - verticalAxisWidth) / cellsWidth) + 1);
147
- setPaginationHeight(Math.ceil((windowHeight - horizontalAxisHeight) / cellsHeight) + 1);
162
+ setPaginationHeight(Math.ceil((windowHeight -
163
+ localConstControlsWrapperHeight -
164
+ localConstHorizontalAxisWrapperHeight) /
165
+ cellsHeight) + 1);
148
166
  // Redefinicion de posicion X ante cambios en el tamaño de la ventana
149
167
  if (gridWrapperRef.current !== null) {
150
168
  setXPosition(gridWrapperRef.current.scrollLeft);
@@ -158,7 +176,6 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
158
176
  windowWidth,
159
177
  windowHeight,
160
178
  verticalAxisWidth,
161
- horizontalAxisHeight,
162
179
  cellsHeight,
163
180
  cellsWidth,
164
181
  chunkRenderX,
@@ -247,22 +264,35 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
247
264
  }, [scrollingOnCourse, visibleListElementsIds, visibleDates]);
248
265
  //Cancelar idIntervalo Autoscroll de rango cuando se deja de seleccionar
249
266
  (0, react_1.useEffect)(() => {
250
- if (!draggingOverDateCells) {
267
+ if (!authomaticScrollOnDraggingOverEdges) {
251
268
  if (clientXPositionOnGrid !== undefined)
252
269
  setClientXPositionOnGrid(undefined);
253
270
  if (clientYPositionOnGrid !== undefined)
254
271
  setClientYPositionOnGrid(undefined);
255
272
  }
256
- }, [draggingOverDateCells, clientXPositionOnGrid, clientYPositionOnGrid]);
273
+ }, [authomaticScrollOnDraggingOverEdges, clientXPositionOnGrid, clientYPositionOnGrid]);
274
+ (0, react_1.useEffect)(() => {
275
+ console.log("addEventListener");
276
+ document.body.addEventListener("mousedown", () => {
277
+ setUserIsHoldingMouseDown(true);
278
+ });
279
+ document.body.addEventListener("mouseup", () => {
280
+ setUserIsHoldingMouseDown(false);
281
+ });
282
+ return () => {
283
+ console.log("removeEventListener");
284
+ document.body.removeEventListener("mousedown", () => {
285
+ setUserIsHoldingMouseDown(true);
286
+ });
287
+ document.body.removeEventListener("mouseup", () => {
288
+ setUserIsHoldingMouseDown(false);
289
+ });
290
+ };
291
+ }, [authomaticScrollOnDraggingOverEdges]);
257
292
  //Render
258
293
  return (react_1.default.createElement("div", { key: multicalendarId, id: multicalendarId, "data-testid": multicalendarId, className: "multicalendar", style: {
259
294
  gridTemplateColumns: `${verticalAxisWidth}px`,
260
- gridTemplateRows: `${((_a = controlsWrapperRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight)
261
- ? controlsWrapperRef.current.clientHeight
262
- : 0}px ${horizontalAxisHeight -
263
- (((_b = controlsWrapperRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)
264
- ? controlsWrapperRef.current.clientHeight
265
- : 0)}px calc(100% - ${horizontalAxisHeight}px`,
295
+ gridTemplateRows: `auto auto calc(100% - ${controlsWrapperHeight + horizontalAxisWrapperHeight}px`,
266
296
  } },
267
297
  react_1.default.createElement("div", { ref: controlsWrapperRef, className: "controls" },
268
298
  react_1.default.createElement("div", { className: "div-dates-navigation" },
@@ -279,7 +309,7 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
279
309
  gridWrapperRef.current.scrollTop = e.target.scrollTop;
280
310
  } },
281
311
  react_1.default.createElement(ListElementsColumn_1.default, { listHeight: cellsHeight * listElementsIdsArray.length, yOffset: yOffset, elementsHeight: cellsHeight, idsArray: visibleListElementsIds, ReactListElementChildren: ReactListElementChildren }))),
282
- react_1.default.createElement("div", { className: "horizontal-axis" },
312
+ react_1.default.createElement("div", { ref: horizontalAxisWrapperRef, className: "horizontal-axis" },
283
313
  react_1.default.createElement("div", { className: "div-weeks-buttons" },
284
314
  react_1.default.createElement("button", { className: "past-week-button", onClick: () => {
285
315
  // Se puede hacer funcion
@@ -301,7 +331,7 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
301
331
  if (gridWrapperRef.current !== null)
302
332
  gridWrapperRef.current.scrollLeft = e.target.scrollLeft;
303
333
  } },
304
- react_1.default.createElement(DatesRow_1.default, { visibleDates: visibleDates, width: (pastDaysQuantity + futureDaysQuantity) * cellsWidth, height: 64, cellsWidth: cellsWidth, cellsHeight: 64, offset: xOffset, language: language }))),
334
+ react_1.default.createElement(DatesRow_1.default, { visibleDates: visibleDates, width: (pastDaysQuantity + futureDaysQuantity) * cellsWidth, height: 74, cellsWidth: cellsWidth, cellsHeight: 74, offset: xOffset, language: language }))),
305
335
  react_1.default.createElement("div", { className: "div-main-container" },
306
336
  react_1.default.createElement("div", { ref: gridWrapperRef, className: "main-container", onScroll: (e) => {
307
337
  if (datesRowRef.current !== null) {
@@ -326,14 +356,14 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
326
356
  setPastDaysQuantity(pastDaysQuantity + 1);
327
357
  e.target.scrollLeft = cellsWidth * 3;
328
358
  }
329
- Funciones.authomaticScrollInGrid(draggingOverDateCells, clientXPositionOnGrid, clientYPositionOnGrid, cellsWidth, cellsHeight, e.target);
359
+ Funciones.authomaticScrollInGrid(userIsHoldingMouseDown, clientXPositionOnGrid, clientYPositionOnGrid, cellsWidth * 0.3, cellsHeight * 0.3, e.target);
330
360
  }, onMouseMove: (e) => {
331
- if (gridWrapperRef.current !== null && draggingOverDateCells) {
361
+ if (gridWrapperRef.current !== null && userIsHoldingMouseDown) {
332
362
  let x = e.clientX - gridWrapperRef.current.getBoundingClientRect().left;
333
363
  let y = e.clientY - gridWrapperRef.current.getBoundingClientRect().top;
334
364
  setClientXPositionOnGrid(x);
335
365
  setClientYPositionOnGrid(y);
336
- Funciones.startAuthomaticScrollInGrid(draggingOverDateCells, x, y, cellsWidth, cellsHeight, gridWrapperRef);
366
+ Funciones.startAuthomaticScrollInGrid(userIsHoldingMouseDown, x, y, cellsWidth * 0.3, cellsHeight * 0.3, gridWrapperRef);
337
367
  }
338
368
  } },
339
369
  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 })))));
package/dist/cjs/components/Multicalendar/types.d.ts CHANGED
@@ -15,7 +15,7 @@ export interface MulticalendarPropsType {
15
15
  futureDaysInitialQuantity?: number;
16
16
  chunkRenderX?: number;
17
17
  chunkRenderY?: number;
18
- draggingOverDateCells?: boolean;
18
+ authomaticScrollOnDraggingOverEdges?: boolean;
19
19
  dynamicDaysQuantity?: boolean;
20
20
  waitTimeForCalls?: number;
21
21
  callsOnInitialView?: (visibleIds: string[] | number[], visibleDates: Date[]) => void;
package/dist/esm/components/Multicalendar/Multicalendar.css CHANGED
@@ -69,7 +69,7 @@
69
69
  grid-area: hor;
70
70
  position: relative;
71
71
  max-width: 100%;
72
- height: 100%;
72
+ height: 90px;
73
73
  }
74
74
 
75
75
  .multicalendar .controls .div-dates-navigation {
@@ -140,7 +140,7 @@
140
140
  position: absolute;
141
141
  bottom: 0;
142
142
  width: 100%;
143
- height: 64px;
143
+ height: 74px;
144
144
  }
145
145
 
146
146
  .multicalendar .horizontal-axis .div-weeks-buttons .past-week-button,
package/dist/esm/components/Multicalendar/Multicalendar.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
2
  import "./Multicalendar.css";
3
3
  import { MulticalendarPropsType } from "./types";
4
- declare const Multicalendar: ({ multicalendarId, ReactCellChildren, ReactListElementChildren, listElementsIdsArray, language, pastDatesVisible, cellsWidth, cellsHeight, verticalAxisWidth, horizontalAxisHeight, pastDaysInitialQuantity, futureDaysInitialQuantity, chunkRenderX, chunkRenderY, dynamicDaysQuantity, draggingOverDateCells, waitTimeForCalls, callsOnInitialView, callsOnScrollingStops, aditionalControlsComponents, upperLeftComponent, autoSavePosition, onScrollTopChanges, onScrollLeftChanges, }: MulticalendarPropsType) => JSX.Element;
4
+ 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) => JSX.Element;
5
5
  export default Multicalendar;
package/dist/esm/components/Multicalendar/Multicalendar.js CHANGED
@@ -14,7 +14,7 @@ import useWindowSize from "../../hooks/useWindowsSize";
14
14
  import sqlToJsDate from "../../utils/sqlToJsDate";
15
15
  //Services
16
16
  import { getMulticalendarScrollLeftPosition, getMulticalendarScrollTopPosition, setMulticalendarScrollLeftPosition, setMulticalendarScrollTopPosition, } from "../../Services/MulticalendarStatesAndSettings";
17
- const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChildren, listElementsIdsArray, language, pastDatesVisible = true, cellsWidth = 120, cellsHeight = 80, verticalAxisWidth = 280, horizontalAxisHeight = 148, pastDaysInitialQuantity = 365, futureDaysInitialQuantity = 365, chunkRenderX = 0, chunkRenderY = 0, dynamicDaysQuantity = false, draggingOverDateCells = false, waitTimeForCalls = 500, callsOnInitialView, callsOnScrollingStops, aditionalControlsComponents, upperLeftComponent, autoSavePosition, onScrollTopChanges, onScrollLeftChanges, }) => {
17
+ 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, }) => {
18
18
  var _a, _b;
19
19
  //Constantes del componente
20
20
  const initialDateOffset = 1 + chunkRenderX;
@@ -23,6 +23,7 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
23
23
  const destiniesColumnRef = useRef(null);
24
24
  const gridWrapperRef = useRef(null);
25
25
  const controlsWrapperRef = useRef(null);
26
+ const horizontalAxisWrapperRef = useRef(null);
26
27
  //Estados
27
28
  const [firtsCallOnInitialViewDone, setFirtsCallOnInitialViewDone] = useState(false);
28
29
  const [windowWidth, windowHeight] = useWindowSize();
@@ -57,7 +58,12 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
57
58
  const [clientXPositionOnGrid, setClientXPositionOnGrid] = useState(undefined);
58
59
  const [clientYPositionOnGrid, setClientYPositionOnGrid] = useState(undefined);
59
60
  const [scrollingOnCourse, setScrollingOnCourse] = useState(false);
60
- //UseEffects
61
+ const [controlsWrapperHeight, setControlsWrapperHeight] = useState(((_a = controlsWrapperRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) ? controlsWrapperRef.current.clientHeight : 0);
62
+ const [horizontalAxisWrapperHeight, setHorizontalAxisWrapperHeight] = useState(((_b = horizontalAxisWrapperRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)
63
+ ? horizontalAxisWrapperRef.current.clientHeight
64
+ : 0);
65
+ const [userIsHoldingMouseDown, setUserIsHoldingMouseDown] = useState(false);
66
+ //UseEffect
61
67
  useEffect(() => {
62
68
  setOrigin({
63
69
  x: pastDatesVisible ? Math.ceil(pastDaysInitialQuantity) * cellsWidth : 0,
@@ -113,10 +119,22 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
113
119
  callsOnInitialView,
114
120
  ]);
115
121
  useEffect(() => {
122
+ var _a, _b;
123
+ const localConstControlsWrapperHeight = ((_a = controlsWrapperRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight)
124
+ ? controlsWrapperRef.current.clientHeight
125
+ : 0;
126
+ const localConstHorizontalAxisWrapperHeight = ((_b = horizontalAxisWrapperRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)
127
+ ? horizontalAxisWrapperRef.current.clientHeight
128
+ : 0;
129
+ setControlsWrapperHeight(localConstControlsWrapperHeight);
130
+ setHorizontalAxisWrapperHeight(localConstHorizontalAxisWrapperHeight);
116
131
  setUpdateList(true);
117
132
  // Dimensiones de paginacion, requiere agregar 1 para no ver espacios en blanco
118
133
  setPaginationWidth(Math.ceil((windowWidth - verticalAxisWidth) / cellsWidth) + 1);
119
- setPaginationHeight(Math.ceil((windowHeight - horizontalAxisHeight) / cellsHeight) + 1);
134
+ setPaginationHeight(Math.ceil((windowHeight -
135
+ localConstControlsWrapperHeight -
136
+ localConstHorizontalAxisWrapperHeight) /
137
+ cellsHeight) + 1);
120
138
  // Redefinicion de posicion X ante cambios en el tamaño de la ventana
121
139
  if (gridWrapperRef.current !== null) {
122
140
  setXPosition(gridWrapperRef.current.scrollLeft);
@@ -130,7 +148,6 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
130
148
  windowWidth,
131
149
  windowHeight,
132
150
  verticalAxisWidth,
133
- horizontalAxisHeight,
134
151
  cellsHeight,
135
152
  cellsWidth,
136
153
  chunkRenderX,
@@ -219,22 +236,35 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
219
236
  }, [scrollingOnCourse, visibleListElementsIds, visibleDates]);
220
237
  //Cancelar idIntervalo Autoscroll de rango cuando se deja de seleccionar
221
238
  useEffect(() => {
222
- if (!draggingOverDateCells) {
239
+ if (!authomaticScrollOnDraggingOverEdges) {
223
240
  if (clientXPositionOnGrid !== undefined)
224
241
  setClientXPositionOnGrid(undefined);
225
242
  if (clientYPositionOnGrid !== undefined)
226
243
  setClientYPositionOnGrid(undefined);
227
244
  }
228
- }, [draggingOverDateCells, clientXPositionOnGrid, clientYPositionOnGrid]);
245
+ }, [authomaticScrollOnDraggingOverEdges, clientXPositionOnGrid, clientYPositionOnGrid]);
246
+ useEffect(() => {
247
+ console.log("addEventListener");
248
+ document.body.addEventListener("mousedown", () => {
249
+ setUserIsHoldingMouseDown(true);
250
+ });
251
+ document.body.addEventListener("mouseup", () => {
252
+ setUserIsHoldingMouseDown(false);
253
+ });
254
+ return () => {
255
+ console.log("removeEventListener");
256
+ document.body.removeEventListener("mousedown", () => {
257
+ setUserIsHoldingMouseDown(true);
258
+ });
259
+ document.body.removeEventListener("mouseup", () => {
260
+ setUserIsHoldingMouseDown(false);
261
+ });
262
+ };
263
+ }, [authomaticScrollOnDraggingOverEdges]);
229
264
  //Render
230
265
  return (React.createElement("div", { key: multicalendarId, id: multicalendarId, "data-testid": multicalendarId, className: "multicalendar", style: {
231
266
  gridTemplateColumns: `${verticalAxisWidth}px`,
232
- gridTemplateRows: `${((_a = controlsWrapperRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight)
233
- ? controlsWrapperRef.current.clientHeight
234
- : 0}px ${horizontalAxisHeight -
235
- (((_b = controlsWrapperRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)
236
- ? controlsWrapperRef.current.clientHeight
237
- : 0)}px calc(100% - ${horizontalAxisHeight}px`,
267
+ gridTemplateRows: `auto auto calc(100% - ${controlsWrapperHeight + horizontalAxisWrapperHeight}px`,
238
268
  } },
239
269
  React.createElement("div", { ref: controlsWrapperRef, className: "controls" },
240
270
  React.createElement("div", { className: "div-dates-navigation" },
@@ -251,7 +281,7 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
251
281
  gridWrapperRef.current.scrollTop = e.target.scrollTop;
252
282
  } },
253
283
  React.createElement(ListElementsColumn, { listHeight: cellsHeight * listElementsIdsArray.length, yOffset: yOffset, elementsHeight: cellsHeight, idsArray: visibleListElementsIds, ReactListElementChildren: ReactListElementChildren }))),
254
- React.createElement("div", { className: "horizontal-axis" },
284
+ React.createElement("div", { ref: horizontalAxisWrapperRef, className: "horizontal-axis" },
255
285
  React.createElement("div", { className: "div-weeks-buttons" },
256
286
  React.createElement("button", { className: "past-week-button", onClick: () => {
257
287
  // Se puede hacer funcion
@@ -273,7 +303,7 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
273
303
  if (gridWrapperRef.current !== null)
274
304
  gridWrapperRef.current.scrollLeft = e.target.scrollLeft;
275
305
  } },
276
- React.createElement(DatesRow, { visibleDates: visibleDates, width: (pastDaysQuantity + futureDaysQuantity) * cellsWidth, height: 64, cellsWidth: cellsWidth, cellsHeight: 64, offset: xOffset, language: language }))),
306
+ React.createElement(DatesRow, { visibleDates: visibleDates, width: (pastDaysQuantity + futureDaysQuantity) * cellsWidth, height: 74, cellsWidth: cellsWidth, cellsHeight: 74, offset: xOffset, language: language }))),
277
307
  React.createElement("div", { className: "div-main-container" },
278
308
  React.createElement("div", { ref: gridWrapperRef, className: "main-container", onScroll: (e) => {
279
309
  if (datesRowRef.current !== null) {
@@ -298,14 +328,14 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
298
328
  setPastDaysQuantity(pastDaysQuantity + 1);
299
329
  e.target.scrollLeft = cellsWidth * 3;
300
330
  }
301
- Funciones.authomaticScrollInGrid(draggingOverDateCells, clientXPositionOnGrid, clientYPositionOnGrid, cellsWidth, cellsHeight, e.target);
331
+ Funciones.authomaticScrollInGrid(userIsHoldingMouseDown, clientXPositionOnGrid, clientYPositionOnGrid, cellsWidth * 0.3, cellsHeight * 0.3, e.target);
302
332
  }, onMouseMove: (e) => {
303
- if (gridWrapperRef.current !== null && draggingOverDateCells) {
333
+ if (gridWrapperRef.current !== null && userIsHoldingMouseDown) {
304
334
  let x = e.clientX - gridWrapperRef.current.getBoundingClientRect().left;
305
335
  let y = e.clientY - gridWrapperRef.current.getBoundingClientRect().top;
306
336
  setClientXPositionOnGrid(x);
307
337
  setClientYPositionOnGrid(y);
308
- Funciones.startAuthomaticScrollInGrid(draggingOverDateCells, x, y, cellsWidth, cellsHeight, gridWrapperRef);
338
+ Funciones.startAuthomaticScrollInGrid(userIsHoldingMouseDown, x, y, cellsWidth * 0.3, cellsHeight * 0.3, gridWrapperRef);
309
339
  }
310
340
  } },
311
341
  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 })))));
package/dist/esm/components/Multicalendar/types.d.ts CHANGED
@@ -15,7 +15,7 @@ export interface MulticalendarPropsType {
15
15
  futureDaysInitialQuantity?: number;
16
16
  chunkRenderX?: number;
17
17
  chunkRenderY?: number;
18
- draggingOverDateCells?: boolean;
18
+ authomaticScrollOnDraggingOverEdges?: boolean;
19
19
  dynamicDaysQuantity?: boolean;
20
20
  waitTimeForCalls?: number;
21
21
  callsOnInitialView?: (visibleIds: string[] | number[], visibleDates: Date[]) => void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "josenanodev-react-components-library",
3
- "version": "0.2.13",
3
+ "version": "0.2.15",
4
4
  "author": {
5
5
  "name": "Jose Carlos Cardenas Martinez"
6
6
  },