Ideas for Frig 1.0 design

[jbinto]

Looking at other libraries for inspiration.

• http://redux-form.com/6.0.0-rc.3/docs/GettingStarted.md/
• https://github.com/davezuko/react-reformed

We still like the idea that Frig does not hold on to any state (react-reformed uses setState).

We also like the fact that Frig uses React context, so our <Input/>'s do not need to have an onChange/value, they are bound automagically. (redux-form requires a bit of boilerplate here.)

---

Brainstorming for 1.0

• <Form> component, accepts data, onChange(data), [onSubmit, errors, modifiedFields]
• No validations
• No react setState
• Ideally: we could pass a component prop into <Field> (e.g. currently Input) so we can use plain React.DOM inputs, or specialized inputs from frigging-bootstrap, or custom inputs from anywhere (without having to understand frig themes)

Row states

• Thought, stolen from .NET: Original, Proposed, Current
  • Shortcuts:
    • pristine: original === proposed
    • saved: propsed === current
    • dirty/pending: propsed !== original && proposed !== current
  • What does this gain us?
    • Simpler input to <Form/>: don't have to explicitly handle modified and saved (because those can be derived from these 3 collections)
    • ability to diff, potentially only send down fields that changed

hypothetical API

class StatefulComponent extends React.Component {
  static defaultProps = {
    original: {}
  }
  static state = {
    proposed: {},
    current: {}
  }

  _onChange({proposed}) {
    this.setState({ proposed })
  }  

  _onSubmit() {
    const nextCurrent = state.proposed
    saveToDatabase(nextCurrent, () => {
      this.setState(current: nextCurrent)
    })
  }

  render() {
    return <Form 
      original={this.props.original}   // optional
      proposed={this.state.proposed} 
      current={this.state.current}
      onChange={this._onChange} 
      onSubmit={this._onSubmit}
    >
      <Field name="username" component="input"/>
      <Field name="password" component="input"/>
      <submit/>
    </Form>
  }
}

• Could simplify <Form /> input a bit, not require 3 objects, either by:
  • wrapping everything in a form object, e.g. Object.keys(form) => ['original', 'proposed', 'current']
  • just doing <Form {...collections} />