From d44c6200283fe23513a491fc326642b337fbaff5 Mon Sep 17 00:00:00 2001
From: selvagsz
Date: Sat, 7 Apr 2018 02:42:26 +0800
Subject: [PATCH 1/3] Don't expose too much stuff on selectedOptionComponent in
EPS multiple
---
src/PowerSelectMultiple/SelectedOption.js | 16 ++++++++--------
1 file changed, 8 insertions(+), 8 deletions(-)
diff --git a/src/PowerSelectMultiple/SelectedOption.js b/src/PowerSelectMultiple/SelectedOption.js
index b49e274..b301a4a 100644
--- a/src/PowerSelectMultiple/SelectedOption.js
+++ b/src/PowerSelectMultiple/SelectedOption.js
@@ -1,4 +1,5 @@
import React, { isValidElement, cloneElement } from 'react';
+import { renderComponent } from '../utils';
export default function SelectedOption(props) {
let {
@@ -10,13 +11,6 @@ export default function SelectedOption(props) {
select,
} = props;
let value = null;
- let SelectedOptionComponent = selectedOptionComponent;
- if (isValidElement(SelectedOptionComponent)) {
- return cloneElement(SelectedOptionComponent, props);
- }
- if (SelectedOptionComponent) {
- return ;
- }
if (typeof option === 'object') {
if (optionLabelPath) {
value = option[optionLabelPath];
@@ -27,7 +21,13 @@ export default function SelectedOption(props) {
}
return (
- {value}
+
+ {selectedOptionComponent ? (
+ renderComponent(selectedOptionComponent, { option, select })
+ ) : (
+ value
+ )}
+
{showOptionClose ? (
Date: Sun, 8 Apr 2018 21:48:28 +0530
Subject: [PATCH 2/3] Fix the example in docs
---
.../CustomSelectedOption.js | 21 +++++--------------
1 file changed, 5 insertions(+), 16 deletions(-)
diff --git a/docs/app/Demos/PowerSelectMultiple/CustomSelectedOption.js b/docs/app/Demos/PowerSelectMultiple/CustomSelectedOption.js
index cb4073b..f3b3b16 100644
--- a/docs/app/Demos/PowerSelectMultiple/CustomSelectedOption.js
+++ b/docs/app/Demos/PowerSelectMultiple/CustomSelectedOption.js
@@ -9,22 +9,11 @@ const CustomOptionComponnet = ({ option }) => (
);
-const CustomSelectedOptionComponent = ({ option, optionLabelPath, onCloseClick, select }) => (
-
-
- 
- {option[optionLabelPath]}
-
- {
- event.stopPropagation();
- onCloseClick({ option, select });
- }}
- >
- ×
-
-
+const CustomSelectedOptionComponent = ({ option }) => (
+
+
+ {option.name}
+
);
export default class ArrayOfObjectsDemo extends Component {
From 75c1ce8816245975c2e388e29070854acbfefdb6 Mon Sep 17 00:00:00 2001
From: selvagsz
Date: Mon, 9 Apr 2018 11:53:12 +0800
Subject: [PATCH 3/3] [Tests] add tests for custom selected option component
for PowerSelectMultiple
---
.../__tests__/PowerSelectMultiple-test.js | 19 +++++++++++++++++++
1 file changed, 19 insertions(+)
diff --git a/src/PowerSelectMultiple/__tests__/PowerSelectMultiple-test.js b/src/PowerSelectMultiple/__tests__/PowerSelectMultiple-test.js
index afb6f77..d34d540 100644
--- a/src/PowerSelectMultiple/__tests__/PowerSelectMultiple-test.js
+++ b/src/PowerSelectMultiple/__tests__/PowerSelectMultiple-test.js
@@ -250,4 +250,23 @@ describe('', () => {
expect(powerselect.renderedSelectedOptions.length).toBe(3);
expect(powerselect.isOptionsPresentInDropdown()).toBeFalsy();
});
+
+ it('should render custom selected option component when passed', () => {
+ let selectedOptions = countries.slice(0, 3);
+ const wrapper = powerselect.renderWithProps({
+ selected: selectedOptions,
+ selectedOptionComponent: ({ option }) => {
+ return {option.name};
+ },
+ });
+ expect(powerselect.renderedSelectedOptions.length).toBe(3);
+ expect(wrapper.find('span.customSelectedOption').length).toBe(3);
+ expect(
+ wrapper.containsAllMatchingElements([
+ {selectedOptions[0].name},
+ {selectedOptions[1].name},
+ {selectedOptions[2].name},
+ ])
+ ).toBeTruthy();
+ });
});