My Awesome Sketch

SketchSystems.spec

My Awesome Sketch
  Inactive
    focus -> Active
    click -> Active
  Active
    cancel -> Inactive
    blur -> Inactive

    DateView
      select -> Inactive
      toMonth -> MonthView
      toTime -> TimeView
    TimeView
      toDate -> DateView
    MonthView
      select -> DateView
      toDate -> DateView
      toYear -> YearView
    YearView
      select -> MonthView
      toMonth -> MonthView

SketchSystems_prototype.js

function render(model){
  const current_state_name = model.active_states[0].name;
  
  const views = {
    Inactive: <input onClick={() => model.emit("click") } />,
    DateView: <div><input /><br />dates <button type="button" onClick={() => model.emit("toTime") }>Time</button> <button type="button" onClick=>Months</button></div>,
    TimeView: <div><input /><br />times</div>,
    MonthView: <div><input /><br />months</div>,
    YearView: <div><input /><br />years</div>
  };
  
  return <div>
    ({current_state_name})
  <div>
    {views[current_state_name] || null}
    </div>
    </div>
}