josenanodev-react-components-library 0.2.12 → 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 +4 -4
  2. package/dist/cjs/components/Multicalendar/Multicalendar.d.ts +1 -1
  3. package/dist/cjs/components/Multicalendar/Multicalendar.js +27 -7
  4. package/dist/esm/components/Multicalendar/Multicalendar.css +4 -4
  5. package/dist/esm/components/Multicalendar/Multicalendar.d.ts +1 -1
  6. package/dist/esm/components/Multicalendar/Multicalendar.js +27 -7
  7. package/package.json +1 -1
package/dist/cjs/components/Multicalendar/Multicalendar.css CHANGED
@@ -35,10 +35,9 @@
35
35
  display: flex;
36
36
  align-items: center;
37
37
  justify-content: space-between;
38
- flex-wrap: wrap;
38
+ flex-wrap: wrap-reverse;
39
39
  box-sizing: border-box;
40
40
  border-bottom: var(--border-tenues);
41
-
42
41
  }
43
42
 
44
43
  .multicalendar .div-upper-left-component {
@@ -70,7 +69,7 @@
70
69
  grid-area: hor;
71
70
  position: relative;
72
71
  max-width: 100%;
73
- height: 100%;
72
+ height: 90px;
74
73
  }
75
74
 
76
75
  .multicalendar .controls .div-dates-navigation {
@@ -100,6 +99,7 @@
100
99
  display: flex;
101
100
  justify-content: flex-end;
102
101
  align-items: center;
102
+ flex-grow: 1;
103
103
  }
104
104
 
105
105
  .multicalendar .div-main-container {
@@ -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,13 +42,18 @@ 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, }) => {
48
+ var _a, _b;
46
49
  //Constantes del componente
47
50
  const initialDateOffset = 1 + chunkRenderX;
48
51
  //Refs
49
52
  const datesRowRef = (0, react_1.useRef)(null);
50
53
  const destiniesColumnRef = (0, react_1.useRef)(null);
51
54
  const gridWrapperRef = (0, react_1.useRef)(null);
55
+ const controlsWrapperRef = (0, react_1.useRef)(null);
56
+ const horizontalAxisWrapperRef = (0, react_1.useRef)(null);
52
57
  //Estados
53
58
  const [firtsCallOnInitialViewDone, setFirtsCallOnInitialViewDone] = (0, react_1.useState)(false);
54
59
  const [windowWidth, windowHeight] = (0, useWindowsSize_1.default)();
@@ -83,6 +88,10 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
83
88
  const [clientXPositionOnGrid, setClientXPositionOnGrid] = (0, react_1.useState)(undefined);
84
89
  const [clientYPositionOnGrid, setClientYPositionOnGrid] = (0, react_1.useState)(undefined);
85
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);
86
95
  //UseEffects
87
96
  (0, react_1.useEffect)(() => {
88
97
  setOrigin({
@@ -139,10 +148,22 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
139
148
  callsOnInitialView,
140
149
  ]);
141
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);
142
160
  setUpdateList(true);
143
161
  // Dimensiones de paginacion, requiere agregar 1 para no ver espacios en blanco
144
162
  setPaginationWidth(Math.ceil((windowWidth - verticalAxisWidth) / cellsWidth) + 1);
145
- setPaginationHeight(Math.ceil((windowHeight - horizontalAxisHeight) / cellsHeight) + 1);
163
+ setPaginationHeight(Math.ceil((windowHeight -
164
+ localConstControlsWrapperHeight -
165
+ localConstHorizontalAxisWrapperHeight) /
166
+ cellsHeight) + 1);
146
167
  // Redefinicion de posicion X ante cambios en el tamaño de la ventana
147
168
  if (gridWrapperRef.current !== null) {
148
169
  setXPosition(gridWrapperRef.current.scrollLeft);
@@ -156,7 +177,6 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
156
177
  windowWidth,
157
178
  windowHeight,
158
179
  verticalAxisWidth,
159
- horizontalAxisHeight,
160
180
  cellsHeight,
161
181
  cellsWidth,
162
182
  chunkRenderX,
@@ -255,9 +275,9 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
255
275
  //Render
256
276
  return (react_1.default.createElement("div", { key: multicalendarId, id: multicalendarId, "data-testid": multicalendarId, className: "multicalendar", style: {
257
277
  gridTemplateColumns: `${verticalAxisWidth}px`,
258
- gridTemplateRows: `70px ${horizontalAxisHeight - 70}px calc(100% - ${horizontalAxisHeight}px`,
278
+ gridTemplateRows: `auto auto calc(100% - ${controlsWrapperHeight + horizontalAxisWrapperHeight}px`,
259
279
  } },
260
- react_1.default.createElement("div", { className: "controls" },
280
+ react_1.default.createElement("div", { ref: controlsWrapperRef, className: "controls" },
261
281
  react_1.default.createElement("div", { className: "div-dates-navigation" },
262
282
  react_1.default.createElement(DropdownMonthNavigation_1.default, { minimumVisibleDate: minimumVisibleDate, onChangeAction: (valorDeOpcion) => {
263
283
  Funciones.scrollByDate(new Date(Number(Date.parse((0, sqlToJsDate_1.default)(valorDeOpcion).toString()))), gridWrapperRef, pastDaysQuantity, cellsWidth);
@@ -272,7 +292,7 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
272
292
  gridWrapperRef.current.scrollTop = e.target.scrollTop;
273
293
  } },
274
294
  react_1.default.createElement(ListElementsColumn_1.default, { listHeight: cellsHeight * listElementsIdsArray.length, yOffset: yOffset, elementsHeight: cellsHeight, idsArray: visibleListElementsIds, ReactListElementChildren: ReactListElementChildren }))),
275
- react_1.default.createElement("div", { className: "horizontal-axis" },
295
+ react_1.default.createElement("div", { ref: horizontalAxisWrapperRef, className: "horizontal-axis" },
276
296
  react_1.default.createElement("div", { className: "div-weeks-buttons" },
277
297
  react_1.default.createElement("button", { className: "past-week-button", onClick: () => {
278
298
  // Se puede hacer funcion
@@ -294,7 +314,7 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
294
314
  if (gridWrapperRef.current !== null)
295
315
  gridWrapperRef.current.scrollLeft = e.target.scrollLeft;
296
316
  } },
297
- 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 }))),
298
318
  react_1.default.createElement("div", { className: "div-main-container" },
299
319
  react_1.default.createElement("div", { ref: gridWrapperRef, className: "main-container", onScroll: (e) => {
300
320
  if (datesRowRef.current !== null) {
package/dist/esm/components/Multicalendar/Multicalendar.css CHANGED
@@ -35,10 +35,9 @@
35
35
  display: flex;
36
36
  align-items: center;
37
37
  justify-content: space-between;
38
- flex-wrap: wrap;
38
+ flex-wrap: wrap-reverse;
39
39
  box-sizing: border-box;
40
40
  border-bottom: var(--border-tenues);
41
-
42
41
  }
43
42
 
44
43
  .multicalendar .div-upper-left-component {
@@ -70,7 +69,7 @@
70
69
  grid-area: hor;
71
70
  position: relative;
72
71
  max-width: 100%;
73
- height: 100%;
72
+ height: 90px;
74
73
  }
75
74
 
76
75
  .multicalendar .controls .div-dates-navigation {
@@ -100,6 +99,7 @@
100
99
  display: flex;
101
100
  justify-content: flex-end;
102
101
  align-items: center;
102
+ flex-grow: 1;
103
103
  }
104
104
 
105
105
  .multicalendar .div-main-container {
@@ -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,13 +14,18 @@ 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, }) => {
20
+ var _a, _b;
18
21
  //Constantes del componente
19
22
  const initialDateOffset = 1 + chunkRenderX;
20
23
  //Refs
21
24
  const datesRowRef = useRef(null);
22
25
  const destiniesColumnRef = useRef(null);
23
26
  const gridWrapperRef = useRef(null);
27
+ const controlsWrapperRef = useRef(null);
28
+ const horizontalAxisWrapperRef = useRef(null);
24
29
  //Estados
25
30
  const [firtsCallOnInitialViewDone, setFirtsCallOnInitialViewDone] = useState(false);
26
31
  const [windowWidth, windowHeight] = useWindowSize();
@@ -55,6 +60,10 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
55
60
  const [clientXPositionOnGrid, setClientXPositionOnGrid] = useState(undefined);
56
61
  const [clientYPositionOnGrid, setClientYPositionOnGrid] = useState(undefined);
57
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);
58
67
  //UseEffects
59
68
  useEffect(() => {
60
69
  setOrigin({
@@ -111,10 +120,22 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
111
120
  callsOnInitialView,
112
121
  ]);
113
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);
114
132
  setUpdateList(true);
115
133
  // Dimensiones de paginacion, requiere agregar 1 para no ver espacios en blanco
116
134
  setPaginationWidth(Math.ceil((windowWidth - verticalAxisWidth) / cellsWidth) + 1);
117
- setPaginationHeight(Math.ceil((windowHeight - horizontalAxisHeight) / cellsHeight) + 1);
135
+ setPaginationHeight(Math.ceil((windowHeight -
136
+ localConstControlsWrapperHeight -
137
+ localConstHorizontalAxisWrapperHeight) /
138
+ cellsHeight) + 1);
118
139
  // Redefinicion de posicion X ante cambios en el tamaño de la ventana
119
140
  if (gridWrapperRef.current !== null) {
120
141
  setXPosition(gridWrapperRef.current.scrollLeft);
@@ -128,7 +149,6 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
128
149
  windowWidth,
129
150
  windowHeight,
130
151
  verticalAxisWidth,
131
- horizontalAxisHeight,
132
152
  cellsHeight,
133
153
  cellsWidth,
134
154
  chunkRenderX,
@@ -227,9 +247,9 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
227
247
  //Render
228
248
  return (React.createElement("div", { key: multicalendarId, id: multicalendarId, "data-testid": multicalendarId, className: "multicalendar", style: {
229
249
  gridTemplateColumns: `${verticalAxisWidth}px`,
230
- gridTemplateRows: `70px ${horizontalAxisHeight - 70}px calc(100% - ${horizontalAxisHeight}px`,
250
+ gridTemplateRows: `auto auto calc(100% - ${controlsWrapperHeight + horizontalAxisWrapperHeight}px`,
231
251
  } },
232
- React.createElement("div", { className: "controls" },
252
+ React.createElement("div", { ref: controlsWrapperRef, className: "controls" },
233
253
  React.createElement("div", { className: "div-dates-navigation" },
234
254
  React.createElement(DropdownMonthNavigation, { minimumVisibleDate: minimumVisibleDate, onChangeAction: (valorDeOpcion) => {
235
255
  Funciones.scrollByDate(new Date(Number(Date.parse(sqlToJsDate(valorDeOpcion).toString()))), gridWrapperRef, pastDaysQuantity, cellsWidth);
@@ -244,7 +264,7 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
244
264
  gridWrapperRef.current.scrollTop = e.target.scrollTop;
245
265
  } },
246
266
  React.createElement(ListElementsColumn, { listHeight: cellsHeight * listElementsIdsArray.length, yOffset: yOffset, elementsHeight: cellsHeight, idsArray: visibleListElementsIds, ReactListElementChildren: ReactListElementChildren }))),
247
- React.createElement("div", { className: "horizontal-axis" },
267
+ React.createElement("div", { ref: horizontalAxisWrapperRef, className: "horizontal-axis" },
248
268
  React.createElement("div", { className: "div-weeks-buttons" },
249
269
  React.createElement("button", { className: "past-week-button", onClick: () => {
250
270
  // Se puede hacer funcion
@@ -266,7 +286,7 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
266
286
  if (gridWrapperRef.current !== null)
267
287
  gridWrapperRef.current.scrollLeft = e.target.scrollLeft;
268
288
  } },
269
- 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 }))),
270
290
  React.createElement("div", { className: "div-main-container" },
271
291
  React.createElement("div", { ref: gridWrapperRef, className: "main-container", onScroll: (e) => {
272
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.12",
3
+ "version": "0.2.14",
4
4
  "author": {
5
5
  "name": "Jose Carlos Cardenas Martinez"
6
6
  },