Search Bar*

SketchSystems.spec

Search Bar*

  Inactive*
    focused -> Active

  Active
    canceled -> Inactive
    typed -> Text Entry

    Empty*

    Text Entry
      submitted -> Results

    Results

SketchSystems_prototype.js

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

function render_search_bar(active_state){
  if (active_state == 'Inactive') {
    return $('div',
             $('input', {value: '',
                         placeholder: 'Enter a search term...',
                         style: {border: '1px solid grey', borderRadius: '8px', padding: '8px', marginRight: '12px'}}),
             $('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'}}),
             $('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'}}, 'Cancel'))
  }
  if (active_state == 'Text Entry') {
    return $('div',
             $('input', {value: 'Example sea',
                         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'}}, 'Search'),
             $('button', {style: {border: 'none', borderRadius: '8px', padding: '8px 12px', marginLeft: '6px', backgroundColor: 'tomato', color: 'white'}}, 'Cancel'))
  }
  if (active_state == 'Results') {
    return $('div',
             $('input', {value: 'Example search string',
                         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'}}, 'Search'),
             $('button', {style: {border: 'none', borderRadius: '8px', padding: '8px 12px', marginLeft: '6px', backgroundColor: 'tomato', color: 'white'}}, 'Cancel'),
             $('ul',
               $('li', 'Search result 1'),
               $('li', 'Search result 2'),
               $('li', 'Search result 3')))
  }
}