@pinnacle0/web-ui 0.4.29 → 0.4.30

package/hooks/useDelayed.d.ts

@@ -0,0 +1,10 @@
+/**
+ * delay value update when value meet condition `when`
+ */
+export declare function useDelayedWhen<T>(value: T, when: (value: T) => boolean, exceeded?: number): T;
+export declare function useDelayed<T>(value: T, exceeded: number): T;
+/**
+ * Only set loading state to true when loading duration is longer than given ms,
+ * in order to prevent loading ui flickering
+ */
+export declare function useDelayedLoading(value: boolean, exceeded?: number): boolean;

package/hooks/useDelayed.js

@@ -0,0 +1,48 @@
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import React from "react";
+/**
+ * delay value update when value meet condition `when`
+ */
+export function useDelayedWhen(value, when, exceeded) {
+    if (exceeded === void 0) { exceeded = 120; }
+    var _a = __read(React.useState(value), 2), delayed = _a[0], setDelayed = _a[1];
+    var whenRef = React.useRef(when);
+    whenRef.current = when;
+    React.useEffect(function () {
+        if (value === whenRef.current(value)) {
+            var id_1 = window.setTimeout(function () { return setDelayed(value); }, exceeded);
+            return function () { return window.clearTimeout(id_1); };
+        }
+        else {
+            setDelayed(value);
+        }
+    }, [value, exceeded]);
+    return delayed;
+}
+export function useDelayed(value, exceeded) {
+    return useDelayedWhen(value, function () { return true; }, exceeded);
+}
+/**
+ * Only set loading state to true when loading duration is longer than given ms,
+ * in order to prevent loading ui flickering
+ */
+export function useDelayedLoading(value, exceeded) {
+    if (exceeded === void 0) { exceeded = 120; }
+    return useDelayedWhen(value, function (_) { return _ === true; }, exceeded);
+}
+//# sourceMappingURL=useDelayed.js.map

package/hooks/useDelayed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDelayed.js","sourceRoot":"","sources":["../../src/hooks/useDelayed.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;GAEG;AACH,MAAM,UAAU,cAAc,CAAI,KAAQ,EAAE,IAA2B,EAAE,QAAsB;IAAtB,yBAAA,EAAA,cAAsB;IACrF,IAAA,KAAA,OAAwB,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAA,EAA5C,OAAO,QAAA,EAAE,UAAU,QAAyB,CAAC;IAEpD,IAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACnC,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;IAEvB,KAAK,CAAC,SAAS,CAAC;QACZ,IAAI,KAAK,KAAK,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YAClC,IAAM,IAAE,GAAG,MAAM,CAAC,UAAU,CAAC,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,EAAjB,CAAiB,EAAE,QAAQ,CAAC,CAAC;YAChE,OAAO,cAAM,OAAA,MAAM,CAAC,YAAY,CAAC,IAAE,CAAC,EAAvB,CAAuB,CAAC;SACxC;aAAM;YACH,UAAU,CAAC,KAAK,CAAC,CAAC;SACrB;IACL,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtB,OAAO,OAAO,CAAC;AACnB,CAAC;AAED,MAAM,UAAU,UAAU,CAAI,KAAQ,EAAE,QAAgB;IACpD,OAAO,cAAc,CAAI,KAAK,EAAE,cAAM,OAAA,IAAI,EAAJ,CAAI,EAAE,QAAQ,CAAC,CAAC;AAC1D,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAAc,EAAE,QAAsB;IAAtB,yBAAA,EAAA,cAAsB;IACpE,OAAO,cAAc,CAAC,KAAK,EAAE,UAAA,CAAC,IAAI,OAAA,CAAC,KAAK,IAAI,EAAV,CAAU,EAAE,QAAQ,CAAC,CAAC;AAC5D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pinnacle0/web-ui",
-  "version": "0.4.29",
+  "version": "0.4.30",
   "author": "Pinnacle",
   "license": "MIT",
   "sideEffects": [