react-intl-number-input 0.8.1 → 0.8.2
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/README.md +1 -1
- package/dist/index.js +242 -236
- package/package.json +10 -26
package/README.md
CHANGED
|
@@ -182,7 +182,7 @@ Users type digits; the component applies locale formatting and optional prefix/s
|
|
|
182
182
|
|
|
183
183
|
See [CONTRIBUTING.md](CONTRIBUTING.md) for development setup, testing, and publishing instructions.
|
|
184
184
|
|
|
185
|
-
Local development requires Node.js
|
|
185
|
+
Local development requires Node.js 20+. The published package has no Node.js version constraint for consumers.
|
|
186
186
|
|
|
187
187
|
## Changelog
|
|
188
188
|
|
package/dist/index.js
CHANGED
|
@@ -1,253 +1,259 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
5
17
|
});
|
|
6
|
-
|
|
7
|
-
var
|
|
8
|
-
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
35
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
+
const react_1 = __importStar(require("react"));
|
|
9
37
|
function sanitizeString(str) {
|
|
10
|
-
|
|
38
|
+
return str.replace(/<[^>]*>/g, '');
|
|
11
39
|
}
|
|
12
40
|
function resolveLocale(locale) {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
41
|
+
try {
|
|
42
|
+
const supported = Intl.NumberFormat.supportedLocalesOf([locale]);
|
|
43
|
+
return supported.length > 0 ? supported[0] : 'en-US';
|
|
44
|
+
}
|
|
45
|
+
catch (_a) {
|
|
46
|
+
return 'en-US';
|
|
47
|
+
}
|
|
19
48
|
}
|
|
20
49
|
function isValidNumber(value) {
|
|
21
|
-
|
|
50
|
+
return Number.isFinite(value) && !Number.isNaN(value);
|
|
22
51
|
}
|
|
23
52
|
function clamp(value, min, max) {
|
|
24
|
-
|
|
53
|
+
return Math.min(Math.max(value, min), max);
|
|
25
54
|
}
|
|
26
55
|
function clampToBounds(value, min, max) {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
}
|
|
31
|
-
if (max !== undefined && result > max) {
|
|
32
|
-
result = max;
|
|
33
|
-
}
|
|
34
|
-
return result;
|
|
35
|
-
}
|
|
36
|
-
const IntlNumberInput = /*#__PURE__*/(0, _react.forwardRef)(function IntlNumberInput({
|
|
37
|
-
locale = 'en-US',
|
|
38
|
-
prefix = '',
|
|
39
|
-
suffix = '',
|
|
40
|
-
precision = 2,
|
|
41
|
-
value,
|
|
42
|
-
showStepButtons = false,
|
|
43
|
-
step = 1,
|
|
44
|
-
minValue,
|
|
45
|
-
maxValue,
|
|
46
|
-
inputMode: inputModeProp,
|
|
47
|
-
onChange,
|
|
48
|
-
onBlur,
|
|
49
|
-
disabled = false,
|
|
50
|
-
renderControls,
|
|
51
|
-
...inputProps
|
|
52
|
-
}, ref) {
|
|
53
|
-
const safePrecision = (0, _react.useMemo)(() => {
|
|
54
|
-
if (typeof precision !== 'number' || Number.isNaN(precision)) return 2;
|
|
55
|
-
return clamp(Math.round(precision), 0, 20);
|
|
56
|
-
}, [precision]);
|
|
57
|
-
const safeStep = (0, _react.useMemo)(() => {
|
|
58
|
-
if (typeof step !== 'number' || Number.isNaN(step) || step <= 0) return 1;
|
|
59
|
-
return step;
|
|
60
|
-
}, [step]);
|
|
61
|
-
const [effectiveMin, effectiveMax] = (0, _react.useMemo)(() => {
|
|
62
|
-
if (minValue !== undefined && maxValue !== undefined && minValue > maxValue) {
|
|
63
|
-
return [maxValue, minValue];
|
|
64
|
-
}
|
|
65
|
-
return [minValue, maxValue];
|
|
66
|
-
}, [minValue, maxValue]);
|
|
67
|
-
const getPrecisionValue = (0, _react.useCallback)(p => {
|
|
68
|
-
return Math.pow(10, p);
|
|
69
|
-
}, []);
|
|
70
|
-
const getNumberValue = (0, _react.useCallback)(strValue => {
|
|
71
|
-
const inputValue = String(strValue || '');
|
|
72
|
-
const hasNegativeSign = inputValue.includes('-');
|
|
73
|
-
const onlyDigits = inputValue.replace(/[^0-9]/g, '');
|
|
74
|
-
if (!onlyDigits) {
|
|
75
|
-
return hasNegativeSign ? -0 : 0;
|
|
76
|
-
}
|
|
77
|
-
const numberValue = Number(onlyDigits);
|
|
78
|
-
const parsedValue = numberValue / getPrecisionValue(safePrecision);
|
|
79
|
-
return hasNegativeSign ? -parsedValue : parsedValue;
|
|
80
|
-
}, [getPrecisionValue, safePrecision]);
|
|
81
|
-
const numberFormatter = (0, _react.useMemo)(() => {
|
|
82
|
-
const options = {
|
|
83
|
-
style: 'decimal',
|
|
84
|
-
minimumFractionDigits: safePrecision,
|
|
85
|
-
maximumFractionDigits: safePrecision
|
|
86
|
-
};
|
|
87
|
-
const resolvedLocale = resolveLocale(locale);
|
|
88
|
-
return new Intl.NumberFormat(resolvedLocale, options);
|
|
89
|
-
}, [locale, safePrecision]);
|
|
90
|
-
const formatNumber = (0, _react.useCallback)(val => {
|
|
91
|
-
let numberValue;
|
|
92
|
-
if (typeof val === 'string') {
|
|
93
|
-
numberValue = getNumberValue(val);
|
|
94
|
-
} else {
|
|
95
|
-
numberValue = val;
|
|
96
|
-
}
|
|
97
|
-
if (!isValidNumber(numberValue)) {
|
|
98
|
-
numberValue = 0;
|
|
99
|
-
}
|
|
100
|
-
numberValue = clampToBounds(numberValue, effectiveMin, effectiveMax);
|
|
101
|
-
const formattedNumber = numberFormatter.format(numberValue);
|
|
102
|
-
const safePrefix = sanitizeString(prefix);
|
|
103
|
-
const safeSuffix = sanitizeString(suffix);
|
|
104
|
-
return `${safePrefix}${formattedNumber}${safeSuffix}`;
|
|
105
|
-
}, [getNumberValue, numberFormatter, prefix, suffix, effectiveMin, effectiveMax]);
|
|
106
|
-
const getInitialValue = (0, _react.useCallback)(() => {
|
|
107
|
-
const initial = value !== undefined ? value : 0;
|
|
108
|
-
return formatNumber(initial);
|
|
109
|
-
}, [value, formatNumber]);
|
|
110
|
-
const getInitialNumericValue = (0, _react.useCallback)(() => {
|
|
111
|
-
const initial = value !== undefined ? value : 0;
|
|
112
|
-
if (typeof initial === 'string') {
|
|
113
|
-
return getNumberValue(initial);
|
|
56
|
+
let result = value;
|
|
57
|
+
if (min !== undefined && result < min) {
|
|
58
|
+
result = min;
|
|
114
59
|
}
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
const [maskedValue, setMaskedValue] = (0, _react.useState)(getInitialValue);
|
|
118
|
-
const numericValueRef = (0, _react.useRef)(getInitialNumericValue());
|
|
119
|
-
(0, _react.useEffect)(() => {
|
|
120
|
-
if (value === undefined) return;
|
|
121
|
-
const numericVal = typeof value === 'string' ? getNumberValue(value) : value;
|
|
122
|
-
const clamped = clampToBounds(numericVal, effectiveMin, effectiveMax);
|
|
123
|
-
setMaskedValue(formatNumber(clamped));
|
|
124
|
-
numericValueRef.current = clamped;
|
|
125
|
-
}, [value, formatNumber, getNumberValue, effectiveMin, effectiveMax]);
|
|
126
|
-
const handleChange = (0, _react.useCallback)(event => {
|
|
127
|
-
const rawValue = event.target.value;
|
|
128
|
-
const newValue = getNumberValue(rawValue);
|
|
129
|
-
if (!isValidNumber(newValue)) {
|
|
130
|
-
return;
|
|
60
|
+
if (max !== undefined && result > max) {
|
|
61
|
+
result = max;
|
|
131
62
|
}
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
const
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
const
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
63
|
+
return result;
|
|
64
|
+
}
|
|
65
|
+
const IntlNumberInput = (0, react_1.forwardRef)(function IntlNumberInput({ locale = 'en-US', prefix = '', suffix = '', precision = 2, value, showStepButtons = false, step = 1, minValue, maxValue, inputMode: inputModeProp, onChange, onBlur, disabled = false, renderControls, ...inputProps }, ref) {
|
|
66
|
+
const safePrecision = (0, react_1.useMemo)(() => {
|
|
67
|
+
if (typeof precision !== 'number' || Number.isNaN(precision))
|
|
68
|
+
return 2;
|
|
69
|
+
return clamp(Math.round(precision), 0, 20);
|
|
70
|
+
}, [precision]);
|
|
71
|
+
const safeStep = (0, react_1.useMemo)(() => {
|
|
72
|
+
if (typeof step !== 'number' || Number.isNaN(step) || step <= 0)
|
|
73
|
+
return 1;
|
|
74
|
+
return step;
|
|
75
|
+
}, [step]);
|
|
76
|
+
const [effectiveMin, effectiveMax] = (0, react_1.useMemo)(() => {
|
|
77
|
+
if (minValue !== undefined && maxValue !== undefined && minValue > maxValue) {
|
|
78
|
+
return [maxValue, minValue];
|
|
79
|
+
}
|
|
80
|
+
return [minValue, maxValue];
|
|
81
|
+
}, [minValue, maxValue]);
|
|
82
|
+
const getPrecisionValue = (0, react_1.useCallback)((p) => {
|
|
83
|
+
return Math.pow(10, p);
|
|
84
|
+
}, []);
|
|
85
|
+
const getNumberValue = (0, react_1.useCallback)((strValue) => {
|
|
86
|
+
const inputValue = String(strValue || '');
|
|
87
|
+
const hasNegativeSign = inputValue.includes('-');
|
|
88
|
+
const onlyDigits = inputValue.replace(/[^0-9]/g, '');
|
|
89
|
+
if (!onlyDigits) {
|
|
90
|
+
return hasNegativeSign ? -0 : 0;
|
|
91
|
+
}
|
|
92
|
+
const numberValue = Number(onlyDigits);
|
|
93
|
+
const parsedValue = numberValue / getPrecisionValue(safePrecision);
|
|
94
|
+
return hasNegativeSign ? -parsedValue : parsedValue;
|
|
95
|
+
}, [getPrecisionValue, safePrecision]);
|
|
96
|
+
const numberFormatter = (0, react_1.useMemo)(() => {
|
|
97
|
+
const options = {
|
|
98
|
+
style: 'decimal',
|
|
99
|
+
minimumFractionDigits: safePrecision,
|
|
100
|
+
maximumFractionDigits: safePrecision,
|
|
101
|
+
};
|
|
102
|
+
const resolvedLocale = resolveLocale(locale);
|
|
103
|
+
return new Intl.NumberFormat(resolvedLocale, options);
|
|
104
|
+
}, [locale, safePrecision]);
|
|
105
|
+
const formatNumber = (0, react_1.useCallback)((val) => {
|
|
106
|
+
let numberValue;
|
|
107
|
+
if (typeof val === 'string') {
|
|
108
|
+
numberValue = getNumberValue(val);
|
|
109
|
+
}
|
|
110
|
+
else {
|
|
111
|
+
numberValue = val;
|
|
112
|
+
}
|
|
113
|
+
if (!isValidNumber(numberValue)) {
|
|
114
|
+
numberValue = 0;
|
|
115
|
+
}
|
|
116
|
+
numberValue = clampToBounds(numberValue, effectiveMin, effectiveMax);
|
|
117
|
+
const formattedNumber = numberFormatter.format(numberValue);
|
|
118
|
+
const safePrefix = sanitizeString(prefix);
|
|
119
|
+
const safeSuffix = sanitizeString(suffix);
|
|
120
|
+
return `${safePrefix}${formattedNumber}${safeSuffix}`;
|
|
121
|
+
}, [getNumberValue, numberFormatter, prefix, suffix, effectiveMin, effectiveMax]);
|
|
122
|
+
const getInitialValue = (0, react_1.useCallback)(() => {
|
|
123
|
+
const initial = value !== undefined ? value : 0;
|
|
124
|
+
return formatNumber(initial);
|
|
125
|
+
}, [value, formatNumber]);
|
|
126
|
+
const getInitialNumericValue = (0, react_1.useCallback)(() => {
|
|
127
|
+
const initial = value !== undefined ? value : 0;
|
|
128
|
+
if (typeof initial === 'string') {
|
|
129
|
+
return getNumberValue(initial);
|
|
130
|
+
}
|
|
131
|
+
return initial;
|
|
132
|
+
}, [value, getNumberValue]);
|
|
133
|
+
const [maskedValue, setMaskedValue] = (0, react_1.useState)(getInitialValue);
|
|
134
|
+
const numericValueRef = (0, react_1.useRef)(getInitialNumericValue());
|
|
135
|
+
(0, react_1.useEffect)(() => {
|
|
136
|
+
if (value === undefined)
|
|
137
|
+
return;
|
|
138
|
+
const numericVal = typeof value === 'string' ? getNumberValue(value) : value;
|
|
139
|
+
const clamped = clampToBounds(numericVal, effectiveMin, effectiveMax);
|
|
140
|
+
setMaskedValue(formatNumber(clamped));
|
|
141
|
+
numericValueRef.current = clamped;
|
|
142
|
+
}, [value, formatNumber, getNumberValue, effectiveMin, effectiveMax]);
|
|
143
|
+
const handleChange = (0, react_1.useCallback)((event) => {
|
|
144
|
+
const rawValue = event.target.value;
|
|
145
|
+
const newValue = getNumberValue(rawValue);
|
|
146
|
+
if (!isValidNumber(newValue)) {
|
|
147
|
+
return;
|
|
148
|
+
}
|
|
149
|
+
const clampedValue = clampToBounds(newValue, effectiveMin, effectiveMax);
|
|
150
|
+
const newMaskedValue = formatNumber(clampedValue);
|
|
151
|
+
setMaskedValue(newMaskedValue);
|
|
152
|
+
numericValueRef.current = clampedValue;
|
|
153
|
+
if (onChange) {
|
|
154
|
+
onChange(event, clampedValue, newMaskedValue);
|
|
155
|
+
}
|
|
156
|
+
}, [getNumberValue, formatNumber, effectiveMin, effectiveMax, onChange]);
|
|
157
|
+
const handleBlur = (0, react_1.useCallback)((event) => {
|
|
158
|
+
const rawValue = event.target.value;
|
|
159
|
+
const currentValue = getNumberValue(rawValue);
|
|
160
|
+
const clampedValue = clampToBounds(currentValue, effectiveMin, effectiveMax);
|
|
161
|
+
const formattedValue = formatNumber(clampedValue);
|
|
162
|
+
setMaskedValue(formattedValue);
|
|
163
|
+
numericValueRef.current = clampedValue;
|
|
164
|
+
if (onBlur) {
|
|
165
|
+
onBlur(event, clampedValue, formattedValue);
|
|
166
|
+
}
|
|
167
|
+
}, [getNumberValue, formatNumber, effectiveMin, effectiveMax, onBlur]);
|
|
168
|
+
const handleStep = (0, react_1.useCallback)((delta, multiplier = 1) => {
|
|
169
|
+
if (disabled)
|
|
170
|
+
return;
|
|
171
|
+
const currentValue = numericValueRef.current;
|
|
172
|
+
const stepValue = (safeStep / Math.pow(10, safePrecision)) * multiplier;
|
|
173
|
+
const newValue = clampToBounds(currentValue + delta * stepValue, effectiveMin, effectiveMax);
|
|
174
|
+
const newMaskedValue = formatNumber(newValue);
|
|
175
|
+
setMaskedValue(newMaskedValue);
|
|
176
|
+
numericValueRef.current = newValue;
|
|
177
|
+
const syntheticEvent = {
|
|
178
|
+
target: {
|
|
179
|
+
value: newMaskedValue,
|
|
180
|
+
name: inputProps.name || '',
|
|
181
|
+
id: inputProps.id || '',
|
|
182
|
+
},
|
|
183
|
+
preventDefault: () => { },
|
|
184
|
+
};
|
|
185
|
+
if (onChange) {
|
|
186
|
+
onChange(syntheticEvent, newValue, newMaskedValue);
|
|
187
|
+
}
|
|
188
|
+
}, [
|
|
189
|
+
disabled,
|
|
190
|
+
safeStep,
|
|
191
|
+
safePrecision,
|
|
192
|
+
effectiveMin,
|
|
193
|
+
effectiveMax,
|
|
194
|
+
formatNumber,
|
|
195
|
+
onChange,
|
|
196
|
+
inputProps.name,
|
|
197
|
+
inputProps.id,
|
|
198
|
+
]);
|
|
199
|
+
const increment = (0, react_1.useCallback)((multiplier = 1) => handleStep(1, multiplier), [handleStep]);
|
|
200
|
+
const decrement = (0, react_1.useCallback)((multiplier = 1) => handleStep(-1, multiplier), [handleStep]);
|
|
201
|
+
const setValue = (0, react_1.useCallback)((newValue) => {
|
|
202
|
+
const clampedValue = clampToBounds(newValue, effectiveMin, effectiveMax);
|
|
203
|
+
const newMaskedValue = formatNumber(clampedValue);
|
|
204
|
+
setMaskedValue(newMaskedValue);
|
|
205
|
+
numericValueRef.current = clampedValue;
|
|
206
|
+
const syntheticEvent = {
|
|
207
|
+
target: {
|
|
208
|
+
value: newMaskedValue,
|
|
209
|
+
name: inputProps.name || '',
|
|
210
|
+
id: inputProps.id || '',
|
|
211
|
+
},
|
|
212
|
+
preventDefault: () => { },
|
|
213
|
+
};
|
|
214
|
+
if (onChange) {
|
|
215
|
+
onChange(syntheticEvent, clampedValue, newMaskedValue);
|
|
216
|
+
}
|
|
217
|
+
}, [effectiveMin, effectiveMax, formatNumber, onChange, inputProps.name, inputProps.id]);
|
|
218
|
+
const inputMode = (0, react_1.useMemo)(() => {
|
|
219
|
+
if (inputModeProp) {
|
|
220
|
+
return inputModeProp;
|
|
221
|
+
}
|
|
222
|
+
return safePrecision > 0 ? 'decimal' : 'numeric';
|
|
223
|
+
}, [inputModeProp, safePrecision]);
|
|
224
|
+
const inputElement = (react_1.default.createElement("input", { ref: ref, type: "text", inputMode: inputMode, value: maskedValue, disabled: disabled, onChange: handleChange, onBlur: handleBlur, ...inputProps }));
|
|
225
|
+
if (renderControls) {
|
|
226
|
+
const controlsProps = {
|
|
227
|
+
increment,
|
|
228
|
+
decrement,
|
|
229
|
+
setValue,
|
|
230
|
+
value: numericValueRef.current,
|
|
231
|
+
min: effectiveMin,
|
|
232
|
+
max: effectiveMax,
|
|
233
|
+
disabled,
|
|
234
|
+
step: safeStep,
|
|
235
|
+
precision: safePrecision,
|
|
236
|
+
formattedValue: maskedValue,
|
|
237
|
+
};
|
|
238
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
239
|
+
inputElement,
|
|
240
|
+
renderControls(controlsProps)));
|
|
239
241
|
}
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
onClick: () => handleStep(1),
|
|
243
|
-
disabled: disabled,
|
|
244
|
-
"aria-label": "Increase value",
|
|
245
|
-
style: {
|
|
246
|
-
padding: '4px 8px',
|
|
247
|
-
cursor: disabled ? 'not-allowed' : 'pointer',
|
|
248
|
-
opacity: disabled ? 0.5 : 1
|
|
242
|
+
if (!showStepButtons) {
|
|
243
|
+
return inputElement;
|
|
249
244
|
}
|
|
250
|
-
|
|
245
|
+
return (react_1.default.createElement("div", { style: { display: 'inline-flex', alignItems: 'center', gap: '4px' } },
|
|
246
|
+
react_1.default.createElement("button", { type: "button", onClick: () => handleStep(-1), disabled: disabled, "aria-label": "Decrease value", style: {
|
|
247
|
+
padding: '4px 8px',
|
|
248
|
+
cursor: disabled ? 'not-allowed' : 'pointer',
|
|
249
|
+
opacity: disabled ? 0.5 : 1,
|
|
250
|
+
} }, "-"),
|
|
251
|
+
inputElement,
|
|
252
|
+
react_1.default.createElement("button", { type: "button", onClick: () => handleStep(1), disabled: disabled, "aria-label": "Increase value", style: {
|
|
253
|
+
padding: '4px 8px',
|
|
254
|
+
cursor: disabled ? 'not-allowed' : 'pointer',
|
|
255
|
+
opacity: disabled ? 0.5 : 1,
|
|
256
|
+
} }, "+")));
|
|
251
257
|
});
|
|
252
258
|
IntlNumberInput.displayName = 'IntlNumberInput';
|
|
253
|
-
|
|
259
|
+
exports.default = (0, react_1.memo)(IntlNumberInput);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-intl-number-input",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.2",
|
|
4
4
|
"description": "A React component for masked and formatted number input.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -11,11 +11,6 @@
|
|
|
11
11
|
"default": "./dist/index.js"
|
|
12
12
|
}
|
|
13
13
|
},
|
|
14
|
-
"browserslist": [
|
|
15
|
-
"> 0.5%",
|
|
16
|
-
"last 2 versions",
|
|
17
|
-
"not dead"
|
|
18
|
-
],
|
|
19
14
|
"files": [
|
|
20
15
|
"dist",
|
|
21
16
|
"README.md",
|
|
@@ -24,12 +19,12 @@
|
|
|
24
19
|
"sideEffects": false,
|
|
25
20
|
"scripts": {
|
|
26
21
|
"test": "jest --runInBand",
|
|
27
|
-
"dev": "
|
|
28
|
-
"start": "
|
|
29
|
-
"transpile": "
|
|
30
|
-
"build:
|
|
31
|
-
"prepublishOnly": "npm test && npm run
|
|
32
|
-
"build": "
|
|
22
|
+
"dev": "node scripts/demo.mjs",
|
|
23
|
+
"start": "node scripts/demo.mjs",
|
|
24
|
+
"transpile": "tsc",
|
|
25
|
+
"build:lib": "tsc",
|
|
26
|
+
"prepublishOnly": "npm test && npm run build:lib",
|
|
27
|
+
"build": "node scripts/demo.mjs --production",
|
|
33
28
|
"deploy": "gh-pages -d example/dist",
|
|
34
29
|
"publish-demo": "npm run build && npm run deploy"
|
|
35
30
|
},
|
|
@@ -59,29 +54,18 @@
|
|
|
59
54
|
"react": ">=16.8.0 <20"
|
|
60
55
|
},
|
|
61
56
|
"devDependencies": {
|
|
62
|
-
"@babel/cli": "^8.0.4",
|
|
63
|
-
"@babel/core": "^8.0.1",
|
|
64
|
-
"@babel/preset-env": "^8.0.2",
|
|
65
|
-
"@babel/preset-react": "^8.0.1",
|
|
66
|
-
"@babel/preset-typescript": "^8.0.1",
|
|
67
57
|
"@testing-library/jest-dom": "^7.0.1",
|
|
68
58
|
"@testing-library/react": "^16.3.2",
|
|
69
59
|
"@types/react": "^19.2.18",
|
|
70
|
-
"
|
|
71
|
-
"babel-loader": "^10.1.1",
|
|
60
|
+
"esbuild": "^0.28.2",
|
|
72
61
|
"gh-pages": "^6.3.0",
|
|
73
|
-
"html-webpack-plugin": "^5.6.8",
|
|
74
62
|
"jest": "^30.4.2",
|
|
75
63
|
"jest-environment-jsdom": "^30.4.1",
|
|
76
64
|
"react": "^19.2.8",
|
|
77
65
|
"react-dom": "^19.2.8",
|
|
78
|
-
"typescript": "^7.0.2"
|
|
79
|
-
"webpack": "^5.109.2",
|
|
80
|
-
"webpack-cli": "^7.2.2",
|
|
81
|
-
"webpack-dev-server": "^6.0.0"
|
|
66
|
+
"typescript": "^7.0.2"
|
|
82
67
|
},
|
|
83
68
|
"overrides": {
|
|
84
|
-
"
|
|
85
|
-
"js-yaml": "^4.1.1"
|
|
69
|
+
"js-yaml": "4.3.1"
|
|
86
70
|
}
|
|
87
71
|
}
|