@trackunit/react-components 0.1.41 → 0.1.43

package/index.js

@@ -2928,35 +2928,36 @@ function tryParse(value) {
 }
 
 /**
- * The useTimeout hook.
- *
  * @param {UseTimeoutProps} props The props
- * @returns {{ startTimeout: () => void; stopTimeout: () => void; }} return
+ * @returns {{ startTimeout: () => void; stopTimeout: () => void; isReady: boolean | null}} return
  */
 const useTimeout = ({ onTimeout, duration }) => {
-    const [activated, setActivated] = useState(true);
-    const timeoutRef = useRef();
+    const ready = useRef(false);
+    const timeout = useRef();
+    const callback = useRef(onTimeout);
+    const isReady = useCallback(() => ready.current, []);
     const startTimeout = useCallback(() => {
-        setActivated(true);
-    }, []);
+        ready.current = false;
+        timeout.current && clearTimeout(timeout.current);
+        timeout.current = setTimeout(() => {
+            ready.current = true;
+            callback.current();
+        }, duration);
+    }, [duration]);
     const stopTimeout = useCallback(() => {
-        window.clearTimeout(timeoutRef.current);
-        setActivated(false);
+        ready.current = null;
+        timeout.current && clearTimeout(timeout.current);
     }, []);
+    // update ref when function changes
     useEffect(() => {
-        if (activated) {
-            timeoutRef.current = window.setTimeout(() => {
-                onTimeout();
-            }, duration);
-        }
-        return () => {
-            stopTimeout();
-        };
-    }, [onTimeout, activated, duration, stopTimeout]);
-    return {
-        startTimeout,
-        stopTimeout,
-    };
+        callback.current = onTimeout;
+    }, [onTimeout]);
+    // startTimeout on mount, stopTimeout on unmount
+    useEffect(() => {
+        startTimeout();
+        return stopTimeout;
+    }, [duration, startTimeout, stopTimeout]);
+    return [isReady, stopTimeout, startTimeout];
 };
 
 /**

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.41",
+  "version": "0.1.43",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
-    "@trackunit/css-core": "0.0.66",
-    "@trackunit/tailwind-styled-components": "0.0.51",
+    "@trackunit/css-core": "0.0.67",
+    "@trackunit/tailwind-styled-components": "0.0.52",
     "react": "18.2.0",
-    "@trackunit/ui-design-tokens": "0.0.53",
-    "@trackunit/react-core-contexts-test": "0.1.23",
+    "@trackunit/ui-design-tokens": "0.0.54",
+    "@trackunit/react-core-contexts-test": "0.1.24",
     "echarts": "5.4.0",
     "echarts-for-react": "3.0.2",
     "uuid": "8.3.2",
@@ -16,7 +16,7 @@
     "date-fns": "2.29.3",
     "react-day-picker": "8.3.7",
     "@floating-ui/react": "0.15.1",
-    "@trackunit/ui-icons": "0.0.56",
+    "@trackunit/ui-icons": "0.0.57",
     "react-browser-hooks": "2.2.4",
     "react-useportal": "1.0.17",
     "react-router-dom": "6.4.5",

package/src/hooks/useTimeout.d.ts

@@ -1,15 +1,11 @@
+export type UseTimeoutReturn = [() => boolean | null, () => void, () => void];
 interface UseTimeoutProps {
     onTimeout: () => void;
     duration: number;
 }
 /**
- * The useTimeout hook.
- *
  * @param {UseTimeoutProps} props The props
- * @returns {{ startTimeout: () => void; stopTimeout: () => void; }} return
+ * @returns {{ startTimeout: () => void; stopTimeout: () => void; isReady: boolean | null}} return
  */
-export declare const useTimeout: ({ onTimeout, duration }: UseTimeoutProps) => {
-    startTimeout: () => void;
-    stopTimeout: () => void;
-};
+export declare const useTimeout: ({ onTimeout, duration }: UseTimeoutProps) => UseTimeoutReturn;
 export {};