github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/app/components/search-box.js (about)

     1  import { reads } from '@ember/object/computed';
     2  import Component from '@ember/component';
     3  import { action } from '@ember/object';
     4  import { debounce } from '@ember/runloop';
     5  import { classNames } from '@ember-decorators/component';
     6  import classic from 'ember-classic-decorator';
     7  
     8  @classic
     9  @classNames('search-box', 'field', 'has-addons')
    10  export default class SearchBox extends Component {
    11    // Passed to the component (mutable)
    12    searchTerm = null;
    13  
    14    // Used as a debounce buffer
    15    @reads('searchTerm') _searchTerm;
    16  
    17    // Used to throttle sets to searchTerm
    18    debounce = 150;
    19  
    20    // A hook that's called when the search value changes
    21    onChange() {}
    22  
    23    @action
    24    setSearchTerm(e) {
    25      this.set('_searchTerm', e.target.value);
    26      debounce(this, updateSearch, this.debounce);
    27    }
    28  
    29    @action
    30    clear() {
    31      this.set('_searchTerm', '');
    32      debounce(this, updateSearch, this.debounce);
    33    }
    34  }
    35  
    36  function updateSearch() {
    37    const newTerm = this._searchTerm;
    38    this.onChange(newTerm);
    39    this.set('searchTerm', newTerm);
    40  }