From 598f97f5471915b03bc9e62a94a4ad728a5f8b27 Mon Sep 17 00:00:00 2001 From: Jakub Butkiewicz Date: Wed, 11 Oct 2023 17:01:03 +0200 Subject: [PATCH 1/3] ref: moved useArrowKeyFocusManager to TS --- ...sManager.js => useArrowKeyFocusManager.ts} | 26 ++++++++++++------- 1 file changed, 17 insertions(+), 9 deletions(-) rename src/hooks/{useArrowKeyFocusManager.js => useArrowKeyFocusManager.ts} (77%) diff --git a/src/hooks/useArrowKeyFocusManager.js b/src/hooks/useArrowKeyFocusManager.ts similarity index 77% rename from src/hooks/useArrowKeyFocusManager.js rename to src/hooks/useArrowKeyFocusManager.ts index 58cecb169249..4f06111df09b 100644 --- a/src/hooks/useArrowKeyFocusManager.js +++ b/src/hooks/useArrowKeyFocusManager.ts @@ -2,19 +2,27 @@ import {useState, useEffect, useCallback, useMemo} from 'react'; import useKeyboardShortcut from './useKeyboardShortcut'; import CONST from '../CONST'; +type Config = { + maxIndex: number; + onFocusedIndexChange?: (index: number) => void; + initialFocusedIndex?: number; + disabledIndexes?: readonly number[]; + shouldExcludeTextAreaNodes?: boolean; + isActive?: boolean; +}; + /** * A hook that makes it easy to use the arrow keys to manage focus of items in a list * * Recommendation: To ensure stability, wrap the `onFocusedIndexChange` function with the useCallback hook before using it with this hook. * - * @param {Object} config - * @param {Number} config.maxIndex – typically the number of items in your list - * @param {Function} [config.onFocusedIndexChange] – optional callback to execute when focusedIndex changes - * @param {Number} [config.initialFocusedIndex] – where to start in the list - * @param {Array} [config.disabledIndexes] – An array of indexes to disable + skip over - * @param {Boolean} [config.shouldExcludeTextAreaNodes] – Whether arrow keys should have any effect when a TextArea node is focused - * @param {Boolean} [config.isActive] – Whether the component is ready and should subscribe to KeyboardShortcut - * @returns {Array} + * @param config + * @param config.maxIndex – typically the number of items in your list + * @param [config.onFocusedIndexChange] – optional callback to execute when focusedIndex changes + * @param [config.initialFocusedIndex] – where to start in the list + * @param [config.disabledIndexes] – An array of indexes to disable + skip over + * @param [config.shouldExcludeTextAreaNodes] – Whether arrow keys should have any effect when a TextArea node is focused + * @param [config.isActive] – Whether the component is ready and should subscribe to KeyboardShortcut */ export default function useArrowKeyFocusManager({ maxIndex, @@ -26,7 +34,7 @@ export default function useArrowKeyFocusManager({ disabledIndexes = CONST.EMPTY_ARRAY, shouldExcludeTextAreaNodes = true, isActive, -}) { +}: Config): [number, (index: number) => void] { const [focusedIndex, setFocusedIndex] = useState(initialFocusedIndex); const arrowConfig = useMemo( () => ({ From c102c52abc79a22646509e3486a80da647645340 Mon Sep 17 00:00:00 2001 From: Jakub Butkiewicz Date: Fri, 13 Oct 2023 15:03:43 +0200 Subject: [PATCH 2/3] fix: resolve comment --- src/hooks/useArrowKeyFocusManager.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/hooks/useArrowKeyFocusManager.ts b/src/hooks/useArrowKeyFocusManager.ts index 4f06111df09b..5746700b3c64 100644 --- a/src/hooks/useArrowKeyFocusManager.ts +++ b/src/hooks/useArrowKeyFocusManager.ts @@ -11,6 +11,8 @@ type Config = { isActive?: boolean; }; +type UseArrowKeyFocusManager = [number, (index: number) => void]; + /** * A hook that makes it easy to use the arrow keys to manage focus of items in a list * @@ -34,7 +36,7 @@ export default function useArrowKeyFocusManager({ disabledIndexes = CONST.EMPTY_ARRAY, shouldExcludeTextAreaNodes = true, isActive, -}: Config): [number, (index: number) => void] { +}: Config): UseArrowKeyFocusManager { const [focusedIndex, setFocusedIndex] = useState(initialFocusedIndex); const arrowConfig = useMemo( () => ({ From e48b32e09b52d18d944c5d77a86cc12c2dc658f2 Mon Sep 17 00:00:00 2001 From: Jakub Butkiewicz Date: Mon, 16 Oct 2023 12:32:43 +0200 Subject: [PATCH 3/3] fix: resolved comment --- src/hooks/useArrowKeyFocusManager.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/hooks/useArrowKeyFocusManager.ts b/src/hooks/useArrowKeyFocusManager.ts index 5746700b3c64..b2d1af1d659d 100644 --- a/src/hooks/useArrowKeyFocusManager.ts +++ b/src/hooks/useArrowKeyFocusManager.ts @@ -18,7 +18,6 @@ type UseArrowKeyFocusManager = [number, (index: number) => void]; * * Recommendation: To ensure stability, wrap the `onFocusedIndexChange` function with the useCallback hook before using it with this hook. * - * @param config * @param config.maxIndex – typically the number of items in your list * @param [config.onFocusedIndexChange] – optional callback to execute when focusedIndex changes * @param [config.initialFocusedIndex] – where to start in the list