feat: make infinite loading work for simple transfer

dhis2 · Nov 7, 2024 · ae1cd24 · ae1cd24
1 parent 2a04671
commit ae1cd24
Show file tree

Hide file tree

Showing 13 changed files with 95 additions and 90 deletions.
diff --git a/components/simple-transfer/README.md b/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).
diff --git a/components/simple-transfer/src/__e2e__/add_remove-highlighted-options.e2e.stories.js b/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} />
 )

diff --git a/components/simple-transfer/src/features/disabled-transfer-buttons.feature b/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

diff --git a/components/simple-transfer/src/features/disabled-transfer-options.feature b/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

diff --git a/components/simple-transfer/src/features/display-order.feature b/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

diff --git a/components/simple-transfer/src/features/filter-options-list.feature b/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:

diff --git a/components/simple-transfer/src/features/reorder-with-buttons.feature b/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:

diff --git a/components/simple-transfer/src/features/set_unset-highlighted-option.feature b/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

diff --git a/components/simple-transfer/src/features/transferring-items.feature b/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

diff --git a/components/simple-transfer/src/options-container.js b/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,
 }
diff --git a/components/simple-transfer/src/simple-transfer-option.js b/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,
 }
diff --git a/components/simple-transfer/src/simple-transfer.prod.stories.js b/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

diff --git a/components/simple-transfer/types/index.d.ts b/components/simple-transfer/types/index.d.ts
@@ -51,7 +51,7 @@ export interface SimpleTransferProps {
     onFilterChangePicked?: InputChangeHandler
 }
 
-export const Transfer: React.FC<SimpleTransferProps>
+export const SimpleTransfer: React.FC<SimpleTransferProps>
 
 export type TransferOptionOnClickProp = (payload: { value: string }) => void