File Chooser

SketchSystems.spec

File Chooser
  Empty
    Change -> Choosing
  Choosing
    Cancel -> Empty
    Choose -> Selected
  Selected
    Change -> Choosing
    Remove -> Empty

SketchSystems_prototype.js

function render(model){
  let current_state_name = model.active_states[0].name;
  switch(current_state_name){
    case 'Empty':
      return (<div>
              <em>Empty</em>
              <button onClick={()=>model.emit('Change')}>Choose</button>
              </div>)
      break;
    case 'Choosing': 
      return (<div>
              <select>
                <option>One</option>
                <option>Two</option>
              </select>
              <button onClick={()=>model.emit('Choose')}>Confirm</button>
              <button onClick={()=>model.emit('Cancel')}>Cancel</button>
              </div>)
      break;
              case 'Selected':
              return (
             <div>
                <strong>One</strong>
              <button onClick={()=>model.emit('Change')}>Change</button>
              <button onClick={()=>model.emit('Remove')}>Remove</button>
              </div>
             )
  }
}