feat: make infinite loading work for simple transfer

Author: flaminic

components/simple-transfer/src/options-container.js

@@ -1,11 +1,13 @@
+import { spacers } from '@dhis2/ui-constants'
 import { CircularLoader } from '@dhis2-ui/loader'
 import PropTypes from 'prop-types'
-import React, { Fragment, useRef } from 'react'
+import React, { Fragment, useEffect, useRef } from 'react'
 import { SimpleTransferOption } from './simple-transfer-option.js'
 
 export const OptionsContainer = ({
     dataTest,
     emptyComponent,
+    onEndReached,
     highlightedOptions,
     loading,
     maxSelections,
@@ -14,8 +16,37 @@ export const OptionsContainer = ({
     selectionHandler,
     setHighlightedOptions,
 }) => {
-    const optionsRef = useRef(null)
+    const selectRef = useRef(null)
     const wrapperRef = useRef(null)
+    // const resizeCounter = useResizeCounter(wrapperRef.current)
+    const lastOptionRef = useRef(null)
+
+    useEffect(() => {
+        const observer = new IntersectionObserver(
+            (entries) => {
+                entries.forEach((entry) => {
+                    if (entry.isIntersecting) {
+                        onEndReached && onEndReached()
+                    }
+                })
+            },
+            {
+                root: wrapperRef.current,
+                threshold: 1.0,
+            }
+        )
+
+        if (lastOptionRef.current) {
+            observer.observe(lastOptionRef.current)
+        }
+
+        return () => {
+            if (lastOptionRef.current) {
+                observer.unobserve(lastOptionRef.current)
+            }
+            observer.disconnect()
+        }
+    }, [options])
 
     return (
         <div className="optionsContainer">
@@ -25,14 +56,14 @@ export const OptionsContainer = ({
                 </div>
             )}
 
-            <div className="container" data-test={dataTest} ref={optionsRef}>
+            <div className="container" data-test={dataTest} ref={wrapperRef}>
                 {!options.length && emptyComponent}
                 {!!options.length && (
                     <select
+                        ref={selectRef}
+                        className="content-select"
                         multiple={maxSelections === Infinity}
                         size={maxSelections === 1 ? 2 : undefined}
-                        className="content-container"
-                        ref={wrapperRef}
                         onChange={(e) => {
                             const nextSelected = [...e.target.options].reduce(
                                 (curNextSelected, option) => {
@@ -47,7 +78,7 @@ export const OptionsContainer = ({
                             setHighlightedOptions(nextSelected)
                         }}
                     >
-                        {options.map((option) => {
+                        {options.map((option, index) => {
                             const highlighted = !!highlightedOptions.find(
                                 (highlightedSourceOption) =>
                                     highlightedSourceOption === option.value
@@ -61,6 +92,11 @@ export const OptionsContainer = ({
                                         highlighted={highlighted}
                                         selected={selected}
                                         onDoubleClick={selectionHandler}
+                                        lastOptionReference={
+                                            index === options.length - 1
+                                                ? lastOptionRef
+                                                : undefined
+                                        }
                                     />
                                 </Fragment>
                             )
@@ -70,6 +106,37 @@ export const OptionsContainer = ({
             </div>
 
             <style jsx>{`
+                .optionsContainer {
+                    flex-grow: 1;
+                    padding: ${spacers.dp4} 0;
+                    position: relative;
+                    overflow: hidden;
+                }
+
+                .container {
+                    overflow-y: auto;
+                    height: 100%;
+                }
+
+                .loading {
+                    display: flex;
+                    height: 100%;
+                    width: 100%;
+                    align-items: center;
+                    justify-content: center;
+                    position: absolute;
+                    z-index: 2;
+                    top: 0;
+                    inset-inline-start: 0;
+                }
+
+                .content-select {
+                    border: none;
+                    position: relative;
+                    height: 100%;
+                    width: 100%;
+                }
+
                 .loading + .container .content-container {
                     filter: blur(2px);
                 }
@@ -93,4 +160,5 @@ OptionsContainer.propTypes = {
     ),
     selected: PropTypes.bool,
     selectionHandler: PropTypes.func,
+    onEndReached: PropTypes.func,
 }

components/simple-transfer/src/simple-transfer-option.js

@@ -10,6 +10,7 @@ export const SimpleTransferOption = ({
     onDoubleClick,
     label,
     value,
+    lastOptionReference,
 }) => {
     return (
         <>
@@ -19,6 +20,7 @@ export const SimpleTransferOption = ({
                 data-value={value}
                 value={value}
                 onDoubleClick={() => onDoubleClick({ value }, event)}
+                ref={lastOptionReference}
             >
                 {label}
             </option>
@@ -56,5 +58,6 @@ SimpleTransferOption.propTypes = {
     className: PropTypes.string,
     dataTest: PropTypes.string,
     disabled: PropTypes.bool,
+    lastOptionReference: PropTypes.object,
     onDoubleClick: PropTypes.func,
 }

components/simple-transfer/src/simple-transfer.prod.stories.js

@@ -2,7 +2,6 @@ import { SingleSelectField, SingleSelectOption } from '@dhis2-ui/select'
 import { Tab, TabBar } from '@dhis2-ui/tab'
 import PropTypes from 'prop-types'
 import React, { useEffect, useState } from 'react'
-import { SimpleTransferOption } from './simple-transfer-option.js'
 import { SimpleTransfer } from './simple-transfer.js'
 
 const subtitle = 'Allows users to select options from a list'
@@ -218,79 +217,6 @@ FilteredPlaceholder.args = {
     filterPlaceholder: 'Search',
 }
 
-const renderOption = ({ label, value, onClick, highlighted, selected }) => (
-    <p
-        onClick={(event) => onClick({ label, value }, event)}
-        style={{
-            background: highlighted ? 'green' : 'blue',
-            color: selected ? 'orange' : 'white',
-        }}
-    >
-        Custom: {label} (label), {value} (value)
-    </p>
-)
-
-const RenderOptionCode = () => (
-    <>
-        <strong>Custom option code:</strong>
-        <code>
-            <pre>{`const renderOption = ({ label, value, onClick, highlighted, selected }) => (
-                <p
-                    onClick={event => onClick({ label, value }, event)}
-                    style={{
-                        background: highlighted ? 'green' : 'blue',
-                        color: selected ? 'orange' : 'white',
-                    }}
-                >
-                    Custom: {label} (label), {value} (value)
-                </p>
-            )`}</pre>
-        </code>
-    </>
-)
-
-const StatefulTemplateCustomRenderOption = ({
-    initiallySelected = [],
-    ...args
-}) => {
-    const [selected, setSelected] = useState(initiallySelected)
-    const onChange = (payload) => setSelected(payload.selected)
-
-    return <SimpleTransfer {...args} selected={selected} onChange={onChange} />
-}
-StatefulTemplateCustomRenderOption.propTypes = {
-    initiallySelected: PropTypes.array,
-}
-
-export const CustomListOptions = (args) => (
-    <>
-        <RenderOptionCode />
-        <StatefulTemplateCustomRenderOption {...args} />
-    </>
-)
-CustomListOptions.args = {
-    renderOption,
-    options: options.slice(0, 2),
-    initiallySelected: options.slice(0, 2).map(({ value }) => value),
-}
-
-export const IndividualCustomOption = StatefulTemplateCustomRenderOption.bind(
-    {}
-)
-IndividualCustomOption.args = {
-    addAllText: 'Add all',
-    addIndividualText: 'Add individual',
-    removeAllText: 'Remove all',
-    removeIndividualText: 'Remove individual',
-    renderOption: (option) => {
-        if (option.value === options[0].value) {
-            return renderOption(option)
-        }
-
-        return <SimpleTransferOption {...option} />
-    },
-}
-
 export const CustomButtonText = StatefulTemplate.bind({})
 CustomButtonText.args = {
     addAllText: 'Add all',
@@ -482,7 +408,7 @@ export const InfiniteLoading = (args) => {
     // state for whether the next page's options are being loaded
     const [loading, setLoading] = useState(false)
     // captures the current page
-    const [page, setPage] = useState(0)
+    const [page, setPage] = useState(1)
     // all options (incl. available AND selected options)
     const [options, setOptions] = useState([])
     // selected options