@react-stately/numberfield 3.0.3 → 3.0.4
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/main.js +26 -26
- package/dist/module.js +26 -26
- package/package.json +6 -6
package/dist/main.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
var $
|
|
2
|
-
var $
|
|
3
|
-
var $
|
|
1
|
+
var $ecmGu$reactstatelyutils = require("@react-stately/utils");
|
|
2
|
+
var $ecmGu$internationalizednumber = require("@internationalized/number");
|
|
3
|
+
var $ecmGu$react = require("react");
|
|
4
4
|
|
|
5
5
|
function $parcel$exportWildcard(dest, source) {
|
|
6
6
|
Object.keys(source).forEach(function(key) {
|
|
@@ -21,28 +21,28 @@ function $parcel$exportWildcard(dest, source) {
|
|
|
21
21
|
function $parcel$export(e, n, v, s) {
|
|
22
22
|
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
23
23
|
}
|
|
24
|
-
var $
|
|
24
|
+
var $28806f9190f1b366$exports = {};
|
|
25
25
|
|
|
26
|
-
$parcel$export($
|
|
26
|
+
$parcel$export($28806f9190f1b366$exports, "useNumberFieldState", () => $28806f9190f1b366$export$7f629e9dc1ecf37c);
|
|
27
27
|
|
|
28
28
|
|
|
29
29
|
|
|
30
|
-
function $
|
|
30
|
+
function $28806f9190f1b366$export$7f629e9dc1ecf37c(props) {
|
|
31
31
|
let { minValue: minValue , maxValue: maxValue , step: step , formatOptions: formatOptions , value: value1 , defaultValue: defaultValue , onChange: onChange , locale: locale , isDisabled: isDisabled , isReadOnly: isReadOnly } = props;
|
|
32
|
-
let [numberValue, setNumberValue] = $
|
|
33
|
-
let [inputValue, setInputValue] = $
|
|
32
|
+
let [numberValue, setNumberValue] = $ecmGu$reactstatelyutils.useControlledState(value1, isNaN(defaultValue) ? NaN : defaultValue, onChange);
|
|
33
|
+
let [inputValue, setInputValue] = $ecmGu$react.useState(()=>isNaN(numberValue) ? '' : new $ecmGu$internationalizednumber.NumberFormatter(locale, formatOptions).format(numberValue)
|
|
34
34
|
);
|
|
35
|
-
let numberParser = $
|
|
35
|
+
let numberParser = $ecmGu$react.useMemo(()=>new $ecmGu$internationalizednumber.NumberParser(locale, formatOptions)
|
|
36
36
|
, [
|
|
37
37
|
locale,
|
|
38
38
|
formatOptions
|
|
39
39
|
]);
|
|
40
|
-
let numberingSystem = $
|
|
40
|
+
let numberingSystem = $ecmGu$react.useMemo(()=>numberParser.getNumberingSystem(inputValue)
|
|
41
41
|
, [
|
|
42
42
|
numberParser,
|
|
43
43
|
inputValue
|
|
44
44
|
]);
|
|
45
|
-
let formatter = $
|
|
45
|
+
let formatter = $ecmGu$react.useMemo(()=>new $ecmGu$internationalizednumber.NumberFormatter(locale, {
|
|
46
46
|
...formatOptions,
|
|
47
47
|
numberingSystem: numberingSystem
|
|
48
48
|
})
|
|
@@ -51,11 +51,11 @@ function $ef13160816a10239$export$7f629e9dc1ecf37c(props) {
|
|
|
51
51
|
formatOptions,
|
|
52
52
|
numberingSystem
|
|
53
53
|
]);
|
|
54
|
-
let intlOptions = $
|
|
54
|
+
let intlOptions = $ecmGu$react.useMemo(()=>formatter.resolvedOptions()
|
|
55
55
|
, [
|
|
56
56
|
formatter
|
|
57
57
|
]);
|
|
58
|
-
let format = $
|
|
58
|
+
let format = $ecmGu$react.useCallback((value)=>isNaN(value) ? '' : formatter.format(value)
|
|
59
59
|
, [
|
|
60
60
|
formatter
|
|
61
61
|
]);
|
|
@@ -64,7 +64,7 @@ function $ef13160816a10239$export$7f629e9dc1ecf37c(props) {
|
|
|
64
64
|
// Update the input value when the number value or format options change. This is done
|
|
65
65
|
// in a useEffect so that the controlled behavior is correct and we only update the
|
|
66
66
|
// textfield after prop changes.
|
|
67
|
-
$
|
|
67
|
+
$ecmGu$react.useEffect(()=>{
|
|
68
68
|
setInputValue(format(numberValue));
|
|
69
69
|
}, [
|
|
70
70
|
numberValue,
|
|
@@ -72,12 +72,12 @@ function $ef13160816a10239$export$7f629e9dc1ecf37c(props) {
|
|
|
72
72
|
formatOptions
|
|
73
73
|
]);
|
|
74
74
|
// Store last parsed value in a ref so it can be used by increment/decrement below
|
|
75
|
-
let parsedValue = $
|
|
75
|
+
let parsedValue = $ecmGu$react.useMemo(()=>numberParser.parse(inputValue)
|
|
76
76
|
, [
|
|
77
77
|
numberParser,
|
|
78
78
|
inputValue
|
|
79
79
|
]);
|
|
80
|
-
let parsed = $
|
|
80
|
+
let parsed = $ecmGu$react.useRef(0);
|
|
81
81
|
parsed.current = parsedValue;
|
|
82
82
|
let commit = ()=>{
|
|
83
83
|
// Set to empty state if input value is empty
|
|
@@ -93,8 +93,8 @@ function $ef13160816a10239$export$7f629e9dc1ecf37c(props) {
|
|
|
93
93
|
}
|
|
94
94
|
// Clamp to min and max, round to the nearest step, and round to specified number of digits
|
|
95
95
|
let clampedValue;
|
|
96
|
-
if (isNaN(step)) clampedValue = $
|
|
97
|
-
else clampedValue = $
|
|
96
|
+
if (isNaN(step)) clampedValue = $ecmGu$reactstatelyutils.clamp(parsed.current, minValue, maxValue);
|
|
97
|
+
else clampedValue = $ecmGu$reactstatelyutils.snapValueToStep(parsed.current, minValue, maxValue, step);
|
|
98
98
|
clampedValue = numberParser.parse(format(clampedValue));
|
|
99
99
|
setNumberValue(clampedValue);
|
|
100
100
|
// in a controlled state, the numberValue won't change, so we won't go back to our old input without help
|
|
@@ -106,13 +106,13 @@ function $ef13160816a10239$export$7f629e9dc1ecf37c(props) {
|
|
|
106
106
|
// if the input is empty, start from the min/max value when incrementing/decrementing,
|
|
107
107
|
// or zero if there is no min/max value defined.
|
|
108
108
|
let newValue = isNaN(minMax) ? 0 : minMax;
|
|
109
|
-
return $
|
|
109
|
+
return $ecmGu$reactstatelyutils.snapValueToStep(newValue, minValue, maxValue, clampStep);
|
|
110
110
|
} else {
|
|
111
111
|
// otherwise, first snap the current value to the nearest step. if it moves in the direction
|
|
112
112
|
// we're going, use that value, otherwise add the step and snap that value.
|
|
113
|
-
let newValue = $
|
|
113
|
+
let newValue = $ecmGu$reactstatelyutils.snapValueToStep(prev, minValue, maxValue, clampStep);
|
|
114
114
|
if (operation === '+' && newValue > prev || operation === '-' && newValue < prev) return newValue;
|
|
115
|
-
return $
|
|
115
|
+
return $ecmGu$reactstatelyutils.snapValueToStep($28806f9190f1b366$var$handleDecimalOperation(operation, prev, clampStep), minValue, maxValue, clampStep);
|
|
116
116
|
}
|
|
117
117
|
};
|
|
118
118
|
let increment = ()=>{
|
|
@@ -130,12 +130,12 @@ function $ef13160816a10239$export$7f629e9dc1ecf37c(props) {
|
|
|
130
130
|
setNumberValue(newValue);
|
|
131
131
|
};
|
|
132
132
|
let incrementToMax = ()=>{
|
|
133
|
-
if (maxValue != null) setNumberValue($
|
|
133
|
+
if (maxValue != null) setNumberValue($ecmGu$reactstatelyutils.snapValueToStep(maxValue, minValue, maxValue, clampStep));
|
|
134
134
|
};
|
|
135
135
|
let decrementToMin = ()=>{
|
|
136
136
|
if (minValue != null) setNumberValue(minValue);
|
|
137
137
|
};
|
|
138
|
-
let canIncrement = $
|
|
138
|
+
let canIncrement = $ecmGu$react.useMemo(()=>!isDisabled && !isReadOnly && (isNaN(parsedValue) || isNaN(maxValue) || $ecmGu$reactstatelyutils.snapValueToStep(parsedValue, minValue, maxValue, clampStep) > parsedValue || $28806f9190f1b366$var$handleDecimalOperation('+', parsedValue, clampStep) <= maxValue)
|
|
139
139
|
, [
|
|
140
140
|
isDisabled,
|
|
141
141
|
isReadOnly,
|
|
@@ -144,7 +144,7 @@ function $ef13160816a10239$export$7f629e9dc1ecf37c(props) {
|
|
|
144
144
|
clampStep,
|
|
145
145
|
parsedValue
|
|
146
146
|
]);
|
|
147
|
-
let canDecrement = $
|
|
147
|
+
let canDecrement = $ecmGu$react.useMemo(()=>!isDisabled && !isReadOnly && (isNaN(parsedValue) || isNaN(minValue) || $ecmGu$reactstatelyutils.snapValueToStep(parsedValue, minValue, maxValue, clampStep) < parsedValue || $28806f9190f1b366$var$handleDecimalOperation('-', parsedValue, clampStep) >= minValue)
|
|
148
148
|
, [
|
|
149
149
|
isDisabled,
|
|
150
150
|
isReadOnly,
|
|
@@ -171,7 +171,7 @@ function $ef13160816a10239$export$7f629e9dc1ecf37c(props) {
|
|
|
171
171
|
commit: commit
|
|
172
172
|
};
|
|
173
173
|
}
|
|
174
|
-
function $
|
|
174
|
+
function $28806f9190f1b366$var$handleDecimalOperation(operator, value1, value2) {
|
|
175
175
|
let result = operator === '+' ? value1 + value2 : value1 - value2;
|
|
176
176
|
// Check if we have decimals
|
|
177
177
|
if (value1 % 1 !== 0 || value2 % 1 !== 0) {
|
|
@@ -192,7 +192,7 @@ function $ef13160816a10239$var$handleDecimalOperation(operator, value1, value2)
|
|
|
192
192
|
}
|
|
193
193
|
|
|
194
194
|
|
|
195
|
-
$parcel$exportWildcard(module.exports, $
|
|
195
|
+
$parcel$exportWildcard(module.exports, $28806f9190f1b366$exports);
|
|
196
196
|
|
|
197
197
|
|
|
198
198
|
//# sourceMappingURL=main.js.map
|
package/dist/module.js
CHANGED
|
@@ -1,32 +1,32 @@
|
|
|
1
|
-
import {useControlledState as $
|
|
2
|
-
import {NumberFormatter as $
|
|
3
|
-
import {useState as $
|
|
1
|
+
import {useControlledState as $k3hqg$useControlledState, clamp as $k3hqg$clamp, snapValueToStep as $k3hqg$snapValueToStep} from "@react-stately/utils";
|
|
2
|
+
import {NumberFormatter as $k3hqg$NumberFormatter, NumberParser as $k3hqg$NumberParser} from "@internationalized/number";
|
|
3
|
+
import {useState as $k3hqg$useState, useMemo as $k3hqg$useMemo, useCallback as $k3hqg$useCallback, useEffect as $k3hqg$useEffect, useRef as $k3hqg$useRef} from "react";
|
|
4
4
|
|
|
5
5
|
function $parcel$export(e, n, v, s) {
|
|
6
6
|
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
7
7
|
}
|
|
8
|
-
var $
|
|
8
|
+
var $9f327308a7d514e5$exports = {};
|
|
9
9
|
|
|
10
|
-
$parcel$export($
|
|
10
|
+
$parcel$export($9f327308a7d514e5$exports, "useNumberFieldState", () => $9f327308a7d514e5$export$7f629e9dc1ecf37c);
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
|
|
14
|
-
function $
|
|
14
|
+
function $9f327308a7d514e5$export$7f629e9dc1ecf37c(props) {
|
|
15
15
|
let { minValue: minValue , maxValue: maxValue , step: step , formatOptions: formatOptions , value: value1 , defaultValue: defaultValue , onChange: onChange , locale: locale , isDisabled: isDisabled , isReadOnly: isReadOnly } = props;
|
|
16
|
-
let [numberValue, setNumberValue] = $
|
|
17
|
-
let [inputValue, setInputValue] = $
|
|
16
|
+
let [numberValue, setNumberValue] = $k3hqg$useControlledState(value1, isNaN(defaultValue) ? NaN : defaultValue, onChange);
|
|
17
|
+
let [inputValue, setInputValue] = $k3hqg$useState(()=>isNaN(numberValue) ? '' : new $k3hqg$NumberFormatter(locale, formatOptions).format(numberValue)
|
|
18
18
|
);
|
|
19
|
-
let numberParser = $
|
|
19
|
+
let numberParser = $k3hqg$useMemo(()=>new $k3hqg$NumberParser(locale, formatOptions)
|
|
20
20
|
, [
|
|
21
21
|
locale,
|
|
22
22
|
formatOptions
|
|
23
23
|
]);
|
|
24
|
-
let numberingSystem = $
|
|
24
|
+
let numberingSystem = $k3hqg$useMemo(()=>numberParser.getNumberingSystem(inputValue)
|
|
25
25
|
, [
|
|
26
26
|
numberParser,
|
|
27
27
|
inputValue
|
|
28
28
|
]);
|
|
29
|
-
let formatter = $
|
|
29
|
+
let formatter = $k3hqg$useMemo(()=>new $k3hqg$NumberFormatter(locale, {
|
|
30
30
|
...formatOptions,
|
|
31
31
|
numberingSystem: numberingSystem
|
|
32
32
|
})
|
|
@@ -35,11 +35,11 @@ function $87aa52afafab9e9f$export$7f629e9dc1ecf37c(props) {
|
|
|
35
35
|
formatOptions,
|
|
36
36
|
numberingSystem
|
|
37
37
|
]);
|
|
38
|
-
let intlOptions = $
|
|
38
|
+
let intlOptions = $k3hqg$useMemo(()=>formatter.resolvedOptions()
|
|
39
39
|
, [
|
|
40
40
|
formatter
|
|
41
41
|
]);
|
|
42
|
-
let format = $
|
|
42
|
+
let format = $k3hqg$useCallback((value)=>isNaN(value) ? '' : formatter.format(value)
|
|
43
43
|
, [
|
|
44
44
|
formatter
|
|
45
45
|
]);
|
|
@@ -48,7 +48,7 @@ function $87aa52afafab9e9f$export$7f629e9dc1ecf37c(props) {
|
|
|
48
48
|
// Update the input value when the number value or format options change. This is done
|
|
49
49
|
// in a useEffect so that the controlled behavior is correct and we only update the
|
|
50
50
|
// textfield after prop changes.
|
|
51
|
-
$
|
|
51
|
+
$k3hqg$useEffect(()=>{
|
|
52
52
|
setInputValue(format(numberValue));
|
|
53
53
|
}, [
|
|
54
54
|
numberValue,
|
|
@@ -56,12 +56,12 @@ function $87aa52afafab9e9f$export$7f629e9dc1ecf37c(props) {
|
|
|
56
56
|
formatOptions
|
|
57
57
|
]);
|
|
58
58
|
// Store last parsed value in a ref so it can be used by increment/decrement below
|
|
59
|
-
let parsedValue = $
|
|
59
|
+
let parsedValue = $k3hqg$useMemo(()=>numberParser.parse(inputValue)
|
|
60
60
|
, [
|
|
61
61
|
numberParser,
|
|
62
62
|
inputValue
|
|
63
63
|
]);
|
|
64
|
-
let parsed = $
|
|
64
|
+
let parsed = $k3hqg$useRef(0);
|
|
65
65
|
parsed.current = parsedValue;
|
|
66
66
|
let commit = ()=>{
|
|
67
67
|
// Set to empty state if input value is empty
|
|
@@ -77,8 +77,8 @@ function $87aa52afafab9e9f$export$7f629e9dc1ecf37c(props) {
|
|
|
77
77
|
}
|
|
78
78
|
// Clamp to min and max, round to the nearest step, and round to specified number of digits
|
|
79
79
|
let clampedValue;
|
|
80
|
-
if (isNaN(step)) clampedValue = $
|
|
81
|
-
else clampedValue = $
|
|
80
|
+
if (isNaN(step)) clampedValue = $k3hqg$clamp(parsed.current, minValue, maxValue);
|
|
81
|
+
else clampedValue = $k3hqg$snapValueToStep(parsed.current, minValue, maxValue, step);
|
|
82
82
|
clampedValue = numberParser.parse(format(clampedValue));
|
|
83
83
|
setNumberValue(clampedValue);
|
|
84
84
|
// in a controlled state, the numberValue won't change, so we won't go back to our old input without help
|
|
@@ -90,13 +90,13 @@ function $87aa52afafab9e9f$export$7f629e9dc1ecf37c(props) {
|
|
|
90
90
|
// if the input is empty, start from the min/max value when incrementing/decrementing,
|
|
91
91
|
// or zero if there is no min/max value defined.
|
|
92
92
|
let newValue = isNaN(minMax) ? 0 : minMax;
|
|
93
|
-
return $
|
|
93
|
+
return $k3hqg$snapValueToStep(newValue, minValue, maxValue, clampStep);
|
|
94
94
|
} else {
|
|
95
95
|
// otherwise, first snap the current value to the nearest step. if it moves in the direction
|
|
96
96
|
// we're going, use that value, otherwise add the step and snap that value.
|
|
97
|
-
let newValue = $
|
|
97
|
+
let newValue = $k3hqg$snapValueToStep(prev, minValue, maxValue, clampStep);
|
|
98
98
|
if (operation === '+' && newValue > prev || operation === '-' && newValue < prev) return newValue;
|
|
99
|
-
return $
|
|
99
|
+
return $k3hqg$snapValueToStep($9f327308a7d514e5$var$handleDecimalOperation(operation, prev, clampStep), minValue, maxValue, clampStep);
|
|
100
100
|
}
|
|
101
101
|
};
|
|
102
102
|
let increment = ()=>{
|
|
@@ -114,12 +114,12 @@ function $87aa52afafab9e9f$export$7f629e9dc1ecf37c(props) {
|
|
|
114
114
|
setNumberValue(newValue);
|
|
115
115
|
};
|
|
116
116
|
let incrementToMax = ()=>{
|
|
117
|
-
if (maxValue != null) setNumberValue($
|
|
117
|
+
if (maxValue != null) setNumberValue($k3hqg$snapValueToStep(maxValue, minValue, maxValue, clampStep));
|
|
118
118
|
};
|
|
119
119
|
let decrementToMin = ()=>{
|
|
120
120
|
if (minValue != null) setNumberValue(minValue);
|
|
121
121
|
};
|
|
122
|
-
let canIncrement = $
|
|
122
|
+
let canIncrement = $k3hqg$useMemo(()=>!isDisabled && !isReadOnly && (isNaN(parsedValue) || isNaN(maxValue) || $k3hqg$snapValueToStep(parsedValue, minValue, maxValue, clampStep) > parsedValue || $9f327308a7d514e5$var$handleDecimalOperation('+', parsedValue, clampStep) <= maxValue)
|
|
123
123
|
, [
|
|
124
124
|
isDisabled,
|
|
125
125
|
isReadOnly,
|
|
@@ -128,7 +128,7 @@ function $87aa52afafab9e9f$export$7f629e9dc1ecf37c(props) {
|
|
|
128
128
|
clampStep,
|
|
129
129
|
parsedValue
|
|
130
130
|
]);
|
|
131
|
-
let canDecrement = $
|
|
131
|
+
let canDecrement = $k3hqg$useMemo(()=>!isDisabled && !isReadOnly && (isNaN(parsedValue) || isNaN(minValue) || $k3hqg$snapValueToStep(parsedValue, minValue, maxValue, clampStep) < parsedValue || $9f327308a7d514e5$var$handleDecimalOperation('-', parsedValue, clampStep) >= minValue)
|
|
132
132
|
, [
|
|
133
133
|
isDisabled,
|
|
134
134
|
isReadOnly,
|
|
@@ -155,7 +155,7 @@ function $87aa52afafab9e9f$export$7f629e9dc1ecf37c(props) {
|
|
|
155
155
|
commit: commit
|
|
156
156
|
};
|
|
157
157
|
}
|
|
158
|
-
function $
|
|
158
|
+
function $9f327308a7d514e5$var$handleDecimalOperation(operator, value1, value2) {
|
|
159
159
|
let result = operator === '+' ? value1 + value2 : value1 - value2;
|
|
160
160
|
// Check if we have decimals
|
|
161
161
|
if (value1 % 1 !== 0 || value2 % 1 !== 0) {
|
|
@@ -178,5 +178,5 @@ function $87aa52afafab9e9f$var$handleDecimalOperation(operator, value1, value2)
|
|
|
178
178
|
|
|
179
179
|
|
|
180
180
|
|
|
181
|
-
export {$
|
|
181
|
+
export {$9f327308a7d514e5$export$7f629e9dc1ecf37c as useNumberFieldState};
|
|
182
182
|
//# sourceMappingURL=module.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-stately/numberfield",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.4",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -18,10 +18,10 @@
|
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
20
|
"@babel/runtime": "^7.6.2",
|
|
21
|
-
"@internationalized/number": "^3.0.
|
|
22
|
-
"@react-stately/utils": "^3.4.
|
|
23
|
-
"@react-types/numberfield": "^3.1.
|
|
24
|
-
"@react-types/shared": "^3.11.
|
|
21
|
+
"@internationalized/number": "^3.0.5",
|
|
22
|
+
"@react-stately/utils": "^3.4.1",
|
|
23
|
+
"@react-types/numberfield": "^3.1.2",
|
|
24
|
+
"@react-types/shared": "^3.11.1"
|
|
25
25
|
},
|
|
26
26
|
"peerDependencies": {
|
|
27
27
|
"react": "^16.8.0 || ^17.0.0-rc.1"
|
|
@@ -29,5 +29,5 @@
|
|
|
29
29
|
"publishConfig": {
|
|
30
30
|
"access": "public"
|
|
31
31
|
},
|
|
32
|
-
"gitHead": "
|
|
32
|
+
"gitHead": "404d41859b7d6f56201d7fc01bd9f22ae3512937"
|
|
33
33
|
}
|