feat(transfer): use native single-/multi selects

Author: Mohammer5

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,9 +33,28 @@ export const OptionsContainer = ({
             )}
 
             <div className="container" data-test={dataTest} ref={optionsRef}>
-                <div className="content-container" ref={wrapperRef}>
+                <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 [...curNextSelected, option.value]
+                            },
+                            []
+                        )
+                        setHighlightedOptions(nextSelected)
+                    }}
+                >
                     {!options.length && emptyComponent}
-                    {options.map((option) => {
+                    {options.map((option, index) => {
+                        const isLast = index === options.length - 1
                         const highlighted = !!highlightedOptions.find(
                             (highlightedSourceOption) =>
                                 highlightedSourceOption === option.value
@@ -54,28 +75,18 @@ export const OptionsContainer = ({
                             </Fragment>
                         )
                     })}
-
-                    {onEndReached && (
-                        <EndIntersectionDetector
-                            dataTest={`${dataTest}-endintersectiondetector`}
-                            key={`key-${resizeCounter}`}
-                            rootRef={optionsRef}
-                            onEndReached={onEndReached}
-                        />
-                    )}
-                </div>
+                </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 +105,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 +127,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,

components/transfer/src/transfer-option.js

@@ -1,73 +1,53 @@
 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;
                     color: ${colors.grey900};
                     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,
 }

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}