From 691646c97b09f9150ac823670d6c661358c81c1c Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 24 May 2022 17:54:23 +0200
Subject: chore: give autofocus to the toolbar search form

---
 src/utils/hooks/use-input-autofocus.tsx | 39 +++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/utils/hooks/use-input-autofocus.tsx

(limited to 'src/utils/hooks/use-input-autofocus.tsx')

diff --git a/src/utils/hooks/use-input-autofocus.tsx b/src/utils/hooks/use-input-autofocus.tsx
new file mode 100644
index 0000000..c7700e9
--- /dev/null
+++ b/src/utils/hooks/use-input-autofocus.tsx
@@ -0,0 +1,39 @@
+import { RefObject, useEffect } from 'react';
+
+export type UseInputAutofocusProps = {
+  /**
+   * The focus condition. True give focus to the input.
+   */
+  condition: boolean;
+  /**
+   * An optional delay. Default: 0.
+   */
+  delay?: number;
+  /**
+   * A reference to the input element.
+   */
+  ref: RefObject<HTMLInputElement>;
+};
+
+/**
+ * Set focus on an input with an optional delay.
+ */
+const useInputAutofocus = ({
+  condition,
+  delay = 0,
+  ref,
+}: UseInputAutofocusProps) => {
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (ref.current && condition) {
+        ref.current.focus();
+      }
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [condition, delay, ref]);
+};
+
+export default useInputAutofocus;
-- 
cgit v1.2.3