From 53a2e817254e39d2488c11e873ef7e42a0aea604 Mon Sep 17 00:00:00 2001
From: Jan-Gerke Salomon <jgs.salomon@gmail.com>
Date: Tue, 26 May 2020 14:56:51 +0200
Subject: [PATCH] refactor: use option's value only as payload of click
 handlers

---
 .eslintignore                                 |  2 +-
 packages/widgets/src/Transfer/Transfer.js     | 42 ++++++++-----------
 .../Transfer/createDoubleClickHandlers.js     | 10 ++---
 .../widgets/src/Transfer/TransferOption.js    | 17 ++++----
 4 files changed, 32 insertions(+), 39 deletions(-)

diff --git a/.eslintignore b/.eslintignore
index 4a05976ff8..21262b5a35 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,2 +1,2 @@
-**/src/locales/*
 **/cypress/assets
+**/src/locales/*
diff --git a/packages/widgets/src/Transfer/Transfer.js b/packages/widgets/src/Transfer/Transfer.js
index 109731106c..984dc4ebca 100644
--- a/packages/widgets/src/Transfer/Transfer.js
+++ b/packages/widgets/src/Transfer/Transfer.js
@@ -208,20 +208,17 @@ export const Transfer = ({
                                 highlightedSourceOption === option.value
                         )
 
-                        const data = {
-                            highlighted,
-                            disabled: option.disabled,
-                            option: option,
-                            ...getOptionClickHandlers(
-                                option,
-                                selectSingleOption,
-                                toggleHighlightedSourceOption
-                            ),
-                        }
-
                         return (
                             <Fragment key={option.value}>
-                                {renderOption(data)}
+                                {renderOption({
+                                    ...option,
+                                    ...getOptionClickHandlers(
+                                        option,
+                                        selectSingleOption,
+                                        toggleHighlightedSourceOption
+                                    ),
+                                    highlighted,
+                                })}
                             </Fragment>
                         )
                     })}
@@ -307,20 +304,17 @@ export const Transfer = ({
                             value => option.value === value
                         )
 
-                        const data = {
-                            highlighted,
-                            disabled: option.disabled,
-                            option,
-                            ...getOptionClickHandlers(
-                                option,
-                                deselectSingleOption,
-                                toggleHighlightedPickedOption
-                            ),
-                        }
-
                         return (
                             <Fragment key={option.value}>
-                                {renderOption(data)}
+                                {renderOption({
+                                    ...option,
+                                    ...getOptionClickHandlers(
+                                        option,
+                                        deselectSingleOption,
+                                        toggleHighlightedPickedOption
+                                    ),
+                                    highlighted,
+                                })}
                             </Fragment>
                         )
                     })}
diff --git a/packages/widgets/src/Transfer/Transfer/createDoubleClickHandlers.js b/packages/widgets/src/Transfer/Transfer/createDoubleClickHandlers.js
index f1a3595f06..c5b7898b59 100644
--- a/packages/widgets/src/Transfer/Transfer/createDoubleClickHandlers.js
+++ b/packages/widgets/src/Transfer/Transfer/createDoubleClickHandlers.js
@@ -14,18 +14,18 @@ export const createDoubleClickHandlers = ({
     setHighlightedPickedOptions,
     setHighlightedSourceOptions,
 }) => {
-    const selectSingleOption = ({ option }) => {
-        const newSelected = selected.includes(option.value)
+    const selectSingleOption = ({ value }) => {
+        const newSelected = selected.includes(value)
             ? selected
-            : [...selected, option.value]
+            : [...selected, value]
 
         setHighlightedSourceOptions([])
         onChange({ selected: newSelected.slice(-1 * maxSelections) })
     }
 
-    const deselectSingleOption = ({ option }) => {
+    const deselectSingleOption = ({ value }) => {
         const newSelected = selected.filter(
-            curSelected => curSelected !== option.value
+            curSelected => curSelected !== value
         )
 
         setHighlightedPickedOptions([])
diff --git a/packages/widgets/src/Transfer/TransferOption.js b/packages/widgets/src/Transfer/TransferOption.js
index 1b914cfbae..0c0d7c4860 100644
--- a/packages/widgets/src/Transfer/TransferOption.js
+++ b/packages/widgets/src/Transfer/TransferOption.js
@@ -23,7 +23,8 @@ export const TransferOption = ({
     highlighted,
     onClick,
     onDoubleClick,
-    option,
+    label,
+    value,
 }) => {
     const doubleClickTimeout = useRef(null)
 
@@ -37,20 +38,20 @@ export const TransferOption = ({
                     clearTimeout(doubleClickTimeout.current)
                     doubleClickTimeout.current = null
 
-                    onDoubleClick({ option }, event)
+                    onDoubleClick({ value }, event)
                 } else {
                     doubleClickTimeout.current = setTimeout(() => {
                         clearTimeout(doubleClickTimeout.current)
                         doubleClickTimeout.current = null
                     }, DOUBLE_CLICK_MAX_DELAY)
 
-                    onClick({ option }, event)
+                    onClick({ value }, event)
                 }
             }}
-            data-value={option.value}
+            data-value={value}
             className={cx(className, { highlighted, disabled })}
         >
-            {option.label}
+            {label}
 
             <style jsx>{`
                 div {
@@ -98,10 +99,8 @@ TransferOption.defaultProps = {
  * @prop {Function} [onDoubleClick]
  */
 TransferOption.propTypes = {
-    option: propTypes.shape({
-        label: propTypes.string.isRequired,
-        value: propTypes.string.isRequired,
-    }).isRequired,
+    label: propTypes.string.isRequired,
+    value: propTypes.string.isRequired,
     className: propTypes.string,
     dataTest: propTypes.string,
     disabled: propTypes.bool,