README

• https://reactjs.org/docs/forms.html
• https://mobx.js.org/best/pitfalls.html

STATELESS

CheckboxInput

RadioInput

true | false

ToggleFactory

= [Input | Checkbox] + [ToggleLabel]

OBSERVABLE

• index.js
  • can pass it state or primitive props
  • observably updates
  • controls the ToggleFactory

@TODO

• observable for RadioGroup

// just data import commonState ToggleContext // this is the one place we can handle all the data stuff // for onClick/onToggle/onChange, isSelected etc onClick // these could be set by our theme renderIcon renderInput renderLabel

// just ui factory import CheckboxIcon import RadioIcon ToggleMolecule setRenderIcon(isCheckbox ? CheckboxIcon : RadioIcon) setInput(isCheckbox ? CheckboxInput : RadioIcon)

TODO

a little over complicated flow with the

• ToggleMolecule (stateful controller)

• ToggleFactory (stateless, controlled by molecule)

• CheckboxInput (which doesn't use CheckboxIcon)

• ToggleLabel

• Label

• RadioInput (used by RadioGroup)

• atoms/Radio (used by refine)

TODO

// Provider as customizable
render() {
  if (this.props.hasProvider === true) {
    return (
      <Consumer>{this.renderContext}</Consumer>
    )
  }
  else {
    return (
      <Provider {...this.props}>
        <Consumer>
          {this.renderContext}
        </Consumer>
      </Provider>
    )
  }
}


// using in ShippingMethods

import {Provider} from 'molecules/toggle/Context'

// can pass props or set renders up above
// renderIcon={renderIcon}
// renderLabelWrapper
// renderLabelText
// renderInput
  <RadioGroup list={list} onChangeValue={subscriber} />

// shippingmethod - WITH EDIT BUTTON IN CLASSIC DESIGN
renderItem = (item, index) =>
  <Provider renderLabel={renderLabelAndEditButton}>
    <ToggleMolecule {...item} />
  </Provider>