josenanodev-react-components-library 0.2.13 → 0.2.14

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.css +2 -2
  2. package/dist/cjs/components/Multicalendar/Multicalendar.d.ts +1 -1
  3. package/dist/cjs/components/Multicalendar/Multicalendar.js +24 -11
  4. package/dist/esm/components/Multicalendar/Multicalendar.css +2 -2
  5. package/dist/esm/components/Multicalendar/Multicalendar.d.ts +1 -1
  6. package/dist/esm/components/Multicalendar/Multicalendar.js +24 -11
  7. package/package.json +1 -1
package/dist/cjs/components/Multicalendar/Multicalendar.css CHANGED
@@ -69,7 +69,7 @@
69
69
  grid-area: hor;
70
70
  position: relative;
71
71
  max-width: 100%;
72
- height: 100%;
72
+ height: 90px;
73
73
  }
74
74
 
75
75
  .multicalendar .controls .div-dates-navigation {
@@ -140,7 +140,7 @@
140
140
  position: absolute;
141
141
  bottom: 0;
142
142
  width: 100%;
143
- height: 64px;
143
+ height: 74px;
144
144
  }
145
145
 
146
146
  .multicalendar .horizontal-axis .div-weeks-buttons .past-week-button,
package/dist/cjs/components/Multicalendar/Multicalendar.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
2
  import "./Multicalendar.css";
3
3
  import { MulticalendarPropsType } from "./types";
4
- declare const Multicalendar: ({ multicalendarId, ReactCellChildren, ReactListElementChildren, listElementsIdsArray, language, pastDatesVisible, cellsWidth, cellsHeight, verticalAxisWidth, horizontalAxisHeight, pastDaysInitialQuantity, futureDaysInitialQuantity, chunkRenderX, chunkRenderY, dynamicDaysQuantity, draggingOverDateCells, waitTimeForCalls, callsOnInitialView, callsOnScrollingStops, aditionalControlsComponents, upperLeftComponent, autoSavePosition, onScrollTopChanges, onScrollLeftChanges, }: MulticalendarPropsType) => JSX.Element;
4
+ declare const Multicalendar: ({ multicalendarId, ReactCellChildren, ReactListElementChildren, listElementsIdsArray, language, pastDatesVisible, cellsWidth, cellsHeight, verticalAxisWidth, pastDaysInitialQuantity, futureDaysInitialQuantity, chunkRenderX, chunkRenderY, dynamicDaysQuantity, 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,9 @@ const useWindowsSize_1 = __importDefault(require("../../hooks/useWindowsSize"));
42
42
  const sqlToJsDate_1 = __importDefault(require("../../utils/sqlToJsDate"));
43
43
  //Services
44
44
  const MulticalendarStatesAndSettings_1 = require("../../Services/MulticalendarStatesAndSettings");
45
- const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChildren, listElementsIdsArray, language, pastDatesVisible = true, cellsWidth = 120, cellsHeight = 80, verticalAxisWidth = 280, horizontalAxisHeight = 148, pastDaysInitialQuantity = 365, futureDaysInitialQuantity = 365, chunkRenderX = 0, chunkRenderY = 0, dynamicDaysQuantity = false, draggingOverDateCells = false, waitTimeForCalls = 500, callsOnInitialView, callsOnScrollingStops, aditionalControlsComponents, upperLeftComponent, autoSavePosition, onScrollTopChanges, onScrollLeftChanges, }) => {
45
+ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChildren, listElementsIdsArray, language, pastDatesVisible = true, cellsWidth = 120, cellsHeight = 80, verticalAxisWidth = 280,
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, }) => {
46
48
  var _a, _b;
47
49
  //Constantes del componente
48
50
  const initialDateOffset = 1 + chunkRenderX;
@@ -51,6 +53,7 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
51
53
  const destiniesColumnRef = (0, react_1.useRef)(null);
52
54
  const gridWrapperRef = (0, react_1.useRef)(null);
53
55
  const controlsWrapperRef = (0, react_1.useRef)(null);
56
+ const horizontalAxisWrapperRef = (0, react_1.useRef)(null);
54
57
  //Estados
55
58
  const [firtsCallOnInitialViewDone, setFirtsCallOnInitialViewDone] = (0, react_1.useState)(false);
56
59
  const [windowWidth, windowHeight] = (0, useWindowsSize_1.default)();
@@ -85,6 +88,10 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
85
88
  const [clientXPositionOnGrid, setClientXPositionOnGrid] = (0, react_1.useState)(undefined);
86
89
  const [clientYPositionOnGrid, setClientYPositionOnGrid] = (0, react_1.useState)(undefined);
87
90
  const [scrollingOnCourse, setScrollingOnCourse] = (0, react_1.useState)(false);
91
+ const [controlsWrapperHeight, setControlsWrapperHeight] = (0, react_1.useState)(((_a = controlsWrapperRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) ? controlsWrapperRef.current.clientHeight : 0);
92
+ const [horizontalAxisWrapperHeight, setHorizontalAxisWrapperHeight] = (0, react_1.useState)(((_b = horizontalAxisWrapperRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)
93
+ ? horizontalAxisWrapperRef.current.clientHeight
94
+ : 0);
88
95
  //UseEffects
89
96
  (0, react_1.useEffect)(() => {
90
97
  setOrigin({
@@ -141,10 +148,22 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
141
148
  callsOnInitialView,
142
149
  ]);
143
150
  (0, react_1.useEffect)(() => {
151
+ var _a, _b;
152
+ const localConstControlsWrapperHeight = ((_a = controlsWrapperRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight)
153
+ ? controlsWrapperRef.current.clientHeight
154
+ : 0;
155
+ const localConstHorizontalAxisWrapperHeight = ((_b = horizontalAxisWrapperRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)
156
+ ? horizontalAxisWrapperRef.current.clientHeight
157
+ : 0;
158
+ setControlsWrapperHeight(localConstControlsWrapperHeight);
159
+ setHorizontalAxisWrapperHeight(localConstHorizontalAxisWrapperHeight);
144
160
  setUpdateList(true);
145
161
  // Dimensiones de paginacion, requiere agregar 1 para no ver espacios en blanco
146
162
  setPaginationWidth(Math.ceil((windowWidth - verticalAxisWidth) / cellsWidth) + 1);
147
- setPaginationHeight(Math.ceil((windowHeight - horizontalAxisHeight) / cellsHeight) + 1);
163
+ setPaginationHeight(Math.ceil((windowHeight -
164
+ localConstControlsWrapperHeight -
165
+ localConstHorizontalAxisWrapperHeight) /
166
+ cellsHeight) + 1);
148
167
  // Redefinicion de posicion X ante cambios en el tamaño de la ventana
149
168
  if (gridWrapperRef.current !== null) {
150
169
  setXPosition(gridWrapperRef.current.scrollLeft);
@@ -158,7 +177,6 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
158
177
  windowWidth,
159
178
  windowHeight,
160
179
  verticalAxisWidth,
161
- horizontalAxisHeight,
162
180
  cellsHeight,
163
181
  cellsWidth,
164
182
  chunkRenderX,
@@ -257,12 +275,7 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
257
275
  //Render
258
276
  return (react_1.default.createElement("div", { key: multicalendarId, id: multicalendarId, "data-testid": multicalendarId, className: "multicalendar", style: {
259
277
  gridTemplateColumns: `${verticalAxisWidth}px`,
260
- gridTemplateRows: `${((_a = controlsWrapperRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight)
261
- ? controlsWrapperRef.current.clientHeight
262
- : 0}px ${horizontalAxisHeight -
263
- (((_b = controlsWrapperRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)
264
- ? controlsWrapperRef.current.clientHeight
265
- : 0)}px calc(100% - ${horizontalAxisHeight}px`,
278
+ gridTemplateRows: `auto auto calc(100% - ${controlsWrapperHeight + horizontalAxisWrapperHeight}px`,
266
279
  } },
267
280
  react_1.default.createElement("div", { ref: controlsWrapperRef, className: "controls" },
268
281
  react_1.default.createElement("div", { className: "div-dates-navigation" },
@@ -279,7 +292,7 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
279
292
  gridWrapperRef.current.scrollTop = e.target.scrollTop;
280
293
  } },
281
294
  react_1.default.createElement(ListElementsColumn_1.default, { listHeight: cellsHeight * listElementsIdsArray.length, yOffset: yOffset, elementsHeight: cellsHeight, idsArray: visibleListElementsIds, ReactListElementChildren: ReactListElementChildren }))),
282
- react_1.default.createElement("div", { className: "horizontal-axis" },
295
+ react_1.default.createElement("div", { ref: horizontalAxisWrapperRef, className: "horizontal-axis" },
283
296
  react_1.default.createElement("div", { className: "div-weeks-buttons" },
284
297
  react_1.default.createElement("button", { className: "past-week-button", onClick: () => {
285
298
  // Se puede hacer funcion
@@ -301,7 +314,7 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
301
314
  if (gridWrapperRef.current !== null)
302
315
  gridWrapperRef.current.scrollLeft = e.target.scrollLeft;
303
316
  } },
304
- react_1.default.createElement(DatesRow_1.default, { visibleDates: visibleDates, width: (pastDaysQuantity + futureDaysQuantity) * cellsWidth, height: 64, cellsWidth: cellsWidth, cellsHeight: 64, offset: xOffset, language: language }))),
317
+ react_1.default.createElement(DatesRow_1.default, { visibleDates: visibleDates, width: (pastDaysQuantity + futureDaysQuantity) * cellsWidth, height: 74, cellsWidth: cellsWidth, cellsHeight: 74, offset: xOffset, language: language }))),
305
318
  react_1.default.createElement("div", { className: "div-main-container" },
306
319
  react_1.default.createElement("div", { ref: gridWrapperRef, className: "main-container", onScroll: (e) => {
307
320
  if (datesRowRef.current !== null) {
package/dist/esm/components/Multicalendar/Multicalendar.css CHANGED
@@ -69,7 +69,7 @@
69
69
  grid-area: hor;
70
70
  position: relative;
71
71
  max-width: 100%;
72
- height: 100%;
72
+ height: 90px;
73
73
  }
74
74
 
75
75
  .multicalendar .controls .div-dates-navigation {
@@ -140,7 +140,7 @@
140
140
  position: absolute;
141
141
  bottom: 0;
142
142
  width: 100%;
143
- height: 64px;
143
+ height: 74px;
144
144
  }
145
145
 
146
146
  .multicalendar .horizontal-axis .div-weeks-buttons .past-week-button,
package/dist/esm/components/Multicalendar/Multicalendar.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
2
  import "./Multicalendar.css";
3
3
  import { MulticalendarPropsType } from "./types";
4
- declare const Multicalendar: ({ multicalendarId, ReactCellChildren, ReactListElementChildren, listElementsIdsArray, language, pastDatesVisible, cellsWidth, cellsHeight, verticalAxisWidth, horizontalAxisHeight, pastDaysInitialQuantity, futureDaysInitialQuantity, chunkRenderX, chunkRenderY, dynamicDaysQuantity, draggingOverDateCells, waitTimeForCalls, callsOnInitialView, callsOnScrollingStops, aditionalControlsComponents, upperLeftComponent, autoSavePosition, onScrollTopChanges, onScrollLeftChanges, }: MulticalendarPropsType) => JSX.Element;
4
+ declare const Multicalendar: ({ multicalendarId, ReactCellChildren, ReactListElementChildren, listElementsIdsArray, language, pastDatesVisible, cellsWidth, cellsHeight, verticalAxisWidth, pastDaysInitialQuantity, futureDaysInitialQuantity, chunkRenderX, chunkRenderY, dynamicDaysQuantity, 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
@@ -14,7 +14,9 @@ import useWindowSize from "../../hooks/useWindowsSize";
14
14
  import sqlToJsDate from "../../utils/sqlToJsDate";
15
15
  //Services
16
16
  import { getMulticalendarScrollLeftPosition, getMulticalendarScrollTopPosition, setMulticalendarScrollLeftPosition, setMulticalendarScrollTopPosition, } from "../../Services/MulticalendarStatesAndSettings";
17
- const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChildren, listElementsIdsArray, language, pastDatesVisible = true, cellsWidth = 120, cellsHeight = 80, verticalAxisWidth = 280, horizontalAxisHeight = 148, pastDaysInitialQuantity = 365, futureDaysInitialQuantity = 365, chunkRenderX = 0, chunkRenderY = 0, dynamicDaysQuantity = false, draggingOverDateCells = false, waitTimeForCalls = 500, callsOnInitialView, callsOnScrollingStops, aditionalControlsComponents, upperLeftComponent, autoSavePosition, onScrollTopChanges, onScrollLeftChanges, }) => {
17
+ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChildren, listElementsIdsArray, language, pastDatesVisible = true, cellsWidth = 120, cellsHeight = 80, verticalAxisWidth = 280,
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, }) => {
18
20
  var _a, _b;
19
21
  //Constantes del componente
20
22
  const initialDateOffset = 1 + chunkRenderX;
@@ -23,6 +25,7 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
23
25
  const destiniesColumnRef = useRef(null);
24
26
  const gridWrapperRef = useRef(null);
25
27
  const controlsWrapperRef = useRef(null);
28
+ const horizontalAxisWrapperRef = useRef(null);
26
29
  //Estados
27
30
  const [firtsCallOnInitialViewDone, setFirtsCallOnInitialViewDone] = useState(false);
28
31
  const [windowWidth, windowHeight] = useWindowSize();
@@ -57,6 +60,10 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
57
60
  const [clientXPositionOnGrid, setClientXPositionOnGrid] = useState(undefined);
58
61
  const [clientYPositionOnGrid, setClientYPositionOnGrid] = useState(undefined);
59
62
  const [scrollingOnCourse, setScrollingOnCourse] = useState(false);
63
+ const [controlsWrapperHeight, setControlsWrapperHeight] = useState(((_a = controlsWrapperRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) ? controlsWrapperRef.current.clientHeight : 0);
64
+ const [horizontalAxisWrapperHeight, setHorizontalAxisWrapperHeight] = useState(((_b = horizontalAxisWrapperRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)
65
+ ? horizontalAxisWrapperRef.current.clientHeight
66
+ : 0);
60
67
  //UseEffects
61
68
  useEffect(() => {
62
69
  setOrigin({
@@ -113,10 +120,22 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
113
120
  callsOnInitialView,
114
121
  ]);
115
122
  useEffect(() => {
123
+ var _a, _b;
124
+ const localConstControlsWrapperHeight = ((_a = controlsWrapperRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight)
125
+ ? controlsWrapperRef.current.clientHeight
126
+ : 0;
127
+ const localConstHorizontalAxisWrapperHeight = ((_b = horizontalAxisWrapperRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)
128
+ ? horizontalAxisWrapperRef.current.clientHeight
129
+ : 0;
130
+ setControlsWrapperHeight(localConstControlsWrapperHeight);
131
+ setHorizontalAxisWrapperHeight(localConstHorizontalAxisWrapperHeight);
116
132
  setUpdateList(true);
117
133
  // Dimensiones de paginacion, requiere agregar 1 para no ver espacios en blanco
118
134
  setPaginationWidth(Math.ceil((windowWidth - verticalAxisWidth) / cellsWidth) + 1);
119
- setPaginationHeight(Math.ceil((windowHeight - horizontalAxisHeight) / cellsHeight) + 1);
135
+ setPaginationHeight(Math.ceil((windowHeight -
136
+ localConstControlsWrapperHeight -
137
+ localConstHorizontalAxisWrapperHeight) /
138
+ cellsHeight) + 1);
120
139
  // Redefinicion de posicion X ante cambios en el tamaño de la ventana
121
140
  if (gridWrapperRef.current !== null) {
122
141
  setXPosition(gridWrapperRef.current.scrollLeft);
@@ -130,7 +149,6 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
130
149
  windowWidth,
131
150
  windowHeight,
132
151
  verticalAxisWidth,
133
- horizontalAxisHeight,
134
152
  cellsHeight,
135
153
  cellsWidth,
136
154
  chunkRenderX,
@@ -229,12 +247,7 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
229
247
  //Render
230
248
  return (React.createElement("div", { key: multicalendarId, id: multicalendarId, "data-testid": multicalendarId, className: "multicalendar", style: {
231
249
  gridTemplateColumns: `${verticalAxisWidth}px`,
232
- gridTemplateRows: `${((_a = controlsWrapperRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight)
233
- ? controlsWrapperRef.current.clientHeight
234
- : 0}px ${horizontalAxisHeight -
235
- (((_b = controlsWrapperRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)
236
- ? controlsWrapperRef.current.clientHeight
237
- : 0)}px calc(100% - ${horizontalAxisHeight}px`,
250
+ gridTemplateRows: `auto auto calc(100% - ${controlsWrapperHeight + horizontalAxisWrapperHeight}px`,
238
251
  } },
239
252
  React.createElement("div", { ref: controlsWrapperRef, className: "controls" },
240
253
  React.createElement("div", { className: "div-dates-navigation" },
@@ -251,7 +264,7 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
251
264
  gridWrapperRef.current.scrollTop = e.target.scrollTop;
252
265
  } },
253
266
  React.createElement(ListElementsColumn, { listHeight: cellsHeight * listElementsIdsArray.length, yOffset: yOffset, elementsHeight: cellsHeight, idsArray: visibleListElementsIds, ReactListElementChildren: ReactListElementChildren }))),
254
- React.createElement("div", { className: "horizontal-axis" },
267
+ React.createElement("div", { ref: horizontalAxisWrapperRef, className: "horizontal-axis" },
255
268
  React.createElement("div", { className: "div-weeks-buttons" },
256
269
  React.createElement("button", { className: "past-week-button", onClick: () => {
257
270
  // Se puede hacer funcion
@@ -273,7 +286,7 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
273
286
  if (gridWrapperRef.current !== null)
274
287
  gridWrapperRef.current.scrollLeft = e.target.scrollLeft;
275
288
  } },
276
- React.createElement(DatesRow, { visibleDates: visibleDates, width: (pastDaysQuantity + futureDaysQuantity) * cellsWidth, height: 64, cellsWidth: cellsWidth, cellsHeight: 64, offset: xOffset, language: language }))),
289
+ React.createElement(DatesRow, { visibleDates: visibleDates, width: (pastDaysQuantity + futureDaysQuantity) * cellsWidth, height: 74, cellsWidth: cellsWidth, cellsHeight: 74, offset: xOffset, language: language }))),
277
290
  React.createElement("div", { className: "div-main-container" },
278
291
  React.createElement("div", { ref: gridWrapperRef, className: "main-container", onScroll: (e) => {
279
292
  if (datesRowRef.current !== null) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "josenanodev-react-components-library",
3
- "version": "0.2.13",
3
+ "version": "0.2.14",
4
4
  "author": {
5
5
  "name": "Jose Carlos Cardenas Martinez"
6
6
  },