Ember Addon
MIT License
Attempt to replicate slack search input field as ember addon.
Like search input field in slack, special keywords(modifiers) are used to filter out the search. This modifiers are passed as form of config object with options like:
configHash: {
"@": { // '@' is special key (modifier) which highlighted in input
type: 'list', // type of modifier (either list or date)
defaultHint: 'any user', // displayed when modifier is active but has no value
sectionTitle: 'Users', // used as header when all modifiers content displayed
content: [ // content to be used for displaying list
{value: 'abrahm', label: 'Abrahm Micanski' },
{value: 'lilly', label: 'Lilly Richards' },
{value: 'emma', label: 'Emma Roberts' },
]
},
"before:": {
type: 'date',
defaultHint: 'a date',
}
}
{{slack-search-input
placeholder='search for objects'
configHash=configHash
inputValue=''
isPopupHidden=false
maxlength=250
valueChange=(action 'searchValueChange')
modifierAutoComplete=(action 'modifierAutoComplete')
enter=(action 'search')
focus-in=(action 'inputFocusedIn')
focus-out=(action 'inputFocusedOut')
}}
There is also help popup which is displayed when user focuses input first time. The content of popup should be passed to slack-search-input
in block form.
{{#slack-search-input as |concatToInputValue|}}
<div class="help-title">
Search with Filters
</div>
<span class='help-text'>Narrow your search using filter <span onmousedown={{action concatToInputValue 'before:'}} class='modifier'>before:</span>, <span onmousedown={{action concatToInputValue 'channel:'}} class='modifier'>channel:</span> or <span onmousedown={{action concatToInputValue '@'}} class='modifier'>@</span>. Or press plus key <span onmousedown={{action concatToInputValue '+'}} class='modifier'>+</span> to get all available filters</span>
{{/slack-search-input}}
Simple placeholder displayed when input has no value
Config object used for getting modifiers
Initial value of input
Can be used to hide popups
Max character length of input
Fired when inputValue changes
Fired when modifier has valid value
Fired when the escape key is hit
Currently two types of modifiers are supported list
and date
:
Once you got query string, you can deserialze it to object.
import { deserializeQueryString } from `ember-slack-search-input`;
search() {
let queryString = get(this, 'queryString');
console.log(queryString) // `before:2000-23-23 lorem`
let modifiers = deserializeQueryString(queryString);
let before = modifiers['before:'];
let { model, fullText, modifier, value } = before[0]; //first occurance of `before:`
console.log(model); // moment date
console.log(fullText); // before:2000-23-23
console.log(modifier); // before:
console.log(value); // 2000-23-23
}
Currently addon styles has hard dependency on bootstrap 3.x.x
, bootstrap should be installed already to styles work properly.
For input field to react properly to paste/cut
events, they should be added to customEvents
hash in app.js
.
App = Ember.Application.extend({
customEvents: {
paste: "paste",
cut: "cut"
},
...
});
ember install ember-slack-search-input