Skip to content

Commit

Permalink
fix:
Browse files Browse the repository at this point in the history 
* removed e.target.focus from onFocus handler;
* renamed internal state variable array to passcode;
* updated README;
  • Loading branch information
@keyurparalkar
keyurparalkar committed Oct 3, 2023
1 parent c125243 commit cc95bc9
Show file tree
Hide file tree
Showing 3 changed files with 23 additions and 22 deletions.
4 changes: 2 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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` |
Expand Down
10 changes: 5 additions & 5 deletions package/lib/hook/usePasscode.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) => (
<input
ref={(el) => el && (refs.current[index] = el)}
type="text"
Expand All @@ -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(<TestComponent isAlphaNumeric={false} />);
expect(screen.getAllByTestId(/index-[0-9]/)).toHaveLength(4);
});

it("2. test if the focus changes to next element when typed", async () => {
Expand Down
31 changes: 16 additions & 15 deletions package/lib/hook/usePasscode.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,19 +22,21 @@ 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<Array<HTMLInputElement> | []>([]);

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.
*/
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)) {
Expand All @@ -49,7 +51,6 @@ const usePasscode = (props: PasscodeProps) => {

const onFocus = (e: BaseSyntheticEvent) => {
setCurrentFocusedIndex(index);
e.target.focus();
};

const onKeyUp = (e: KeyboardEvent<HTMLInputElement>) => {
Expand All @@ -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 (
Expand Down Expand Up @@ -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<string | number> =
clipboardContent.split("");
newArray = isAlphaNumeric
Expand All @@ -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);
Expand All @@ -155,11 +156,11 @@ const usePasscode = (props: PasscodeProps) => {
);
};
}
}, [currentFocusedIndex, array, isAlphaNumeric]);
}, [currentFocusedIndex, passcode, isAlphaNumeric]);

return {
array,
setArray,
passcode,
setPasscode,
currentFocusedIndex,
setCurrentFocusedIndex,
getEventHandlers,
Expand Down

0 comments on commit cc95bc9

Please sign in to comment.