creation flow:

1. make a list of objects
2. that list go into a 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 things like
   • onPrefilInput (mapping through the inputs on componentDidMount)
   • renderInput (can be used to override input rendering)
   • validateForm
   • onSubmit

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() }

class TextBoxInput extends InputChain {
  /**
   * this handles all text inputs, and is the default
   */
  static isSatisfiedByProps(props): boolean {
    const typesSupported = ['text', 'confirmPassword', 'telephone']
    return (
      isUndefined(props.type) ||
      typesSupported.includes(props.type) ||
      (props.identity !== 'SecurityCode' && props.type === 'password')
    )
  }

  validate = () => {
    const state = this.get('state')
    const props = this.get('props')
    this.isValid = validators.isValid(state.value, props.validationType)
  }

  render() {
    const props = this.get('props')
    const attributes = {
      ...props,
    }
    return <TextBox {...attributes} />
  }
}