extra-react-hooks 0.8.9 → 0.8.11

package/lib/use-number-input.js

@@ -1,29 +1,21 @@
-import { useState } from 'react';
+import { useRef } from 'react';
 import { isntNaN } from 'extra-utils';
 import { useIIFE } from './use-iife.js';
+import { useForceUpdate } from './use-force-update.js';
 export function useNumberInput({ value, lazy, onChange }) {
-    const [displayValue, setDisplayValue] = useState(() => value.toString());
-    useIIFE(() => {
-        if (!lazy) {
-            const oldValue = Number(displayValue);
-            if (oldValue !== value)
-                setDisplayValue(value.toString());
-        }
-    }, [lazy, value, displayValue]);
-    useIIFE(() => {
-        if (lazy) {
-            setDisplayValue(value.toString());
-        }
-    }, [lazy, value]);
+    const [displayValue, setDisplayValue] = useDerivedState(value.toString());
     return {
         getInputProps() {
             return {
                 type: 'number',
                 value: displayValue,
                 onChange(e) {
-                    setDisplayValue(e.target.value);
-                    if (e.target.reportValidity()) {
-                        if (!lazy) {
+                    if (lazy) {
+                        e.target.reportValidity();
+                        setDisplayValue(e.target.value);
+                    }
+                    else {
+                        if (e.target.reportValidity()) {
                             const newValue = e.target.valueAsNumber;
                             if (isntNaN(newValue) && newValue !== value) {
                                 onChange(newValue, false);
@@ -34,23 +26,36 @@ export function useNumberInput({ value, lazy, onChange }) {
                 onBlur(e) {
                     if (e.target.checkValidity()) {
                         const newValue = e.target.valueAsNumber;
-                        if (!lazy || (isntNaN(newValue) && newValue !== value)) {
+                        if (isntNaN(newValue) && newValue !== value) {
+                            setDisplayValue(newValue.toString(), true);
                             onChange(newValue, true);
-                            setDisplayValue(newValue.toString());
-                            return;
+                        }
+                        else {
+                            setDisplayValue(value.toString(), true);
                         }
                     }
                     else {
-                        if (!lazy) {
-                            onChange(value, true);
-                            setDisplayValue(value.toString());
-                            return;
-                        }
+                        setDisplayValue(value.toString(), true);
                     }
-                    setDisplayValue(value.toString());
                 }
             };
         }
     };
 }
+function useDerivedState(dep) {
+    const forceUpdate = useForceUpdate();
+    const stateRef = useRef(dep);
+    useIIFE(() => {
+        stateRef.current = dep;
+    }, [dep]);
+    return [
+        stateRef.current,
+        (newState, force = false) => {
+            if (force || stateRef.current !== newState) {
+                stateRef.current = newState;
+                forceUpdate();
+            }
+        }
+    ];
+}
 //# sourceMappingURL=use-number-input.js.map

package/lib/use-number-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-number-input.js","sourceRoot":"","sources":["../src/use-number-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAEvC,MAAM,UAAU,cAAc,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAKrD;IASC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAS,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;IAEhF,OAAO,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,MAAM,QAAQ,GAAG,MAAM,CAAC,YAAY,CAAC,CAAA;YAGrC,IAAI,QAAQ,KAAK,KAAK;gBAAE,eAAe,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;QAC3D,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAA;IAE/B,OAAO,CAAC,GAAG,EAAE;QACX,IAAI,IAAI,EAAE,CAAC;YAGT,eAAe,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;QACnC,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAA;IAEjB,OAAO;QACL,aAAa;YACX,OAAO;gBACL,IAAI,EAAE,QAAQ;gBACd,KAAK,EAAE,YAAY;gBACnB,QAAQ,CAAC,CAAC;oBACR,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;oBAE/B,IAAI,CAAC,CAAC,MAAM,CAAC,cAAc,EAAE,EAAE,CAAC;wBAC9B,IAAI,CAAC,IAAI,EAAE,CAAC;4BACV,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,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,QAAQ,KAAK,KAAK,CAAC,EAAE,CAAC;4BACvD,QAAQ,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAA;4BAIxB,eAAe,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAA;4BAEpC,OAAM;wBACR,CAAC;oBACH,CAAC;yBAAM,CAAC;wBACN,IAAI,CAAC,IAAI,EAAE,CAAC;4BACV,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,CAAA;4BAErB,eAAe,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;4BAEjC,OAAM;wBACR,CAAC;oBACH,CAAC;oBAGD,eAAe,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;gBACnC,CAAC;aACF,CAAA;QACH,CAAC;KACF,CAAA;AACH,CAAC"}
+{"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,EAKrD;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;wBACzC,CAAC;oBACH,CAAC;yBAAM,CAAC;wBACN,eAAe,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,CAAA;oBACzC,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

@@ -1,6 +1,6 @@
 {
   "name": "extra-react-hooks",
-  "version": "0.8.9",
+  "version": "0.8.11",
   "description": "",
   "keywords": [],
   "files": [

package/src/use-number-input.ts

@@ -1,6 +1,7 @@
-import { useState } from 'react'
+import { useRef } from 'react'
 import { isntNaN } from 'extra-utils'
 import { useIIFE } from './use-iife.js'
+import { useForceUpdate } from './use-force-update.js'
 
 export function useNumberInput({ value, lazy, onChange }: {
   value: number
@@ -16,35 +17,22 @@ export function useNumberInput({ value, lazy, onChange }: {
   | 'onBlur'
   >>
 } {
-  const [displayValue, setDisplayValue] = useState<string>(() => value.toString())
-
-  useIIFE(() => {
-    if (!lazy) {
-      const oldValue = Number(displayValue)
-
-      // 以传入的值为准, 但只有在实际代表的值不同时, 才更新.
-      if (oldValue !== value) setDisplayValue(value.toString())
-    }
-  }, [lazy, value, displayValue])
-
-  useIIFE(() => {
-    if (lazy) {
-      // 以传入的值为准.
-      // 由于onChange是惰性调用, 不需要检查值的相等性.
-      setDisplayValue(value.toString())
-    }
-  }, [lazy, value])
+  const [displayValue, setDisplayValue] = useDerivedState<string>(value.toString())
 
   return {
     getInputProps() {
       return {
         type: 'number'
       , value: displayValue
+        // `input[type='number']`有一些特异行为:
+        // 如果只是在数字后面输入点`.`, 不会触发change事件.
       , onChange(e) {
-          setDisplayValue(e.target.value)
+          if (lazy) {
+            e.target.reportValidity()
 
-          if (e.target.reportValidity()) {
-            if (!lazy) {
+            setDisplayValue(e.target.value)
+          } else {
+            if (e.target.reportValidity()) {
               const newValue = e.target.valueAsNumber
 
               if (isntNaN(newValue) && newValue !== value) {
@@ -57,29 +45,41 @@ export function useNumberInput({ value, lazy, onChange }: {
           if (e.target.checkValidity()) {
             const newValue = e.target.valueAsNumber
 
-            if (!lazy || (isntNaN(newValue) && newValue !== value)) {
-              onChange(newValue, true)
-
-              // 使用格式化后的新值.
-              // 若hook的调用方决定不接受新值, 则displayValue的值会被覆盖.
-              setDisplayValue(newValue.toString())
+            if (isntNaN(newValue) && newValue !== value) {
+              setDisplayValue(newValue.toString(), true)
 
-              return
+              onChange(newValue, true)
+            } else {
+              setDisplayValue(value.toString(), true)
             }
           } else {
-            if (!lazy) {
-              onChange(value, true)
-
-              setDisplayValue(value.toString())
-
-              return
-            }
+            setDisplayValue(value.toString(), true)
           }
-
-          // 继续使用旧值, 但对旧值格式化.
-          setDisplayValue(value.toString())
         }
       }
     }
   }
 }
+
+function useDerivedState<T>(dep: T): [
+  state: T
+, setState: (newState: T, force?: boolean) => void
+] {
+  const forceUpdate = useForceUpdate()
+  const stateRef = useRef<T>(dep)
+
+  useIIFE(() => {
+    stateRef.current = dep
+  }, [dep])
+
+  return [
+    stateRef.current
+  , (newState, force = false) => {
+      if (force || stateRef.current !== newState) {
+        stateRef.current = newState
+
+        forceUpdate()
+      }
+    }
+  ]
+}