feat: implement CodeInput component

[ghost]

fix: #1488

feat: implement codeInput component first revision

[commit-lint]

Features

• implement codeInput component first revision (ef3a384)

Bug Fixes

• component behavior update, most of the logic was changed based on comments from first revision (db22a1d)
• codeInput component, now we are controlling most of the input focus logic using states (2e51410)
• set length prop as optional (edceebd)
• quick fixes to reduce code and make it cleaner (7e9e4e7)
• ref management update, so we don't ask to user for a mandatory ref (952f56a)
• ref usage with useImperativeHandle (7050486)
• lint fix to prioritize DELETE_KEY import over prop-types (366e0df)

Contributors

@blakmetall, @LeandroTorresSicilia

Commit-Lint commands

You can trigger Commit-Lint actions by commenting on this PR:

• @Commit-Lint merge patch will merge dependabot PR on "patch" versions (X.X.Y - Y change)
• @Commit-Lint merge minor will merge dependabot PR on "minor" versions (X.Y.Y - Y change)
• @Commit-Lint merge major will merge dependabot PR on "major" versions (Y.Y.Y - Y change)
• @Commit-Lint merge disable will desactivate merge dependabot PR
• @Commit-Lint review will approve dependabot PR
• @Commit-Lint stop review will stop approve dependabot PR

[yvmunayev]

I think that I should rethink your life cycle because it is very complex and makes you work harder. I think the first step should be to normalize "value" in an array and that array is core of your component. This is going to give you a few validations and checks now.

Try to get the functions out for the helpers and optimize using hook.

[ghost]

I think that I should rethink your life cycle because it is very complex and makes you work harder. I think the first step should be to normalize "value" in an array and that array is core of your component. This is going to give you a few validations and checks now.

Try to get the functions out for the helpers and optimize using hook.

sure, thank you for your comments, applying all changes right away.

[ghost]

Changes ready for a second revision...

About the length prop you mentioned, it is used to establish the codeLength to be used for the component...

This is the file with the props definitions I have

https://docs.google.com/document/d/1PAFwTznCcUdz3_Vp9NJ5o0EFm3N4qcRY2GWQ1IXGl7Q/edit

---

I changed the name from length to codeLength to be more explicit, if you think its best to be called different please let me know.

[yvmunayev]

I believe that the life cycle of this component should be this:

a variable values ​​that is an array that is calculated based on the prop value and lenght, with that array you have the data to paint in complete component. assume this "1234" = [1, 2, 3, 4], "1 34" = [1, "", 3, 4], "12" = [1, 2, "", ""] = and " "= [" "," "," "," "] put this in a custom hook and use useMemo

a focusedIndex state that controls which input the focus is on

handleChange (newValue, index) converts the array to string and calls onChange

make a custom hook that has all the logic of keyPress

To optimize the repainting of nodes you can use a context where the fucusedIndex state and the handleChange are passed.

in the render you make a values.map for InputItem

the InputItem component is simple

props value, index and get from context fucusedIndex and handleChange

a useEffect to put focus

use keyDownPress to only enter numbers

and the onChange of the input calls handleChange (value, index)

I think you can delete the InputItems, all that logic can be in index.js

try to optimize everything you can using useMeme and useCallback.

[ghost]

I believe that the life cycle of this component should be this:

a variable values ​​that is an array that is calculated based on the prop value and lenght, with that array you have the data to paint in complete component. assume this "1234" = [1, 2, 3, 4], "1 34" = [1, "", 3, 4], "12" = [1, 2, "", ""] = and " "= [" "," "," "," "] put this in a custom hook and use useMemo

a focusedIndex state that controls which input the focus is on

handleChange (newValue, index) converts the array to string and calls onChange

make a custom hook that has all the logic of keyPress

To optimize the repainting of nodes you can use a context where the fucusedIndex state and the handleChange are passed.

in the render you make a values.map for InputItem

the InputItem component is simple

props value, index and get from context fucusedIndex and handleChange

a useEffect to put focus

use keyDownPress to only enter numbers

and the onChange of the input calls handleChange (value, index)

I think you can delete the InputItems, all that logic can be in index.js

try to optimize everything you can using useMeme and useCallback.

thank you for all your comments, they totally changed the way I was seeing the component...

[LeandroTorresSicilia]

const inputIndex = `code-input-${index}`;

[LeandroTorresSicilia]

remove key={index}