extra-react-hooks 0.8.10 → 0.8.12
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/use-number-input.js
CHANGED
|
@@ -27,15 +27,17 @@ export function useNumberInput({ value, lazy, onChange }) {
|
|
|
27
27
|
if (e.target.checkValidity()) {
|
|
28
28
|
const newValue = e.target.valueAsNumber;
|
|
29
29
|
if (isntNaN(newValue) && newValue !== value) {
|
|
30
|
-
setDisplayValue(newValue.toString());
|
|
30
|
+
setDisplayValue(newValue.toString(), true);
|
|
31
31
|
onChange(newValue, true);
|
|
32
32
|
}
|
|
33
33
|
else {
|
|
34
|
-
setDisplayValue(value.toString());
|
|
34
|
+
setDisplayValue(value.toString(), true);
|
|
35
|
+
onChange(value, true);
|
|
35
36
|
}
|
|
36
37
|
}
|
|
37
38
|
else {
|
|
38
|
-
setDisplayValue(value.toString());
|
|
39
|
+
setDisplayValue(value.toString(), true);
|
|
40
|
+
onChange(value, true);
|
|
39
41
|
}
|
|
40
42
|
}
|
|
41
43
|
};
|
|
@@ -50,8 +52,8 @@ function useDerivedState(dep) {
|
|
|
50
52
|
}, [dep]);
|
|
51
53
|
return [
|
|
52
54
|
stateRef.current,
|
|
53
|
-
newState => {
|
|
54
|
-
if (stateRef.current !== newState) {
|
|
55
|
+
(newState, force = false) => {
|
|
56
|
+
if (force || stateRef.current !== newState) {
|
|
55
57
|
stateRef.current = newState;
|
|
56
58
|
forceUpdate();
|
|
57
59
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-number-input.js","sourceRoot":"","sources":["../src/use-number-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAEtD,MAAM,UAAU,cAAc,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,
|
|
1
|
+
{"version":3,"file":"use-number-input.js","sourceRoot":"","sources":["../src/use-number-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAEtD,MAAM,UAAU,cAAc,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAQrD;IASC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,eAAe,CAAS,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;IAEjF,OAAO;QACL,aAAa;YACX,OAAO;gBACL,IAAI,EAAE,QAAQ;gBACd,KAAK,EAAE,YAAY;gBAGnB,QAAQ,CAAC,CAAC;oBACR,IAAI,IAAI,EAAE,CAAC;wBACT,CAAC,CAAC,MAAM,CAAC,cAAc,EAAE,CAAA;wBAEzB,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;oBACjC,CAAC;yBAAM,CAAC;wBACN,IAAI,CAAC,CAAC,MAAM,CAAC,cAAc,EAAE,EAAE,CAAC;4BAC9B,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,aAAa,CAAA;4BAEvC,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,QAAQ,KAAK,KAAK,EAAE,CAAC;gCAC5C,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAA;4BAC3B,CAAC;wBACH,CAAC;oBACH,CAAC;gBACH,CAAC;gBACD,MAAM,CAAC,CAAC;oBACN,IAAI,CAAC,CAAC,MAAM,CAAC,aAAa,EAAE,EAAE,CAAC;wBAC7B,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,aAAa,CAAA;wBAEvC,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,QAAQ,KAAK,KAAK,EAAE,CAAC;4BAC5C,eAAe,CAAC,QAAQ,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,CAAA;4BAE1C,QAAQ,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAA;wBAC1B,CAAC;6BAAM,CAAC;4BACN,eAAe,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,CAAA;4BAEvC,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,CAAA;wBACvB,CAAC;oBACH,CAAC;yBAAM,CAAC;wBACN,eAAe,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,CAAA;wBAEvC,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,CAAA;oBACvB,CAAC;gBACH,CAAC;aACF,CAAA;QACH,CAAC;KACF,CAAA;AACH,CAAC;AAED,SAAS,eAAe,CAAI,GAAM;IAIhC,MAAM,WAAW,GAAG,cAAc,EAAE,CAAA;IACpC,MAAM,QAAQ,GAAG,MAAM,CAAI,GAAG,CAAC,CAAA;IAE/B,OAAO,CAAC,GAAG,EAAE;QACX,QAAQ,CAAC,OAAO,GAAG,GAAG,CAAA;IACxB,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;IAET,OAAO;QACL,QAAQ,CAAC,OAAO;QAChB,CAAC,QAAQ,EAAE,KAAK,GAAG,KAAK,EAAE,EAAE;YAC1B,IAAI,KAAK,IAAI,QAAQ,CAAC,OAAO,KAAK,QAAQ,EAAE,CAAC;gBAC3C,QAAQ,CAAC,OAAO,GAAG,QAAQ,CAAA;gBAE3B,WAAW,EAAE,CAAA;YACf,CAAC;QACH,CAAC;KACF,CAAA;AACH,CAAC"}
|
package/package.json
CHANGED
package/src/use-number-input.ts
CHANGED
|
@@ -7,6 +7,9 @@ export function useNumberInput({ value, lazy, onChange }: {
|
|
|
7
7
|
value: number
|
|
8
8
|
lazy?: boolean
|
|
9
9
|
|
|
10
|
+
/**
|
|
11
|
+
* @param isEnd 表示输入结束, 每次输入结束一定会产生一个`isEnd = true`的调用.
|
|
12
|
+
*/
|
|
10
13
|
onChange(value: number, isEnd: boolean): void
|
|
11
14
|
}): {
|
|
12
15
|
getInputProps(): Required<Pick<
|
|
@@ -24,6 +27,8 @@ export function useNumberInput({ value, lazy, onChange }: {
|
|
|
24
27
|
return {
|
|
25
28
|
type: 'number'
|
|
26
29
|
, value: displayValue
|
|
30
|
+
// `input[type='number']`有一些特异行为:
|
|
31
|
+
// 如果只是在数字后面输入点`.`, 不会触发change事件.
|
|
27
32
|
, onChange(e) {
|
|
28
33
|
if (lazy) {
|
|
29
34
|
e.target.reportValidity()
|
|
@@ -44,14 +49,18 @@ export function useNumberInput({ value, lazy, onChange }: {
|
|
|
44
49
|
const newValue = e.target.valueAsNumber
|
|
45
50
|
|
|
46
51
|
if (isntNaN(newValue) && newValue !== value) {
|
|
47
|
-
setDisplayValue(newValue.toString())
|
|
52
|
+
setDisplayValue(newValue.toString(), true)
|
|
48
53
|
|
|
49
54
|
onChange(newValue, true)
|
|
50
55
|
} else {
|
|
51
|
-
setDisplayValue(value.toString())
|
|
56
|
+
setDisplayValue(value.toString(), true)
|
|
57
|
+
|
|
58
|
+
onChange(value, true)
|
|
52
59
|
}
|
|
53
60
|
} else {
|
|
54
|
-
setDisplayValue(value.toString())
|
|
61
|
+
setDisplayValue(value.toString(), true)
|
|
62
|
+
|
|
63
|
+
onChange(value, true)
|
|
55
64
|
}
|
|
56
65
|
}
|
|
57
66
|
}
|
|
@@ -59,7 +68,10 @@ export function useNumberInput({ value, lazy, onChange }: {
|
|
|
59
68
|
}
|
|
60
69
|
}
|
|
61
70
|
|
|
62
|
-
function useDerivedState<T>(dep: T): [
|
|
71
|
+
function useDerivedState<T>(dep: T): [
|
|
72
|
+
state: T
|
|
73
|
+
, setState: (newState: T, force?: boolean) => void
|
|
74
|
+
] {
|
|
63
75
|
const forceUpdate = useForceUpdate()
|
|
64
76
|
const stateRef = useRef<T>(dep)
|
|
65
77
|
|
|
@@ -69,8 +81,8 @@ function useDerivedState<T>(dep: T): [state: T, setState: (newState: T) => void]
|
|
|
69
81
|
|
|
70
82
|
return [
|
|
71
83
|
stateRef.current
|
|
72
|
-
, newState => {
|
|
73
|
-
if (stateRef.current !== newState) {
|
|
84
|
+
, (newState, force = false) => {
|
|
85
|
+
if (force || stateRef.current !== newState) {
|
|
74
86
|
stateRef.current = newState
|
|
75
87
|
|
|
76
88
|
forceUpdate()
|