From 0500f3f2fb44b010bf2c083e04686970d6c30bc7 Mon Sep 17 00:00:00 2001 From: David Seeto Date: Wed, 9 Mar 2016 17:35:49 -0800 Subject: [PATCH 1/2] Make skipping blank searches configurable --- README.md | 6 ++++++ src/typeahead/index.js | 10 ++++++---- test/typeahead-test.js | 23 ++++++++++++++++++++++- 3 files changed, 34 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 1e4b842f..e8d52c38 100644 --- a/README.md +++ b/README.md @@ -191,6 +191,12 @@ This component receives the following props : - `props.selectionIndex` - The index of the highlighted option for rendering +#### props.skipBlankSearch + +Type: `boolean` +Default: true + +If false, options will still be rendered when there is no value. ### Typeahead ([Exposed Component Functions][reactecf]) diff --git a/src/typeahead/index.js b/src/typeahead/index.js index 9b900b21..35064c0c 100644 --- a/src/typeahead/index.js +++ b/src/typeahead/index.js @@ -54,7 +54,8 @@ var Typeahead = React.createClass({ customListComponent: React.PropTypes.oneOfType([ React.PropTypes.element, React.PropTypes.func - ]) + ]), + skipBlankSearch: React.PropTypes.bool }, getDefaultProps: function() { @@ -75,7 +76,8 @@ var Typeahead = React.createClass({ onBlur: function(event) {}, filterOption: null, defaultClassNames: true, - customListComponent: TypeaheadSelector + customListComponent: TypeaheadSelector, + skipBlankSearch: true }; }, @@ -96,7 +98,7 @@ var Typeahead = React.createClass({ }, getOptionsForValue: function(value, options) { - if (!SHOULD_SEARCH_VALUE(value)) { return []; } + if (this.props.skipBlankSearch && !SHOULD_SEARCH_VALUE(value)) { return []; } var filterOptions = this._generateFilterFunction(); var result = filterOptions(value, options); if (this.props.maxVisible) { @@ -132,7 +134,7 @@ var Typeahead = React.createClass({ _renderIncrementalSearchResults: function() { // Nothing has been entered into the textbox - if (!this.state.entryValue) { + if (this.props.skipBlankSearch && !this.state.entryValue) { return ""; } diff --git a/test/typeahead-test.js b/test/typeahead-test.js index ddd7aad6..cfa12a3e 100644 --- a/test/typeahead-test.js +++ b/test/typeahead-test.js @@ -563,6 +563,27 @@ describe('Typeahead Component', function() { var input = component.refs.entry; assert.equal(input.tagName.toLowerCase(), 'input'); }); - }) + }); + + context('skipBlankSearch', function() { + it('does not perform a search by default', function() { + var component = TestUtils.renderIntoDocument(); + + var results = TestUtils.scryRenderedComponentsWithType(component, TypeaheadOption); + assert.equal(0, results.length); + }); + + it('does perform a search when set to false', function() { + var component = TestUtils.renderIntoDocument(); + + var results = TestUtils.scryRenderedComponentsWithType(component, TypeaheadOption); + assert.equal(4, results.length); + }); + }); }); }); From 318480ffa81d0120ee59ac5c0cdaf585337643fc Mon Sep 17 00:00:00 2001 From: David Seeto Date: Thu, 10 Mar 2016 10:50:05 -0800 Subject: [PATCH 2/2] Rename prop skipBlankSearch -> showOptionsWhenEmpty to have false default value --- README.md | 6 +++--- src/typeahead/index.js | 15 ++++++++++----- test/typeahead-test.js | 24 ++++++++++++++---------- 3 files changed, 27 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index e8d52c38..2eed6e12 100644 --- a/README.md +++ b/README.md @@ -191,12 +191,12 @@ This component receives the following props : - `props.selectionIndex` - The index of the highlighted option for rendering -#### props.skipBlankSearch +#### props.showOptionsWhenEmpty Type: `boolean` -Default: true +Default: false -If false, options will still be rendered when there is no value. +If true, options will still be rendered when there is no value. ### Typeahead ([Exposed Component Functions][reactecf]) diff --git a/src/typeahead/index.js b/src/typeahead/index.js index 35064c0c..55ebed7c 100644 --- a/src/typeahead/index.js +++ b/src/typeahead/index.js @@ -9,7 +9,6 @@ var fuzzy = require('fuzzy'); var classNames = require('classnames'); var IDENTITY_FN = function(input) { return input; }; -var SHOULD_SEARCH_VALUE = function(input) { return input && input.trim().length > 0; }; var _generateAccessor = function(field) { return function(object) { return object[field]; }; }; @@ -55,7 +54,7 @@ var Typeahead = React.createClass({ React.PropTypes.element, React.PropTypes.func ]), - skipBlankSearch: React.PropTypes.bool + showOptionsWhenEmpty: React.PropTypes.bool }, getDefaultProps: function() { @@ -77,7 +76,7 @@ var Typeahead = React.createClass({ filterOption: null, defaultClassNames: true, customListComponent: TypeaheadSelector, - skipBlankSearch: true + showOptionsWhenEmpty: false }; }, @@ -97,8 +96,14 @@ var Typeahead = React.createClass({ }; }, + _shouldSkipSearch: function(input) { + var emptyValue = !input || input.trim().length == 0; + return !this.props.showOptionsWhenEmpty && emptyValue; + }, + getOptionsForValue: function(value, options) { - if (this.props.skipBlankSearch && !SHOULD_SEARCH_VALUE(value)) { return []; } + if (this._shouldSkipSearch(value)) { return []; } + var filterOptions = this._generateFilterFunction(); var result = filterOptions(value, options); if (this.props.maxVisible) { @@ -134,7 +139,7 @@ var Typeahead = React.createClass({ _renderIncrementalSearchResults: function() { // Nothing has been entered into the textbox - if (this.props.skipBlankSearch && !this.state.entryValue) { + if (this._shouldSkipSearch(this.state.entryValue)) { return ""; } diff --git a/test/typeahead-test.js b/test/typeahead-test.js index cfa12a3e..e8bcb271 100644 --- a/test/typeahead-test.js +++ b/test/typeahead-test.js @@ -565,21 +565,25 @@ describe('Typeahead Component', function() { }); }); - context('skipBlankSearch', function() { - it('does not perform a search by default', function() { - var component = TestUtils.renderIntoDocument(); + context('showOptionsWhenEmpty', function() { + it('do not render options when value is empty by default', function() { + var component = TestUtils.renderIntoDocument( + + ); var results = TestUtils.scryRenderedComponentsWithType(component, TypeaheadOption); assert.equal(0, results.length); }); - it('does perform a search when set to false', function() { - var component = TestUtils.renderIntoDocument(); + it('render options when value is empty when set to true', function() { + var component = TestUtils.renderIntoDocument( + + ); var results = TestUtils.scryRenderedComponentsWithType(component, TypeaheadOption); assert.equal(4, results.length);