josenanodev-react-components-library 0.2.5 → 0.2.6

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 +42 -26
  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 +43 -27
  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,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, }) => {
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
47
  const origin = {
48
48
  x: pastDatesVisible ? Math.ceil(pastDaysInitialQuantity) * cellsWidth : 0,
@@ -54,7 +54,6 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
54
54
  const destiniesColumnRef = (0, react_1.useRef)(null);
55
55
  const gridWrapperRef = (0, react_1.useRef)(null);
56
56
  //Estados
57
- const [firtsCall, setFirtsCall] = (0, react_1.useState)(false);
58
57
  const [firtsCallOnInitialViewDone, setFirtsCallOnInitialViewDone] = (0, react_1.useState)(false);
59
58
  const [windowWidth, windowHeight] = (0, useWindowsSize_1.default)();
60
59
  const [futureDaysQuantity, setFutureDaysQuantity] = (0, react_1.useState)(Math.ceil(futureDaysInitialQuantity));
@@ -78,6 +77,41 @@ 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
+ //Cached positions
82
+ let newYPosition = (0, MulticalendarStatesAndSettings_1.getMulticalendarScrollTopPosition)(multicalendarId);
83
+ let newXPosition = (0, MulticalendarStatesAndSettings_1.getMulticalendarScrollLeftPosition)(multicalendarId);
84
+ if (gridWrapperRef.current) {
85
+ if (newYPosition !== null && newYPosition !== String(origin.y)) {
86
+ gridWrapperRef.current.scrollTop = Number(newYPosition);
87
+ (0, MulticalendarStatesAndSettings_1.eraseMulticalendarScrollTopPosition)(multicalendarId);
88
+ }
89
+ else {
90
+ gridWrapperRef.current.scrollTop = origin.y;
91
+ }
92
+ if (newXPosition !== null && newXPosition !== String(origin.x)) {
93
+ gridWrapperRef.current.scrollLeft = Number(newXPosition);
94
+ (0, MulticalendarStatesAndSettings_1.eraseMulticalendarScrollLeftPosition)(multicalendarId);
95
+ }
96
+ else {
97
+ gridWrapperRef.current.scrollLeft = origin.x;
98
+ }
99
+ }
100
+ }, [origin.y, origin.x]);
101
+ (0, react_1.useEffect)(() => {
102
+ if (onScrollLeftChanges) {
103
+ onScrollLeftChanges(xPosition);
104
+ }
105
+ if (onScrollTopChanges) {
106
+ onScrollTopChanges(yPosition);
107
+ }
108
+ return () => {
109
+ if (autoSavePosition) {
110
+ (0, MulticalendarStatesAndSettings_1.setMulticalendarScrollTopPosition)(multicalendarId, String(yPosition));
111
+ (0, MulticalendarStatesAndSettings_1.setMulticalendarScrollLeftPosition)(multicalendarId, String(xPosition));
112
+ }
113
+ };
114
+ }, [yPosition, xPosition]);
81
115
  (0, react_1.useEffect)(() => {
82
116
  if (pastDatesVisible) {
83
117
  setPastDaysQuantity(Math.ceil(pastDaysInitialQuantity));
@@ -86,20 +120,6 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
86
120
  setPastDaysQuantity(0);
87
121
  }
88
122
  }, [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
123
  (0, react_1.useEffect)(() => {
104
124
  if (!firtsCallOnInitialViewDone &&
105
125
  visibleListElementsIds.length > 0 &&
@@ -114,12 +134,6 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
114
134
  visibleDates,
115
135
  callsOnInitialView,
116
136
  ]);
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
137
  (0, react_1.useEffect)(() => {
124
138
  setUpdateList(true);
125
139
  // Dimensiones de paginacion, requiere agregar 1 para no ver espacios en blanco
@@ -280,12 +294,14 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
280
294
  react_1.default.createElement("div", { className: "div-main-container" },
281
295
  react_1.default.createElement("div", { ref: gridWrapperRef, className: "main-container", onScroll: (e) => {
282
296
  if (datesRowRef.current !== null) {
283
- datesRowRef.current.scrollLeft = e.target.scrollLeft;
284
- setXPosition(e.target.scrollLeft);
297
+ const scrollLeft = e.target.scrollLeft;
298
+ datesRowRef.current.scrollLeft = scrollLeft;
299
+ setXPosition(scrollLeft);
285
300
  }
286
301
  if (destiniesColumnRef.current !== null) {
287
- destiniesColumnRef.current.scrollTop = e.target.scrollTop;
288
- setYPosition(e.target.scrollTop);
302
+ const scrollTop = e.target.scrollTop;
303
+ destiniesColumnRef.current.scrollTop = scrollTop;
304
+ setYPosition(scrollTop);
289
305
  }
290
306
  if (dynamicDaysQuantity &&
291
307
  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,8 +13,8 @@ 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
19
  const origin = {
20
20
  x: pastDatesVisible ? Math.ceil(pastDaysInitialQuantity) * cellsWidth : 0,
@@ -26,7 +26,6 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
26
26
  const destiniesColumnRef = useRef(null);
27
27
  const gridWrapperRef = useRef(null);
28
28
  //Estados
29
- const [firtsCall, setFirtsCall] = useState(false);
30
29
  const [firtsCallOnInitialViewDone, setFirtsCallOnInitialViewDone] = useState(false);
31
30
  const [windowWidth, windowHeight] = useWindowSize();
32
31
  const [futureDaysQuantity, setFutureDaysQuantity] = useState(Math.ceil(futureDaysInitialQuantity));
@@ -50,6 +49,41 @@ 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
+ //Cached positions
54
+ let newYPosition = getMulticalendarScrollTopPosition(multicalendarId);
55
+ let newXPosition = getMulticalendarScrollLeftPosition(multicalendarId);
56
+ if (gridWrapperRef.current) {
57
+ if (newYPosition !== null && newYPosition !== String(origin.y)) {
58
+ gridWrapperRef.current.scrollTop = Number(newYPosition);
59
+ eraseMulticalendarScrollTopPosition(multicalendarId);
60
+ }
61
+ else {
62
+ gridWrapperRef.current.scrollTop = origin.y;
63
+ }
64
+ if (newXPosition !== null && newXPosition !== String(origin.x)) {
65
+ gridWrapperRef.current.scrollLeft = Number(newXPosition);
66
+ eraseMulticalendarScrollLeftPosition(multicalendarId);
67
+ }
68
+ else {
69
+ gridWrapperRef.current.scrollLeft = origin.x;
70
+ }
71
+ }
72
+ }, [origin.y, origin.x]);
73
+ useEffect(() => {
74
+ if (onScrollLeftChanges) {
75
+ onScrollLeftChanges(xPosition);
76
+ }
77
+ if (onScrollTopChanges) {
78
+ onScrollTopChanges(yPosition);
79
+ }
80
+ return () => {
81
+ if (autoSavePosition) {
82
+ setMulticalendarScrollTopPosition(multicalendarId, String(yPosition));
83
+ setMulticalendarScrollLeftPosition(multicalendarId, String(xPosition));
84
+ }
85
+ };
86
+ }, [yPosition, xPosition]);
53
87
  useEffect(() => {
54
88
  if (pastDatesVisible) {
55
89
  setPastDaysQuantity(Math.ceil(pastDaysInitialQuantity));
@@ -58,20 +92,6 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
58
92
  setPastDaysQuantity(0);
59
93
  }
60
94
  }, [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
95
  useEffect(() => {
76
96
  if (!firtsCallOnInitialViewDone &&
77
97
  visibleListElementsIds.length > 0 &&
@@ -86,12 +106,6 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
86
106
  visibleDates,
87
107
  callsOnInitialView,
88
108
  ]);
89
- useEffect(() => {
90
- // Posicionamiento inicial en X
91
- if (gridWrapperRef.current !== null) {
92
- gridWrapperRef.current.scrollLeft = origin.x;
93
- }
94
- }, [origin.x]);
95
109
  useEffect(() => {
96
110
  setUpdateList(true);
97
111
  // Dimensiones de paginacion, requiere agregar 1 para no ver espacios en blanco
@@ -252,12 +266,14 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
252
266
  React.createElement("div", { className: "div-main-container" },
253
267
  React.createElement("div", { ref: gridWrapperRef, className: "main-container", onScroll: (e) => {
254
268
  if (datesRowRef.current !== null) {
255
- datesRowRef.current.scrollLeft = e.target.scrollLeft;
256
- setXPosition(e.target.scrollLeft);
269
+ const scrollLeft = e.target.scrollLeft;
270
+ datesRowRef.current.scrollLeft = scrollLeft;
271
+ setXPosition(scrollLeft);
257
272
  }
258
273
  if (destiniesColumnRef.current !== null) {
259
- destiniesColumnRef.current.scrollTop = e.target.scrollTop;
260
- setYPosition(e.target.scrollTop);
274
+ const scrollTop = e.target.scrollTop;
275
+ destiniesColumnRef.current.scrollTop = scrollTop;
276
+ setYPosition(scrollTop);
261
277
  }
262
278
  if (dynamicDaysQuantity &&
263
279
  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.6",
4
4
  "author": {
5
5
  "name": "Jose Carlos Cardenas Martinez"
6
6
  },