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',
}
}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.
Simple placeholder displayed when input has no value
Config object used for getting modifiers
Initial value of input
isPopupHidden:Boolean
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:
- Date - Date picker popup is showed when modifier is active.
- List - List is simple list of possible options
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- write more tests
- add more modifier types
- remove bootstrap dependency