josenanodev-react-components-library 0.2.5 → 0.2.7

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 (15) hide show
  1. package/dist/cjs/Services/MulticalendarStatesAndSettings.d.ts +21 -4
  2. package/dist/cjs/Services/MulticalendarStatesAndSettings.js +37 -11
  3. package/dist/cjs/components/Multicalendar/Multicalendar.d.ts +1 -1
  4. package/dist/cjs/components/Multicalendar/Multicalendar.js +56 -30
  5. package/dist/cjs/components/Multicalendar/types.d.ts +3 -0
  6. package/dist/cjs/index.d.ts +2 -2
  7. package/dist/cjs/index.js +5 -2
  8. package/dist/esm/Services/MulticalendarStatesAndSettings.d.ts +21 -4
  9. package/dist/esm/Services/MulticalendarStatesAndSettings.js +30 -7
  10. package/dist/esm/components/Multicalendar/Multicalendar.d.ts +1 -1
  11. package/dist/esm/components/Multicalendar/Multicalendar.js +57 -31
  12. package/dist/esm/components/Multicalendar/types.d.ts +3 -0
  13. package/dist/esm/index.d.ts +2 -2
  14. package/dist/esm/index.js +2 -2
  15. package/package.json +1 -1
package/dist/cjs/Services/MulticalendarStatesAndSettings.d.ts CHANGED
@@ -3,15 +3,32 @@
3
3
  * @param multicalendarId id of the multicalendar (multicalendarId prop)
4
4
  * @returns saved height scroll position of selected multicalendar
5
5
  */
6
- export declare const getMulticalendarYScrollPosition: (multicalendarId: string) => string | null;
6
+ export declare const getMulticalendarScrollTopPosition: (multicalendarId: string) => string | null;
7
7
  /**
8
8
  *
9
9
  * @param multicalendarId id of the multicalendar (multicalendarId prop)
10
- * @param yScroll scroll height number
10
+ * @param scrollTop scroll height number
11
11
  */
12
- export declare const setMulticalendarYScrollPosition: (multicalendarId: string, yScroll: string) => void;
12
+ export declare const setMulticalendarScrollTopPosition: (multicalendarId: string, scrollTop: string) => void;
13
13
  /**
14
14
  *
15
15
  * @param multicalendarId id of the multicalendar (multicalendarId prop)
16
16
  */
17
- export declare const eraseMulticalendarYScrollPosition: (multicalendarId: string) => void;
17
+ export declare const eraseMulticalendarScrollTopPosition: (multicalendarId: string) => void;
18
+ /**
19
+ *
20
+ * @param multicalendarId id of the multicalendar (multicalendarId prop)
21
+ * @returns saved horizontal scroll position of selected multicalendar
22
+ */
23
+ export declare const getMulticalendarScrollLeftPosition: (multicalendarId: string) => string | null;
24
+ /**
25
+ *
26
+ * @param multicalendarId id of the multicalendar (multicalendarId prop)
27
+ * @param xScroll left scroll number
28
+ */
29
+ export declare const setMulticalendarScrollLeftPosition: (multicalendarId: string, scrollLeft: string) => void;
30
+ /**
31
+ *
32
+ * @param multicalendarId id of the multicalendar (multicalendarId prop)
33
+ */
34
+ export declare const eraseMulticalendarScrollLeftPosition: (multicalendarId: string) => void;
package/dist/cjs/Services/MulticalendarStatesAndSettings.js CHANGED
@@ -1,29 +1,55 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.eraseMulticalendarYScrollPosition = exports.setMulticalendarYScrollPosition = exports.getMulticalendarYScrollPosition = void 0;
3
+ exports.eraseMulticalendarScrollLeftPosition = exports.setMulticalendarScrollLeftPosition = exports.getMulticalendarScrollLeftPosition = exports.eraseMulticalendarScrollTopPosition = exports.setMulticalendarScrollTopPosition = exports.getMulticalendarScrollTopPosition = void 0;
4
4
  /**
5
5
  *
6
6
  * @param multicalendarId id of the multicalendar (multicalendarId prop)
7
7
  * @returns saved height scroll position of selected multicalendar
8
8
  */
9
- const getMulticalendarYScrollPosition = (multicalendarId) => {
10
- return sessionStorage.getItem(`MulticalendarYScrollPosition-${multicalendarId}`);
9
+ const getMulticalendarScrollTopPosition = (multicalendarId) => {
10
+ return sessionStorage.getItem(`MulticalendarScrollTopPosition-${multicalendarId}`);
11
11
  };
12
- exports.getMulticalendarYScrollPosition = getMulticalendarYScrollPosition;
12
+ exports.getMulticalendarScrollTopPosition = getMulticalendarScrollTopPosition;
13
13
  /**
14
14
  *
15
15
  * @param multicalendarId id of the multicalendar (multicalendarId prop)
16
- * @param yScroll scroll height number
16
+ * @param scrollTop scroll height number
17
17
  */
18
- const setMulticalendarYScrollPosition = (multicalendarId, yScroll) => {
19
- sessionStorage.setItem(`MulticalendarYScrollPosition-${multicalendarId}`, yScroll);
18
+ const setMulticalendarScrollTopPosition = (multicalendarId, scrollTop) => {
19
+ sessionStorage.setItem(`MulticalendarScrollTopPosition-${multicalendarId}`, scrollTop);
20
20
  };
21
- exports.setMulticalendarYScrollPosition = setMulticalendarYScrollPosition;
21
+ exports.setMulticalendarScrollTopPosition = setMulticalendarScrollTopPosition;
22
22
  /**
23
23
  *
24
24
  * @param multicalendarId id of the multicalendar (multicalendarId prop)
25
25
  */
26
- const eraseMulticalendarYScrollPosition = (multicalendarId) => {
27
- sessionStorage.removeItem(`MulticalendarYScrollPosition-${multicalendarId}`);
26
+ const eraseMulticalendarScrollTopPosition = (multicalendarId) => {
27
+ sessionStorage.removeItem(`MulticalendarScrollTopPosition-${multicalendarId}`);
28
28
  };
29
- exports.eraseMulticalendarYScrollPosition = eraseMulticalendarYScrollPosition;
29
+ exports.eraseMulticalendarScrollTopPosition = eraseMulticalendarScrollTopPosition;
30
+ /**
31
+ *
32
+ * @param multicalendarId id of the multicalendar (multicalendarId prop)
33
+ * @returns saved horizontal scroll position of selected multicalendar
34
+ */
35
+ const getMulticalendarScrollLeftPosition = (multicalendarId) => {
36
+ return sessionStorage.getItem(`MulticalendarScrollLeftPosition-${multicalendarId}`);
37
+ };
38
+ exports.getMulticalendarScrollLeftPosition = getMulticalendarScrollLeftPosition;
39
+ /**
40
+ *
41
+ * @param multicalendarId id of the multicalendar (multicalendarId prop)
42
+ * @param xScroll left scroll number
43
+ */
44
+ const setMulticalendarScrollLeftPosition = (multicalendarId, scrollLeft) => {
45
+ sessionStorage.setItem(`MulticalendarScrollLeftPosition-${multicalendarId}`, scrollLeft);
46
+ };
47
+ exports.setMulticalendarScrollLeftPosition = setMulticalendarScrollLeftPosition;
48
+ /**
49
+ *
50
+ * @param multicalendarId id of the multicalendar (multicalendarId prop)
51
+ */
52
+ const eraseMulticalendarScrollLeftPosition = (multicalendarId) => {
53
+ sessionStorage.removeItem(`MulticalendarScrollLeftPosition-${multicalendarId}`);
54
+ };
55
+ exports.eraseMulticalendarScrollLeftPosition = eraseMulticalendarScrollLeftPosition;
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, }: MulticalendarPropsType) => JSX.Element;
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;
5
5
  export default Multicalendar;
package/dist/cjs/components/Multicalendar/Multicalendar.js CHANGED
@@ -42,19 +42,14 @@ 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, }) => {
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, }) => {
46
46
  //Constantes del componente
47
- const origin = {
48
- x: pastDatesVisible ? Math.ceil(pastDaysInitialQuantity) * cellsWidth : 0,
49
- y: 0,
50
- };
51
47
  const initialDateOffset = 1 + chunkRenderX;
52
48
  //Refs
53
49
  const datesRowRef = (0, react_1.useRef)(null);
54
50
  const destiniesColumnRef = (0, react_1.useRef)(null);
55
51
  const gridWrapperRef = (0, react_1.useRef)(null);
56
52
  //Estados
57
- const [firtsCall, setFirtsCall] = (0, react_1.useState)(false);
58
53
  const [firtsCallOnInitialViewDone, setFirtsCallOnInitialViewDone] = (0, react_1.useState)(false);
59
54
  const [windowWidth, windowHeight] = (0, useWindowsSize_1.default)();
60
55
  const [futureDaysQuantity, setFutureDaysQuantity] = (0, react_1.useState)(Math.ceil(futureDaysInitialQuantity));
@@ -66,6 +61,10 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
66
61
  const [visibleDates, setVisibleDates] = (0, react_1.useState)([]);
67
62
  const [visibleListElementsIds, setVisibleListElementsIds] = (0, react_1.useState)([]);
68
63
  const [updateList, setUpdateList] = (0, react_1.useState)(false);
64
+ const [origin, setOrigin] = (0, react_1.useState)({
65
+ x: pastDatesVisible ? Math.ceil(pastDaysInitialQuantity) * cellsWidth : 0,
66
+ y: 0,
67
+ });
69
68
  const [xPosition, setXPosition] = (0, react_1.useState)(origin.x);
70
69
  const [yPosition, setYPosition] = (0, react_1.useState)(origin.y);
71
70
  const [renderCoordinates, setRenderCoordinates] = (0, react_1.useState)({
@@ -78,6 +77,51 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
78
77
  const [clientYPositionOnGrid, setClientYPositionOnGrid] = (0, react_1.useState)(undefined);
79
78
  const [scrollingOnCourse, setScrollingOnCourse] = (0, react_1.useState)(false);
80
79
  //UseEffects
80
+ (0, react_1.useEffect)(() => {
81
+ setOrigin({
82
+ x: pastDatesVisible ? Math.ceil(pastDaysInitialQuantity) * cellsWidth : 0,
83
+ y: 0,
84
+ });
85
+ }, [pastDatesVisible, pastDaysInitialQuantity, cellsWidth]);
86
+ (0, react_1.useEffect)(() => {
87
+ //Cached positions
88
+ let newYPosition = (0, MulticalendarStatesAndSettings_1.getMulticalendarScrollTopPosition)(multicalendarId);
89
+ let newXPosition = (0, MulticalendarStatesAndSettings_1.getMulticalendarScrollLeftPosition)(multicalendarId);
90
+ if (gridWrapperRef.current) {
91
+ if (newYPosition !== null && newYPosition !== String(origin.y)) {
92
+ gridWrapperRef.current.scrollTop = Number(newYPosition);
93
+ (0, MulticalendarStatesAndSettings_1.eraseMulticalendarScrollTopPosition)(multicalendarId);
94
+ }
95
+ else {
96
+ gridWrapperRef.current.scrollTop = origin.y;
97
+ }
98
+ if (newXPosition !== null && newXPosition !== String(origin.x)) {
99
+ gridWrapperRef.current.scrollLeft = Number(newXPosition);
100
+ (0, MulticalendarStatesAndSettings_1.eraseMulticalendarScrollLeftPosition)(multicalendarId);
101
+ }
102
+ else {
103
+ gridWrapperRef.current.scrollLeft = origin.x;
104
+ }
105
+ }
106
+ }, [origin.y, origin.x]);
107
+ (0, react_1.useEffect)(() => {
108
+ if (onScrollLeftChanges) {
109
+ onScrollLeftChanges(xPosition);
110
+ }
111
+ if (onScrollTopChanges) {
112
+ onScrollTopChanges(yPosition);
113
+ }
114
+ return () => {
115
+ if (autoSavePosition) {
116
+ if (yPosition !== origin.y) {
117
+ (0, MulticalendarStatesAndSettings_1.setMulticalendarScrollTopPosition)(multicalendarId, String(yPosition));
118
+ }
119
+ if (xPosition !== origin.x) {
120
+ (0, MulticalendarStatesAndSettings_1.setMulticalendarScrollLeftPosition)(multicalendarId, String(xPosition));
121
+ }
122
+ }
123
+ };
124
+ }, [autoSavePosition, yPosition, xPosition, origin.y, origin.x]);
81
125
  (0, react_1.useEffect)(() => {
82
126
  if (pastDatesVisible) {
83
127
  setPastDaysQuantity(Math.ceil(pastDaysInitialQuantity));
@@ -86,20 +130,6 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
86
130
  setPastDaysQuantity(0);
87
131
  }
88
132
  }, [pastDatesVisible, pastDaysInitialQuantity]);
89
- (0, react_1.useEffect)(() => {
90
- //Delegamos un cambio de estado a los primero renderes para evitar duplicado de llamadas a la API
91
- if (!firtsCall) {
92
- setFirtsCall(true);
93
- //Cached Y position
94
- let newYPosition = (0, MulticalendarStatesAndSettings_1.getMulticalendarYScrollPosition)(multicalendarId);
95
- if (newYPosition !== null && newYPosition !== "0") {
96
- if (gridWrapperRef.current) {
97
- gridWrapperRef.current.scrollTop = Number(newYPosition);
98
- (0, MulticalendarStatesAndSettings_1.eraseMulticalendarYScrollPosition)(multicalendarId);
99
- }
100
- }
101
- }
102
- }, [firtsCall]);
103
133
  (0, react_1.useEffect)(() => {
104
134
  if (!firtsCallOnInitialViewDone &&
105
135
  visibleListElementsIds.length > 0 &&
@@ -114,12 +144,6 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
114
144
  visibleDates,
115
145
  callsOnInitialView,
116
146
  ]);
117
- (0, react_1.useEffect)(() => {
118
- // Posicionamiento inicial en X
119
- if (gridWrapperRef.current !== null) {
120
- gridWrapperRef.current.scrollLeft = origin.x;
121
- }
122
- }, [origin.x]);
123
147
  (0, react_1.useEffect)(() => {
124
148
  setUpdateList(true);
125
149
  // Dimensiones de paginacion, requiere agregar 1 para no ver espacios en blanco
@@ -280,12 +304,14 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
280
304
  react_1.default.createElement("div", { className: "div-main-container" },
281
305
  react_1.default.createElement("div", { ref: gridWrapperRef, className: "main-container", onScroll: (e) => {
282
306
  if (datesRowRef.current !== null) {
283
- datesRowRef.current.scrollLeft = e.target.scrollLeft;
284
- setXPosition(e.target.scrollLeft);
307
+ const scrollLeft = e.target.scrollLeft;
308
+ datesRowRef.current.scrollLeft = scrollLeft;
309
+ setXPosition(scrollLeft);
285
310
  }
286
311
  if (destiniesColumnRef.current !== null) {
287
- destiniesColumnRef.current.scrollTop = e.target.scrollTop;
288
- setYPosition(e.target.scrollTop);
312
+ const scrollTop = e.target.scrollTop;
313
+ destiniesColumnRef.current.scrollTop = scrollTop;
314
+ setYPosition(scrollTop);
289
315
  }
290
316
  if (dynamicDaysQuantity &&
291
317
  e.target.scrollLeft +
package/dist/cjs/components/Multicalendar/types.d.ts CHANGED
@@ -22,6 +22,9 @@ export interface MulticalendarPropsType {
22
22
  callsOnScrollingStops?: (visibleIds: string[] | number[], visibleDates: Date[]) => void;
23
23
  aditionalControlsComponents?: JSX.Element | JSX.Element[];
24
24
  upperLeftComponent?: JSX.Element;
25
+ autoSavePosition?: boolean;
26
+ onScrollTopChanges?: (scrollTop: number) => void
27
+ onScrollLeftChanges?: (scrollLeft: number) => void
25
28
  }
26
29
 
27
30
  export interface RenderCoordinatesType {
package/dist/cjs/index.d.ts CHANGED
@@ -9,6 +9,6 @@ import Slider from "./components/Slider/Slider";
9
9
  import MultipleJoinedButtonsBar from "./components/MultipleJoinedButtonsBar/MultipleJoinedButtonsBar";
10
10
  import ExportToExcelButton from "./components/ExportToExcelButton/ExportToExcelButton";
11
11
  import InputBoxWithConfirmation from "./components/InputBoxWithConfirmation/InputBoxWithConfirmation";
12
- import { setMulticalendarYScrollPosition } from "./Services/MulticalendarStatesAndSettings";
12
+ import { setMulticalendarScrollTopPosition, setMulticalendarScrollLeftPosition, eraseMulticalendarScrollLeftPosition, eraseMulticalendarScrollTopPosition } from "./Services/MulticalendarStatesAndSettings";
13
13
  export type { ExportToExcelButtonPropsType } from "./components/ExportToExcelButton/types";
14
- export { Multicalendar, setMulticalendarYScrollPosition, SideBar, SearchBar, Modal, PopUp, ProgressBar, ParallelSelectionList, Slider, MultipleJoinedButtonsBar, ExportToExcelButton, InputBoxWithConfirmation };
14
+ export { Multicalendar, setMulticalendarScrollTopPosition, setMulticalendarScrollLeftPosition, eraseMulticalendarScrollLeftPosition, eraseMulticalendarScrollTopPosition, SideBar, SearchBar, Modal, PopUp, ProgressBar, ParallelSelectionList, Slider, MultipleJoinedButtonsBar, ExportToExcelButton, InputBoxWithConfirmation, };
package/dist/cjs/index.js CHANGED
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.InputBoxWithConfirmation = exports.ExportToExcelButton = exports.MultipleJoinedButtonsBar = exports.Slider = exports.ParallelSelectionList = exports.ProgressBar = exports.PopUp = exports.Modal = exports.SearchBar = exports.SideBar = exports.setMulticalendarYScrollPosition = exports.Multicalendar = void 0;
6
+ exports.InputBoxWithConfirmation = exports.ExportToExcelButton = exports.MultipleJoinedButtonsBar = exports.Slider = exports.ParallelSelectionList = exports.ProgressBar = exports.PopUp = exports.Modal = exports.SearchBar = exports.SideBar = exports.eraseMulticalendarScrollTopPosition = exports.eraseMulticalendarScrollLeftPosition = exports.setMulticalendarScrollLeftPosition = exports.setMulticalendarScrollTopPosition = exports.Multicalendar = void 0;
7
7
  const Multicalendar_1 = __importDefault(require("./components/Multicalendar/Multicalendar"));
8
8
  exports.Multicalendar = Multicalendar_1.default;
9
9
  const SideBar_1 = __importDefault(require("./components/SideBar/SideBar"));
@@ -27,4 +27,7 @@ exports.ExportToExcelButton = ExportToExcelButton_1.default;
27
27
  const InputBoxWithConfirmation_1 = __importDefault(require("./components/InputBoxWithConfirmation/InputBoxWithConfirmation"));
28
28
  exports.InputBoxWithConfirmation = InputBoxWithConfirmation_1.default;
29
29
  const MulticalendarStatesAndSettings_1 = require("./Services/MulticalendarStatesAndSettings");
30
- Object.defineProperty(exports, "setMulticalendarYScrollPosition", { enumerable: true, get: function () { return MulticalendarStatesAndSettings_1.setMulticalendarYScrollPosition; } });
30
+ Object.defineProperty(exports, "setMulticalendarScrollTopPosition", { enumerable: true, get: function () { return MulticalendarStatesAndSettings_1.setMulticalendarScrollTopPosition; } });
31
+ Object.defineProperty(exports, "setMulticalendarScrollLeftPosition", { enumerable: true, get: function () { return MulticalendarStatesAndSettings_1.setMulticalendarScrollLeftPosition; } });
32
+ Object.defineProperty(exports, "eraseMulticalendarScrollLeftPosition", { enumerable: true, get: function () { return MulticalendarStatesAndSettings_1.eraseMulticalendarScrollLeftPosition; } });
33
+ Object.defineProperty(exports, "eraseMulticalendarScrollTopPosition", { enumerable: true, get: function () { return MulticalendarStatesAndSettings_1.eraseMulticalendarScrollTopPosition; } });
package/dist/esm/Services/MulticalendarStatesAndSettings.d.ts CHANGED
@@ -3,15 +3,32 @@
3
3
  * @param multicalendarId id of the multicalendar (multicalendarId prop)
4
4
  * @returns saved height scroll position of selected multicalendar
5
5
  */
6
- export declare const getMulticalendarYScrollPosition: (multicalendarId: string) => string | null;
6
+ export declare const getMulticalendarScrollTopPosition: (multicalendarId: string) => string | null;
7
7
  /**
8
8
  *
9
9
  * @param multicalendarId id of the multicalendar (multicalendarId prop)
10
- * @param yScroll scroll height number
10
+ * @param scrollTop scroll height number
11
11
  */
12
- export declare const setMulticalendarYScrollPosition: (multicalendarId: string, yScroll: string) => void;
12
+ export declare const setMulticalendarScrollTopPosition: (multicalendarId: string, scrollTop: string) => void;
13
13
  /**
14
14
  *
15
15
  * @param multicalendarId id of the multicalendar (multicalendarId prop)
16
16
  */
17
- export declare const eraseMulticalendarYScrollPosition: (multicalendarId: string) => void;
17
+ export declare const eraseMulticalendarScrollTopPosition: (multicalendarId: string) => void;
18
+ /**
19
+ *
20
+ * @param multicalendarId id of the multicalendar (multicalendarId prop)
21
+ * @returns saved horizontal scroll position of selected multicalendar
22
+ */
23
+ export declare const getMulticalendarScrollLeftPosition: (multicalendarId: string) => string | null;
24
+ /**
25
+ *
26
+ * @param multicalendarId id of the multicalendar (multicalendarId prop)
27
+ * @param xScroll left scroll number
28
+ */
29
+ export declare const setMulticalendarScrollLeftPosition: (multicalendarId: string, scrollLeft: string) => void;
30
+ /**
31
+ *
32
+ * @param multicalendarId id of the multicalendar (multicalendarId prop)
33
+ */
34
+ export declare const eraseMulticalendarScrollLeftPosition: (multicalendarId: string) => void;
package/dist/esm/Services/MulticalendarStatesAndSettings.js CHANGED
@@ -3,21 +3,44 @@
3
3
  * @param multicalendarId id of the multicalendar (multicalendarId prop)
4
4
  * @returns saved height scroll position of selected multicalendar
5
5
  */
6
- export const getMulticalendarYScrollPosition = (multicalendarId) => {
7
- return sessionStorage.getItem(`MulticalendarYScrollPosition-${multicalendarId}`);
6
+ export const getMulticalendarScrollTopPosition = (multicalendarId) => {
7
+ return sessionStorage.getItem(`MulticalendarScrollTopPosition-${multicalendarId}`);
8
8
  };
9
9
  /**
10
10
  *
11
11
  * @param multicalendarId id of the multicalendar (multicalendarId prop)
12
- * @param yScroll scroll height number
12
+ * @param scrollTop scroll height number
13
13
  */
14
- export const setMulticalendarYScrollPosition = (multicalendarId, yScroll) => {
15
- sessionStorage.setItem(`MulticalendarYScrollPosition-${multicalendarId}`, yScroll);
14
+ export const setMulticalendarScrollTopPosition = (multicalendarId, scrollTop) => {
15
+ sessionStorage.setItem(`MulticalendarScrollTopPosition-${multicalendarId}`, scrollTop);
16
16
  };
17
17
  /**
18
18
  *
19
19
  * @param multicalendarId id of the multicalendar (multicalendarId prop)
20
20
  */
21
- export const eraseMulticalendarYScrollPosition = (multicalendarId) => {
22
- sessionStorage.removeItem(`MulticalendarYScrollPosition-${multicalendarId}`);
21
+ export const eraseMulticalendarScrollTopPosition = (multicalendarId) => {
22
+ sessionStorage.removeItem(`MulticalendarScrollTopPosition-${multicalendarId}`);
23
+ };
24
+ /**
25
+ *
26
+ * @param multicalendarId id of the multicalendar (multicalendarId prop)
27
+ * @returns saved horizontal scroll position of selected multicalendar
28
+ */
29
+ export const getMulticalendarScrollLeftPosition = (multicalendarId) => {
30
+ return sessionStorage.getItem(`MulticalendarScrollLeftPosition-${multicalendarId}`);
31
+ };
32
+ /**
33
+ *
34
+ * @param multicalendarId id of the multicalendar (multicalendarId prop)
35
+ * @param xScroll left scroll number
36
+ */
37
+ export const setMulticalendarScrollLeftPosition = (multicalendarId, scrollLeft) => {
38
+ sessionStorage.setItem(`MulticalendarScrollLeftPosition-${multicalendarId}`, scrollLeft);
39
+ };
40
+ /**
41
+ *
42
+ * @param multicalendarId id of the multicalendar (multicalendarId prop)
43
+ */
44
+ export const eraseMulticalendarScrollLeftPosition = (multicalendarId) => {
45
+ sessionStorage.removeItem(`MulticalendarScrollLeftPosition-${multicalendarId}`);
23
46
  };
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, }: MulticalendarPropsType) => JSX.Element;
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;
5
5
  export default Multicalendar;
package/dist/esm/components/Multicalendar/Multicalendar.js CHANGED
@@ -13,20 +13,15 @@ import useWindowSize from "../../hooks/useWindowsSize";
13
13
  //Utils
14
14
  import sqlToJsDate from "../../utils/sqlToJsDate";
15
15
  //Services
16
- import { eraseMulticalendarYScrollPosition, getMulticalendarYScrollPosition, } 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, }) => {
16
+ import { eraseMulticalendarScrollLeftPosition, eraseMulticalendarScrollTopPosition, 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, }) => {
18
18
  //Constantes del componente
19
- const origin = {
20
- x: pastDatesVisible ? Math.ceil(pastDaysInitialQuantity) * cellsWidth : 0,
21
- y: 0,
22
- };
23
19
  const initialDateOffset = 1 + chunkRenderX;
24
20
  //Refs
25
21
  const datesRowRef = useRef(null);
26
22
  const destiniesColumnRef = useRef(null);
27
23
  const gridWrapperRef = useRef(null);
28
24
  //Estados
29
- const [firtsCall, setFirtsCall] = useState(false);
30
25
  const [firtsCallOnInitialViewDone, setFirtsCallOnInitialViewDone] = useState(false);
31
26
  const [windowWidth, windowHeight] = useWindowSize();
32
27
  const [futureDaysQuantity, setFutureDaysQuantity] = useState(Math.ceil(futureDaysInitialQuantity));
@@ -38,6 +33,10 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
38
33
  const [visibleDates, setVisibleDates] = useState([]);
39
34
  const [visibleListElementsIds, setVisibleListElementsIds] = useState([]);
40
35
  const [updateList, setUpdateList] = useState(false);
36
+ const [origin, setOrigin] = useState({
37
+ x: pastDatesVisible ? Math.ceil(pastDaysInitialQuantity) * cellsWidth : 0,
38
+ y: 0,
39
+ });
41
40
  const [xPosition, setXPosition] = useState(origin.x);
42
41
  const [yPosition, setYPosition] = useState(origin.y);
43
42
  const [renderCoordinates, setRenderCoordinates] = useState({
@@ -50,6 +49,51 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
50
49
  const [clientYPositionOnGrid, setClientYPositionOnGrid] = useState(undefined);
51
50
  const [scrollingOnCourse, setScrollingOnCourse] = useState(false);
52
51
  //UseEffects
52
+ useEffect(() => {
53
+ setOrigin({
54
+ x: pastDatesVisible ? Math.ceil(pastDaysInitialQuantity) * cellsWidth : 0,
55
+ y: 0,
56
+ });
57
+ }, [pastDatesVisible, pastDaysInitialQuantity, cellsWidth]);
58
+ useEffect(() => {
59
+ //Cached positions
60
+ let newYPosition = getMulticalendarScrollTopPosition(multicalendarId);
61
+ let newXPosition = getMulticalendarScrollLeftPosition(multicalendarId);
62
+ if (gridWrapperRef.current) {
63
+ if (newYPosition !== null && newYPosition !== String(origin.y)) {
64
+ gridWrapperRef.current.scrollTop = Number(newYPosition);
65
+ eraseMulticalendarScrollTopPosition(multicalendarId);
66
+ }
67
+ else {
68
+ gridWrapperRef.current.scrollTop = origin.y;
69
+ }
70
+ if (newXPosition !== null && newXPosition !== String(origin.x)) {
71
+ gridWrapperRef.current.scrollLeft = Number(newXPosition);
72
+ eraseMulticalendarScrollLeftPosition(multicalendarId);
73
+ }
74
+ else {
75
+ gridWrapperRef.current.scrollLeft = origin.x;
76
+ }
77
+ }
78
+ }, [origin.y, origin.x]);
79
+ useEffect(() => {
80
+ if (onScrollLeftChanges) {
81
+ onScrollLeftChanges(xPosition);
82
+ }
83
+ if (onScrollTopChanges) {
84
+ onScrollTopChanges(yPosition);
85
+ }
86
+ return () => {
87
+ if (autoSavePosition) {
88
+ if (yPosition !== origin.y) {
89
+ setMulticalendarScrollTopPosition(multicalendarId, String(yPosition));
90
+ }
91
+ if (xPosition !== origin.x) {
92
+ setMulticalendarScrollLeftPosition(multicalendarId, String(xPosition));
93
+ }
94
+ }
95
+ };
96
+ }, [autoSavePosition, yPosition, xPosition, origin.y, origin.x]);
53
97
  useEffect(() => {
54
98
  if (pastDatesVisible) {
55
99
  setPastDaysQuantity(Math.ceil(pastDaysInitialQuantity));
@@ -58,20 +102,6 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
58
102
  setPastDaysQuantity(0);
59
103
  }
60
104
  }, [pastDatesVisible, pastDaysInitialQuantity]);
61
- useEffect(() => {
62
- //Delegamos un cambio de estado a los primero renderes para evitar duplicado de llamadas a la API
63
- if (!firtsCall) {
64
- setFirtsCall(true);
65
- //Cached Y position
66
- let newYPosition = getMulticalendarYScrollPosition(multicalendarId);
67
- if (newYPosition !== null && newYPosition !== "0") {
68
- if (gridWrapperRef.current) {
69
- gridWrapperRef.current.scrollTop = Number(newYPosition);
70
- eraseMulticalendarYScrollPosition(multicalendarId);
71
- }
72
- }
73
- }
74
- }, [firtsCall]);
75
105
  useEffect(() => {
76
106
  if (!firtsCallOnInitialViewDone &&
77
107
  visibleListElementsIds.length > 0 &&
@@ -86,12 +116,6 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
86
116
  visibleDates,
87
117
  callsOnInitialView,
88
118
  ]);
89
- useEffect(() => {
90
- // Posicionamiento inicial en X
91
- if (gridWrapperRef.current !== null) {
92
- gridWrapperRef.current.scrollLeft = origin.x;
93
- }
94
- }, [origin.x]);
95
119
  useEffect(() => {
96
120
  setUpdateList(true);
97
121
  // Dimensiones de paginacion, requiere agregar 1 para no ver espacios en blanco
@@ -252,12 +276,14 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
252
276
  React.createElement("div", { className: "div-main-container" },
253
277
  React.createElement("div", { ref: gridWrapperRef, className: "main-container", onScroll: (e) => {
254
278
  if (datesRowRef.current !== null) {
255
- datesRowRef.current.scrollLeft = e.target.scrollLeft;
256
- setXPosition(e.target.scrollLeft);
279
+ const scrollLeft = e.target.scrollLeft;
280
+ datesRowRef.current.scrollLeft = scrollLeft;
281
+ setXPosition(scrollLeft);
257
282
  }
258
283
  if (destiniesColumnRef.current !== null) {
259
- destiniesColumnRef.current.scrollTop = e.target.scrollTop;
260
- setYPosition(e.target.scrollTop);
284
+ const scrollTop = e.target.scrollTop;
285
+ destiniesColumnRef.current.scrollTop = scrollTop;
286
+ setYPosition(scrollTop);
261
287
  }
262
288
  if (dynamicDaysQuantity &&
263
289
  e.target.scrollLeft +
package/dist/esm/components/Multicalendar/types.d.ts CHANGED
@@ -22,6 +22,9 @@ export interface MulticalendarPropsType {
22
22
  callsOnScrollingStops?: (visibleIds: string[] | number[], visibleDates: Date[]) => void;
23
23
  aditionalControlsComponents?: JSX.Element | JSX.Element[];
24
24
  upperLeftComponent?: JSX.Element;
25
+ autoSavePosition?: boolean;
26
+ onScrollTopChanges?: (scrollTop: number) => void
27
+ onScrollLeftChanges?: (scrollLeft: number) => void
25
28
  }
26
29
 
27
30
  export interface RenderCoordinatesType {
package/dist/esm/index.d.ts CHANGED
@@ -9,6 +9,6 @@ import Slider from "./components/Slider/Slider";
9
9
  import MultipleJoinedButtonsBar from "./components/MultipleJoinedButtonsBar/MultipleJoinedButtonsBar";
10
10
  import ExportToExcelButton from "./components/ExportToExcelButton/ExportToExcelButton";
11
11
  import InputBoxWithConfirmation from "./components/InputBoxWithConfirmation/InputBoxWithConfirmation";
12
- import { setMulticalendarYScrollPosition } from "./Services/MulticalendarStatesAndSettings";
12
+ import { setMulticalendarScrollTopPosition, setMulticalendarScrollLeftPosition, eraseMulticalendarScrollLeftPosition, eraseMulticalendarScrollTopPosition } from "./Services/MulticalendarStatesAndSettings";
13
13
  export type { ExportToExcelButtonPropsType } from "./components/ExportToExcelButton/types";
14
- export { Multicalendar, setMulticalendarYScrollPosition, SideBar, SearchBar, Modal, PopUp, ProgressBar, ParallelSelectionList, Slider, MultipleJoinedButtonsBar, ExportToExcelButton, InputBoxWithConfirmation };
14
+ export { Multicalendar, setMulticalendarScrollTopPosition, setMulticalendarScrollLeftPosition, eraseMulticalendarScrollLeftPosition, eraseMulticalendarScrollTopPosition, SideBar, SearchBar, Modal, PopUp, ProgressBar, ParallelSelectionList, Slider, MultipleJoinedButtonsBar, ExportToExcelButton, InputBoxWithConfirmation, };
package/dist/esm/index.js CHANGED
@@ -9,5 +9,5 @@ import Slider from "./components/Slider/Slider";
9
9
  import MultipleJoinedButtonsBar from "./components/MultipleJoinedButtonsBar/MultipleJoinedButtonsBar";
10
10
  import ExportToExcelButton from "./components/ExportToExcelButton/ExportToExcelButton";
11
11
  import InputBoxWithConfirmation from "./components/InputBoxWithConfirmation/InputBoxWithConfirmation";
12
- import { setMulticalendarYScrollPosition } from "./Services/MulticalendarStatesAndSettings";
13
- export { Multicalendar, setMulticalendarYScrollPosition, SideBar, SearchBar, Modal, PopUp, ProgressBar, ParallelSelectionList, Slider, MultipleJoinedButtonsBar, ExportToExcelButton, InputBoxWithConfirmation };
12
+ import { setMulticalendarScrollTopPosition, setMulticalendarScrollLeftPosition, eraseMulticalendarScrollLeftPosition, eraseMulticalendarScrollTopPosition, } from "./Services/MulticalendarStatesAndSettings";
13
+ export { Multicalendar, setMulticalendarScrollTopPosition, setMulticalendarScrollLeftPosition, eraseMulticalendarScrollLeftPosition, eraseMulticalendarScrollTopPosition, SideBar, SearchBar, Modal, PopUp, ProgressBar, ParallelSelectionList, Slider, MultipleJoinedButtonsBar, ExportToExcelButton, InputBoxWithConfirmation, };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "josenanodev-react-components-library",
3
- "version": "0.2.5",
3
+ "version": "0.2.7",
4
4
  "author": {
5
5
  "name": "Jose Carlos Cardenas Martinez"
6
6
  },