update lib

HubSpot · May 19, 2016 · 7e2002f · 7e2002f
1 parent f237a47
commit 7e2002f
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 18 deletions.
diff --git 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,15 +179,15 @@ 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);
   },
 
   _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
@@ -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 },