chore: refactor selected suite hooks and utils

trezor · Jul 29, 2022 · 35f4591 · 35f4591
1 parent 20ecb21
commit 35f4591
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 68 deletions.
diff --git a/packages/components/src/utils/hooks.ts b/packages/components/src/utils/hooks.ts
@@ -3,6 +3,7 @@ import { ThemeContext } from '../support/ThemeProvider';
 import { platform } from './env';
 import { useTheme as useSCTheme } from 'styled-components';
 
+// todo: duplicity
 export const useKeyPress = (targetKey: string) => {
     // State for keeping track of whether key is pressed
     const [keyPressed, setKeyPressed] = useState(false);

diff --git a/packages/suite/src/components/wallet/CoinmarketFooter/index.tsx b/packages/suite/src/components/wallet/CoinmarketFooter/index.tsx
@@ -3,7 +3,7 @@ import React, { useState, useRef } from 'react';
 import styled from 'styled-components';
 import { DATA_TOS_INVITY_URL, INVITY_URL } from '@trezor/urls';
 import { CoinmarketProvidedByInvity } from '@wallet-components';
-import { useOnClickOutside } from '@suite-utils/dom';
+import { useOnClickOutside } from '@suite-hooks/useOnClickOutside';
 import { Translation } from '@suite-components';
 import { resolveStaticPath } from '@trezor/utils';
 

diff --git a/packages/suite/src/hooks/suite/index.ts b/packages/suite/src/hooks/suite/index.ts
@@ -16,6 +16,8 @@ export { useRecovery } from './useRecovery';
 export { useExternalLink } from './useExternalLink';
 export { useFilteredModal } from './useFilteredModal';
 export { usePreferredModal } from './usePreferredModal';
+export { useKeyPress } from './useKeyPress';
+export { useOnClickOutside } from './useOnClickOutside';
 
 // replaced in suite-native
 export { useLocales } from '@suite-hooks/useLocales';
diff --git a/packages/suite/src/hooks/suite/useKeyPress.ts b/packages/suite/src/hooks/suite/useKeyPress.ts
@@ -0,0 +1,37 @@
+import { useState, useEffect } from 'react';
+
+// todo: duplicity
+export const useKeyPress = (targetKey: string) => {
+    // State for keeping track of whether key is pressed
+    const [keyPressed, setKeyPressed] = useState(false);
+
+    // If pressed key is our target key then set to true
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const downHandler = (event: KeyboardEvent) => {
+        if (event.key === targetKey) {
+            setKeyPressed(true);
+        }
+    };
+
+    // If released key is our target key then set to false
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const upHandler = (event: KeyboardEvent) => {
+        if (event.key === targetKey) {
+            setKeyPressed(false);
+        }
+    };
+
+    // Add event listeners
+    useEffect(() => {
+        window.addEventListener('keydown', downHandler);
+        window.addEventListener('keyup', upHandler);
+        // Remove event listeners on cleanup
+        return () => {
+            window.removeEventListener('keydown', downHandler);
+            window.removeEventListener('keyup', upHandler);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []); // Empty array ensures that effect is only run on mount and unmount
+
+    return keyPressed;
+};
diff --git a/packages/suite/src/hooks/suite/useOnClickOutside.ts b/packages/suite/src/hooks/suite/useOnClickOutside.ts
@@ -0,0 +1,31 @@
+import { useEffect } from 'react';
+
+export const useOnClickOutside = (
+    elementRefs: React.MutableRefObject<HTMLElement | null>[],
+    callback: (event: MouseEvent | TouchEvent) => void,
+) => {
+    useEffect(() => {
+        if (!elementRefs?.length) return;
+        const listener = (event: MouseEvent | TouchEvent) => {
+            let clickInsideElements = false;
+
+            elementRefs.forEach(elRef => {
+                // Do nothing if clicking ref's element or descendent elements
+                if (!elRef.current || elRef.current.contains(event.target as Node)) {
+                    clickInsideElements = true;
+                }
+            });
+            if (clickInsideElements) return;
+
+            callback(event);
+        };
+
+        document.addEventListener('mousedown', listener);
+        document.addEventListener('touchstart', listener);
+
+        return () => {
+            document.removeEventListener('mousedown', listener);
+            document.removeEventListener('touchstart', listener);
+        };
+    }, [elementRefs, callback]);
+};
diff --git a/packages/suite/src/utils/suite/dom.ts b/packages/suite/src/utils/suite/dom.ts
@@ -1,5 +1,3 @@
-import { useState, useEffect } from 'react';
-
 export const selectText = (element: HTMLElement) => {
     const doc = document;
     if (window.getSelection) {
@@ -13,41 +11,6 @@ export const selectText = (element: HTMLElement) => {
     }
 };
 
-export const useKeyPress = (targetKey: string) => {
-    // State for keeping track of whether key is pressed
-    const [keyPressed, setKeyPressed] = useState(false);
-
-    // If pressed key is our target key then set to true
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const downHandler = (event: KeyboardEvent) => {
-        if (event.key === targetKey) {
-            setKeyPressed(true);
-        }
-    };
-
-    // If released key is our target key then set to false
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const upHandler = (event: KeyboardEvent) => {
-        if (event.key === targetKey) {
-            setKeyPressed(false);
-        }
-    };
-
-    // Add event listeners
-    useEffect(() => {
-        window.addEventListener('keydown', downHandler);
-        window.addEventListener('keyup', upHandler);
-        // Remove event listeners on cleanup
-        return () => {
-            window.removeEventListener('keydown', downHandler);
-            window.removeEventListener('keyup', upHandler);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []); // Empty array ensures that effect is only run on mount and unmount
-
-    return keyPressed;
-};
-
 /**
  * Returns string if there is an error, otherwise returns true
  */
@@ -76,36 +39,6 @@ export const copyToClipboard = (
     }
 };
 
-export const useOnClickOutside = (
-    elementRefs: React.MutableRefObject<HTMLElement | null>[],
-    callback: (event: MouseEvent | TouchEvent) => void,
-) => {
-    useEffect(() => {
-        if (!elementRefs?.length) return;
-        const listener = (event: MouseEvent | TouchEvent) => {
-            let clickInsideElements = false;
-
-            elementRefs.forEach(elRef => {
-                // Do nothing if clicking ref's element or descendent elements
-                if (!elRef.current || elRef.current.contains(event.target as Node)) {
-                    clickInsideElements = true;
-                }
-            });
-            if (clickInsideElements) return;
-
-            callback(event);
-        };
-
-        document.addEventListener('mousedown', listener);
-        document.addEventListener('touchstart', listener);
-
-        return () => {
-            document.removeEventListener('mousedown', listener);
-            document.removeEventListener('touchstart', listener);
-        };
-    }, [elementRefs, callback]);
-};
-
 export const download = (value: string, filename: string) => {
     const element = document.createElement('a');
     element.setAttribute('href', `data:text/plain;charset=utf-8,${encodeURIComponent(value)}`);