Search Bar*

SketchSystems.spec

Search Bar*

  Inactive*
    focus the input -> Active

  Active
    type something -> Text Entered
    press Cancel -> Inactive
    press Clear -> Empty

    Empty*
      
    Text Entered
      press Search -> Results

    Results

SketchSystems_prototype.js

function render(model){
  var active_state = model.active_states[0].name;
  return $('div', {style: {display: 'flex', justifyContent: 'center', height: '100%'}},
           render_search_bar(active_state, model))}

function render_search_bar(active_state, model){
  if (active_state == 'Inactive') {
    return $('div',
             $('input', {type: 'text',
                         placeholder: 'Enter a search term...',
                         style: {border: '1px solid grey', borderRadius: '8px', padding: '8px', marginRight: '12px'},
                         onFocus: function(){ model.emit("focus the input") }}),
             $('button', {disabled: true, style: {border: 'none', borderRadius: '8px', padding: '8px 12px', backgroundColor: 'lightgrey'}}, 'Search'))
  }
  if (active_state == 'Empty') {
    return $('div',
             $('input', {value: '',
                         style: {backgroundColor: 'papayaWhip', border: '1px solid grey', borderRadius: '8px', padding: '8px', marginRight: '12px'},
                         onChange: function(){ model.emit("type something") }}),
             $('button', {disabled: true, style: {border: 'none', borderRadius: '8px', padding: '8px 12px', backgroundColor: 'lightgrey'}}, 'Search'),
             $('button', {style: {border: 'none', borderRadius: '8px', padding: '8px 12px', marginLeft: '6px', backgroundColor: 'tomato', color: 'white'},
                         onClick: function(){ model.emit("press Cancel") }}, 'Cancel'))
  }
  if (active_state == 'Text Entered') {
    return $('div',
             $('input', {style: {backgroundColor: 'papayaWhip', border: '1px solid grey', borderRadius: '8px', padding: '8px', marginRight: '12px'}}),
             $('button', {style: {border: 'none', borderRadius: '8px', padding: '8px 12px', backgroundColor: '#449bd1', color: 'white'},
                          onClick: function(){ model.emit("press Search") }}, 'Search'),
             $('button', {style: {border: 'none', borderRadius: '8px', padding: '8px 12px', marginLeft: '6px', backgroundColor: 'tomato', color: 'white'}, 
                          onClick: function(){ model.emit("press Clear") }}, 'Clear'))
  }
  if (active_state == 'Results') {
    return $('div',
             $('input', {style: {backgroundColor: 'papayaWhip', border: '1px solid grey', borderRadius: '8px', padding: '8px', marginRight: '12px'},
                         onChange: function(){ model.emit("type something") }}),
             $('button', {disabled: true, style: {border: 'none', borderRadius: '8px', padding: '8px 12px', backgroundColor: 'lightgrey'}}, 'Search'),
             $('button', {style: {border: 'none', borderRadius: '8px', padding: '8px 12px', marginLeft: '6px', backgroundColor: 'tomato', color: 'white'}, 
                          onClick: function(){ model.emit("press Clear") }}, 'Clear'),
             $('ul',
               $('li', 'Search result 1'),
               $('li', 'Search result 2'),
               $('li', 'Search result 3')))
  }
}