From 0f9ed888083c81abd7e127db14d70c91f70da876 Mon Sep 17 00:00:00 2001 From: mattjstar Date: Tue, 1 Dec 2015 22:17:58 -0500 Subject: [PATCH 1/2] add customListComponentProps to Typeahead --- README.md | 6 ++++ dist/react-typeahead.js | 63 +++++++++++++++++++++-------------------- src/typeahead/index.js | 1 + 3 files changed, 39 insertions(+), 31 deletions(-) diff --git a/README.md b/README.md index 1e4b842f..1544e073 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.customListComponentProps + +Type: `Object` + +Props to pass directly to the `customListComponent` element. + ### Typeahead ([Exposed Component Functions][reactecf]) diff --git a/dist/react-typeahead.js b/dist/react-typeahead.js index f00d84d3..aef10a31 100644 --- a/dist/react-typeahead.js +++ b/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,8 +141,8 @@ fuzzy.match = function(pattern, string, opts) { // // string to put after matching character // , post: '' // -// // 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; } @@ -150,31 +150,31 @@ fuzzy.match = function(pattern, string, opts) { 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; + }); }; @@ -629,14 +629,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)})) ); }, diff --git a/src/typeahead/index.js b/src/typeahead/index.js index c13d2dd0..a069f9c5 100644 --- a/src/typeahead/index.js +++ b/src/typeahead/index.js @@ -143,6 +143,7 @@ var Typeahead = React.createClass({ return ( Date: Wed, 2 Dec 2015 09:58:13 -0500 Subject: [PATCH 2/2] add propTypes validation for customListComponentProps --- dist/react-typeahead.js | 6 ++++-- src/typeahead/index.js | 6 ++++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/dist/react-typeahead.js b/dist/react-typeahead.js index aef10a31..9b034898 100644 --- a/dist/react-typeahead.js +++ b/dist/react-typeahead.js @@ -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: {} }; }, diff --git a/src/typeahead/index.js b/src/typeahead/index.js index a069f9c5..df1e81b7 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 - ]) + ]), + 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: {} }; },