Added multiValueRender option

submittable · Jan 13, 2017 · 16e8e34 · 16e8e34
1 parent 3a46fba
commit 16e8e34
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 2 deletions.
diff --git a/dist/react-select.js b/dist/react-select.js
@@ -816,6 +816,7 @@ var Select = _react2['default'].createClass({
 		menuRenderer: _react2['default'].PropTypes.func, // renders a custom menu with options
 		menuStyle: _react2['default'].PropTypes.object, // optional style to apply to the menu
 		multi: _react2['default'].PropTypes.bool, // multi-value input
+		multiValueRender: _react2['default'].PropTypes.func, // multiValueRender: function (props...) {}
 		name: _react2['default'].PropTypes.string, // generates a hidden <input /> tag with this field name for html forms
 		noResultsText: stringOrNode, // placeholder displayed when there are no matching search results
 		onBlur: _react2['default'].PropTypes.func, // onBlur handler: function (event) {}
@@ -1558,6 +1559,17 @@ var Select = _react2['default'].createClass({
 		}
 		var onClick = this.props.onValueClick ? this.handleValueClick : null;
 		if (this.props.multi) {
+			if (this.props.multiValueRender) {
+				return this.props.multiValueRender({
+					valueArray: valueArray,
+					onClick: onClick,
+					renderLabel: renderLabel,
+					ValueComponent: ValueComponent,
+					disabled: this.props.disabled,
+					valueKey: this.props.valueKey,
+					onRemove: this.removeValue
+				});
+			}
 			return valueArray.map(function (value, i) {
 				return _react2['default'].createElement(
 					ValueComponent,

diff --git a/dist/react-select.min.js b/dist/react-select.min.js
diff --git a/examples/dist/bundle.js b/examples/dist/bundle.js
@@ -1060,6 +1060,7 @@ var Select = _react2['default'].createClass({
 		menuRenderer: _react2['default'].PropTypes.func, // renders a custom menu with options
 		menuStyle: _react2['default'].PropTypes.object, // optional style to apply to the menu
 		multi: _react2['default'].PropTypes.bool, // multi-value input
+		multiValueRender: _react2['default'].PropTypes.func, // multiValueRender: function (props...) {}
 		name: _react2['default'].PropTypes.string, // generates a hidden <input /> tag with this field name for html forms
 		noResultsText: stringOrNode, // placeholder displayed when there are no matching search results
 		onBlur: _react2['default'].PropTypes.func, // onBlur handler: function (event) {}
@@ -1802,6 +1803,17 @@ var Select = _react2['default'].createClass({
 		}
 		var onClick = this.props.onValueClick ? this.handleValueClick : null;
 		if (this.props.multi) {
+			if (this.props.multiValueRender) {
+				return this.props.multiValueRender({
+					valueArray: valueArray,
+					onClick: onClick,
+					renderLabel: renderLabel,
+					ValueComponent: ValueComponent,
+					disabled: this.props.disabled,
+					valueKey: this.props.valueKey,
+					onRemove: this.removeValue
+				});
+			}
 			return valueArray.map(function (value, i) {
 				return _react2['default'].createElement(
 					ValueComponent,

diff --git a/examples/dist/standalone.js b/examples/dist/standalone.js
@@ -816,6 +816,7 @@ var Select = _react2['default'].createClass({
 		menuRenderer: _react2['default'].PropTypes.func, // renders a custom menu with options
 		menuStyle: _react2['default'].PropTypes.object, // optional style to apply to the menu
 		multi: _react2['default'].PropTypes.bool, // multi-value input
+		multiValueRender: _react2['default'].PropTypes.func, // multiValueRender: function (props...) {}
 		name: _react2['default'].PropTypes.string, // generates a hidden <input /> tag with this field name for html forms
 		noResultsText: stringOrNode, // placeholder displayed when there are no matching search results
 		onBlur: _react2['default'].PropTypes.func, // onBlur handler: function (event) {}
@@ -1558,6 +1559,17 @@ var Select = _react2['default'].createClass({
 		}
 		var onClick = this.props.onValueClick ? this.handleValueClick : null;
 		if (this.props.multi) {
+			if (this.props.multiValueRender) {
+				return this.props.multiValueRender({
+					valueArray: valueArray,
+					onClick: onClick,
+					renderLabel: renderLabel,
+					ValueComponent: ValueComponent,
+					disabled: this.props.disabled,
+					valueKey: this.props.valueKey,
+					onRemove: this.removeValue
+				});
+			}
 			return valueArray.map(function (value, i) {
 				return _react2['default'].createElement(
 					ValueComponent,

diff --git a/lib/Select.js b/lib/Select.js
@@ -122,6 +122,7 @@ var Select = _react2['default'].createClass({
 		menuRenderer: _react2['default'].PropTypes.func, // renders a custom menu with options
 		menuStyle: _react2['default'].PropTypes.object, // optional style to apply to the menu
 		multi: _react2['default'].PropTypes.bool, // multi-value input
+		multiValueRender: _react2['default'].PropTypes.func, // multiValueRender: function (props...) {}
 		name: _react2['default'].PropTypes.string, // generates a hidden <input /> tag with this field name for html forms
 		noResultsText: stringOrNode, // placeholder displayed when there are no matching search results
 		onBlur: _react2['default'].PropTypes.func, // onBlur handler: function (event) {}
@@ -864,6 +865,17 @@ var Select = _react2['default'].createClass({
 		}
 		var onClick = this.props.onValueClick ? this.handleValueClick : null;
 		if (this.props.multi) {
+			if (this.props.multiValueRender) {
+				return this.props.multiValueRender({
+					valueArray: valueArray,
+					onClick: onClick,
+					renderLabel: renderLabel,
+					ValueComponent: ValueComponent,
+					disabled: this.props.disabled,
+					valueKey: this.props.valueKey,
+					onRemove: this.removeValue
+				});
+			}
 			return valueArray.map(function (value, i) {
 				return _react2['default'].createElement(
 					ValueComponent,

diff --git a/src/Select.js b/src/Select.js
@@ -78,6 +78,7 @@ const Select = React.createClass({
 		menuRenderer: React.PropTypes.func,         // renders a custom menu with options
 		menuStyle: React.PropTypes.object,          // optional style to apply to the menu
 		multi: React.PropTypes.bool,                // multi-value input
+		multiValueRender: React.PropTypes.func,     // multiValueRender: function (props...) {}
 		name: React.PropTypes.string,               // generates a hidden <input /> tag with this field name for html forms
 		noResultsText: stringOrNode,                // placeholder displayed when there are no matching search results
 		onBlur: React.PropTypes.func,               // onBlur handler: function (event) {}
@@ -784,6 +785,17 @@ const Select = React.createClass({
 		}
 		let onClick = this.props.onValueClick ? this.handleValueClick : null;
 		if (this.props.multi) {
+			if (this.props.multiValueRender) {
+				return this.props.multiValueRender({
+					valueArray,
+					onClick,
+					renderLabel,
+					ValueComponent,
+					disabled: this.props.disabled,
+					valueKey: this.props.valueKey,
+					onRemove: this.removeValue,
+				});
+			}
 			return valueArray.map((value, i) => {
 				return (
 					<ValueComponent