josenanodev-react-components-library 0.2.16 → 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 +0 -2
- 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 +0 -2
- 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
|
});
|
|
@@ -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
|
});
|