josenanodev-react-components-library 0.2.14 → 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 (7) hide show
  1. package/dist/cjs/components/Multicalendar/Multicalendar.d.ts +1 -1
  2. package/dist/cjs/components/Multicalendar/Multicalendar.js +26 -9
  3. package/dist/cjs/components/Multicalendar/types.d.ts +1 -1
  4. package/dist/esm/components/Multicalendar/Multicalendar.d.ts +1 -1
  5. package/dist/esm/components/Multicalendar/Multicalendar.js +26 -9
  6. package/dist/esm/components/Multicalendar/types.d.ts +1 -1
  7. package/package.json +1 -1
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, 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,9 +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,
46
- // horizontalAxisHeight = 148,
47
- 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, }) => {
48
46
  var _a, _b;
49
47
  //Constantes del componente
50
48
  const initialDateOffset = 1 + chunkRenderX;
@@ -92,7 +90,8 @@ pastDaysInitialQuantity = 365, futureDaysInitialQuantity = 365, chunkRenderX = 0
92
90
  const [horizontalAxisWrapperHeight, setHorizontalAxisWrapperHeight] = (0, react_1.useState)(((_b = horizontalAxisWrapperRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)
93
91
  ? horizontalAxisWrapperRef.current.clientHeight
94
92
  : 0);
95
- //UseEffects
93
+ const [userIsHoldingMouseDown, setUserIsHoldingMouseDown] = (0, react_1.useState)(false);
94
+ //UseEffect
96
95
  (0, react_1.useEffect)(() => {
97
96
  setOrigin({
98
97
  x: pastDatesVisible ? Math.ceil(pastDaysInitialQuantity) * cellsWidth : 0,
@@ -265,13 +264,31 @@ pastDaysInitialQuantity = 365, futureDaysInitialQuantity = 365, chunkRenderX = 0
265
264
  }, [scrollingOnCourse, visibleListElementsIds, visibleDates]);
266
265
  //Cancelar idIntervalo Autoscroll de rango cuando se deja de seleccionar
267
266
  (0, react_1.useEffect)(() => {
268
- if (!draggingOverDateCells) {
267
+ if (!authomaticScrollOnDraggingOverEdges) {
269
268
  if (clientXPositionOnGrid !== undefined)
270
269
  setClientXPositionOnGrid(undefined);
271
270
  if (clientYPositionOnGrid !== undefined)
272
271
  setClientYPositionOnGrid(undefined);
273
272
  }
274
- }, [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]);
275
292
  //Render
276
293
  return (react_1.default.createElement("div", { key: multicalendarId, id: multicalendarId, "data-testid": multicalendarId, className: "multicalendar", style: {
277
294
  gridTemplateColumns: `${verticalAxisWidth}px`,
@@ -339,14 +356,14 @@ pastDaysInitialQuantity = 365, futureDaysInitialQuantity = 365, chunkRenderX = 0
339
356
  setPastDaysQuantity(pastDaysQuantity + 1);
340
357
  e.target.scrollLeft = cellsWidth * 3;
341
358
  }
342
- Funciones.authomaticScrollInGrid(draggingOverDateCells, clientXPositionOnGrid, clientYPositionOnGrid, cellsWidth, cellsHeight, e.target);
359
+ Funciones.authomaticScrollInGrid(userIsHoldingMouseDown, clientXPositionOnGrid, clientYPositionOnGrid, cellsWidth * 0.3, cellsHeight * 0.3, e.target);
343
360
  }, onMouseMove: (e) => {
344
- if (gridWrapperRef.current !== null && draggingOverDateCells) {
361
+ if (gridWrapperRef.current !== null && userIsHoldingMouseDown) {
345
362
  let x = e.clientX - gridWrapperRef.current.getBoundingClientRect().left;
346
363
  let y = e.clientY - gridWrapperRef.current.getBoundingClientRect().top;
347
364
  setClientXPositionOnGrid(x);
348
365
  setClientYPositionOnGrid(y);
349
- Funciones.startAuthomaticScrollInGrid(draggingOverDateCells, x, y, cellsWidth, cellsHeight, gridWrapperRef);
366
+ Funciones.startAuthomaticScrollInGrid(userIsHoldingMouseDown, x, y, cellsWidth * 0.3, cellsHeight * 0.3, gridWrapperRef);
350
367
  }
351
368
  } },
352
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.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, 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,9 +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,
18
- // horizontalAxisHeight = 148,
19
- 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, }) => {
20
18
  var _a, _b;
21
19
  //Constantes del componente
22
20
  const initialDateOffset = 1 + chunkRenderX;
@@ -64,7 +62,8 @@ pastDaysInitialQuantity = 365, futureDaysInitialQuantity = 365, chunkRenderX = 0
64
62
  const [horizontalAxisWrapperHeight, setHorizontalAxisWrapperHeight] = useState(((_b = horizontalAxisWrapperRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)
65
63
  ? horizontalAxisWrapperRef.current.clientHeight
66
64
  : 0);
67
- //UseEffects
65
+ const [userIsHoldingMouseDown, setUserIsHoldingMouseDown] = useState(false);
66
+ //UseEffect
68
67
  useEffect(() => {
69
68
  setOrigin({
70
69
  x: pastDatesVisible ? Math.ceil(pastDaysInitialQuantity) * cellsWidth : 0,
@@ -237,13 +236,31 @@ pastDaysInitialQuantity = 365, futureDaysInitialQuantity = 365, chunkRenderX = 0
237
236
  }, [scrollingOnCourse, visibleListElementsIds, visibleDates]);
238
237
  //Cancelar idIntervalo Autoscroll de rango cuando se deja de seleccionar
239
238
  useEffect(() => {
240
- if (!draggingOverDateCells) {
239
+ if (!authomaticScrollOnDraggingOverEdges) {
241
240
  if (clientXPositionOnGrid !== undefined)
242
241
  setClientXPositionOnGrid(undefined);
243
242
  if (clientYPositionOnGrid !== undefined)
244
243
  setClientYPositionOnGrid(undefined);
245
244
  }
246
- }, [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]);
247
264
  //Render
248
265
  return (React.createElement("div", { key: multicalendarId, id: multicalendarId, "data-testid": multicalendarId, className: "multicalendar", style: {
249
266
  gridTemplateColumns: `${verticalAxisWidth}px`,
@@ -311,14 +328,14 @@ pastDaysInitialQuantity = 365, futureDaysInitialQuantity = 365, chunkRenderX = 0
311
328
  setPastDaysQuantity(pastDaysQuantity + 1);
312
329
  e.target.scrollLeft = cellsWidth * 3;
313
330
  }
314
- Funciones.authomaticScrollInGrid(draggingOverDateCells, clientXPositionOnGrid, clientYPositionOnGrid, cellsWidth, cellsHeight, e.target);
331
+ Funciones.authomaticScrollInGrid(userIsHoldingMouseDown, clientXPositionOnGrid, clientYPositionOnGrid, cellsWidth * 0.3, cellsHeight * 0.3, e.target);
315
332
  }, onMouseMove: (e) => {
316
- if (gridWrapperRef.current !== null && draggingOverDateCells) {
333
+ if (gridWrapperRef.current !== null && userIsHoldingMouseDown) {
317
334
  let x = e.clientX - gridWrapperRef.current.getBoundingClientRect().left;
318
335
  let y = e.clientY - gridWrapperRef.current.getBoundingClientRect().top;
319
336
  setClientXPositionOnGrid(x);
320
337
  setClientYPositionOnGrid(y);
321
- Funciones.startAuthomaticScrollInGrid(draggingOverDateCells, x, y, cellsWidth, cellsHeight, gridWrapperRef);
338
+ Funciones.startAuthomaticScrollInGrid(userIsHoldingMouseDown, x, y, cellsWidth * 0.3, cellsHeight * 0.3, gridWrapperRef);
322
339
  }
323
340
  } },
324
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.14",
3
+ "version": "0.2.15",
4
4
  "author": {
5
5
  "name": "Jose Carlos Cardenas Martinez"
6
6
  },