@trackunit/react-components 0.1.96 → 0.1.97

package/index.cjs

@@ -1159,18 +1159,28 @@ const useClickOutside = (el, options = {}, onClick) => {
  *
  * @param {any} value The value to set
  * @param {number} delay The debounce time
- * @returns {any} value The latest values received
+ * @param {"in" | "out" | "both"} direction Considers truthiness of value. If set to "in", the value will only be debounced if it is truthy. If set to "out", the value will only be debounced if it is falsy. If set to "both" or if not defined, the value will be debounced regardless of truthiness.
+ * @returns {any} The latest value received
  */
-const useDebounce = (value, delay = 500) => {
+const useDebounce = (value, delay = 500, direction) => {
     const [debouncedValue, setDebouncedValue] = React.useState(value);
     React.useEffect(() => {
-        const handler = setTimeout(() => {
+        let handler;
+        if ((direction === "in" && !debouncedValue && value) ||
+            (direction === "out" && debouncedValue && !value) ||
+            direction === "both" ||
+            !direction) {
+            handler = setTimeout(() => {
+                setDebouncedValue(value);
+            }, delay);
+        }
+        else {
             setDebouncedValue(value);
-        }, delay);
+        }
         return () => {
             clearTimeout(handler);
         };
-    }, [value, delay]);
+    }, [value, delay, direction, debouncedValue]);
     return debouncedValue;
 };
 

package/index.js

@@ -1132,18 +1132,28 @@ const useClickOutside = (el, options = {}, onClick) => {
  *
  * @param {any} value The value to set
  * @param {number} delay The debounce time
- * @returns {any} value The latest values received
+ * @param {"in" | "out" | "both"} direction Considers truthiness of value. If set to "in", the value will only be debounced if it is truthy. If set to "out", the value will only be debounced if it is falsy. If set to "both" or if not defined, the value will be debounced regardless of truthiness.
+ * @returns {any} The latest value received
  */
-const useDebounce = (value, delay = 500) => {
+const useDebounce = (value, delay = 500, direction) => {
     const [debouncedValue, setDebouncedValue] = useState(value);
     useEffect(() => {
-        const handler = setTimeout(() => {
+        let handler;
+        if ((direction === "in" && !debouncedValue && value) ||
+            (direction === "out" && debouncedValue && !value) ||
+            direction === "both" ||
+            !direction) {
+            handler = setTimeout(() => {
+                setDebouncedValue(value);
+            }, delay);
+        }
+        else {
             setDebouncedValue(value);
-        }, delay);
+        }
         return () => {
             clearTimeout(handler);
         };
-    }, [value, delay]);
+    }, [value, delay, direction, debouncedValue]);
     return debouncedValue;
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.96",
+  "version": "0.1.97",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {

package/src/hooks/useDebounce.d.ts

@@ -3,6 +3,7 @@
  *
  * @param {any} value The value to set
  * @param {number} delay The debounce time
- * @returns {any} value The latest values received
+ * @param {"in" | "out" | "both"} direction Considers truthiness of value. If set to "in", the value will only be debounced if it is truthy. If set to "out", the value will only be debounced if it is falsy. If set to "both" or if not defined, the value will be debounced regardless of truthiness.
+ * @returns {any} The latest value received
  */
-export declare const useDebounce: <T>(value: T, delay?: number) => T;
+export declare const useDebounce: <T>(value: T, delay?: number, direction?: "in" | "out" | "both") => T;