diff --git a/src/hooks/useActiveElement/index.native.js b/src/hooks/useActiveElement/index.native.js deleted file mode 100644 index afdfe8a047e4..000000000000 --- a/src/hooks/useActiveElement/index.native.js +++ /dev/null @@ -1,8 +0,0 @@ -/** - * Native doesn't have the DOM, so we just return null. - * - * @return {null} - */ -export default function useActiveElement() { - return null; -} diff --git a/src/hooks/useActiveElement/index.native.ts b/src/hooks/useActiveElement/index.native.ts new file mode 100644 index 000000000000..22e1ed7e0041 --- /dev/null +++ b/src/hooks/useActiveElement/index.native.ts @@ -0,0 +1,8 @@ +import UseActiveElement from './types'; + +/** + * Native doesn't have the DOM, so we just return null. + */ +const useActiveElement: UseActiveElement = () => null; + +export default useActiveElement; diff --git a/src/hooks/useActiveElement/index.js b/src/hooks/useActiveElement/index.ts similarity index 85% rename from src/hooks/useActiveElement/index.js rename to src/hooks/useActiveElement/index.ts index 0db0ed604067..bee0dde6b427 100644 --- a/src/hooks/useActiveElement/index.js +++ b/src/hooks/useActiveElement/index.ts @@ -1,12 +1,11 @@ import {useEffect, useState} from 'react'; +import UseActiveElement from './types'; /** * Listens for the focusin and focusout events and sets the DOM activeElement to the state. * On native, we just return null. - * - * @return {Element} the active element in the DOM */ -export default function useActiveElement() { +const useActiveElement: UseActiveElement = () => { const [active, setActive] = useState(document.activeElement); const handleFocusIn = () => { @@ -28,4 +27,6 @@ export default function useActiveElement() { }, []); return active; -} +}; + +export default useActiveElement; diff --git a/src/hooks/useActiveElement/types.ts b/src/hooks/useActiveElement/types.ts new file mode 100644 index 000000000000..f3b5193975a5 --- /dev/null +++ b/src/hooks/useActiveElement/types.ts @@ -0,0 +1,3 @@ +type UseActiveElement = () => Element | null; + +export default UseActiveElement; diff --git a/src/hooks/useDebounce.js b/src/hooks/useDebounce.js deleted file mode 100644 index 62a919925a53..000000000000 --- a/src/hooks/useDebounce.js +++ /dev/null @@ -1,39 +0,0 @@ -import lodashDebounce from 'lodash/debounce'; -import {useCallback, useEffect, useRef} from 'react'; - -/** - * Create and return a debounced function. - * - * Every time the identity of any of the arguments changes, the debounce operation will restart (canceling any ongoing debounce). - * This is especially important in the case of func. To prevent that, pass stable references. - * - * @param {Function} func The function to debounce. - * @param {Number} wait The number of milliseconds to delay. - * @param {Object} options The options object. - * @param {Boolean} options.leading Specify invoking on the leading edge of the timeout. - * @param {Number} options.maxWait The maximum time func is allowed to be delayed before it’s invoked. - * @param {Boolean} options.trailing Specify invoking on the trailing edge of the timeout. - * @returns {Function} Returns a function to call the debounced function. - */ -export default function useDebounce(func, wait, options) { - const debouncedFnRef = useRef(); - const {leading, maxWait, trailing = true} = options || {}; - - useEffect(() => { - const debouncedFn = lodashDebounce(func, wait, {leading, maxWait, trailing}); - - debouncedFnRef.current = debouncedFn; - - return debouncedFn.cancel; - }, [func, wait, leading, maxWait, trailing]); - - const debounceCallback = useCallback((...args) => { - const debouncedFn = debouncedFnRef.current; - - if (debouncedFn) { - debouncedFn(...args); - } - }, []); - - return debounceCallback; -} diff --git a/src/hooks/useDebounce.ts b/src/hooks/useDebounce.ts new file mode 100644 index 000000000000..7fc8332ba6cc --- /dev/null +++ b/src/hooks/useDebounce.ts @@ -0,0 +1,45 @@ +import {DebouncedFunc, DebounceSettings} from 'lodash'; +import lodashDebounce from 'lodash/debounce'; +import {useCallback, useEffect, useRef} from 'react'; + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +type GenericFunction = (...args: any[]) => void; + +/** + * Create and return a debounced function. + * + * Every time the identity of any of the arguments changes, the debounce operation will restart (canceling any ongoing debounce). + * This is especially important in the case of func. To prevent that, pass stable references. + * + * @param func The function to debounce. + * @param wait The number of milliseconds to delay. + * @param options The options object. + * @param options.leading Specify invoking on the leading edge of the timeout. + * @param options.maxWait The maximum time func is allowed to be delayed before it’s invoked. + * @param options.trailing Specify invoking on the trailing edge of the timeout. + * @returns Returns a function to call the debounced function. + */ +export default function useDebounce(func: T, wait: number, options?: DebounceSettings): T { + const debouncedFnRef = useRef>(); + const {leading, maxWait, trailing = true} = options ?? {}; + + useEffect(() => { + const debouncedFn = lodashDebounce(func, wait, {leading, maxWait, trailing}); + + debouncedFnRef.current = debouncedFn; + + return () => { + debouncedFn.cancel(); + }; + }, [func, wait, leading, maxWait, trailing]); + + const debounceCallback = useCallback((...args: Parameters) => { + const debouncedFn = debouncedFnRef.current; + + if (debouncedFn) { + debouncedFn(...args); + } + }, []); + + return debounceCallback as T; +} diff --git a/src/hooks/useDefaultDragAndDrop/index.native.js b/src/hooks/useDefaultDragAndDrop/index.native.js deleted file mode 100644 index 2d1ec238274a..000000000000 --- a/src/hooks/useDefaultDragAndDrop/index.native.js +++ /dev/null @@ -1 +0,0 @@ -export default () => {}; diff --git a/src/hooks/useDefaultDragAndDrop/index.native.ts b/src/hooks/useDefaultDragAndDrop/index.native.ts new file mode 100644 index 000000000000..08b2606d984d --- /dev/null +++ b/src/hooks/useDefaultDragAndDrop/index.native.ts @@ -0,0 +1,5 @@ +import UseDefaultDragAndDrop from './types'; + +const useDefaultDragAndDrop: UseDefaultDragAndDrop = () => {}; + +export default useDefaultDragAndDrop; diff --git a/src/hooks/useDefaultDragAndDrop/index.js b/src/hooks/useDefaultDragAndDrop/index.ts similarity index 64% rename from src/hooks/useDefaultDragAndDrop/index.js rename to src/hooks/useDefaultDragAndDrop/index.ts index 34005c9de2b3..033110c143c8 100644 --- a/src/hooks/useDefaultDragAndDrop/index.js +++ b/src/hooks/useDefaultDragAndDrop/index.ts @@ -1,16 +1,22 @@ import {useEffect} from 'react'; +import UseDefaultDragAndDrop from './types'; -export default function useDefaultDragAndDrop() { +const useDefaultDragAndDrop: UseDefaultDragAndDrop = () => { useEffect(() => { - const dropDragListener = (event) => { + const dropDragListener = (event: DragEvent) => { event.preventDefault(); - // eslint-disable-next-line no-param-reassign - event.dataTransfer.dropEffect = 'none'; + + if (event.dataTransfer) { + // eslint-disable-next-line no-param-reassign + event.dataTransfer.dropEffect = 'none'; + } }; + document.addEventListener('dragover', dropDragListener); document.addEventListener('dragenter', dropDragListener); document.addEventListener('dragleave', dropDragListener); document.addEventListener('drop', dropDragListener); + return () => { document.removeEventListener('dragover', dropDragListener); document.removeEventListener('dragenter', dropDragListener); @@ -18,4 +24,6 @@ export default function useDefaultDragAndDrop() { document.removeEventListener('drop', dropDragListener); }; }, []); -} +}; + +export default useDefaultDragAndDrop; diff --git a/src/hooks/useDefaultDragAndDrop/types.ts b/src/hooks/useDefaultDragAndDrop/types.ts new file mode 100644 index 000000000000..be7826df6328 --- /dev/null +++ b/src/hooks/useDefaultDragAndDrop/types.ts @@ -0,0 +1,3 @@ +type UseDefaultDragAndDrop = () => void; + +export default UseDefaultDragAndDrop; diff --git a/src/hooks/useWaitForNavigation.js b/src/hooks/useWaitForNavigation.ts similarity index 69% rename from src/hooks/useWaitForNavigation.js rename to src/hooks/useWaitForNavigation.ts index 81c26d7beb46..73c0eb2bb14c 100644 --- a/src/hooks/useWaitForNavigation.js +++ b/src/hooks/useWaitForNavigation.ts @@ -1,15 +1,15 @@ import {useNavigation} from '@react-navigation/native'; import {useEffect, useRef} from 'react'; +type UseWaitForNavigation = (navigate: () => void) => () => Promise; + /** * Returns a promise that resolves when navigation finishes. * Only use when navigating by react-navigation - * - * @returns {function} */ -export default function useWaitForNavigation() { +export default function useWaitForNavigation(): UseWaitForNavigation { const navigation = useNavigation(); - const resolvePromises = useRef([]); + const resolvePromises = useRef void>>([]); useEffect(() => { const unsubscribeBlur = navigation.addListener('blur', () => { @@ -24,9 +24,9 @@ export default function useWaitForNavigation() { }; }, [navigation]); - return (navigate) => () => { + return (navigate: () => void) => () => { navigate(); - return new Promise((resolve) => { + return new Promise((resolve) => { resolvePromises.current.push(resolve); }); };