From ee209d0c66253974991b7b7f62bb418673b24867 Mon Sep 17 00:00:00 2001
From: Mohammer5 <jan-gerke@dhis2.org>
Date: Wed, 24 Jul 2024 12:37:00 +0200
Subject: [PATCH] feat(transfer): use native single-/multi selects

---
 components/transfer/src/options-container.js | 86 ++++++++++++--------
 components/transfer/src/transfer-option.js   | 53 ++++--------
 components/transfer/src/transfer.js          |  4 +
 3 files changed, 73 insertions(+), 70 deletions(-)

diff --git a/components/transfer/src/options-container.js b/components/transfer/src/options-container.js
index ce3c60a55e..fec1ce21eb 100644
--- a/components/transfer/src/options-container.js
+++ b/components/transfer/src/options-container.js
@@ -12,10 +12,12 @@ export const OptionsContainer = ({
     getOptionClickHandlers,
     highlightedOptions,
     loading,
+    maxSelections,
     renderOption,
     options,
     selected,
     selectionHandler,
+    setHighlightedOptions,
     toggleHighlightedOption,
 }) => {
     const optionsRef = useRef(null)
@@ -31,51 +33,62 @@ export const OptionsContainer = ({
             )}
 
             <div className="container" data-test={dataTest} ref={optionsRef}>
-                <div className="content-container" ref={wrapperRef}>
-                    {!options.length && emptyComponent}
-                    {options.map((option) => {
-                        const highlighted = !!highlightedOptions.find(
-                            (highlightedSourceOption) =>
-                                highlightedSourceOption === option.value
-                        )
+                {!options.length && emptyComponent}
+                {!!options.length && (
+                    <select
+                        multiple={maxSelections === Infinity}
+                        size={maxSelections === 1 ? 2 : undefined}
+                        className="content-container"
+                        ref={wrapperRef}
+                        onChange={(e) => {
+                            const nextSelected = [...e.target.options].reduce(
+                                (curNextSelected, option) => {
+                                    if (!option.selected) {
+                                        return curNextSelected
+                                    }
 
-                        return (
-                            <Fragment key={option.value}>
-                                {renderOption({
-                                    ...option,
-                                    ...getOptionClickHandlers(
-                                        option,
-                                        selectionHandler,
-                                        toggleHighlightedOption
-                                    ),
-                                    highlighted,
-                                    selected,
-                                })}
-                            </Fragment>
-                        )
-                    })}
+                                    return [...curNextSelected, option.value]
+                                },
+                                []
+                            )
+                            setHighlightedOptions(nextSelected)
+                        }}
+                    >
+                        {options.map((option, index) => {
+                            const isLast = index === options.length - 1
+                            const highlighted = !!highlightedOptions.find(
+                                (highlightedSourceOption) =>
+                                    highlightedSourceOption === option.value
+                            )
 
-                    {onEndReached && (
-                        <EndIntersectionDetector
-                            dataTest={`${dataTest}-endintersectiondetector`}
-                            key={`key-${resizeCounter}`}
-                            rootRef={optionsRef}
-                            onEndReached={onEndReached}
-                        />
-                    )}
-                </div>
+                            return (
+                                <Fragment key={option.value}>
+                                    {renderOption({
+                                        ...option,
+                                        ...getOptionClickHandlers(
+                                            option,
+                                            selectionHandler,
+                                            toggleHighlightedOption
+                                        ),
+                                        highlighted,
+                                        selected,
+                                    })}
+                                </Fragment>
+                            )
+                        })}
+                    </select>
+                )}
             </div>
 
             <style jsx>{`
                 .optionsContainer {
                     flex-grow: 1;
-                    padding: ${spacers.dp4} 0;
                     position: relative;
                     overflow: hidden;
                 }
 
                 .container {
-                    overflow-y: auto;
+                    overflow: hidden;
                     height: 100%;
                 }
 
@@ -94,6 +107,11 @@ export const OptionsContainer = ({
                 .content-container {
                     z-index: 1;
                     position: relative;
+                    height: 100%;
+                    width: 100%;
+                    overflow: auto;
+                    border: 0;
+                    padding: ${spacers.dp4} 0;
                 }
 
                 .loading + .container .content-container {
@@ -111,6 +129,8 @@ OptionsContainer.defaultProps = {
 OptionsContainer.propTypes = {
     dataTest: PropTypes.string.isRequired,
     getOptionClickHandlers: PropTypes.func.isRequired,
+    maxSelections: PropTypes.oneOf([1, Infinity]).isRequired,
+    setHighlightedOptions: PropTypes.func.isRequired,
     emptyComponent: PropTypes.node,
     highlightedOptions: PropTypes.arrayOf(PropTypes.string),
     loading: PropTypes.bool,
diff --git a/components/transfer/src/transfer-option.js b/components/transfer/src/transfer-option.js
index 51ed74424d..9a385c78c1 100644
--- a/components/transfer/src/transfer-option.js
+++ b/components/transfer/src/transfer-option.js
@@ -1,51 +1,31 @@
 import { colors } from '@dhis2/ui-constants'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
-import React, { useRef } from 'react'
-
-const DOUBLE_CLICK_MAX_DELAY = 500
+import React from 'react'
 
 export const TransferOption = ({
     className,
     disabled,
     dataTest,
-    highlighted,
     onClick,
     onDoubleClick,
     label,
     value,
 }) => {
-    const doubleClickTimeout = useRef(null)
-
     return (
-        <div
-            data-test={dataTest}
-            onClick={(event) => {
-                if (disabled) {
-                    return
-                }
-
-                if (doubleClickTimeout.current) {
-                    clearTimeout(doubleClickTimeout.current)
-                    doubleClickTimeout.current = null
-
-                    onDoubleClick({ value }, event)
-                } else {
-                    doubleClickTimeout.current = setTimeout(() => {
-                        clearTimeout(doubleClickTimeout.current)
-                        doubleClickTimeout.current = null
-                    }, DOUBLE_CLICK_MAX_DELAY)
-
-                    onClick({ value }, event)
-                }
-            }}
-            data-value={value}
-            className={cx(className, { highlighted, disabled })}
-        >
-            {label}
+        <>
+            <option
+                className={cx(className, { disabled })}
+                data-test={dataTest}
+                data-value={value}
+                value={value}
+                onDoubleClick={(e) => onDoubleClick({ value }, event)}
+            >
+                {label}
+            </option>
 
             <style jsx>{`
-                div {
+                option {
                     font-size: 14px;
                     line-height: 16px;
                     padding: 4px 8px;
@@ -53,21 +33,21 @@ export const TransferOption = ({
                     user-select: none;
                 }
 
-                div:hover {
+                option:hover {
                     background: ${colors.grey200};
                 }
 
-                div.highlighted {
+                option:checked {
                     background: ${colors.teal700};
                     color: ${colors.white};
                 }
 
-                div.disabled {
+                option.disabled {
                     color: ${colors.grey600};
                     cursor: not-allowed;
                 }
             `}</style>
-        </div>
+        </>
     )
 }
 
@@ -81,7 +61,6 @@ TransferOption.propTypes = {
     className: PropTypes.string,
     dataTest: PropTypes.string,
     disabled: PropTypes.bool,
-    highlighted: PropTypes.bool,
     onClick: PropTypes.func,
     onDoubleClick: PropTypes.func,
 }
diff --git a/components/transfer/src/transfer.js b/components/transfer/src/transfer.js
index deca9a9f9f..1df39c9765 100644
--- a/components/transfer/src/transfer.js
+++ b/components/transfer/src/transfer.js
@@ -217,6 +217,8 @@ export const Transfer = ({
                 )}
 
                 <OptionsContainer
+                    maxSelections={maxSelections}
+                    setHighlightedOptions={setHighlightedSourceOptions}
                     dataTest={`${dataTest}-sourceoptions`}
                     emptyComponent={sourceEmptyPlaceholder}
                     getOptionClickHandlers={getOptionClickHandlers}
@@ -324,6 +326,8 @@ export const Transfer = ({
                 )}
 
                 <OptionsContainer
+                    maxSelections={maxSelections}
+                    setHighlightedOptions={setHighlightedPickedOptions}
                     selected
                     dataTest={`${dataTest}-pickedoptions`}
                     emptyComponent={selectedEmptyComponent}