From 20a530a5b9a582414a2d32546bbe3b49321ec396 Mon Sep 17 00:00:00 2001 From: lexicalunit Date: Fri, 25 Aug 2017 14:14:31 -0500 Subject: [PATCH] Adds a doDidChangeQuery option when updating query. If and only if this option is set to false, the didChangeQuery() callback will NOT trigger after updating the query. This is useful for things like autocompletion or when you'd want to update the query text while bypassing code that recomputes and filters the list items. This is the only change I needed to make to `SelectListView` to fully implement autocompletion (see #12) on top of `atom-select-list`. --- src/select-list-view.js | 12 +++++++++++- test/select-list-view.test.js | 16 +++++++++++++++- 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/src/select-list-view.js b/src/select-list-view.js index 5f99042..dcd2875 100644 --- a/src/select-list-view.js +++ b/src/select-list-view.js @@ -24,7 +24,7 @@ module.exports = class SelectListView { this.disposables = new CompositeDisposable() etch.initialize(this) this.element.classList.add('select-list') - this.disposables.add(this.refs.queryEditor.onDidChange(this.didChangeQuery.bind(this))) + this.didChangeQueryDisposable = this.refs.queryEditor.onDidChange(this.didChangeQuery.bind(this)) if (!props.skipCommandsRegistration) { this.disposables.add(this.registerAtomCommands()) } @@ -67,6 +67,7 @@ module.exports = class SelectListView { destroy () { this.disposables.dispose() + this.didChangeQueryDisposable.dispose() if (this.visibilityObserver) this.visibilityObserver.disconnect() return etch.destroy(this) } @@ -124,10 +125,19 @@ module.exports = class SelectListView { } if (props.hasOwnProperty('query')) { + const doDidChangeQuery = !props.hasOwnProperty('doDidChangeQuery') || props.doDidChangeQuery + if (!doDidChangeQuery) { + this.didChangeQueryDisposable.dispose() + } + // Items will be recomputed as part of the change event handler, so we // don't need to recompute them again at the end of this function. this.refs.queryEditor.setText(props.query) shouldComputeItems = false + + if (!doDidChangeQuery) { + this.didChangeQueryDisposable = this.refs.queryEditor.onDidChange(this.didChangeQuery.bind(this)) + } } if (props.hasOwnProperty('selectQuery')) { diff --git a/test/select-list-view.test.js b/test/select-list-view.test.js index 6d45d23..79b988a 100644 --- a/test/select-list-view.test.js +++ b/test/select-list-view.test.js @@ -549,9 +549,11 @@ describe('SelectListView', () => { }) it('changing and selecting the query', async () => { + let didChangeQuerySpy = sinon.spy() let selectListView = new SelectListView({ itemsClassList: [], items: [], - elementForItem: (i) => document.createElement('li') + elementForItem: (i) => document.createElement('li'), + didChangeQuery: (q) => didChangeQuerySpy(q) }) await selectListView.update({query: 'test q'}) @@ -569,6 +571,18 @@ describe('SelectListView', () => { await selectListView.update({selectQuery: true}) assert.equal(selectListView.getQuery(), 'test q3') assert.equal(selectListView.refs.queryEditor.getSelectedText(), 'test q3') + + await selectListView.update({query: 'test q4'}) + assert.equal(selectListView.getQuery(), 'test q4') + assert(didChangeQuerySpy.withArgs('test q4').calledOnce) + + await selectListView.update({query: 'test q5', doDidChangeQuery: false}) + assert.equal(selectListView.getQuery(), 'test q5') + assert(!didChangeQuerySpy.withArgs('test q5').called) + + await selectListView.update({query: 'test q6', doDidChangeQuery: true}) + assert.equal(selectListView.getQuery(), 'test q6') + assert(didChangeQuerySpy.withArgs('test q6').calledOnce) }) describe('initiallyVisibleItemCount', () => {