fix: add prop selected to renderOption

dhis2 · Jul 10, 2020 · 4a61df0 · 4a61df0
1 parent 1f07266
commit 4a61df0
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/packages/widgets/src/Transfer/Transfer.js b/packages/widgets/src/Transfer/Transfer.js
@@ -218,6 +218,7 @@ export const Transfer = ({
                                         toggleHighlightedSourceOption
                                     ),
                                     highlighted,
+                                    selected: false,
                                 })}
                             </Fragment>
                         )
@@ -314,6 +315,7 @@ export const Transfer = ({
                                         toggleHighlightedPickedOption
                                     ),
                                     highlighted,
+                                    selected: true,
                                 })}
                             </Fragment>
                         )

diff --git a/packages/widgets/src/Transfer/Transfer.stories.js b/packages/widgets/src/Transfer/Transfer.stories.js
@@ -176,10 +176,13 @@ export const Filtered = () => (
     </StatefulWrapper>
 )
 
-const renderOption = ({ label, value, onClick, highlighted }) => (
+const renderOption = ({ label, value, onClick, highlighted, selected }) => (
     <p
         onClick={event => onClick({ label, value }, event)}
-        style={{ background: highlighted ? 'green' : 'blue' }}
+        style={{
+            background: highlighted ? 'green' : 'blue',
+            color: selected ? 'orange' : 'white',
+        }}
     >
         Custom: {label} (label), {value} (value)
     </p>
@@ -189,10 +192,13 @@ export const CustomListOptions = () => (
     <>
         <strong>Custom option code:</strong>
         <code>
-            <pre>{`const renderOption = ({ label, value, onClick, highlighted }) => (
+            <pre>{`const renderOption = ({ label, value, onClick, highlighted, selected }) => (
     <p
         onClick={event => onClick({ label, value }, event)}
-        style={{ background: highlighted ? 'green' : 'blue' }}
+        style={{
+            background: highlighted ? 'green' : 'blue',
+            color: selected ? 'orange' : 'white',
+        }}
     >
         Custom: {label} (label), {value} (value)
     </p>