josenanodev-react-components-library 0.2.11 → 0.2.13

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.js +9 -2
  3. package/dist/cjs/components/Multicalendar/subcomponents/individuals/Cell/Cell.css +0 -1
  4. package/dist/esm/components/Multicalendar/Multicalendar.css +2 -2
  5. package/dist/esm/components/Multicalendar/Multicalendar.js +9 -2
  6. package/dist/esm/components/Multicalendar/subcomponents/individuals/Cell/Cell.css +0 -1
  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 {
@@ -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 {
package/dist/cjs/components/Multicalendar/Multicalendar.js CHANGED
@@ -43,12 +43,14 @@ const sqlToJsDate_1 = __importDefault(require("../../utils/sqlToJsDate"));
43
43
  //Services
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
+ var _a, _b;
46
47
  //Constantes del componente
47
48
  const initialDateOffset = 1 + chunkRenderX;
48
49
  //Refs
49
50
  const datesRowRef = (0, react_1.useRef)(null);
50
51
  const destiniesColumnRef = (0, react_1.useRef)(null);
51
52
  const gridWrapperRef = (0, react_1.useRef)(null);
53
+ const controlsWrapperRef = (0, react_1.useRef)(null);
52
54
  //Estados
53
55
  const [firtsCallOnInitialViewDone, setFirtsCallOnInitialViewDone] = (0, react_1.useState)(false);
54
56
  const [windowWidth, windowHeight] = (0, useWindowsSize_1.default)();
@@ -255,9 +257,14 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
255
257
  //Render
256
258
  return (react_1.default.createElement("div", { key: multicalendarId, id: multicalendarId, "data-testid": multicalendarId, className: "multicalendar", style: {
257
259
  gridTemplateColumns: `${verticalAxisWidth}px`,
258
- gridTemplateRows: `70px ${horizontalAxisHeight - 70}px calc(100% - ${horizontalAxisHeight}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`,
259
266
  } },
260
- react_1.default.createElement("div", { className: "controls" },
267
+ react_1.default.createElement("div", { ref: controlsWrapperRef, className: "controls" },
261
268
  react_1.default.createElement("div", { className: "div-dates-navigation" },
262
269
  react_1.default.createElement(DropdownMonthNavigation_1.default, { minimumVisibleDate: minimumVisibleDate, onChangeAction: (valorDeOpcion) => {
263
270
  Funciones.scrollByDate(new Date(Number(Date.parse((0, sqlToJsDate_1.default)(valorDeOpcion).toString()))), gridWrapperRef, pastDaysQuantity, cellsWidth);
package/dist/cjs/components/Multicalendar/subcomponents/individuals/Cell/Cell.css CHANGED
@@ -2,6 +2,5 @@
2
2
  position: relative;
3
3
  border: 1px solid rgb(200, 200, 200);
4
4
  border-radius: 6px;
5
- overflow: hidden;
6
5
  }
7
6
 
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 {
@@ -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 {
package/dist/esm/components/Multicalendar/Multicalendar.js CHANGED
@@ -15,12 +15,14 @@ import sqlToJsDate from "../../utils/sqlToJsDate";
15
15
  //Services
16
16
  import { 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
+ var _a, _b;
18
19
  //Constantes del componente
19
20
  const initialDateOffset = 1 + chunkRenderX;
20
21
  //Refs
21
22
  const datesRowRef = useRef(null);
22
23
  const destiniesColumnRef = useRef(null);
23
24
  const gridWrapperRef = useRef(null);
25
+ const controlsWrapperRef = useRef(null);
24
26
  //Estados
25
27
  const [firtsCallOnInitialViewDone, setFirtsCallOnInitialViewDone] = useState(false);
26
28
  const [windowWidth, windowHeight] = useWindowSize();
@@ -227,9 +229,14 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
227
229
  //Render
228
230
  return (React.createElement("div", { key: multicalendarId, id: multicalendarId, "data-testid": multicalendarId, className: "multicalendar", style: {
229
231
  gridTemplateColumns: `${verticalAxisWidth}px`,
230
- gridTemplateRows: `70px ${horizontalAxisHeight - 70}px calc(100% - ${horizontalAxisHeight}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`,
231
238
  } },
232
- React.createElement("div", { className: "controls" },
239
+ React.createElement("div", { ref: controlsWrapperRef, className: "controls" },
233
240
  React.createElement("div", { className: "div-dates-navigation" },
234
241
  React.createElement(DropdownMonthNavigation, { minimumVisibleDate: minimumVisibleDate, onChangeAction: (valorDeOpcion) => {
235
242
  Funciones.scrollByDate(new Date(Number(Date.parse(sqlToJsDate(valorDeOpcion).toString()))), gridWrapperRef, pastDaysQuantity, cellsWidth);
package/dist/esm/components/Multicalendar/subcomponents/individuals/Cell/Cell.css CHANGED
@@ -2,6 +2,5 @@
2
2
  position: relative;
3
3
  border: 1px solid rgb(200, 200, 200);
4
4
  border-radius: 6px;
5
- overflow: hidden;
6
5
  }
7
6
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "josenanodev-react-components-library",
3
- "version": "0.2.11",
3
+ "version": "0.2.13",
4
4
  "author": {
5
5
  "name": "Jose Carlos Cardenas Martinez"
6
6
  },