41 lines
1016 B
JavaScript
41 lines
1016 B
JavaScript
import { reads } from '@ember/object/computed';
|
|
import Component from '@ember/component';
|
|
import { action } from '@ember/object';
|
|
import { debounce } from '@ember/runloop';
|
|
import { classNames } from '@ember-decorators/component';
|
|
import classic from 'ember-classic-decorator';
|
|
|
|
@classic
|
|
@classNames('search-box', 'field', 'has-addons')
|
|
export default class SearchBox extends Component {
|
|
// Passed to the component (mutable)
|
|
searchTerm = null;
|
|
|
|
// Used as a debounce buffer
|
|
@reads('searchTerm') _searchTerm;
|
|
|
|
// Used to throttle sets to searchTerm
|
|
debounce = 150;
|
|
|
|
// A hook that's called when the search value changes
|
|
onChange() {}
|
|
|
|
@action
|
|
setSearchTerm(e) {
|
|
this.set('_searchTerm', e.target.value);
|
|
debounce(this, updateSearch, this.debounce);
|
|
}
|
|
|
|
@action
|
|
clear() {
|
|
this.set('_searchTerm', '');
|
|
debounce(this, updateSearch, this.debounce);
|
|
}
|
|
}
|
|
|
|
function updateSearch() {
|
|
const newTerm = this._searchTerm;
|
|
this.onChange(newTerm);
|
|
this.set('searchTerm', newTerm);
|
|
}
|