From 7e2002f997d38c9331ccc22689d6af56621ad7c3 Mon Sep 17 00:00:00 2001 From: Zachary Hickman Date: Thu, 19 May 2016 11:32:18 -0400 Subject: [PATCH] update lib --- lib/typeahead/index.js | 34 +++++++++++++++++----------------- lib/typeahead/selector.js | 18 +++++++++++++++++- 2 files changed, 34 insertions(+), 18 deletions(-) diff --git a/lib/typeahead/index.js b/lib/typeahead/index.js index 88ac292d..00f76df4 100644 --- a/lib/typeahead/index.js +++ b/lib/typeahead/index.js @@ -20,6 +20,7 @@ var Typeahead = React.createClass({ name: React.PropTypes.string, customClasses: React.PropTypes.object, maxVisible: React.PropTypes.number, + resultsTruncatedMessage: React.PropTypes.string, options: React.PropTypes.array, allowCustomValues: React.PropTypes.number, initialValue: React.PropTypes.string, @@ -68,14 +69,15 @@ var Typeahead = React.createClass({ inputDisplayOption: null, defaultClassNames: true, customListComponent: TypeaheadSelector, - showOptionsWhenEmpty: false + showOptionsWhenEmpty: false, + resultsTruncatedMessage: null }; }, getInitialState: function () { return { - // The currently visible set of options - visible: this.getOptionsForValue(this.props.initialValue, this.props.options), + // The options matching the entry value + searchResults: this.getOptionsForValue(this.props.initialValue, this.props.options), // This should be called something else, "entryValue" entryValue: this.props.value || this.props.initialValue, @@ -99,11 +101,7 @@ var Typeahead = React.createClass({ } var searchOptions = this._generateSearchFunction(); - var result = searchOptions(value, options); - if (this.props.maxVisible) { - result = result.slice(0, this.props.maxVisible); - } - return result; + return searchOptions(value, options); }, setEntryText: function (value) { @@ -116,7 +114,7 @@ var Typeahead = React.createClass({ }, _hasCustomValue: function () { - if (this.props.allowCustomValues > 0 && this.state.entryValue.length >= this.props.allowCustomValues && this.state.visible.indexOf(this.state.entryValue) < 0) { + if (this.props.allowCustomValues > 0 && this.state.entryValue.length >= this.props.allowCustomValues && this.state.searchResults.indexOf(this.state.entryValue) < 0) { return true; } return false; @@ -146,7 +144,9 @@ var Typeahead = React.createClass({ } return React.createElement(this.props.customListComponent, { - ref: 'sel', options: this.state.visible, + ref: 'sel', options: this.state.searchResults.slice(0, this.props.maxVisible), + areResultsTruncated: this.state.searchResults.length > this.props.maxVisible, + resultsTruncatedMessage: this.props.resultsTruncatedMessage, onOptionSelected: this._onOptionSelected, allowCustomValues: this.props.allowCustomValues, customValue: this._getCustomValue(), @@ -165,7 +165,7 @@ var Typeahead = React.createClass({ index--; } } - return this.state.visible[index]; + return this.state.searchResults[index]; }, _onOptionSelected: function (option, event) { @@ -179,7 +179,7 @@ var Typeahead = React.createClass({ var formInputOptionString = formInputOption(option); nEntry.value = optionString; - this.setState({ visible: this.getOptionsForValue(optionString, this.props.options), + this.setState({ searchResults: this.getOptionsForValue(optionString, this.props.options), selection: formInputOptionString, entryValue: optionString }); return this.props.onOptionSelected(option, event); @@ -187,7 +187,7 @@ var Typeahead = React.createClass({ _onTextEntryUpdated: function () { var value = this.refs.entry.value; - this.setState({ visible: this.getOptionsForValue(value, this.props.options), + this.setState({ searchResults: this.getOptionsForValue(value, this.props.options), selection: '', hasRendered: true, entryValue: value }); @@ -213,7 +213,7 @@ var Typeahead = React.createClass({ _onTab: function (event) { var selection = this.getSelection(); - var option = selection ? selection : this.state.visible.length > 0 ? this.state.visible[0] : null; + var option = selection ? selection : this.state.searchResults.length > 0 ? this.state.searchResults[0] : null; if (option === null && this._hasCustomValue()) { option = this._getCustomValue(); @@ -241,7 +241,7 @@ var Typeahead = React.createClass({ return; } var newIndex = this.state.selectionIndex === null ? delta == 1 ? 0 : delta : this.state.selectionIndex + delta; - var length = this.state.visible.length; + var length = this.state.searchResults.slice(0, this.props.maxVisible).length; if (this._hasCustomValue()) { length += 1; } @@ -292,7 +292,7 @@ var Typeahead = React.createClass({ componentWillReceiveProps: function (nextProps) { this.setState({ - visible: this.getOptionsForValue(this.state.entryValue, nextProps.options) + searchResults: this.getOptionsForValue(this.state.entryValue, nextProps.options) }); }, @@ -371,7 +371,7 @@ var Typeahead = React.createClass({ }, _hasHint: function () { - return this.state.visible.length > 0 || this._hasCustomValue(); + return this.state.searchResults.length > 0 || this._hasCustomValue(); } }); diff --git a/lib/typeahead/selector.js b/lib/typeahead/selector.js index 595a45b8..9080ca0b 100644 --- a/lib/typeahead/selector.js +++ b/lib/typeahead/selector.js @@ -17,7 +17,9 @@ var TypeaheadSelector = React.createClass({ selectionIndex: React.PropTypes.number, onOptionSelected: React.PropTypes.func, displayOption: React.PropTypes.func.isRequired, - defaultClassNames: React.PropTypes.bool + defaultClassNames: React.PropTypes.bool, + areResultsTruncated: React.PropTypes.bool, + resultsTruncatedMessage: React.PropTypes.string }, getDefaultProps: function () { @@ -72,6 +74,20 @@ var TypeaheadSelector = React.createClass({ ); }, this); + if (this.props.areResultsTruncated && this.props.resultsTruncatedMessage !== null) { + var resultsTruncatedClasses = { + "results-truncated": this.props.defaultClassNames + }; + resultsTruncatedClasses[this.props.customClasses.resultsTruncated] = this.props.customClasses.resultsTruncated; + var resultsTruncatedClassList = classNames(resultsTruncatedClasses); + + results.push(React.createElement( + 'li', + { key: 'results-truncated', className: resultsTruncatedClassList }, + this.props.resultsTruncatedMessage + )); + } + return React.createElement( 'ul', { className: classList },