From fc6c47d19d980bc35ab8aee09d20708625581469 Mon Sep 17 00:00:00 2001 From: Danny Herran Date: Sun, 10 Apr 2016 20:06:21 +0100 Subject: [PATCH 01/15] removeSelected toggle and examples --- examples/src/components/Multiselect.js | 10 +++++++++- src/Select.js | 12 +++++++++--- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/examples/src/components/Multiselect.js b/examples/src/components/Multiselect.js index b6ced49178..a4bdf5bfef 100644 --- a/examples/src/components/Multiselect.js +++ b/examples/src/components/Multiselect.js @@ -23,6 +23,7 @@ var MultiSelectField = createClass({ }, getInitialState () { return { + remove: true, disabled: false, crazy: false, options: FLAVOURS, @@ -33,6 +34,9 @@ var MultiSelectField = 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 }); }, @@ -47,9 +51,13 @@ var MultiSelectField = createClass({ return (

{this.props.label}

-
+
- {isOpen ? this.renderOuter(options, !this.props.multi ? valueArray : null, focusedOption) : null} + {isOpen ? this.renderOuter(options, valueArray, focusedOption) : null}
); } @@ -1099,6 +1104,7 @@ Select.propTypes = { options: PropTypes.array, // array of options pageSize: PropTypes.number, // number of entries to page when using page up/down keys placeholder: stringOrNode, // field placeholder, displayed when there's no value + removeSelected: PropTypes.bool, // whether the selected option is removed from the dropdown on multi selects required: PropTypes.bool, // applies HTML5 required attribute when needed resetValue: PropTypes.any, // value to use when you clear the control scrollMenuIntoView: PropTypes.bool, // boolean to enable the viewport to shift so that the full menu fully visible when engaged From d67698ea7a370f5aafb12006b520c99587514663 Mon Sep 17 00:00:00 2001 From: Danny Herran Date: Mon, 18 Apr 2016 19:14:30 +0100 Subject: [PATCH 02/15] .is-selected class bugfix for 'value' objects that don't have exactly the same structure/order as 'options' --- src/Select.js | 23 +++++++++++++++++++++++ src/utils/defaultMenuRenderer.js | 2 +- 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/src/Select.js b/src/Select.js index bd7140532d..29dec1150c 100644 --- a/src/Select.js +++ b/src/Select.js @@ -31,6 +31,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 = PropTypes.oneOfType([ PropTypes.string, PropTypes.node diff --git a/src/utils/defaultMenuRenderer.js b/src/utils/defaultMenuRenderer.js index b5ba47b0bf..bdc4411f9f 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[this.props.valueKey] == option[this.props.valueKey]) > -1; let isFocused = option === focusedOption; let optionClass = classNames(optionClassName, { 'Select-option': true, From 783d9b9c66dcd27eb66d0f67a69cb92f27bef6e5 Mon Sep 17 00:00:00 2001 From: Danny Herran Date: Mon, 18 Apr 2016 19:25:48 +0100 Subject: [PATCH 03/15] Value should be checked against props.valueKey, not the entire object structure --- src/Select.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Select.js b/src/Select.js index 29dec1150c..927d4fc9dd 100644 --- a/src/Select.js +++ b/src/Select.js @@ -584,7 +584,7 @@ class Select extends React.Component { 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(); } From db856d32449839e2a0bdc730381b384f663302e7 Mon Sep 17 00:00:00 2001 From: Danny Herran Date: Wed, 15 Feb 2017 16:27:47 +0000 Subject: [PATCH 04/15] 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 927d4fc9dd..d2e101eeff 100644 --- a/src/Select.js +++ b/src/Select.js @@ -543,8 +543,8 @@ class Select extends React.Component { inputValue: this.handleInputValueChange(''), focusedIndex: null }, () => { - var valueArray = this.getValueArray(); - if (valueArray.find(i => i === value)) { + var valueArray = this.getValueArray(this.props.value); + if (valueArray.find(i => i[this.props.valueKey] === value[this.props.valueKey])) { this.removeValue(value); } else { this.addValue(value); diff --git a/src/utils/defaultMenuRenderer.js b/src/utils/defaultMenuRenderer.js index bdc4411f9f..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.findIndex(x => x[this.props.valueKey] == option[this.props.valueKey]) > -1; + let isSelected = valueArray && valueArray.findIndex(x => x[valueKey] == option[valueKey]) > -1; let isFocused = option === focusedOption; let optionClass = classNames(optionClassName, { 'Select-option': true, From 70c198c0b8680429395babed333ac8cc433ea141 Mon Sep 17 00:00:00 2001 From: Ben Anderson Date: Tue, 25 Jul 2017 23:23:46 -0400 Subject: [PATCH 05/15] Rename state.remove ==> state.removeSelected --- examples/src/components/Multiselect.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/examples/src/components/Multiselect.js b/examples/src/components/Multiselect.js index a4bdf5bfef..70c6e8a5ce 100644 --- a/examples/src/components/Multiselect.js +++ b/examples/src/components/Multiselect.js @@ -23,7 +23,7 @@ var MultiSelectField = createClass({ }, getInitialState () { return { - remove: true, + removeSelected: true, disabled: false, crazy: false, options: FLAVOURS, @@ -35,7 +35,7 @@ var MultiSelectField = createClass({ this.setState({ value }); }, toggleRemove (e) { - this.setState({ remove: e.target.checked }); + this.setState({ removeSelected: e.target.checked }); }, toggleDisabled (e) { this.setState({ disabled: e.target.checked }); @@ -51,11 +51,11 @@ var MultiSelectField = createClass({ return (

{this.props.label}

-