add customListComponentProps to Typeahead

README.md

@@ -191,6 +191,12 @@ This component receives the following props :
 - `props.selectionIndex`
   - The index of the highlighted option for rendering
 
+#### props.customListComponentProps
+
+Type: `Object`
+
+Props to pass directly to the `customListComponent` element.
+
 
 ### Typeahead ([Exposed Component Functions][reactecf])
 

dist/react-typeahead.js

@@ -99,7 +99,7 @@ fuzzy.match = function(pattern, string, opts) {
   pattern = opts.caseSensitive && pattern || pattern.toLowerCase();
 
   // For each character in the string, either add it to the result
-  // or wrap in template if its the next string in the pattern
+  // or wrap in template if it's the next string in the pattern
   for(var idx = 0; idx < len; idx++) {
     ch = string[idx];
     if(compareString[idx] === pattern[patternIdx]) {
@@ -141,40 +141,40 @@ fuzzy.match = function(pattern, string, opts) {
 //        // string to put after matching character
 //      , post:    '</b>'
 //
-//        // Optional function. Input is an element from the passed in
-//        // `arr`, output should be the string to test `pattern` against.
+//        // Optional function. Input is an entry in the given arr`,
+//        // output should be the string to test `pattern` against.
 //        // In this example, if `arr = [{crying: 'koala'}]` we would return
 //        // 'koala'.
 //      , extract: function(arg) { return arg.crying; }
 //    }
 fuzzy.filter = function(pattern, arr, opts) {
   opts = opts || {};
   return arr
-          .reduce(function(prev, element, idx, arr) {
-            var str = element;
-            if(opts.extract) {
-              str = opts.extract(element);
-            }
-            var rendered = fuzzy.match(pattern, str, opts);
-            if(rendered != null) {
-              prev[prev.length] = {
-                  string: rendered.rendered
-                , score: rendered.score
-                , index: idx
-                , original: element
-              };
-            }
-            return prev;
-          }, [])
-
-          // Sort by score. Browsers are inconsistent wrt stable/unstable
-          // sorting, so force stable by using the index in the case of tie.
-          // See http://ofb.net/~sethml/is-sort-stable.html
-          .sort(function(a,b) {
-            var compare = b.score - a.score;
-            if(compare) return compare;
-            return a.index - b.index;
-          });
+    .reduce(function(prev, element, idx, arr) {
+      var str = element;
+      if(opts.extract) {
+        str = opts.extract(element);
+      }
+      var rendered = fuzzy.match(pattern, str, opts);
+      if(rendered != null) {
+        prev[prev.length] = {
+            string: rendered.rendered
+          , score: rendered.score
+          , index: idx
+          , original: element
+        };
+      }
+      return prev;
+    }, [])
+
+    // Sort by score. Browsers are inconsistent wrt stable/unstable
+    // sorting, so force stable by using the index in the case of tie.
+    // See http://ofb.net/~sethml/is-sort-stable.html
+    .sort(function(a,b) {
+      var compare = b.score - a.score;
+      if(compare) return compare;
+      return a.index - b.index;
+    });
 };
 
 
@@ -541,7 +541,8 @@ var Typeahead = React.createClass({displayName: "Typeahead",
     customListComponent: React.PropTypes.oneOfType([
       React.PropTypes.element,
       React.PropTypes.func
-    ])
+    ]),
+    customListComponentProps: React.PropTypes.object
   },
 
   getDefaultProps: function() {
@@ -562,7 +563,8 @@ var Typeahead = React.createClass({displayName: "Typeahead",
       onBlur: function(event) {},
       filterOption: null,
       defaultClassNames: true,
-      customListComponent: TypeaheadSelector
+      customListComponent: TypeaheadSelector,
+      customListComponentProps: {}
     };
   },
 
@@ -629,14 +631,15 @@ var Typeahead = React.createClass({displayName: "Typeahead",
     }
 
     return (
-      React.createElement(this.props.customListComponent, {
-        ref: "sel", options: this.state.visible, 
+      React.createElement(this.props.customListComponent, React.__spread({}, 
+        this.props.customListComponentProps, 
+        {ref: "sel", options: this.state.visible, 
         onOptionSelected: this._onOptionSelected, 
         customValue: this._getCustomValue(), 
         customClasses: this.props.customClasses, 
         selectionIndex: this.state.selectionIndex, 
         defaultClassNames: this.props.defaultClassNames, 
-        displayOption: this._generateOptionToStringFor(this.props.displayOption)})
+        displayOption: this._generateOptionToStringFor(this.props.displayOption)}))
     );
   },
 

src/typeahead/index.js

@@ -54,7 +54,8 @@ var Typeahead = React.createClass({
     customListComponent: React.PropTypes.oneOfType([
       React.PropTypes.element,
       React.PropTypes.func
-    ])
+    ]),
+    customListComponentProps: React.PropTypes.object
   },
 
   getDefaultProps: function() {
@@ -75,7 +76,8 @@ var Typeahead = React.createClass({
       onBlur: function(event) {},
       filterOption: null,
       defaultClassNames: true,
-      customListComponent: TypeaheadSelector
+      customListComponent: TypeaheadSelector,
+      customListComponentProps: {}
     };
   },
 
@@ -143,6 +145,7 @@ var Typeahead = React.createClass({
 
     return (
       <this.props.customListComponent
+        {...this.props.customListComponentProps}
         ref="sel" options={this.state.visible}
         onOptionSelected={this._onOptionSelected}
         customValue={this._getCustomValue()}