Skip to content

Instantly share code, notes, and snippets.

@lynaghk
Last active July 28, 2023 20:38
Show Gist options
  • Save lynaghk/69e17574fdb75785b3b664d9114298e8 to your computer and use it in GitHub Desktop.
Save lynaghk/69e17574fdb75785b3b664d9114298e8 to your computer and use it in GitHub Desktop.
Search Bar*
Search Bar*
Inactive*
focused -> Active
Active
canceled -> Inactive
typed -> Text Entry
Empty*
Text Entry
submitted -> Results
Results
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')))
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment