@chayns-components/core 5.0.21 → 5.0.25
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/lib/cjs/components/color-scheme-provider/ColorSchemeProvider.js +5 -1
- package/lib/cjs/components/color-scheme-provider/ColorSchemeProvider.js.map +1 -1
- package/lib/cjs/components/color-scheme-provider/ColorSchemeProvider.styles.js +37 -0
- package/lib/cjs/components/color-scheme-provider/ColorSchemeProvider.styles.js.map +1 -1
- package/lib/cjs/components/grouped-image/GroupedImage.styles.js +18 -20
- package/lib/cjs/components/grouped-image/GroupedImage.styles.js.map +1 -1
- package/lib/cjs/components/list/List.js +97 -37
- package/lib/cjs/components/list/List.js.map +1 -1
- package/lib/cjs/components/list/list-item/ListItem.js +0 -9
- package/lib/cjs/components/list/list-item/ListItem.js.map +1 -1
- package/lib/cjs/components/number-input/NumberInput.js +213 -132
- package/lib/cjs/components/number-input/NumberInput.js.map +1 -1
- package/lib/cjs/components/progress-bar/ProgressBar.js +181 -66
- package/lib/cjs/components/progress-bar/ProgressBar.js.map +1 -1
- package/lib/cjs/components/progress-bar/ProgressBar.styles.js +36 -1
- package/lib/cjs/components/progress-bar/ProgressBar.styles.js.map +1 -1
- package/lib/cjs/utils/numberInput.js +1 -0
- package/lib/cjs/utils/numberInput.js.map +1 -1
- package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.js +6 -2
- package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.js.map +1 -1
- package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.styles.js +38 -1
- package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.styles.js.map +1 -1
- package/lib/esm/components/grouped-image/GroupedImage.styles.js +18 -20
- package/lib/esm/components/grouped-image/GroupedImage.styles.js.map +1 -1
- package/lib/esm/components/list/List.js +97 -37
- package/lib/esm/components/list/List.js.map +1 -1
- package/lib/esm/components/list/list-item/ListItem.js +0 -9
- package/lib/esm/components/list/list-item/ListItem.js.map +1 -1
- package/lib/esm/components/number-input/NumberInput.js +213 -132
- package/lib/esm/components/number-input/NumberInput.js.map +1 -1
- package/lib/esm/components/progress-bar/ProgressBar.js +173 -68
- package/lib/esm/components/progress-bar/ProgressBar.js.map +1 -1
- package/lib/esm/components/progress-bar/ProgressBar.styles.js +36 -1
- package/lib/esm/components/progress-bar/ProgressBar.styles.js.map +1 -1
- package/lib/esm/utils/numberInput.js +1 -0
- package/lib/esm/utils/numberInput.js.map +1 -1
- package/lib/types/components/color-scheme-provider/ColorSchemeProvider.styles.d.ts +7 -3
- package/lib/types/components/grouped-image/GroupedImage.styles.d.ts +3 -1
- package/lib/types/components/list/List.d.ts +0 -1
- package/lib/types/components/progress-bar/ProgressBar.d.ts +9 -1
- package/lib/types/components/progress-bar/ProgressBar.styles.d.ts +7 -0
- package/package.json +2 -2
|
@@ -1,150 +1,231 @@
|
|
|
1
|
+
import { c as _c } from "react-compiler-runtime";
|
|
1
2
|
import React, { useEffect, useRef, useState } from 'react';
|
|
2
3
|
import { NUMBER_CLEAR_REGEX } from '../../constants/numberInput';
|
|
3
4
|
import { formateNumber, isValidString, parseFloatWithDecimals } from '../../utils/numberInput';
|
|
4
5
|
import Input from '../input/Input';
|
|
5
|
-
const NumberInput =
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
6
|
+
const NumberInput = t0 => {
|
|
7
|
+
"use memo";
|
|
8
|
+
|
|
9
|
+
const $ = _c(41);
|
|
10
|
+
const {
|
|
11
|
+
isDecimalInput,
|
|
12
|
+
isMoneyInput,
|
|
13
|
+
isTimeInput,
|
|
14
|
+
isInvalid,
|
|
15
|
+
maxNumber: t1,
|
|
16
|
+
value,
|
|
17
|
+
shouldTriggerChangeOnFormat: t2,
|
|
18
|
+
placeholder,
|
|
19
|
+
onBlur,
|
|
20
|
+
isDisabled,
|
|
21
|
+
onChange,
|
|
22
|
+
shouldShowOnlyBottomBorder,
|
|
23
|
+
minNumber: t3
|
|
24
|
+
} = t0;
|
|
25
|
+
const maxNumber = t1 === undefined ? Infinity : t1;
|
|
26
|
+
const shouldTriggerChangeOnFormat = t2 === undefined ? true : t2;
|
|
27
|
+
const minNumber = t3 === undefined ? -Infinity : t3;
|
|
28
|
+
const [plainText, setPlainText] = useState("");
|
|
29
|
+
const [formattedValue, setFormattedValue] = useState("");
|
|
24
30
|
const [hasFocus, setHasFocus] = useState(false);
|
|
25
31
|
const [shouldRemainPlaceholder, setShouldRemainPlaceholder] = useState(false);
|
|
26
32
|
const [isValueInvalid, setIsValueInvalid] = useState(false);
|
|
27
|
-
const localPlaceholder = placeholder ?? (isMoneyInput ?
|
|
33
|
+
const localPlaceholder = placeholder ?? (isMoneyInput ? "\u20AC" : undefined);
|
|
28
34
|
const initialInputRef = useRef(true);
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
}
|
|
38
|
-
const valueToCheck = sanitizedValueString.replaceAll(',', '.');
|
|
39
|
-
if (!isValidString({
|
|
40
|
-
string: valueToCheck,
|
|
41
|
-
isMoneyInput,
|
|
42
|
-
isDecimalInput,
|
|
43
|
-
isTimeInput
|
|
44
|
-
})) {
|
|
45
|
-
return;
|
|
46
|
-
}
|
|
47
|
-
if (maxNumber && Number(valueToCheck) > maxNumber || minNumber && Number(valueToCheck) < minNumber) {
|
|
48
|
-
return;
|
|
49
|
-
}
|
|
50
|
-
if (newValue.length === 1 && newValue.match(/^[0-9]+$/) === null) {
|
|
51
|
-
setShouldRemainPlaceholder(true);
|
|
52
|
-
} else {
|
|
53
|
-
setShouldRemainPlaceholder(false);
|
|
54
|
-
}
|
|
55
|
-
setPlainText(sanitizedValueString.replaceAll('.', ','));
|
|
56
|
-
if (typeof onChange === 'function') {
|
|
57
|
-
onChange(sanitizedValueString.replaceAll('.', ','));
|
|
58
|
-
}
|
|
59
|
-
};
|
|
60
|
-
const onLocalBlur = () => {
|
|
61
|
-
const sanitizedValue = plainText;
|
|
62
|
-
let newIsInvalid = false;
|
|
63
|
-
let parsedNumber = null;
|
|
64
|
-
if (!isTimeInput) {
|
|
65
|
-
parsedNumber = parseFloatWithDecimals({
|
|
66
|
-
stringValue: sanitizedValue.replace(',', '.').replaceAll(':', '').replace('€', ''),
|
|
67
|
-
decimals: isMoneyInput ? 2 : undefined
|
|
68
|
-
});
|
|
69
|
-
if (parsedNumber && parsedNumber !== 0 && (parsedNumber > maxNumber || parsedNumber < minNumber)) {
|
|
70
|
-
newIsInvalid = true;
|
|
35
|
+
let t4;
|
|
36
|
+
if ($[0] !== isDecimalInput || $[1] !== isMoneyInput || $[2] !== isTimeInput || $[3] !== maxNumber || $[4] !== minNumber || $[5] !== onChange) {
|
|
37
|
+
t4 = event => {
|
|
38
|
+
const newValue = event.target.value;
|
|
39
|
+
initialInputRef.current = false;
|
|
40
|
+
const sanitizedValueString = newValue.replace(NUMBER_CLEAR_REGEX, "");
|
|
41
|
+
if (isTimeInput && (sanitizedValueString.includes(":") && sanitizedValueString.length > 5 || !sanitizedValueString.includes(":") && sanitizedValueString.length > 4)) {
|
|
42
|
+
return;
|
|
71
43
|
}
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
if (isTimeInput) {
|
|
87
|
-
onBlur(newStringValue, newIsInvalid);
|
|
44
|
+
const valueToCheck = sanitizedValueString.replaceAll(",", ".");
|
|
45
|
+
if (!isValidString({
|
|
46
|
+
string: valueToCheck,
|
|
47
|
+
isMoneyInput,
|
|
48
|
+
isDecimalInput,
|
|
49
|
+
isTimeInput
|
|
50
|
+
})) {
|
|
51
|
+
return;
|
|
52
|
+
}
|
|
53
|
+
if (maxNumber && Number(valueToCheck) > maxNumber || minNumber && Number(valueToCheck) < minNumber) {
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
if (newValue.length === 1 && newValue.match(/^[0-9]+$/) === null) {
|
|
57
|
+
setShouldRemainPlaceholder(true);
|
|
88
58
|
} else {
|
|
89
|
-
|
|
59
|
+
setShouldRemainPlaceholder(false);
|
|
90
60
|
}
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
61
|
+
setPlainText(sanitizedValueString.replaceAll(".", ","));
|
|
62
|
+
if (typeof onChange === "function") {
|
|
63
|
+
onChange(sanitizedValueString.replaceAll(".", ","));
|
|
64
|
+
}
|
|
65
|
+
};
|
|
66
|
+
$[0] = isDecimalInput;
|
|
67
|
+
$[1] = isMoneyInput;
|
|
68
|
+
$[2] = isTimeInput;
|
|
69
|
+
$[3] = maxNumber;
|
|
70
|
+
$[4] = minNumber;
|
|
71
|
+
$[5] = onChange;
|
|
72
|
+
$[6] = t4;
|
|
73
|
+
} else {
|
|
74
|
+
t4 = $[6];
|
|
75
|
+
}
|
|
76
|
+
const onLocalChange = t4;
|
|
77
|
+
let t5;
|
|
78
|
+
if ($[7] !== isMoneyInput || $[8] !== isTimeInput || $[9] !== maxNumber || $[10] !== minNumber || $[11] !== onBlur || $[12] !== onChange || $[13] !== plainText || $[14] !== shouldTriggerChangeOnFormat) {
|
|
79
|
+
t5 = () => {
|
|
80
|
+
const sanitizedValue = plainText;
|
|
81
|
+
let newIsInvalid = false;
|
|
82
|
+
let parsedNumber = null;
|
|
83
|
+
if (!isTimeInput) {
|
|
84
|
+
parsedNumber = parseFloatWithDecimals({
|
|
85
|
+
stringValue: sanitizedValue.replace(",", ".").replaceAll(":", "").replace("\u20AC", ""),
|
|
86
|
+
decimals: isMoneyInput ? 2 : undefined
|
|
87
|
+
});
|
|
88
|
+
if (parsedNumber && parsedNumber !== 0 && (parsedNumber > maxNumber || parsedNumber < minNumber)) {
|
|
89
|
+
newIsInvalid = true;
|
|
90
|
+
}
|
|
91
|
+
setIsValueInvalid(newIsInvalid);
|
|
92
|
+
}
|
|
93
|
+
const newStringValue = plainText.length === 0 ? "" : formateNumber({
|
|
94
|
+
number: isTimeInput ? sanitizedValue : parsedNumber,
|
|
95
|
+
isMoneyInput,
|
|
96
|
+
isTimeInput
|
|
113
97
|
});
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
98
|
+
setFormattedValue(`${newStringValue} ${isMoneyInput ? "\u20AC" : ""}`);
|
|
99
|
+
setPlainText(newStringValue.replaceAll(".", ""));
|
|
100
|
+
setHasFocus(false);
|
|
101
|
+
if (typeof onChange === "function" && shouldTriggerChangeOnFormat) {
|
|
102
|
+
onChange(newStringValue.replaceAll(".", ""));
|
|
103
|
+
}
|
|
104
|
+
if (typeof onBlur === "function") {
|
|
105
|
+
if (isTimeInput) {
|
|
106
|
+
onBlur(newStringValue, newIsInvalid);
|
|
119
107
|
} else {
|
|
120
|
-
|
|
108
|
+
onBlur(parsedNumber, newIsInvalid);
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
};
|
|
112
|
+
$[7] = isMoneyInput;
|
|
113
|
+
$[8] = isTimeInput;
|
|
114
|
+
$[9] = maxNumber;
|
|
115
|
+
$[10] = minNumber;
|
|
116
|
+
$[11] = onBlur;
|
|
117
|
+
$[12] = onChange;
|
|
118
|
+
$[13] = plainText;
|
|
119
|
+
$[14] = shouldTriggerChangeOnFormat;
|
|
120
|
+
$[15] = t5;
|
|
121
|
+
} else {
|
|
122
|
+
t5 = $[15];
|
|
123
|
+
}
|
|
124
|
+
const onLocalBlur = t5;
|
|
125
|
+
let t6;
|
|
126
|
+
if ($[16] !== formattedValue || $[17] !== onChange || $[18] !== shouldTriggerChangeOnFormat) {
|
|
127
|
+
t6 = () => {
|
|
128
|
+
setPlainText(formattedValue.replaceAll(".", "").replace("\u20AC", "").replaceAll(" ", ""));
|
|
129
|
+
if (typeof onChange === "function" && shouldTriggerChangeOnFormat) {
|
|
130
|
+
onChange(formattedValue.replaceAll(".", "").replace("\u20AC", "").replaceAll(" ", ""));
|
|
131
|
+
}
|
|
132
|
+
setIsValueInvalid(false);
|
|
133
|
+
setHasFocus(true);
|
|
134
|
+
};
|
|
135
|
+
$[16] = formattedValue;
|
|
136
|
+
$[17] = onChange;
|
|
137
|
+
$[18] = shouldTriggerChangeOnFormat;
|
|
138
|
+
$[19] = t6;
|
|
139
|
+
} else {
|
|
140
|
+
t6 = $[19];
|
|
141
|
+
}
|
|
142
|
+
const onLocalFocus = t6;
|
|
143
|
+
let t7;
|
|
144
|
+
let t8;
|
|
145
|
+
if ($[20] !== hasFocus || $[21] !== isMoneyInput || $[22] !== isTimeInput || $[23] !== maxNumber || $[24] !== minNumber || $[25] !== plainText) {
|
|
146
|
+
t7 = () => {
|
|
147
|
+
let parsedNumber_0 = null;
|
|
148
|
+
if (!isTimeInput) {
|
|
149
|
+
parsedNumber_0 = parseFloatWithDecimals({
|
|
150
|
+
stringValue: plainText.replace(",", ".").replaceAll(":", "").replace("\u20AC", "").replaceAll(" ", ""),
|
|
151
|
+
decimals: isMoneyInput ? 2 : undefined
|
|
152
|
+
});
|
|
153
|
+
if (!hasFocus) {
|
|
154
|
+
if (parsedNumber_0 === null && initialInputRef.current) {
|
|
155
|
+
setIsValueInvalid(false);
|
|
156
|
+
} else {
|
|
157
|
+
setIsValueInvalid(parsedNumber_0 === null || parsedNumber_0 > maxNumber || parsedNumber_0 < minNumber);
|
|
158
|
+
}
|
|
121
159
|
}
|
|
122
160
|
}
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
161
|
+
setFormattedValue(plainText.length === 0 ? "" : `${formateNumber({
|
|
162
|
+
number: isTimeInput ? plainText : parsedNumber_0,
|
|
163
|
+
isMoneyInput,
|
|
164
|
+
isTimeInput
|
|
165
|
+
})}${isMoneyInput ? " \u20AC" : ""}`);
|
|
166
|
+
};
|
|
167
|
+
t8 = [hasFocus, isMoneyInput, isTimeInput, maxNumber, minNumber, plainText];
|
|
168
|
+
$[20] = hasFocus;
|
|
169
|
+
$[21] = isMoneyInput;
|
|
170
|
+
$[22] = isTimeInput;
|
|
171
|
+
$[23] = maxNumber;
|
|
172
|
+
$[24] = minNumber;
|
|
173
|
+
$[25] = plainText;
|
|
174
|
+
$[26] = t7;
|
|
175
|
+
$[27] = t8;
|
|
176
|
+
} else {
|
|
177
|
+
t7 = $[26];
|
|
178
|
+
t8 = $[27];
|
|
179
|
+
}
|
|
180
|
+
useEffect(t7, t8);
|
|
181
|
+
let t10;
|
|
182
|
+
let t9;
|
|
183
|
+
if ($[28] !== value) {
|
|
184
|
+
t9 = () => {
|
|
185
|
+
if (typeof value === "string") {
|
|
186
|
+
setPlainText(value.replace("\u20AC", "").replaceAll(" ", ""));
|
|
187
|
+
}
|
|
188
|
+
};
|
|
189
|
+
t10 = [value];
|
|
190
|
+
$[28] = value;
|
|
191
|
+
$[29] = t10;
|
|
192
|
+
$[30] = t9;
|
|
193
|
+
} else {
|
|
194
|
+
t10 = $[29];
|
|
195
|
+
t9 = $[30];
|
|
196
|
+
}
|
|
197
|
+
useEffect(t9, t10);
|
|
198
|
+
const t11 = hasFocus ? plainText : formattedValue;
|
|
199
|
+
const t12 = typeof isInvalid === "boolean" ? isInvalid : isValueInvalid;
|
|
200
|
+
let t13;
|
|
201
|
+
if ($[31] !== isDisabled || $[32] !== localPlaceholder || $[33] !== onLocalBlur || $[34] !== onLocalChange || $[35] !== onLocalFocus || $[36] !== shouldRemainPlaceholder || $[37] !== shouldShowOnlyBottomBorder || $[38] !== t11 || $[39] !== t12) {
|
|
202
|
+
t13 = /*#__PURE__*/React.createElement(Input, {
|
|
203
|
+
shouldRemainPlaceholder: shouldRemainPlaceholder,
|
|
204
|
+
shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,
|
|
205
|
+
inputMode: "decimal",
|
|
206
|
+
onChange: onLocalChange,
|
|
207
|
+
value: t11,
|
|
208
|
+
placeholder: localPlaceholder,
|
|
209
|
+
onBlur: onLocalBlur,
|
|
210
|
+
onFocus: onLocalFocus,
|
|
211
|
+
isDisabled: isDisabled,
|
|
212
|
+
isInvalid: t12,
|
|
213
|
+
shouldShowCenteredContent: shouldShowOnlyBottomBorder
|
|
214
|
+
});
|
|
215
|
+
$[31] = isDisabled;
|
|
216
|
+
$[32] = localPlaceholder;
|
|
217
|
+
$[33] = onLocalBlur;
|
|
218
|
+
$[34] = onLocalChange;
|
|
219
|
+
$[35] = onLocalFocus;
|
|
220
|
+
$[36] = shouldRemainPlaceholder;
|
|
221
|
+
$[37] = shouldShowOnlyBottomBorder;
|
|
222
|
+
$[38] = t11;
|
|
223
|
+
$[39] = t12;
|
|
224
|
+
$[40] = t13;
|
|
225
|
+
} else {
|
|
226
|
+
t13 = $[40];
|
|
227
|
+
}
|
|
228
|
+
return t13;
|
|
148
229
|
};
|
|
149
230
|
NumberInput.displayName = 'NumberInput';
|
|
150
231
|
export default NumberInput;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberInput.js","names":["React","useEffect","useRef","useState","NUMBER_CLEAR_REGEX","formateNumber","isValidString","parseFloatWithDecimals","Input","NumberInput","isDecimalInput","isMoneyInput","isTimeInput","isInvalid","maxNumber","Infinity","value","shouldTriggerChangeOnFormat","placeholder","onBlur","isDisabled","onChange","shouldShowOnlyBottomBorder","minNumber","plainText","setPlainText","formattedValue","setFormattedValue","hasFocus","setHasFocus","shouldRemainPlaceholder","setShouldRemainPlaceholder","isValueInvalid","setIsValueInvalid","localPlaceholder","undefined","initialInputRef","onLocalChange","event","newValue","target","current","sanitizedValueString","replace","includes","length","valueToCheck","replaceAll","string","Number","match","onLocalBlur","sanitizedValue","newIsInvalid","parsedNumber","stringValue","decimals","newStringValue","number","onLocalFocus","createElement","inputMode","onFocus","shouldShowCenteredContent","displayName"],"sources":["../../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import React, { ChangeEventHandler, FC, useEffect, useRef, useState } from 'react';\nimport { NUMBER_CLEAR_REGEX } from '../../constants/numberInput';\nimport { formateNumber, isValidString, parseFloatWithDecimals } from '../../utils/numberInput';\nimport Input from '../input/Input';\n\nexport type NumberInputProps = {\n /**\n * Applies rules for decimal input.\n * Enables the user to input one zero as number before the comma\n */\n isDecimalInput?: boolean;\n /**\n * Whether the input is disabled\n */\n isDisabled?: boolean;\n /**\n * Whether the value is invalid.\n */\n isInvalid?: boolean;\n /**\n * Applies rules for money input.\n * Rules: only two decimal places, one zero before the comma\n */\n isMoneyInput?: boolean;\n /**\n * Whether the value should be formatted as a time.\n */\n isTimeInput?: boolean;\n /**\n * Limits the number to this value\n */\n maxNumber?: number;\n /**\n * Limits the number to this value\n */\n minNumber?: number;\n /**\n * Callback function that is called when the input gets out of focus\n */\n onBlur?: (newNumber: number | string | null, isInvalid: boolean) => void;\n /**\n * Callback function that is called when the input changes\n * It will pass the text from the input\n */\n onChange?: (newValue: string) => void;\n /**\n * Placeholder for the input field\n */\n placeholder?: string;\n /**\n * Whether only the bottom border should be displayed\n */\n shouldShowOnlyBottomBorder?: boolean;\n /**\n * Whether the onChange function should be triggert when the value is formatted on the focus or blur\n */\n shouldTriggerChangeOnFormat?: boolean;\n /**\n * The value, that should be displayed in the input, when it is in focus.\n * You can also pass a stringified number as default value.\n * NOTE: If you pass a stringified number, it will be formatted to the selected format\n */\n value?: string;\n};\n\nconst NumberInput: FC<NumberInputProps> = ({\n isDecimalInput,\n isMoneyInput,\n isTimeInput,\n isInvalid,\n maxNumber = Infinity,\n value,\n shouldTriggerChangeOnFormat = true,\n placeholder,\n onBlur,\n isDisabled,\n onChange,\n shouldShowOnlyBottomBorder,\n minNumber = -Infinity,\n}) => {\n // the plainText will be shown in the input, when it is in focus\n const [plainText, setPlainText] = useState<string>('');\n // the formattedValue will be shown in the input, when it is not in focus\n const [formattedValue, setFormattedValue] = useState<string>('');\n const [hasFocus, setHasFocus] = useState<boolean>(false);\n const [shouldRemainPlaceholder, setShouldRemainPlaceholder] = useState<boolean>(false);\n\n const [isValueInvalid, setIsValueInvalid] = useState(false);\n const localPlaceholder = placeholder ?? (isMoneyInput ? '€' : undefined);\n\n const initialInputRef = useRef(true);\n\n const onLocalChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const newValue = event.target.value;\n\n initialInputRef.current = false;\n\n const sanitizedValueString = newValue\n // Removes everything except numbers, commas and points\n .replace(NUMBER_CLEAR_REGEX, '');\n\n if (\n isTimeInput &&\n ((sanitizedValueString.includes(':') && sanitizedValueString.length > 5) ||\n (!sanitizedValueString.includes(':') && sanitizedValueString.length > 4))\n ) {\n return;\n }\n\n const valueToCheck = sanitizedValueString.replaceAll(',', '.');\n\n if (!isValidString({ string: valueToCheck, isMoneyInput, isDecimalInput, isTimeInput })) {\n return;\n }\n\n if (\n (maxNumber && Number(valueToCheck) > maxNumber) ||\n (minNumber && Number(valueToCheck) < minNumber)\n ) {\n return;\n }\n\n if (newValue.length === 1 && newValue.match(/^[0-9]+$/) === null) {\n setShouldRemainPlaceholder(true);\n } else {\n setShouldRemainPlaceholder(false);\n }\n\n setPlainText(sanitizedValueString.replaceAll('.', ','));\n\n if (typeof onChange === 'function') {\n onChange(sanitizedValueString.replaceAll('.', ','));\n }\n };\n\n const onLocalBlur = () => {\n const sanitizedValue = plainText;\n let newIsInvalid = false;\n let parsedNumber = null;\n\n if (!isTimeInput) {\n parsedNumber = parseFloatWithDecimals({\n stringValue: sanitizedValue.replace(',', '.').replaceAll(':', '').replace('€', ''),\n decimals: isMoneyInput ? 2 : undefined,\n });\n\n if (\n parsedNumber &&\n parsedNumber !== 0 &&\n (parsedNumber > maxNumber || parsedNumber < minNumber)\n ) {\n newIsInvalid = true;\n }\n\n setIsValueInvalid(newIsInvalid);\n }\n\n const newStringValue =\n plainText.length === 0\n ? ''\n : formateNumber({\n number: isTimeInput ? sanitizedValue : parsedNumber,\n isMoneyInput,\n isTimeInput,\n });\n\n setFormattedValue(`${newStringValue} ${isMoneyInput ? '€' : ''}`);\n setPlainText(newStringValue.replaceAll('.', ''));\n setHasFocus(false);\n\n if (typeof onChange === 'function' && shouldTriggerChangeOnFormat) {\n onChange(newStringValue.replaceAll('.', ''));\n }\n\n if (typeof onBlur === 'function') {\n if (isTimeInput) {\n onBlur(newStringValue, newIsInvalid);\n } else {\n onBlur(parsedNumber, newIsInvalid);\n }\n }\n };\n\n const onLocalFocus = () => {\n // formattedValue will be a number string with german number format (e.g. 1.000,00)\n // It will remove all dots, so that the user can type in the number\n setPlainText(formattedValue.replaceAll('.', '').replace('€', '').replaceAll(' ', ''));\n\n // This will update the external state\n if (typeof onChange === 'function' && shouldTriggerChangeOnFormat) {\n onChange(formattedValue.replaceAll('.', '').replace('€', '').replaceAll(' ', ''));\n }\n\n setIsValueInvalid(false);\n setHasFocus(true);\n };\n\n // updates the formattedValue, when the value changes\n useEffect(() => {\n let parsedNumber = null;\n\n if (!isTimeInput) {\n parsedNumber = parseFloatWithDecimals({\n stringValue: plainText\n .replace(',', '.')\n .replaceAll(':', '')\n .replace('€', '')\n .replaceAll(' ', ''),\n decimals: isMoneyInput ? 2 : undefined,\n });\n\n // checks, if a given number is invalid, if the input is not in focus\n if (!hasFocus) {\n if (parsedNumber === null && initialInputRef.current) {\n setIsValueInvalid(false);\n } else {\n setIsValueInvalid(\n parsedNumber === null ||\n parsedNumber > maxNumber ||\n parsedNumber < minNumber,\n );\n }\n }\n }\n\n setFormattedValue(\n plainText.length === 0\n ? ''\n : `${formateNumber({\n number: isTimeInput ? plainText : parsedNumber,\n isMoneyInput,\n isTimeInput,\n })}${isMoneyInput ? ' €' : ''}`,\n );\n }, [hasFocus, isMoneyInput, isTimeInput, maxNumber, minNumber, plainText]);\n\n useEffect(() => {\n if (typeof value === 'string') {\n setPlainText(value.replace('€', '').replaceAll(' ', ''));\n }\n }, [value]);\n\n return (\n <Input\n shouldRemainPlaceholder={shouldRemainPlaceholder}\n shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n inputMode=\"decimal\"\n onChange={onLocalChange}\n value={hasFocus ? plainText : formattedValue}\n placeholder={localPlaceholder}\n onBlur={onLocalBlur}\n onFocus={onLocalFocus}\n isDisabled={isDisabled}\n isInvalid={typeof isInvalid === 'boolean' ? isInvalid : isValueInvalid}\n shouldShowCenteredContent={shouldShowOnlyBottomBorder}\n />\n );\n};\n\nNumberInput.displayName = 'NumberInput';\n\nexport default NumberInput;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"NumberInput.js","names":["React","useEffect","useRef","useState","NUMBER_CLEAR_REGEX","formateNumber","isValidString","parseFloatWithDecimals","Input","NumberInput","t0","$","_c","isDecimalInput","isMoneyInput","isTimeInput","isInvalid","maxNumber","t1","value","shouldTriggerChangeOnFormat","t2","placeholder","onBlur","isDisabled","onChange","shouldShowOnlyBottomBorder","minNumber","t3","undefined","Infinity","plainText","setPlainText","formattedValue","setFormattedValue","hasFocus","setHasFocus","shouldRemainPlaceholder","setShouldRemainPlaceholder","isValueInvalid","setIsValueInvalid","localPlaceholder","initialInputRef","t4","event","newValue","target","current","sanitizedValueString","replace","includes","length","valueToCheck","replaceAll","string","Number","match","onLocalChange","t5","sanitizedValue","newIsInvalid","parsedNumber","stringValue","decimals","newStringValue","number","onLocalBlur","t6","onLocalFocus","t7","t8","parsedNumber_0","t10","t9","t11","t12","t13","createElement","inputMode","displayName"],"sources":["../../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import React, { ChangeEventHandler, FC, useEffect, useRef, useState } from 'react';\nimport { NUMBER_CLEAR_REGEX } from '../../constants/numberInput';\nimport { formateNumber, isValidString, parseFloatWithDecimals } from '../../utils/numberInput';\nimport Input from '../input/Input';\n\nexport type NumberInputProps = {\n /**\n * Applies rules for decimal input.\n * Enables the user to input one zero as number before the comma\n */\n isDecimalInput?: boolean;\n /**\n * Whether the input is disabled\n */\n isDisabled?: boolean;\n /**\n * Whether the value is invalid.\n */\n isInvalid?: boolean;\n /**\n * Applies rules for money input.\n * Rules: only two decimal places, one zero before the comma\n */\n isMoneyInput?: boolean;\n /**\n * Whether the value should be formatted as a time.\n */\n isTimeInput?: boolean;\n /**\n * Limits the number to this value\n */\n maxNumber?: number;\n /**\n * Limits the number to this value\n */\n minNumber?: number;\n /**\n * Callback function that is called when the input gets out of focus\n */\n onBlur?: (newNumber: number | string | null, isInvalid: boolean) => void;\n /**\n * Callback function that is called when the input changes\n * It will pass the text from the input\n */\n onChange?: (newValue: string) => void;\n /**\n * Placeholder for the input field\n */\n placeholder?: string;\n /**\n * Whether only the bottom border should be displayed\n */\n shouldShowOnlyBottomBorder?: boolean;\n /**\n * Whether the onChange function should be triggert when the value is formatted on the focus or blur\n */\n shouldTriggerChangeOnFormat?: boolean;\n /**\n * The value, that should be displayed in the input, when it is in focus.\n * You can also pass a stringified number as default value.\n * NOTE: If you pass a stringified number, it will be formatted to the selected format\n */\n value?: string;\n};\n\nconst NumberInput: FC<NumberInputProps> = ({\n isDecimalInput,\n isMoneyInput,\n isTimeInput,\n isInvalid,\n maxNumber = Infinity,\n value,\n shouldTriggerChangeOnFormat = true,\n placeholder,\n onBlur,\n isDisabled,\n onChange,\n shouldShowOnlyBottomBorder,\n minNumber = -Infinity,\n}) => {\n 'use memo';\n\n // the plainText will be shown in the input, when it is in focus\n const [plainText, setPlainText] = useState<string>('');\n // the formattedValue will be shown in the input, when it is not in focus\n const [formattedValue, setFormattedValue] = useState<string>('');\n const [hasFocus, setHasFocus] = useState<boolean>(false);\n const [shouldRemainPlaceholder, setShouldRemainPlaceholder] = useState<boolean>(false);\n\n const [isValueInvalid, setIsValueInvalid] = useState(false);\n const localPlaceholder = placeholder ?? (isMoneyInput ? '€' : undefined);\n\n const initialInputRef = useRef(true);\n\n const onLocalChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const newValue = event.target.value;\n\n initialInputRef.current = false;\n\n const sanitizedValueString = newValue\n // Removes everything except numbers, commas and points\n .replace(NUMBER_CLEAR_REGEX, '');\n\n if (\n isTimeInput &&\n ((sanitizedValueString.includes(':') && sanitizedValueString.length > 5) ||\n (!sanitizedValueString.includes(':') && sanitizedValueString.length > 4))\n ) {\n return;\n }\n\n const valueToCheck = sanitizedValueString.replaceAll(',', '.');\n\n if (!isValidString({ string: valueToCheck, isMoneyInput, isDecimalInput, isTimeInput })) {\n return;\n }\n\n if (\n (maxNumber && Number(valueToCheck) > maxNumber) ||\n (minNumber && Number(valueToCheck) < minNumber)\n ) {\n return;\n }\n\n if (newValue.length === 1 && newValue.match(/^[0-9]+$/) === null) {\n setShouldRemainPlaceholder(true);\n } else {\n setShouldRemainPlaceholder(false);\n }\n\n setPlainText(sanitizedValueString.replaceAll('.', ','));\n\n if (typeof onChange === 'function') {\n onChange(sanitizedValueString.replaceAll('.', ','));\n }\n };\n\n const onLocalBlur = () => {\n const sanitizedValue = plainText;\n let newIsInvalid = false;\n let parsedNumber = null;\n\n if (!isTimeInput) {\n parsedNumber = parseFloatWithDecimals({\n stringValue: sanitizedValue.replace(',', '.').replaceAll(':', '').replace('€', ''),\n decimals: isMoneyInput ? 2 : undefined,\n });\n\n if (\n parsedNumber &&\n parsedNumber !== 0 &&\n (parsedNumber > maxNumber || parsedNumber < minNumber)\n ) {\n newIsInvalid = true;\n }\n\n setIsValueInvalid(newIsInvalid);\n }\n\n const newStringValue =\n plainText.length === 0\n ? ''\n : formateNumber({\n number: isTimeInput ? sanitizedValue : parsedNumber,\n isMoneyInput,\n isTimeInput,\n });\n\n setFormattedValue(`${newStringValue} ${isMoneyInput ? '€' : ''}`);\n setPlainText(newStringValue.replaceAll('.', ''));\n setHasFocus(false);\n\n if (typeof onChange === 'function' && shouldTriggerChangeOnFormat) {\n onChange(newStringValue.replaceAll('.', ''));\n }\n\n if (typeof onBlur === 'function') {\n if (isTimeInput) {\n onBlur(newStringValue, newIsInvalid);\n } else {\n onBlur(parsedNumber, newIsInvalid);\n }\n }\n };\n\n const onLocalFocus = () => {\n // formattedValue will be a number string with german number format (e.g. 1.000,00)\n // It will remove all dots, so that the user can type in the number\n setPlainText(formattedValue.replaceAll('.', '').replace('€', '').replaceAll(' ', ''));\n\n // This will update the external state\n if (typeof onChange === 'function' && shouldTriggerChangeOnFormat) {\n onChange(formattedValue.replaceAll('.', '').replace('€', '').replaceAll(' ', ''));\n }\n\n setIsValueInvalid(false);\n setHasFocus(true);\n };\n\n // updates the formattedValue, when the value changes\n useEffect(() => {\n let parsedNumber = null;\n\n if (!isTimeInput) {\n parsedNumber = parseFloatWithDecimals({\n stringValue: plainText\n .replace(',', '.')\n .replaceAll(':', '')\n .replace('€', '')\n .replaceAll(' ', ''),\n decimals: isMoneyInput ? 2 : undefined,\n });\n\n // checks, if a given number is invalid, if the input is not in focus\n if (!hasFocus) {\n if (parsedNumber === null && initialInputRef.current) {\n setIsValueInvalid(false);\n } else {\n setIsValueInvalid(\n parsedNumber === null ||\n parsedNumber > maxNumber ||\n parsedNumber < minNumber,\n );\n }\n }\n }\n\n setFormattedValue(\n plainText.length === 0\n ? ''\n : `${formateNumber({\n number: isTimeInput ? plainText : parsedNumber,\n isMoneyInput,\n isTimeInput,\n })}${isMoneyInput ? ' €' : ''}`,\n );\n }, [hasFocus, isMoneyInput, isTimeInput, maxNumber, minNumber, plainText]);\n\n useEffect(() => {\n if (typeof value === 'string') {\n setPlainText(value.replace('€', '').replaceAll(' ', ''));\n }\n }, [value]);\n\n return (\n <Input\n shouldRemainPlaceholder={shouldRemainPlaceholder}\n shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n inputMode=\"decimal\"\n onChange={onLocalChange}\n value={hasFocus ? plainText : formattedValue}\n placeholder={localPlaceholder}\n onBlur={onLocalBlur}\n onFocus={onLocalFocus}\n isDisabled={isDisabled}\n isInvalid={typeof isInvalid === 'boolean' ? isInvalid : isValueInvalid}\n shouldShowCenteredContent={shouldShowOnlyBottomBorder}\n />\n );\n};\n\nNumberInput.displayName = 'NumberInput';\n\nexport default NumberInput;\n"],"mappings":"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","ignoreList":[]}
|