From 6e7b245f96c24778f325dd121d368648579a714c Mon Sep 17 00:00:00 2001 From: Danny Herran Date: Sun, 10 Apr 2016 20:06:21 +0100 Subject: [PATCH 1/5] removeSelected toggle and examples --- examples/src/components/Multiselect.js | 10 +++++++++- src/Select.js | 13 ++++++++++--- 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/examples/src/components/Multiselect.js b/examples/src/components/Multiselect.js index 3142e75ef9..16442dd3f8 100644 --- a/examples/src/components/Multiselect.js +++ b/examples/src/components/Multiselect.js @@ -21,6 +21,7 @@ var MultiSelectField = React.createClass({ }, getInitialState () { return { + remove: true, disabled: false, crazy: false, options: FLAVOURS, @@ -31,6 +32,9 @@ var MultiSelectField = React.createClass({ console.log('You\'ve selected:', value); this.setState({ value }); }, + toggleRemove (e) { + this.setState({ remove: e.target.checked }); + }, toggleDisabled (e) { this.setState({ disabled: e.target.checked }); }, @@ -45,9 +49,13 @@ var MultiSelectField = React.createClass({ return (

{this.props.label}

-
+
- {isOpen ? this.renderOuter(options, !this.props.multi ? valueArray : null, focusedOption) : null} + {isOpen ? this.renderOuter(options, valueArray, focusedOption) : null}
); } From bbe4032dd17df3b53ee6114e6ed2512efe07fb5e Mon Sep 17 00:00:00 2001 From: Danny Herran Date: Sun, 10 Apr 2016 20:54:17 +0100 Subject: [PATCH 2/5] Fix removeSelected propType --- src/Select.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Select.js b/src/Select.js index cf2a2daefd..c86eaaba04 100644 --- a/src/Select.js +++ b/src/Select.js @@ -73,7 +73,7 @@ const Select = React.createClass({ optionRenderer: React.PropTypes.func, // optionRenderer: function (option) {} options: React.PropTypes.array, // array of options placeholder: stringOrNode, // field placeholder, displayed when there's no value - removeSelected: React.PropTypes.func, // whether the selected option is removed from the dropdown on multi selects + removeSelected: React.PropTypes.bool, // whether the selected option is removed from the dropdown on multi selects required: React.PropTypes.bool, // applies HTML5 required attribute when needed scrollMenuIntoView: React.PropTypes.bool, // boolean to enable the viewport to shift so that the full menu fully visible when engaged searchable: React.PropTypes.bool, // whether to enable searching feature or not From 655b9ee74bdb93e240b33af67c8fd936a27e5eda Mon Sep 17 00:00:00 2001 From: Danny Herran Date: Mon, 18 Apr 2016 19:14:30 +0100 Subject: [PATCH 3/5] .is-selected class bugfix for 'value' objects that don't have exactly the same structure/order as 'options' --- src/Select.js | 25 ++++++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/src/Select.js b/src/Select.js index c86eaaba04..844e2f1e62 100644 --- a/src/Select.js +++ b/src/Select.js @@ -17,6 +17,29 @@ function stringifyValue (value) { } } +if (!Array.prototype.findIndex) { + Array.prototype.findIndex = function(predicate) { + if (this === null) { + throw new TypeError('Array.prototype.findIndex called on null or undefined'); + } + if (typeof predicate !== 'function') { + throw new TypeError('predicate must be a function'); + } + var list = Object(this); + var length = list.length >>> 0; + var thisArg = arguments[1]; + var value; + + for (var i = 0; i < length; i++) { + value = list[i]; + if (predicate.call(thisArg, value, i, list)) { + return i; + } + } + return -1; + }; +} + const stringOrNode = React.PropTypes.oneOfType([ React.PropTypes.string, React.PropTypes.node @@ -737,7 +760,7 @@ const Select = React.createClass({ let renderLabel = this.props.optionRenderer || this.getOptionLabel; return options.map((option, i) => { - let isSelected = valueArray && valueArray.indexOf(option) > -1; + let isSelected = valueArray && valueArray.findIndex(x => x[this.props.valueKey] == option[this.props.valueKey]) > -1; let isFocused = option === focusedOption; let optionRef = isFocused ? 'focused' : null; let optionClass = classNames(this.props.optionClassName, { From 936da8aab9de4d1b2293d636be68b79b1ec7f229 Mon Sep 17 00:00:00 2001 From: Danny Herran Date: Mon, 18 Apr 2016 19:25:48 +0100 Subject: [PATCH 4/5] Value should be checked against props.valueKey, not the entire object structure --- src/Select.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Select.js b/src/Select.js index 844e2f1e62..2fd2ae4267 100644 --- a/src/Select.js +++ b/src/Select.js @@ -484,7 +484,7 @@ const Select = React.createClass({ this.hasScrolledToOption = false; if (this.props.multi) { var valueArray = this.getValueArray(); - if (valueArray.find(i => i === value)) { + if (valueArray.find(i => i[this.props.valueKey] === value[this.props.valueKey])) { this.removeValue(value); } else { this.addValue(value); @@ -516,7 +516,7 @@ const Select = React.createClass({ removeValue (value) { var valueArray = this.getValueArray(); - this.setValue(valueArray.filter(i => i !== value)); + this.setValue(valueArray.filter(i => i[this.props.valueKey] !== value[this.props.valueKey])); this.focus(); }, From c12e6580aaec7e92c0c410b5bc401d76d780c84b Mon Sep 17 00:00:00 2001 From: Danny Herran Date: Wed, 15 Feb 2017 16:27:47 +0000 Subject: [PATCH 5/5] Re-apply bugfixes in 655b9ee74bdb93e240b33af67c8fd936a27e5eda and 936da8aab9de4d1b2293d636be68b79b1ec7f229 --- src/Select.js | 4 ++-- src/utils/defaultMenuRenderer.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Select.js b/src/Select.js index beaca4bb3f..6ab1680a2a 100644 --- a/src/Select.js +++ b/src/Select.js @@ -642,7 +642,7 @@ const Select = React.createClass({ inputValue: '', focusedIndex: null }, () => { - var valueArray = this.getValueArray(); + var valueArray = this.getValueArray(this.props.value); if (valueArray.find(i => i[this.props.valueKey] === value[this.props.valueKey])) { this.removeValue(value); } else { @@ -683,7 +683,7 @@ const Select = React.createClass({ removeValue (value) { var valueArray = this.getValueArray(this.props.value); - this.setValue(valueArray.filter(i => i !== value)); + this.setValue(valueArray.filter(i => i[this.props.valueKey] !== value[this.props.valueKey])); this.focus(); }, diff --git a/src/utils/defaultMenuRenderer.js b/src/utils/defaultMenuRenderer.js index b5ba47b0bf..6de53d5a15 100644 --- a/src/utils/defaultMenuRenderer.js +++ b/src/utils/defaultMenuRenderer.js @@ -18,7 +18,7 @@ function menuRenderer ({ let Option = optionComponent; return options.map((option, i) => { - let isSelected = valueArray && valueArray.indexOf(option) > -1; + let isSelected = valueArray && valueArray.findIndex(x => x[valueKey] == option[valueKey]) > -1; let isFocused = option === focusedOption; let optionClass = classNames(optionClassName, { 'Select-option': true,