FORMS

read this

1. google fundementals on forms
2. reactjs official forms
3. material design text input fields
4. material design errors
5. material design search
6. material design formatting data {such as dates, numbers}

Form creation flow

1. Create a list of objects
2. The list goes into the FormState
3. The FormState maps the list into a list of InputState's
4. An instance of FormState is created (new FormState)
5. The instance is passed in as defaultProps to a FormView extends <ObserverForm> component
6. The ObserverForm renders,

• The form (and all its crazy properties are used in a crazy way)
• inputStateList.map(inputState => )

LifeCycle flow

1. ObserverInput & ObserverForm have some lifeCycle hooks
2. these are convenience methods called with arguments during react lifecycle hooks like componentDidMount
3. These are used for performing a set of operations like,
   • onPrefilInput (mapping through the inputs on componentDidMount)
   • renderInput (can be used to override input rendering)
   • validateForm
   • onSubmit
   • onInputInit

plugins:

1. we register a list of plugins
2. when we map through the list of objects at the beginning, we find the plugin for them by doing: inputsList.forEach(inputConfig => { const pluginForInput = registeredPluginList.find(plugin => { return plugin.isSatisfiedBy() }) inputConfig.plugin = pluginForInput return inputConfig })
3. instead of having ObserverInput handle everything, the ObserverInput does this: render() { // each InputPlugin is a simplified minimal react component return this.plugin.setPluginProps(props).render() }

types

see inputs.d.ts

ObserverForm

• renders javascript inputsList into an observable controlled input

ObserverInput

• renders any type of input, takes in a state via props, or defaults to making one

related

• https://github.com/Threestup/react-forms/tree/master/src/Form
• https://redux-form.com/7.1.0/docs/api/props.md
• https://codesandbox.io/s/mZRjw05yp
• https://medium.com/@KozhukharenkoN/react-form-validation-with-mobx-8ce00233ae27
• https://github.com/foxhound87/mobx-react-form/issues/248

todo

• NEEDS TO SAVE FORM STATES TO THE LOCALSTORAGE
• CAN SYNC THE DEFINITIONS WITH STATE TREE IF NEEDED
• Google address auto suggest state issue
• Should have tests for the validators & for the functionality - really need to unit test these
• Events for input
• Dev tools
• Should support arrays of plugins, to use multiple types, or add wrappers
• link to commits in skreact history