Merge pull request #212 from dhis2/fix/transfer-selected-render-option

feat(transfer): add prop selected to renderOption (TECH-393)
dhis2 · Jul 10, 2020 · b256833 · b256833
2 parents 4af0479 + c81317c
commit b256833
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/packages/widgets/src/Transfer/Transfer.js b/packages/widgets/src/Transfer/Transfer.js
@@ -222,6 +222,7 @@ export const Transfer = ({
                                         toggleHighlightedSourceOption
                                     ),
                                     highlighted,
+                                    selected: false,
                                 })}
                             </Fragment>
                         )
@@ -323,6 +324,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
@@ -190,10 +190,13 @@ export const FilterPlaceholder = () => (
     </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>
@@ -203,16 +206,21 @@ 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>
 )`}</pre>
         </code>
-        <StatefulWrapper>
+        <StatefulWrapper
+            initialState={options.slice(0, 2).map(({ value }) => value)}
+        >
             <Transfer
                 onChange={() =>
                     console.log('Will be overriden by StatefulWrapper')