Skip to content

Commit

Permalink
removeSelected: bool
Browse files Browse the repository at this point in the history 
When `removeSelected` is set to `false` you can add same item multiple
times

Changed removal logic to remove values based on position
  • Loading branch information
@firedev
firedev committed Sep 27, 2017
1 parent 7523c20 commit 1cde31b
Show file tree
Hide file tree
Showing 7 changed files with 89 additions and 120 deletions.
101 changes: 52 additions & 49 deletions dist/react-select.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,64 @@
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.Select.is-disabled .Select-arrow-zone {
cursor: default;
pointer-events: none;
opacity: 0.35;
}
.Select.is-disabled > .Select-control {
background-color: #f9f9f9;
}
.Select.is-disabled > .Select-control:hover {
box-shadow: none;
}
.Select.is-disabled .Select-arrow-zone {
cursor: default;
pointer-events: none;
opacity: 0.35;
.Select.is-open > .Select-control {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
background: #fff;
border-color: #b3b3b3 #ccc #d9d9d9;
}
.Select.is-open > .Select-control .Select-arrow {
top: -2px;
border-color: transparent transparent #999;
border-width: 0 5px 5px;
}
.Select.is-searchable.is-open > .Select-control {
cursor: text;
}
.Select.is-searchable.is-focused:not(.is-open) > .Select-control {
cursor: text;
}
.Select.is-focused:not(.is-open) > .Select-control {
border-color: #007eff;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px rgba(0, 126, 255, 0.1);
}
.Select.has-value.is-clearable.Select--single > .Select-control .Select-value {
padding-right: 42px;
}
.Select.has-value.Select--single > .Select-control .Select-value .Select-value-label,
.Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label {
color: #333;
}
.Select.has-value.Select--single > .Select-control .Select-value a.Select-value-label,
.Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label {
cursor: pointer;
text-decoration: none;
}
.Select.has-value.Select--single > .Select-control .Select-value a.Select-value-label:hover,
.Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:hover,
.Select.has-value.Select--single > .Select-control .Select-value a.Select-value-label:focus,
.Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:focus {
color: #007eff;
outline: none;
text-decoration: underline;
}
.Select.has-value.is-pseudo-focused .Select-input {
opacity: 0;
}
.Select.is-open .Select-arrow,
.Select .Select-arrow-zone:hover > .Select-arrow {
border-top-color: #666;
}
.Select-control {
background-color: #fff;
Expand All @@ -49,27 +97,6 @@
.Select-control .Select-input:focus {
outline: none;
}
.is-searchable.is-open > .Select-control {
cursor: text;
}
.is-open > .Select-control {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
background: #fff;
border-color: #b3b3b3 #ccc #d9d9d9;
}
.is-open > .Select-control .Select-arrow {
top: -2px;
border-color: transparent transparent #999;
border-width: 0 5px 5px;
}
.is-searchable.is-focused:not(.is-open) > .Select-control {
cursor: text;
}
.is-focused:not(.is-open) > .Select-control {
border-color: #007eff;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px rgba(0, 126, 255, 0.1);
}
.Select-placeholder,
.Select--single > .Select-control .Select-value {
bottom: 0;
Expand All @@ -86,26 +113,6 @@
text-overflow: ellipsis;
white-space: nowrap;
}
.has-value.is-clearable.Select--single > .Select-control .Select-value {
padding-right: 42px;
}
.has-value.Select--single > .Select-control .Select-value .Select-value-label,
.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label {
color: #333;
}
.has-value.Select--single > .Select-control .Select-value a.Select-value-label,
.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label {
cursor: pointer;
text-decoration: none;
}
.has-value.Select--single > .Select-control .Select-value a.Select-value-label:hover,
.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:hover,
.has-value.Select--single > .Select-control .Select-value a.Select-value-label:focus,
.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:focus {
color: #007eff;
outline: none;
text-decoration: underline;
}
.Select-input {
height: 34px;
padding-left: 10px;
Expand Down Expand Up @@ -201,10 +208,6 @@
width: 0;
position: relative;
}
.is-open .Select-arrow,
.Select-arrow-zone:hover > .Select-arrow {
border-top-color: #666;
}
.Select--multi .Select-multi-value-wrapper {
display: inline-block;
}
Expand Down
38 changes: 9 additions & 29 deletions dist/react-select.es.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,6 @@ function clearRenderer() {
});
}

var babelHelpers = {};
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
return typeof obj;
} : function (obj) {
Expand Down Expand Up @@ -345,28 +344,6 @@ var possibleConstructorReturn = function (self, call) {
return call && (typeof call === "object" || typeof call === "function") ? call : self;
};





















babelHelpers;

var Option = function (_React$Component) {
inherits(Option, _React$Component);

Expand Down Expand Up @@ -1207,11 +1184,10 @@ var Select$1 = function (_React$Component) {
}
}, {
key: 'removeValue',
value: function removeValue(value) {
value: function removeValue(index) {
var valueArray = this.getValueArray(this.props.value);
this.setValue(valueArray.filter(function (i) {
return i !== value;
}));
valueArray.splice(index, 1);
this.setValue(valueArray);
this.focus();
}
}, {
Expand Down Expand Up @@ -1392,7 +1368,9 @@ var Select$1 = function (_React$Component) {
disabled: _this5.props.disabled || value.clearableValue === false,
key: 'value-' + i + '-' + value[_this5.props.valueKey],
onClick: onClick,
onRemove: _this5.removeValue,
onRemove: function onRemove() {
return _this5.removeValue(i);
},
value: value
},
renderLabel(value, i),
Expand Down Expand Up @@ -1668,7 +1646,7 @@ var Select$1 = function (_React$Component) {
var _this9 = this;

var valueArray = this.getValueArray(this.props.value);
var options = this._visibleOptions = this.filterOptions(this.props.multi ? this.getValueArray(this.props.value) : null);
var options = this._visibleOptions = this.filterOptions(this.props.multi && this.props.removeSelected ? valueArray : null);
var isOpen = this.state.isOpen;
if (this.props.multi && !options.length && valueArray.length && !this.state.inputValue) isOpen = false;
var focusedOptionIndex = this.getFocusableOptionIndex(valueArray[0]);
Expand Down Expand Up @@ -1802,6 +1780,7 @@ Select$1.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
Expand Down Expand Up @@ -1852,6 +1831,7 @@ Select$1.defaultProps = {
optionComponent: Option,
pageSize: 5,
placeholder: 'Select...',
removeSelected: true,
required: false,
scrollMenuIntoView: true,
searchable: true,
Expand Down
38 changes: 9 additions & 29 deletions dist/react-select.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,6 @@ function clearRenderer() {
});
}

var babelHelpers = {};
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
return typeof obj;
} : function (obj) {
Expand Down Expand Up @@ -351,28 +350,6 @@ var possibleConstructorReturn = function (self, call) {
return call && (typeof call === "object" || typeof call === "function") ? call : self;
};





















babelHelpers;

var Option = function (_React$Component) {
inherits(Option, _React$Component);

Expand Down Expand Up @@ -1213,11 +1190,10 @@ var Select$1 = function (_React$Component) {
}
}, {
key: 'removeValue',
value: function removeValue(value) {
value: function removeValue(index) {
var valueArray = this.getValueArray(this.props.value);
this.setValue(valueArray.filter(function (i) {
return i !== value;
}));
valueArray.splice(index, 1);
this.setValue(valueArray);
this.focus();
}
}, {
Expand Down Expand Up @@ -1398,7 +1374,9 @@ var Select$1 = function (_React$Component) {
disabled: _this5.props.disabled || value.clearableValue === false,
key: 'value-' + i + '-' + value[_this5.props.valueKey],
onClick: onClick,
onRemove: _this5.removeValue,
onRemove: function onRemove() {
return _this5.removeValue(i);
},
value: value
},
renderLabel(value, i),
Expand Down Expand Up @@ -1674,7 +1652,7 @@ var Select$1 = function (_React$Component) {
var _this9 = this;

var valueArray = this.getValueArray(this.props.value);
var options = this._visibleOptions = this.filterOptions(this.props.multi ? this.getValueArray(this.props.value) : null);
var options = this._visibleOptions = this.filterOptions(this.props.multi && this.props.removeSelected ? valueArray : null);
var isOpen = this.state.isOpen;
if (this.props.multi && !options.length && valueArray.length && !this.state.inputValue) isOpen = false;
var focusedOptionIndex = this.getFocusableOptionIndex(valueArray[0]);
Expand Down Expand Up @@ -1808,6 +1786,7 @@ Select$1.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
Expand Down Expand Up @@ -1858,6 +1837,7 @@ Select$1.defaultProps = {
optionComponent: Option,
pageSize: 5,
placeholder: 'Select...',
removeSelected: true,
required: false,
scrollMenuIntoView: true,
searchable: true,
Expand Down
Loading

0 comments on commit 1cde31b

Please sign in to comment.