feat: make infinite loading work for simple transfer

Author: flaminic

components/simple-transfer/README.md

@@ -5,4 +5,4 @@
 > guide](https://github.com/dhis2/ui/blob/master/docs/getting-started.md)
 > for more information.
 
-For usage instructions see [the documentation for this component](https://ui.dhis2.nu/components/transfer).
+For usage instructions see [the documentation for this component](https://ui.dhis2.nu/components/simple-transfer).

components/simple-transfer/src/__e2e__/add_remove-highlighted-options.e2e.stories.js

@@ -8,6 +8,14 @@ export default {
     decorators: [statefulDecorator()],
 }
 
+export const HasOptions = (_, { onChange, selected }) => (
+    <SimpleTransfer
+        filterable
+        selected={selected}
+        onChange={onChange}
+        options={options}
+    />
+)
 export const HasSelected = (_, { onChange, selected }) => (
     <SimpleTransfer onChange={onChange} selected={selected} options={options} />
 )

components/simple-transfer/src/features/disabled-transfer-buttons.feature

@@ -1,4 +1,4 @@
-@component-transfer @button-states
+@component-simple-transfer @button-states
 Feature: Disable transfer buttons when actions are not possible
 
     Scenario: None of the selectable options are highlighted

components/simple-transfer/src/features/disabled-transfer-options.feature

@@ -1,4 +1,4 @@
-@component-transfer @disabled-options
+@component-simple-transfer @disabled-options
 Feature: Options can be disabled
 
     Scenario: The user clicks a disabled option

components/simple-transfer/src/features/display-order.feature

@@ -1,4 +1,4 @@
-@component-transfer @display-ordering
+@component-simple-transfer @display-ordering
 Feature: Display order of items in lists
 
     Scenario: All supplied options are rendered in the options-side

components/simple-transfer/src/features/filter-options-list.feature

@@ -1,4 +1,4 @@
-@component-transfer @filtering
+@component-simple-transfer @filtering
 Feature: Filter options list
 
     Background:

components/simple-transfer/src/features/reorder-with-buttons.feature

@@ -1,4 +1,4 @@
-@component-transfer @reordering
+@component-simple-transfer @reordering
 Feature: Reorder items in the selected list using buttons
 
     Background:

components/simple-transfer/src/features/set_unset-highlighted-option.feature

@@ -1,4 +1,4 @@
-@component-transfer @highlighting
+@component-simple-transfer @highlighting
 Feature: Set&unset the highlighted option
 
     Scenario Outline: The user clicks an item that is not already highlighted

components/simple-transfer/src/features/transferring-items.feature

@@ -1,4 +1,4 @@
-@component-transfer @transferring
+@component-simple-transfer @transferring
 Feature: Transferring items between lists
 
     Scenario: The user selects multiple items

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,
 }