josenanodev-react-components-library 0.2.15 → 0.2.17
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.
- package/dist/cjs/components/InputBoxWithConfirmation/InputBoxWithConfirmation.d.ts +1 -1
- package/dist/cjs/components/InputBoxWithConfirmation/InputBoxWithConfirmation.js +26 -7
- package/dist/cjs/components/InputBoxWithConfirmation/types.d.ts +4 -1
- package/dist/cjs/components/Multicalendar/Multicalendar.js +2 -4
- package/dist/esm/components/InputBoxWithConfirmation/InputBoxWithConfirmation.d.ts +1 -1
- package/dist/esm/components/InputBoxWithConfirmation/InputBoxWithConfirmation.js +27 -8
- package/dist/esm/components/InputBoxWithConfirmation/types.d.ts +4 -1
- package/dist/esm/components/Multicalendar/Multicalendar.js +2 -4
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import "./InputBoxWithConfirmation.css";
|
|
3
3
|
import { InputBoxWithConfirmationPropsType } from "./types";
|
|
4
|
-
declare const InputBoxWithConfirmation: ({ onConfirmAction, inputType, aditionalClass, defaultValue, }: InputBoxWithConfirmationPropsType) => JSX.Element;
|
|
4
|
+
declare const InputBoxWithConfirmation: ({ onConfirmAction, inputType, minimumValue, maximumValue, aditionalClass, defaultValue, showConfirmationButton, }: InputBoxWithConfirmationPropsType) => JSX.Element;
|
|
5
5
|
export default InputBoxWithConfirmation;
|
|
@@ -32,7 +32,7 @@ require("./InputBoxWithConfirmation.css");
|
|
|
32
32
|
const useOutsideClick_1 = __importDefault(require("../../hooks/useOutsideClick"));
|
|
33
33
|
//Icons
|
|
34
34
|
const bs_1 = require("react-icons/bs");
|
|
35
|
-
const InputBoxWithConfirmation = ({ onConfirmAction, inputType = "text", aditionalClass, defaultValue, }) => {
|
|
35
|
+
const InputBoxWithConfirmation = ({ onConfirmAction, inputType = "text", minimumValue = "", maximumValue = "", aditionalClass, defaultValue, showConfirmationButton, }) => {
|
|
36
36
|
//Refs
|
|
37
37
|
const inputRef = (0, react_1.useRef)(null);
|
|
38
38
|
const containerRef = (0, react_1.useRef)(null);
|
|
@@ -42,17 +42,36 @@ const InputBoxWithConfirmation = ({ onConfirmAction, inputType = "text", adition
|
|
|
42
42
|
const [focused, setFocused] = (0, react_1.useState)(false);
|
|
43
43
|
//Hooks
|
|
44
44
|
(0, useOutsideClick_1.default)(containerRef, () => {
|
|
45
|
-
|
|
46
|
-
|
|
45
|
+
if (showConfirmationButton) {
|
|
46
|
+
setCurrentValue(cachedValue);
|
|
47
|
+
}
|
|
48
|
+
else {
|
|
49
|
+
if (currentValue) {
|
|
50
|
+
onConfirmAction(currentValue);
|
|
51
|
+
setCachedValue(currentValue);
|
|
52
|
+
}
|
|
53
|
+
setFocused(false);
|
|
54
|
+
}
|
|
47
55
|
});
|
|
48
56
|
//Variables
|
|
49
57
|
return (react_1.default.createElement("div", { ref: containerRef, className: `div-wrapper-input-box-with-confirmation ${focused ? "focused" : ""} ${aditionalClass ? aditionalClass : ""}` },
|
|
50
|
-
react_1.default.createElement("input", { ref: inputRef, className: "input-box-with-confirmation", type: inputType, style: { width: `${((currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) ? currentValue.length : 0) + 7}ch` }, value: focused ? currentValue : cachedValue, onChange: (event) =>
|
|
58
|
+
react_1.default.createElement("input", { ref: inputRef, className: "input-box-with-confirmation", type: inputType, style: { width: `${((currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) ? currentValue.length : 0) + 7}ch` }, min: minimumValue, max: maximumValue, value: focused ? currentValue : cachedValue, onChange: (event) => {
|
|
59
|
+
if (inputType === "number") {
|
|
60
|
+
let numericValue = Number(event.target.value);
|
|
61
|
+
if (minimumValue !== "" && numericValue < Number(minimumValue)) {
|
|
62
|
+
numericValue = Number(minimumValue);
|
|
63
|
+
}
|
|
64
|
+
else if (maximumValue !== "" && numericValue > Number(maximumValue)) {
|
|
65
|
+
numericValue = Number(maximumValue);
|
|
66
|
+
}
|
|
67
|
+
setCurrentValue(String(numericValue));
|
|
68
|
+
}
|
|
69
|
+
setCurrentValue(event.target.value);
|
|
70
|
+
}, onFocus: (event) => {
|
|
51
71
|
setCachedValue(event.target.value);
|
|
52
72
|
setCurrentValue(event.target.value);
|
|
53
73
|
setFocused(true);
|
|
54
74
|
}, onKeyDown: (event) => {
|
|
55
|
-
console.log(event.key);
|
|
56
75
|
if (event.key === "Enter") {
|
|
57
76
|
if (currentValue) {
|
|
58
77
|
onConfirmAction(currentValue);
|
|
@@ -81,7 +100,7 @@ const InputBoxWithConfirmation = ({ onConfirmAction, inputType = "text", adition
|
|
|
81
100
|
}
|
|
82
101
|
}
|
|
83
102
|
} }),
|
|
84
|
-
focused ? (react_1.default.createElement("button", { className: "button-for-input-box-with-confirmation", onClick: () => {
|
|
103
|
+
showConfirmationButton && (react_1.default.createElement(react_1.Fragment, null, focused ? (react_1.default.createElement("button", { className: "button-for-input-box-with-confirmation", onClick: () => {
|
|
85
104
|
if (currentValue) {
|
|
86
105
|
onConfirmAction(currentValue);
|
|
87
106
|
setCachedValue(currentValue);
|
|
@@ -93,6 +112,6 @@ const InputBoxWithConfirmation = ({ onConfirmAction, inputType = "text", adition
|
|
|
93
112
|
inputRef.current.focus();
|
|
94
113
|
}
|
|
95
114
|
} },
|
|
96
|
-
react_1.default.createElement(bs_1.BsPencil, null)))));
|
|
115
|
+
react_1.default.createElement(bs_1.BsPencil, null)))))));
|
|
97
116
|
};
|
|
98
117
|
exports.default = InputBoxWithConfirmation;
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
export interface InputBoxWithConfirmationPropsType {
|
|
2
2
|
onConfirmAction: (inputCurrentValue: string) => void;
|
|
3
|
-
inputType?:
|
|
3
|
+
inputType?: "text" | "number";
|
|
4
|
+
minimumValue?: HTMLInputElement["min"],
|
|
5
|
+
maximumValue?: HTMLInputElement["max"],
|
|
4
6
|
aditionalClass?: string;
|
|
5
7
|
defaultValue?: string | number;
|
|
8
|
+
showConfirmationButton?: boolean;
|
|
6
9
|
}
|
|
@@ -272,7 +272,6 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
|
|
|
272
272
|
}
|
|
273
273
|
}, [authomaticScrollOnDraggingOverEdges, clientXPositionOnGrid, clientYPositionOnGrid]);
|
|
274
274
|
(0, react_1.useEffect)(() => {
|
|
275
|
-
console.log("addEventListener");
|
|
276
275
|
document.body.addEventListener("mousedown", () => {
|
|
277
276
|
setUserIsHoldingMouseDown(true);
|
|
278
277
|
});
|
|
@@ -280,7 +279,6 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
|
|
|
280
279
|
setUserIsHoldingMouseDown(false);
|
|
281
280
|
});
|
|
282
281
|
return () => {
|
|
283
|
-
console.log("removeEventListener");
|
|
284
282
|
document.body.removeEventListener("mousedown", () => {
|
|
285
283
|
setUserIsHoldingMouseDown(true);
|
|
286
284
|
});
|
|
@@ -356,14 +354,14 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
|
|
|
356
354
|
setPastDaysQuantity(pastDaysQuantity + 1);
|
|
357
355
|
e.target.scrollLeft = cellsWidth * 3;
|
|
358
356
|
}
|
|
359
|
-
Funciones.authomaticScrollInGrid(userIsHoldingMouseDown, clientXPositionOnGrid, clientYPositionOnGrid, cellsWidth * 0.
|
|
357
|
+
Funciones.authomaticScrollInGrid(userIsHoldingMouseDown, clientXPositionOnGrid, clientYPositionOnGrid, cellsWidth * 0.8, cellsHeight * 0.8, e.target);
|
|
360
358
|
}, onMouseMove: (e) => {
|
|
361
359
|
if (gridWrapperRef.current !== null && userIsHoldingMouseDown) {
|
|
362
360
|
let x = e.clientX - gridWrapperRef.current.getBoundingClientRect().left;
|
|
363
361
|
let y = e.clientY - gridWrapperRef.current.getBoundingClientRect().top;
|
|
364
362
|
setClientXPositionOnGrid(x);
|
|
365
363
|
setClientYPositionOnGrid(y);
|
|
366
|
-
Funciones.startAuthomaticScrollInGrid(userIsHoldingMouseDown, x, y, cellsWidth * 0.
|
|
364
|
+
Funciones.startAuthomaticScrollInGrid(userIsHoldingMouseDown, x, y, cellsWidth * 0.8, cellsHeight * 0.8, gridWrapperRef);
|
|
367
365
|
}
|
|
368
366
|
} },
|
|
369
367
|
react_1.default.createElement(DatesGrid_1.default, { gridWidth: (pastDaysQuantity + futureDaysQuantity) * cellsWidth, gridHeight: cellsHeight * listElementsIdsArray.length, xOffset: xOffset, yOffset: yOffset, cellsWidth: cellsWidth, cellsHeight: cellsHeight, visibleListElementsIdsArray: visibleListElementsIds, visibleDates: visibleDates, ReactCellChildren: ReactCellChildren })))));
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import "./InputBoxWithConfirmation.css";
|
|
3
3
|
import { InputBoxWithConfirmationPropsType } from "./types";
|
|
4
|
-
declare const InputBoxWithConfirmation: ({ onConfirmAction, inputType, aditionalClass, defaultValue, }: InputBoxWithConfirmationPropsType) => JSX.Element;
|
|
4
|
+
declare const InputBoxWithConfirmation: ({ onConfirmAction, inputType, minimumValue, maximumValue, aditionalClass, defaultValue, showConfirmationButton, }: InputBoxWithConfirmationPropsType) => JSX.Element;
|
|
5
5
|
export default InputBoxWithConfirmation;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import React, { useState, useRef } from "react";
|
|
1
|
+
import React, { useState, useRef, Fragment } from "react";
|
|
2
2
|
import "./InputBoxWithConfirmation.css";
|
|
3
3
|
//Hooks
|
|
4
4
|
import useOutsideClick from "../../hooks/useOutsideClick";
|
|
5
5
|
//Icons
|
|
6
6
|
import { BsCheckLg, BsPencil } from "react-icons/bs";
|
|
7
|
-
const InputBoxWithConfirmation = ({ onConfirmAction, inputType = "text", aditionalClass, defaultValue, }) => {
|
|
7
|
+
const InputBoxWithConfirmation = ({ onConfirmAction, inputType = "text", minimumValue = "", maximumValue = "", aditionalClass, defaultValue, showConfirmationButton, }) => {
|
|
8
8
|
//Refs
|
|
9
9
|
const inputRef = useRef(null);
|
|
10
10
|
const containerRef = useRef(null);
|
|
@@ -14,17 +14,36 @@ const InputBoxWithConfirmation = ({ onConfirmAction, inputType = "text", adition
|
|
|
14
14
|
const [focused, setFocused] = useState(false);
|
|
15
15
|
//Hooks
|
|
16
16
|
useOutsideClick(containerRef, () => {
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
if (showConfirmationButton) {
|
|
18
|
+
setCurrentValue(cachedValue);
|
|
19
|
+
}
|
|
20
|
+
else {
|
|
21
|
+
if (currentValue) {
|
|
22
|
+
onConfirmAction(currentValue);
|
|
23
|
+
setCachedValue(currentValue);
|
|
24
|
+
}
|
|
25
|
+
setFocused(false);
|
|
26
|
+
}
|
|
19
27
|
});
|
|
20
28
|
//Variables
|
|
21
29
|
return (React.createElement("div", { ref: containerRef, className: `div-wrapper-input-box-with-confirmation ${focused ? "focused" : ""} ${aditionalClass ? aditionalClass : ""}` },
|
|
22
|
-
React.createElement("input", { ref: inputRef, className: "input-box-with-confirmation", type: inputType, style: { width: `${((currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) ? currentValue.length : 0) + 7}ch` }, value: focused ? currentValue : cachedValue, onChange: (event) =>
|
|
30
|
+
React.createElement("input", { ref: inputRef, className: "input-box-with-confirmation", type: inputType, style: { width: `${((currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) ? currentValue.length : 0) + 7}ch` }, min: minimumValue, max: maximumValue, value: focused ? currentValue : cachedValue, onChange: (event) => {
|
|
31
|
+
if (inputType === "number") {
|
|
32
|
+
let numericValue = Number(event.target.value);
|
|
33
|
+
if (minimumValue !== "" && numericValue < Number(minimumValue)) {
|
|
34
|
+
numericValue = Number(minimumValue);
|
|
35
|
+
}
|
|
36
|
+
else if (maximumValue !== "" && numericValue > Number(maximumValue)) {
|
|
37
|
+
numericValue = Number(maximumValue);
|
|
38
|
+
}
|
|
39
|
+
setCurrentValue(String(numericValue));
|
|
40
|
+
}
|
|
41
|
+
setCurrentValue(event.target.value);
|
|
42
|
+
}, onFocus: (event) => {
|
|
23
43
|
setCachedValue(event.target.value);
|
|
24
44
|
setCurrentValue(event.target.value);
|
|
25
45
|
setFocused(true);
|
|
26
46
|
}, onKeyDown: (event) => {
|
|
27
|
-
console.log(event.key);
|
|
28
47
|
if (event.key === "Enter") {
|
|
29
48
|
if (currentValue) {
|
|
30
49
|
onConfirmAction(currentValue);
|
|
@@ -53,7 +72,7 @@ const InputBoxWithConfirmation = ({ onConfirmAction, inputType = "text", adition
|
|
|
53
72
|
}
|
|
54
73
|
}
|
|
55
74
|
} }),
|
|
56
|
-
focused ? (React.createElement("button", { className: "button-for-input-box-with-confirmation", onClick: () => {
|
|
75
|
+
showConfirmationButton && (React.createElement(Fragment, null, focused ? (React.createElement("button", { className: "button-for-input-box-with-confirmation", onClick: () => {
|
|
57
76
|
if (currentValue) {
|
|
58
77
|
onConfirmAction(currentValue);
|
|
59
78
|
setCachedValue(currentValue);
|
|
@@ -65,6 +84,6 @@ const InputBoxWithConfirmation = ({ onConfirmAction, inputType = "text", adition
|
|
|
65
84
|
inputRef.current.focus();
|
|
66
85
|
}
|
|
67
86
|
} },
|
|
68
|
-
React.createElement(BsPencil, null)))));
|
|
87
|
+
React.createElement(BsPencil, null)))))));
|
|
69
88
|
};
|
|
70
89
|
export default InputBoxWithConfirmation;
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
export interface InputBoxWithConfirmationPropsType {
|
|
2
2
|
onConfirmAction: (inputCurrentValue: string) => void;
|
|
3
|
-
inputType?:
|
|
3
|
+
inputType?: "text" | "number";
|
|
4
|
+
minimumValue?: HTMLInputElement["min"],
|
|
5
|
+
maximumValue?: HTMLInputElement["max"],
|
|
4
6
|
aditionalClass?: string;
|
|
5
7
|
defaultValue?: string | number;
|
|
8
|
+
showConfirmationButton?: boolean;
|
|
6
9
|
}
|
|
@@ -244,7 +244,6 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
|
|
|
244
244
|
}
|
|
245
245
|
}, [authomaticScrollOnDraggingOverEdges, clientXPositionOnGrid, clientYPositionOnGrid]);
|
|
246
246
|
useEffect(() => {
|
|
247
|
-
console.log("addEventListener");
|
|
248
247
|
document.body.addEventListener("mousedown", () => {
|
|
249
248
|
setUserIsHoldingMouseDown(true);
|
|
250
249
|
});
|
|
@@ -252,7 +251,6 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
|
|
|
252
251
|
setUserIsHoldingMouseDown(false);
|
|
253
252
|
});
|
|
254
253
|
return () => {
|
|
255
|
-
console.log("removeEventListener");
|
|
256
254
|
document.body.removeEventListener("mousedown", () => {
|
|
257
255
|
setUserIsHoldingMouseDown(true);
|
|
258
256
|
});
|
|
@@ -328,14 +326,14 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
|
|
|
328
326
|
setPastDaysQuantity(pastDaysQuantity + 1);
|
|
329
327
|
e.target.scrollLeft = cellsWidth * 3;
|
|
330
328
|
}
|
|
331
|
-
Funciones.authomaticScrollInGrid(userIsHoldingMouseDown, clientXPositionOnGrid, clientYPositionOnGrid, cellsWidth * 0.
|
|
329
|
+
Funciones.authomaticScrollInGrid(userIsHoldingMouseDown, clientXPositionOnGrid, clientYPositionOnGrid, cellsWidth * 0.8, cellsHeight * 0.8, e.target);
|
|
332
330
|
}, onMouseMove: (e) => {
|
|
333
331
|
if (gridWrapperRef.current !== null && userIsHoldingMouseDown) {
|
|
334
332
|
let x = e.clientX - gridWrapperRef.current.getBoundingClientRect().left;
|
|
335
333
|
let y = e.clientY - gridWrapperRef.current.getBoundingClientRect().top;
|
|
336
334
|
setClientXPositionOnGrid(x);
|
|
337
335
|
setClientYPositionOnGrid(y);
|
|
338
|
-
Funciones.startAuthomaticScrollInGrid(userIsHoldingMouseDown, x, y, cellsWidth * 0.
|
|
336
|
+
Funciones.startAuthomaticScrollInGrid(userIsHoldingMouseDown, x, y, cellsWidth * 0.8, cellsHeight * 0.8, gridWrapperRef);
|
|
339
337
|
}
|
|
340
338
|
} },
|
|
341
339
|
React.createElement(DatesGrid, { gridWidth: (pastDaysQuantity + futureDaysQuantity) * cellsWidth, gridHeight: cellsHeight * listElementsIdsArray.length, xOffset: xOffset, yOffset: yOffset, cellsWidth: cellsWidth, cellsHeight: cellsHeight, visibleListElementsIdsArray: visibleListElementsIds, visibleDates: visibleDates, ReactCellChildren: ReactCellChildren })))));
|