@partially-applied/material-dropdown v0.0.2

DropDown

Model

(component wont work if options and default is not passed)

Model =
 options: # What options the dropdown shows
  "Afghanistan"
  "Bahamas"
  "Cambodia"
  "India"
  "Pakistan"
  "USA"
  "UK"
  "Canada"
  "Ukraine"
 default:2 # Since options is an array - provide default value 
 onchange:[] # attach either an array of functions or just a single function on onchange to get 
 # notification  when the user interacts with the dropdown. the event handler returns the Model 
 # Object with Model.value updated.

Params

### Params

defaultParams = 
  scroll:
    style:
      padding-left:"1em"
      padding-right:"1em"
    maxHeight:"10em"
  valuebox:
    style:
      padding-bottom:"0.1em"

How to use

createDropDown = require "./dropdown" # Returns vNode constructor function.

VNode = createDropDown Model,Params # returns the VNode, accepts 2 objects - models and params. 

Notes

In situations where the model is changed exterally or via another componenet we could have exposed a VNode.data.redraw() function, however this requires that other components which updates model values to know the dependency graph / information about each Model value.

Its much simpler to let onchange keep track of dependencies and update them.

How does it work ?

Observe

console.log Model.onchange # => []
VNode = createDropDown Model,Params 
console.log Model.onchange # => [fn]

The component constructor pushes the update function onto the Model.onchange array.

What this means is all long as any other componenet that makes changes on Model calls all the functions attached to onchange all the component level redraws gets called, and each component does not need to keep track of other components effected by changing the model.

Using the './utils' helpers functions in this component.

# ./fooComponent

{eventReact,Events} = require './utils'

create = (Model,Params2 = {}) -> # Model is same as above
  #....
  #....
  #....

  Ctrl = {}

  Ctrl.Model = Model 

  signalFn = Events update Ctrl # Ctrl.Model is passed onto update function
  
  #....
  #....
  #....


update = (Ctrl,signalOb) -> 
  
  
  #....
  #....
  #....

  {Model} = Ctrl # Extract Model

  switch signalOb.eventName

  #....
  #....
  #....

  | "makeModelChanges" => # some signal that notifes that some change needs to be made to the Model

    Model.value = 6 # make some change to model

    eventReact Model # Update other components that depend on Model

  #....
  #....
  #....

How you structure fooComponent is based on what you think is best - but the important thing is to call all functions attached to onchange.