josenanodev-react-components-library 0.2.6 → 0.2.8

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 (3) hide show
  1. package/dist/cjs/components/Multicalendar/Multicalendar.js +21 -9
  2. package/dist/esm/components/Multicalendar/Multicalendar.js +21 -9
  3. package/package.json +1 -1
package/dist/cjs/components/Multicalendar/Multicalendar.js CHANGED
@@ -44,10 +44,6 @@ const sqlToJsDate_1 = __importDefault(require("../../utils/sqlToJsDate"));
44
44
  const MulticalendarStatesAndSettings_1 = require("../../Services/MulticalendarStatesAndSettings");
45
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);
@@ -65,23 +61,34 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
65
61
  const [visibleDates, setVisibleDates] = (0, react_1.useState)([]);
66
62
  const [visibleListElementsIds, setVisibleListElementsIds] = (0, react_1.useState)([]);
67
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
+ });
68
68
  const [xPosition, setXPosition] = (0, react_1.useState)(origin.x);
69
69
  const [yPosition, setYPosition] = (0, react_1.useState)(origin.y);
70
70
  const [renderCoordinates, setRenderCoordinates] = (0, react_1.useState)({
71
71
  x: origin.x,
72
72
  y: origin.y,
73
73
  });
74
+ const [initialPositioningDone, setInitialPositioningDone] = (0, react_1.useState)(false);
74
75
  const [minimumVisibleDate, setMinimumVisibleDate] = (0, react_1.useState)(new Date());
75
76
  const [idTimeoutForCalls, setIdTimeoutForCalls] = (0, react_1.useState)(undefined);
76
77
  const [clientXPositionOnGrid, setClientXPositionOnGrid] = (0, react_1.useState)(undefined);
77
78
  const [clientYPositionOnGrid, setClientYPositionOnGrid] = (0, react_1.useState)(undefined);
78
79
  const [scrollingOnCourse, setScrollingOnCourse] = (0, react_1.useState)(false);
79
80
  //UseEffects
81
+ (0, react_1.useEffect)(() => {
82
+ setOrigin({
83
+ x: pastDatesVisible ? Math.ceil(pastDaysInitialQuantity) * cellsWidth : 0,
84
+ y: 0,
85
+ });
86
+ }, [pastDatesVisible, pastDaysInitialQuantity, cellsWidth]);
80
87
  (0, react_1.useEffect)(() => {
81
88
  //Cached positions
82
89
  let newYPosition = (0, MulticalendarStatesAndSettings_1.getMulticalendarScrollTopPosition)(multicalendarId);
83
90
  let newXPosition = (0, MulticalendarStatesAndSettings_1.getMulticalendarScrollLeftPosition)(multicalendarId);
84
- if (gridWrapperRef.current) {
91
+ if (gridWrapperRef.current && initialPositioningDone === false) {
85
92
  if (newYPosition !== null && newYPosition !== String(origin.y)) {
86
93
  gridWrapperRef.current.scrollTop = Number(newYPosition);
87
94
  (0, MulticalendarStatesAndSettings_1.eraseMulticalendarScrollTopPosition)(multicalendarId);
@@ -96,8 +103,9 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
96
103
  else {
97
104
  gridWrapperRef.current.scrollLeft = origin.x;
98
105
  }
106
+ setInitialPositioningDone(true);
99
107
  }
100
- }, [origin.y, origin.x]);
108
+ }, [origin.y, origin.x, initialPositioningDone]);
101
109
  (0, react_1.useEffect)(() => {
102
110
  if (onScrollLeftChanges) {
103
111
  onScrollLeftChanges(xPosition);
@@ -107,11 +115,15 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
107
115
  }
108
116
  return () => {
109
117
  if (autoSavePosition) {
110
- (0, MulticalendarStatesAndSettings_1.setMulticalendarScrollTopPosition)(multicalendarId, String(yPosition));
111
- (0, MulticalendarStatesAndSettings_1.setMulticalendarScrollLeftPosition)(multicalendarId, String(xPosition));
118
+ if (yPosition !== origin.y) {
119
+ (0, MulticalendarStatesAndSettings_1.setMulticalendarScrollTopPosition)(multicalendarId, String(yPosition));
120
+ }
121
+ if (xPosition !== origin.x) {
122
+ (0, MulticalendarStatesAndSettings_1.setMulticalendarScrollLeftPosition)(multicalendarId, String(xPosition));
123
+ }
112
124
  }
113
125
  };
114
- }, [yPosition, xPosition]);
126
+ }, [autoSavePosition, yPosition, xPosition, origin.y, origin.x]);
115
127
  (0, react_1.useEffect)(() => {
116
128
  if (pastDatesVisible) {
117
129
  setPastDaysQuantity(Math.ceil(pastDaysInitialQuantity));
package/dist/esm/components/Multicalendar/Multicalendar.js CHANGED
@@ -16,10 +16,6 @@ import sqlToJsDate from "../../utils/sqlToJsDate";
16
16
  import { eraseMulticalendarScrollLeftPosition, eraseMulticalendarScrollTopPosition, getMulticalendarScrollLeftPosition, getMulticalendarScrollTopPosition, setMulticalendarScrollLeftPosition, setMulticalendarScrollTopPosition, } from "../../Services/MulticalendarStatesAndSettings";
17
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);
@@ -37,23 +33,34 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
37
33
  const [visibleDates, setVisibleDates] = useState([]);
38
34
  const [visibleListElementsIds, setVisibleListElementsIds] = useState([]);
39
35
  const [updateList, setUpdateList] = useState(false);
36
+ const [origin, setOrigin] = useState({
37
+ x: pastDatesVisible ? Math.ceil(pastDaysInitialQuantity) * cellsWidth : 0,
38
+ y: 0,
39
+ });
40
40
  const [xPosition, setXPosition] = useState(origin.x);
41
41
  const [yPosition, setYPosition] = useState(origin.y);
42
42
  const [renderCoordinates, setRenderCoordinates] = useState({
43
43
  x: origin.x,
44
44
  y: origin.y,
45
45
  });
46
+ const [initialPositioningDone, setInitialPositioningDone] = useState(false);
46
47
  const [minimumVisibleDate, setMinimumVisibleDate] = useState(new Date());
47
48
  const [idTimeoutForCalls, setIdTimeoutForCalls] = useState(undefined);
48
49
  const [clientXPositionOnGrid, setClientXPositionOnGrid] = useState(undefined);
49
50
  const [clientYPositionOnGrid, setClientYPositionOnGrid] = useState(undefined);
50
51
  const [scrollingOnCourse, setScrollingOnCourse] = useState(false);
51
52
  //UseEffects
53
+ useEffect(() => {
54
+ setOrigin({
55
+ x: pastDatesVisible ? Math.ceil(pastDaysInitialQuantity) * cellsWidth : 0,
56
+ y: 0,
57
+ });
58
+ }, [pastDatesVisible, pastDaysInitialQuantity, cellsWidth]);
52
59
  useEffect(() => {
53
60
  //Cached positions
54
61
  let newYPosition = getMulticalendarScrollTopPosition(multicalendarId);
55
62
  let newXPosition = getMulticalendarScrollLeftPosition(multicalendarId);
56
- if (gridWrapperRef.current) {
63
+ if (gridWrapperRef.current && initialPositioningDone === false) {
57
64
  if (newYPosition !== null && newYPosition !== String(origin.y)) {
58
65
  gridWrapperRef.current.scrollTop = Number(newYPosition);
59
66
  eraseMulticalendarScrollTopPosition(multicalendarId);
@@ -68,8 +75,9 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
68
75
  else {
69
76
  gridWrapperRef.current.scrollLeft = origin.x;
70
77
  }
78
+ setInitialPositioningDone(true);
71
79
  }
72
- }, [origin.y, origin.x]);
80
+ }, [origin.y, origin.x, initialPositioningDone]);
73
81
  useEffect(() => {
74
82
  if (onScrollLeftChanges) {
75
83
  onScrollLeftChanges(xPosition);
@@ -79,11 +87,15 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
79
87
  }
80
88
  return () => {
81
89
  if (autoSavePosition) {
82
- setMulticalendarScrollTopPosition(multicalendarId, String(yPosition));
83
- setMulticalendarScrollLeftPosition(multicalendarId, String(xPosition));
90
+ if (yPosition !== origin.y) {
91
+ setMulticalendarScrollTopPosition(multicalendarId, String(yPosition));
92
+ }
93
+ if (xPosition !== origin.x) {
94
+ setMulticalendarScrollLeftPosition(multicalendarId, String(xPosition));
95
+ }
84
96
  }
85
97
  };
86
- }, [yPosition, xPosition]);
98
+ }, [autoSavePosition, yPosition, xPosition, origin.y, origin.x]);
87
99
  useEffect(() => {
88
100
  if (pastDatesVisible) {
89
101
  setPastDaysQuantity(Math.ceil(pastDaysInitialQuantity));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "josenanodev-react-components-library",
3
- "version": "0.2.6",
3
+ "version": "0.2.8",
4
4
  "author": {
5
5
  "name": "Jose Carlos Cardenas Martinez"
6
6
  },