From cc95bc978cb47f9481a12fd05c6a3a7bd5c4020d Mon Sep 17 00:00:00 2001 From: keyurparalkar Date: Tue, 3 Oct 2023 09:34:57 +0530 Subject: [PATCH] fix: * removed e.target.focus from onFocus handler; * renamed internal state variable array to passcode; * updated README; --- README.md | 4 ++-- package/lib/hook/usePasscode.test.tsx | 10 ++++----- package/lib/hook/usePasscode.ts | 31 ++++++++++++++------------- 3 files changed, 23 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index 1397cd4..b8e1797 100644 --- a/README.md +++ b/README.md @@ -86,8 +86,8 @@ The hook returns an object that consists of: | Property | Type | Description | | ---------------------- | -------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| array | `(string \| number)[]` | The current array value of the entire component. | -| setArray | `function` | A function that sets the internal state variable:`array`'s value inside the hook. | +| passcode | `(string \| number)[]` | The current array value of the entire component. | +| setPasscode | `function` | A function that sets the internal state variable:`passcode`'s value inside the hook. | | currentFocusedIndex | `number` | Index of the currently focused input element. | | setCurrentFocusedIndex | `function` | A function that sets the internal state variable: `currentFocusedIndex`'s value inside the hook. | | getEventHandler | `function` | A function that accepts an index as a parameter. It returns the following event handlers for the input positioned at index `i`: `onChange` `onFocus` `onKeyUp` `onKeyDown` | diff --git a/package/lib/hook/usePasscode.test.tsx b/package/lib/hook/usePasscode.test.tsx index 868f0bd..7bafe19 100644 --- a/package/lib/hook/usePasscode.test.tsx +++ b/package/lib/hook/usePasscode.test.tsx @@ -4,14 +4,14 @@ import userEvent from "@testing-library/user-event"; import usePasscode from "./usePasscode"; const TestComponent = (props: { isAlphaNumeric: boolean }) => { - const { array, getEventHandlers, refs } = usePasscode({ + const { passcode, getEventHandlers, refs } = usePasscode({ count: 4, isAlphaNumeric: props.isAlphaNumeric, }); return ( <> - {array.map((value: string | number, index: number) => ( + {passcode.map((value: string | number, index: number) => ( el && (refs.current[index] = el)} type="text" @@ -30,9 +30,9 @@ const TestComponent = (props: { isAlphaNumeric: boolean }) => { }; describe("test basic workflow", () => { - it("1. test whether passing no. of inputs creates an array of equal number ", () => { - const { result } = renderHook(() => usePasscode({ count: 4 })); - expect(result.current.array).toHaveLength(4); + it("1. test whether passing count prop creates an array(input elements) with size count", () => { + render(); + expect(screen.getAllByTestId(/index-[0-9]/)).toHaveLength(4); }); it("2. test if the focus changes to next element when typed", async () => { diff --git a/package/lib/hook/usePasscode.ts b/package/lib/hook/usePasscode.ts index 0f7c130..47c4e26 100644 --- a/package/lib/hook/usePasscode.ts +++ b/package/lib/hook/usePasscode.ts @@ -22,11 +22,13 @@ type PasscodeProps = { const usePasscode = (props: PasscodeProps) => { const { count, isAlphaNumeric = false } = props; const filledArray = useMemo(() => Array(count).fill("", 0, count), [count]); - const [array, setArray] = useState(filledArray); + const [passcode, setPasscode] = useState(filledArray); const [currentFocusedIndex, setCurrentFocusedIndex] = useState(0); const inputRefs = useRef | []>([]); - const isComplete = array?.every((value: string | number) => value !== ""); + const isComplete = passcode?.every( + (value: string | number) => value !== "" + ); /** * A function that returns the necessary event handlers based on index. @@ -34,7 +36,7 @@ const usePasscode = (props: PasscodeProps) => { const getEventHandlers = (index: number) => { const onChange = (e: BaseSyntheticEvent) => { // Change the arrayValue and update only when number key is pressed - setArray((preValue: (string | number)[]) => { + setPasscode((preValue: (string | number)[]) => { const newArray = [...preValue]; if (parseInt(e.target.value)) { @@ -49,7 +51,6 @@ const usePasscode = (props: PasscodeProps) => { const onFocus = (e: BaseSyntheticEvent) => { setCurrentFocusedIndex(index); - e.target.focus(); }; const onKeyUp = (e: KeyboardEvent) => { @@ -70,13 +71,13 @@ const usePasscode = (props: PasscodeProps) => { /** * Update focus only when number key is pressed * We do a -2 below because we don't want the last input to update the currentFocusedIndex - * If we allow it then we get array out of bound error. + * If we allow it then we get passcode out of bound error. * */ if ( (isAlphaNumeric ? ALPHANUMERIC_REGEX.test(e.key) : parseInt(e.key)) && - index <= array.length - 2 + index <= passcode.length - 2 ) { setCurrentFocusedIndex(index + 1); if ( @@ -116,7 +117,7 @@ const usePasscode = (props: PasscodeProps) => { const clipboardContent = await getClipboardContent(); try { - // We convert the clipboard conent into an array of string or number depending upon isAlphaNumeric; + // We convert the clipboard conent into an passcode of string or number depending upon isAlphaNumeric; let newArray: Array = clipboardContent.split(""); newArray = isAlphaNumeric @@ -127,22 +128,22 @@ const usePasscode = (props: PasscodeProps) => { * Pasting of this content is stopped when the last input is reached. **/ const filledArray = getFilledArray( - array, + passcode, newArray, currentFocusedIndex ); - setArray(filledArray); + setPasscode(filledArray); // Below we update the current focused index and also focus to the last input if ( - newArray.length < array.length && + newArray.length < passcode.length && currentFocusedIndex === 0 ) { setCurrentFocusedIndex(newArray.length - 1); inputRefs.current[newArray.length - 1].focus(); } else { - setCurrentFocusedIndex(array.length - 1); - inputRefs.current[array.length - 1].focus(); + setCurrentFocusedIndex(passcode.length - 1); + inputRefs.current[passcode.length - 1].focus(); } } catch (err) { console.error(err); @@ -155,11 +156,11 @@ const usePasscode = (props: PasscodeProps) => { ); }; } - }, [currentFocusedIndex, array, isAlphaNumeric]); + }, [currentFocusedIndex, passcode, isAlphaNumeric]); return { - array, - setArray, + passcode, + setPasscode, currentFocusedIndex, setCurrentFocusedIndex, getEventHandlers,