hparton / react-native-merlin Goto Github PK

Initial examples I can think of:

• Simple form.
• Custom form inputs.
• Third party form inputs.
• Custom validator.
• Custom validator referencing other field values.
• Custom async validator (need to add support for this but will need docs eventually).
• External errors via ref.
• External values/errors via external state and watchers.
• Error type/messages.
• handleValue explanation.
• eventKey explanation.
• instantValidation explanation.
• Async submission handling.
• Handling external api errors after submission.
• Auto focusing with a multiline field.
• Some documentation around useForm if people want to expand with their own components.

We currently have a way to add errors but no way to clear them.

Currently working on this on a branch but ran into the usual issues with swapping from synchronous to async. Needs a bit more work then will push it up and write some docs for it.

• Get initial version working and pushed up on a branch
• Write some documentation around how this works

• Set up two components, one standard input and one custom component with multiple inputs as children

• Press enter while in the first component, it will try to find the next input field from the ref but as the ref is actually a custom component and not an input the 'current' value is null. This will throw an error. Merlin.js (line 141)

const nextFocusableInput = nextInputs.find( (element) => inputRefs[element.props.name]?.current?.focus )

This would ignore the next input and just submit the form, not ideal but would stop the error from happening. The other solution would be to look for input children in a custom component with a ref.

It would be nice to have support for disabled on Form.Input to be more in line with HTML forms.

Currently in the example pet.name would set the form values to:

{
  'pet.name': 'Example'
}

It should be resolving to:

{
  pet: {
    name: 'Example'
  }
}

Not sure if it's worth adding support for array format to the names at the same time since we will essentially be parsing the dot notation into that.

Not sure if this should live on the input itself and change the text that gets saved to the errors or if it should be a prop on the Form.Error to modify the output. Putting it on the error feels cleaner as the inputs already have a lot of props but then I'm not sure how we would then support passing custom errors to custom input components.