refactor: use "renderOption" instead of "optionComponent"

dhis2 · May 27, 2020 · 06b32df · 06b32df
1 parent d50f960
commit 06b32df
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 37 deletions.
diff --git a/packages/widgets/src/Transfer/Transfer.js b/packages/widgets/src/Transfer/Transfer.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { Fragment, useState } from 'react'
 import propTypes from '@dhis2/prop-types'
 
 import { Actions } from './Actions.js'
@@ -85,8 +85,8 @@ export const Transfer = ({
     leftFooter,
     leftHeader,
     maxSelections,
-    optionComponent: TransferOption,
     optionsWidth,
+    renderOption,
     rightFooter,
     searchTerm,
     selected,
@@ -203,24 +203,26 @@ export const Transfer = ({
                     sourceEmptyPlaceholder={sourceEmptyPlaceholder}
                 >
                     {sourceOptions.map(option => {
-                        const Option = option.component || TransferOption
                         const highlighted = !!highlightedSourceOptions.find(
                             highlightedSourceOption =>
                                 highlightedSourceOption === option.value
                         )
 
+                        const data = {
+                            highlighted,
+                            disabled: option.disabled,
+                            option: option,
+                            ...getOptionClickHandlers(
+                                option,
+                                selectSingleOption,
+                                toggleHighlightedSourceOption
+                            ),
+                        }
+
                         return (
-                            <Option
-                                key={option.value}
-                                disabled={option.disabled}
-                                option={option}
-                                highlighted={highlighted}
-                                {...getOptionClickHandlers(
-                                    option,
-                                    selectSingleOption,
-                                    toggleHighlightedSourceOption
-                                )}
-                            />
+                            <Fragment key={option.value}>
+                                {renderOption(data)}
+                            </Fragment>
                         )
                     })}
                 </SourceOptions>
@@ -301,23 +303,25 @@ export const Transfer = ({
                     selectedEmptyComponent={selectedEmptyComponent}
                 >
                     {pickedOptions.map(option => {
-                        const Option = option.component || TransferOption
                         const highlighted = !!highlightedPickedOptions.find(
                             value => option.value === value
                         )
 
+                        const data = {
+                            highlighted,
+                            disabled: option.disabled,
+                            option,
+                            ...getOptionClickHandlers(
+                                option,
+                                deselectSingleOption,
+                                toggleHighlightedPickedOption
+                            ),
+                        }
+
                         return (
-                            <Option
-                                key={option.value}
-                                disabled={option.disabled}
-                                option={option}
-                                highlighted={highlighted}
-                                {...getOptionClickHandlers(
-                                    option,
-                                    deselectSingleOption,
-                                    toggleHighlightedPickedOption
-                                )}
-                            />
+                            <Fragment key={option.value}>
+                                {renderOption(data)}
+                            </Fragment>
                         )
                     })}
                 </PickedOptions>
@@ -360,13 +364,15 @@ export const Transfer = ({
     )
 }
 
+const defaultRenderOption = option => <TransferOption {...option} />
+
 Transfer.defaultProps = {
     dataTest: 'dhis2-uicore-transfer',
     height: '240px',
     initialSearchTerm: '',
     maxSelections: Infinity,
-    optionComponent: TransferOption,
     optionsWidth: '320px',
+    renderOption: defaultRenderOption,
     selected: [],
     selectedWidth: '320px',
     filterCallback: defaultFilterCallback,
@@ -408,7 +414,6 @@ Transfer.propTypes = {
         propTypes.shape({
             label: propTypes.string.isRequired,
             value: propTypes.string.isRequired,
-            component: propTypes.func,
             disabled: propTypes.bool,
         })
     ).isRequired,
@@ -429,10 +434,10 @@ Transfer.propTypes = {
     leftFooter: propTypes.node,
     leftHeader: propTypes.node,
     maxSelections: propTypes.oneOf([1, Infinity]),
-    optionComponent: propTypes.func,
     optionsWidth: propTypes.string,
     removeAllText: propTypes.string,
     removeIndividualText: propTypes.string,
+    renderOption: propTypes.func,
     rightFooter: propTypes.node,
     searchTerm: propTypes.string,
     selected: propTypes.arrayOf(propTypes.string),

diff --git a/packages/widgets/src/Transfer/Transfer.stories.js b/packages/widgets/src/Transfer/Transfer.stories.js
@@ -2,7 +2,7 @@
 import { SingleSelectOption, Tab, TabBar } from '@dhis2/ui-core'
 import React, { useState } from 'react'
 
-import { SingleSelectField, Transfer } from '../index.js'
+import { SingleSelectField, Transfer, TransferOption } from '../index.js'
 
 export default { title: 'Components/widgets/Transfer' }
 
@@ -176,7 +176,7 @@ export const Filtered = () => (
     </StatefulWrapper>
 )
 
-const CustomOption = ({ label, value, onClick, highlighted }) => (
+const renderOption = ({ label, value, onClick, highlighted }) => (
     <p
         onClick={event => onClick({ label, value }, event)}
         style={{ background: highlighted ? 'green' : 'blue' }}
@@ -189,7 +189,7 @@ export const CustomListOptions = () => (
     <>
         <strong>Custom option code:</strong>
         <code>
-            <pre>{`const CustomOption = ({ label, value, onClick, highlighted }) => (
+            <pre>{`const renderOption = ({ label, value, onClick, highlighted }) => (
     <p
         onClick={event => onClick({ label, value }, event)}
         style={{ background: highlighted ? 'green' : 'blue' }}
@@ -203,7 +203,7 @@ export const CustomListOptions = () => (
                 onChange={() =>
                     console.log('Will be overriden by StatefulWrapper')
                 }
-                optionComponent={CustomOption}
+                renderOption={renderOption}
                 options={options}
             />
         </StatefulWrapper>
@@ -218,10 +218,14 @@ export const IndividualCustomOption = () => (
             addIndividualText="Add individual"
             removeAllText="Remove all"
             removeIndividualText="Remove individual"
-            options={[
-                { ...options[0], component: CustomOption },
-                ...options.slice(1),
-            ]}
+            renderOption={args => {
+                if (args.option.value === options[0].value) {
+                    return renderOption(args)
+                }
+
+                return <TransferOption {...args} />
+            }}
+            options={options}
         />
     </StatefulWrapper>
 )