passing labelKey and valueKey into optionRenderer and valueRenderer

JedWatson · Feb 28, 2018 · 1c3c944 · 1c3c944
1 parent c9d0273
commit 1c3c944
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 15 deletions.
diff --git a/examples/src/components/CustomRender.js b/examples/src/components/CustomRender.js
@@ -21,16 +21,16 @@ var DisabledUpsellOptions = createClass({
 	renderLink: function() {
 		return <a style={{ marginLeft: 5 }} href="/upgrade" target="_blank">Upgrade here!</a>;
 	},
-	renderOption: function(option) {
+	renderOption: function({ option, labelKey }) {
 		return (
 			<Highlighter
 			  searchWords={[this._inputValue]}
-			  textToHighlight={option.label}
+			  textToHighlight={option[labelKey]}
 			/>
 		);
 	},
-	renderValue: function(option) {
-		return <strong style={{ color: option.color }}>{option.label}</strong>;
+	renderValue: function({ option, labelKey }) {
+		return <strong style={{ color: option.color }}>{option[labelKey]}</strong>;
 	},
 	render: function() {
 		var options = [

diff --git a/src/Select.js b/src/Select.js
@@ -568,7 +568,7 @@ class Select extends React.Component {
 	}
 
 	getOptionLabel (op) {
-		return op[this.props.labelKey];
+		return op.option[this.props.labelKey];
 	}
 
 	/**
@@ -815,6 +815,8 @@ class Select extends React.Component {
 			return showPlaceholder ? <div className="Select-placeholder">{this.props.placeholder}</div> : null;
 		}
 		let onClick = this.props.onValueClick ? this.handleValueClick : null;
+		const { labelKey, valueKey } = this.props;
+
 		if (this.props.multi) {
 			return valueArray.map((value, i) => {
 				return (
@@ -827,8 +829,10 @@ class Select extends React.Component {
 						onRemove={this.removeValue}
 						placeholder={this.props.placeholder}
 						value={value}
+						valueKey
+						labelKey
 					>
-						{renderLabel(value, i)}
+						{renderLabel({option: value, index: i, labelKey, valueKey})}
 						<span className="Select-aria-only">&nbsp;</span>
 					</ValueComponent>
 				);
@@ -844,7 +848,7 @@ class Select extends React.Component {
 					placeholder={this.props.placeholder}
 					value={valueArray[0]}
 				>
-					{renderLabel(valueArray[0])}
+					{renderLabel({option: valueArray[0], labelKey, valueKey})}
 				</ValueComponent>
 			);
 		}

diff --git a/src/utils/defaultMenuRenderer.js b/src/utils/defaultMenuRenderer.js
@@ -18,6 +18,7 @@ const menuRenderer = ({
 	selectValue,
 	valueArray,
 	valueKey,
+  	labelKey,
 }) => {
 	let Option = optionComponent;
 
@@ -49,7 +50,13 @@ const menuRenderer = ({
 				removeValue={removeValue}
 				selectValue={selectValue}
 			>
-				{optionRenderer(option, i, inputValue)}
+				{optionRenderer({
+					option,
+					inputValue,
+					labelKey,
+					valueKey,
+					index: i,
+				})}
 			</Option>
 		);
 	});

diff --git a/test/Select-test.js b/test/Select-test.js
@@ -3580,9 +3580,9 @@ describe('Select', () => {
 
 			beforeEach(() => {
 
-				optionRenderer = (option) => {
+				optionRenderer = ({ option, labelKey, valueKey }) => {
 					return (
-						<span id={'TESTOPTION_' + option.value}>{option.label.toUpperCase()}</span>
+						<span id={'TESTOPTION_' + option[valueKey]}>{option[labelKey].toUpperCase()}</span>
 					);
 				};
 
@@ -3655,7 +3655,7 @@ describe('Select', () => {
 			beforeEach(() => {
 				window.location.href = startUrl;
 
-				optionRenderer = (option) => {
+				optionRenderer = ({ option }) => {
 					return (
 						<span>{option.label} {option.link} </span>
 					);
@@ -3958,9 +3958,9 @@ describe('Select', () => {
 
 			beforeEach(() => {
 
-				valueRenderer = (option) => {
+				valueRenderer = ({ option, labelKey, valueKey }) => {
 					return (
-						<span id={'TESTOPTION_' + option.value}>{option.label.toUpperCase()}</span>
+						<span id={'TESTOPTION_' + option[valueKey]}>{option[labelKey].toUpperCase()}</span>
 					);
 				};
 
@@ -3989,9 +3989,9 @@ describe('Select', () => {
 
 			beforeEach(() => {
 
-				valueRenderer = (option) => {
+				valueRenderer = ({ option, labelKey, valueKey }) => {
 					return (
-						<span id={'TESTOPTION_' + option.value} className="custom-render">{option.label.toUpperCase()}</span>
+						<span id={'TESTOPTION_' + option[valueKey]} className="custom-render">{option[labelKey].toUpperCase()}</span>
 					);
 				};