@dhis2-ui/transfer 10.16.1 → 10.16.3-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/transfer",
-    "version": "10.16.1",
+    "version": "10.16.3-alpha.1",
     "description": "UI Transfer",
     "repository": {
         "type": "git",
@@ -34,19 +34,20 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/button": "10.16.1",
-        "@dhis2-ui/field": "10.16.1",
-        "@dhis2-ui/input": "10.16.1",
-        "@dhis2-ui/intersection-detector": "10.16.1",
-        "@dhis2-ui/loader": "10.16.1",
-        "@dhis2-ui/tooltip": "10.16.1",
-        "@dhis2/ui-constants": "10.16.1",
+        "@dhis2-ui/button": "10.16.3-alpha.1",
+        "@dhis2-ui/field": "10.16.3-alpha.1",
+        "@dhis2-ui/input": "10.16.3-alpha.1",
+        "@dhis2-ui/intersection-detector": "10.16.3-alpha.1",
+        "@dhis2-ui/loader": "10.16.3-alpha.1",
+        "@dhis2-ui/tooltip": "10.16.3-alpha.1",
+        "@dhis2/ui-constants": "10.16.3-alpha.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
         "build",
-        "types"
+        "types",
+        "src"
     ],
     "devDependencies": {
         "react": "^18.3.1",

package/src/__e2e__/add_remove-highlighted-options.e2e.stories.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Transfer } from '../transfer.js'
+import { options } from './common/options.js'
+import { statefulDecorator } from './common/stateful-decorator.js'
+
+export default {
+    title: 'Transfer add & remove highlighted options',
+    decorators: [statefulDecorator()],
+}
+
+export const HasOptions = (_, { onChange, selected }) => (
+    <Transfer
+        filterable
+        selected={selected}
+        onChange={onChange}
+        options={options}
+    />
+)
+
+export const HasSelected = (_, { onChange, selected }) => (
+    <Transfer onChange={onChange} selected={selected} options={options} />
+)
+
+HasSelected.story = {
+    decorators: [
+        statefulDecorator({
+            initialState: options.slice(0, 4).map(({ value }) => value),
+        }),
+    ],
+}

package/src/__e2e__/common/options.js

@@ -0,0 +1,90 @@
+export const options = [
+    {
+        label: 'ANC 1st visit',
+        value: 'anc_1st_visit',
+    },
+    {
+        label: 'ANC 2nd visit',
+        value: 'anc_2nd_visit',
+    },
+    {
+        label: 'ANC 3rd visit',
+        value: 'anc_3rd_visit',
+    },
+    {
+        label: 'ANC 4th or more visits',
+        value: 'anc_4th_or_more_visits',
+    },
+    {
+        label: 'ARI treated with antibiotics (pneumonia) follow-up',
+        value: 'ari_treated_with_antibiotics_(pneumonia)_follow-up',
+    },
+    {
+        label: 'ARI treated with antibiotics (pneumonia) new',
+        value: 'ari_treated_with_antibiotics_(pneumonia)_new',
+    },
+    {
+        label: 'ARI treated with antibiotics (pneumonia) referrals',
+        value: 'ari_treated_with_antibiotics_(pneumonia)_referrals',
+    },
+    {
+        label: 'ARI treated without antibiotics (cough) follow-up',
+        value: 'ari_treated_without_antibiotics_(cough)_follow-up',
+    },
+    {
+        label: 'ARI treated without antibiotics (cough) new',
+        value: 'ari_treated_without_antibiotics_(cough)_new',
+    },
+    {
+        label: 'ARI treated without antibiotics (cough) referrals',
+        value: 'ari_treated_without_antibiotics_(cough)_referrals',
+    },
+    {
+        label: 'ART No clients who stopped TRT due to TRT failure',
+        value: 'art_no_clients_who_stopped_trt_due_to_trt_failure',
+    },
+    {
+        label: 'ART No clients who stopped TRT due to adverse clinical status/event',
+        value: 'art_no_clients_who_stopped_trt_due_to_adverse_clinical_status/event',
+    },
+    {
+        label: 'ART No clients with change of regimen due to drug toxicity',
+        value: 'art_no_clients_with_change_of_regimen_due_to_drug_toxicity',
+    },
+    {
+        label: 'ART No clients with new adverse drug reaction',
+        value: 'art_no_clients_with_new_adverse_drug_reaction',
+    },
+    {
+        label: 'ART No started Opportunist Infection prophylaxis',
+        value: 'art_no_started_opportunist_infection_prophylaxis',
+    },
+    {
+        label: 'ART clients with new adverse clinical event',
+        value: 'art_clients_with_new_adverse_clinical_event',
+    },
+    {
+        label: 'ART defaulters',
+        value: 'art_defaulters',
+    },
+    {
+        label: 'ART enrollment stage 1',
+        value: 'art_enrollment_stage_1',
+    },
+    {
+        label: 'ART enrollment stage 2',
+        value: 'art_enrollment_stage_2',
+    },
+    {
+        label: 'ART enrollment stage 3',
+        value: 'art_enrollment_stage_3',
+    },
+    {
+        label: 'ART enrollment stage 4',
+        value: 'art_enrollment_stage_4',
+    },
+    {
+        label: 'ART entry point: No PMTCT',
+        value: 'art_entry_point:_no_pmtct',
+    },
+]

package/src/__e2e__/common/stateful-decorator.js

@@ -0,0 +1,33 @@
+/* eslint-disable react/display-name */
+
+import React, { useState } from 'react'
+
+const WithState = ({ fn, initialState, initialSearchTerm, controlFilter }) => {
+    const [selected, setSelected] = useState(initialState)
+    const [searchTerm, setSearchTerm] = useState(initialSearchTerm)
+
+    return fn({
+        selected,
+        searchTerm: controlFilter ? searchTerm : undefined,
+        onChange: (payload) => setSelected(payload.selected),
+        onFilterChange: controlFilter
+            ? ({ value }) => setSearchTerm(value)
+            : undefined,
+    })
+}
+
+export const statefulDecorator =
+    ({
+        initialState = [],
+        controlFilter = false,
+        initialSearchTerm = '',
+    } = {}) =>
+    (fn) =>
+        (
+            <WithState
+                initialState={initialState}
+                initialSearchTerm={initialSearchTerm}
+                controlFilter={controlFilter}
+                fn={fn}
+            />
+        )

package/src/__e2e__/disabled-transfer-buttons.e2e.stories.js

@@ -0,0 +1,49 @@
+import React from 'react'
+import { Transfer } from '../transfer.js'
+import { options } from './common/options.js'
+import { statefulDecorator } from './common/stateful-decorator.js'
+
+export default {
+    title: 'Transfer Disabled Transfer Buttons',
+    decorators: [statefulDecorator()],
+}
+
+export const NoOptions = (_, { selected, onChange }) => (
+    <Transfer selected={selected} onChange={onChange} options={[]} />
+)
+
+export const HasOptions = (_, { selected, onChange }) => (
+    <Transfer selected={selected} onChange={onChange} options={options} />
+)
+
+export const SomeOptionsSelected = (_, { selected, onChange }) => (
+    <Transfer selected={selected} onChange={onChange} options={options} />
+)
+
+export const OnlyDisabledSourceOptions = (_, { selected, onChange }) => (
+    <Transfer
+        selected={selected}
+        onChange={onChange}
+        options={[{ ...options[0], disabled: true }]}
+    />
+)
+
+SomeOptionsSelected.story = {
+    decorators: [
+        statefulDecorator({
+            initialState: options.slice(0, 4).map(({ value }) => value),
+        }),
+    ],
+}
+
+export const AllOptionsSelected = (_, { selected, onChange }) => (
+    <Transfer selected={selected} onChange={onChange} options={options} />
+)
+
+AllOptionsSelected.story = {
+    decorators: [
+        statefulDecorator({
+            initialState: options.map(({ value }) => value),
+        }),
+    ],
+}

package/src/__e2e__/disabled-transfer-options.e2e.stories.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { Transfer } from '../transfer.js'
+import { options } from './common/options.js'
+import { statefulDecorator } from './common/stateful-decorator.js'
+
+export default {
+    title: 'Disabled Source Options',
+    decorators: [statefulDecorator()],
+}
+
+export const OneDisabled = (_, { selected, onChange }) => (
+    <Transfer
+        selected={selected}
+        onChange={onChange}
+        options={[
+            ...options.slice(0, 3),
+            { ...options[3], disabled: true },
+            ...options.slice(4),
+        ]}
+    />
+)

package/src/__e2e__/display-order.e2e.stories.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Transfer } from '../transfer.js'
+import { options } from './common/options.js'
+import { statefulDecorator } from './common/stateful-decorator.js'
+
+export default { title: 'Transfer Display Order' }
+
+window.options = options
+
+export const NoSelection = (_, { selected, onChange }) => (
+    <Transfer selected={selected} onChange={onChange} options={options} />
+)
+
+export const SomeSelected = (_, { selected, onChange }) => (
+    <Transfer selected={selected} onChange={onChange} options={options} />
+)
+
+SomeSelected.story = {
+    decorators: [
+        statefulDecorator({
+            initialState: options.slice(0, 4).map(({ value }) => value),
+        }),
+    ],
+}

package/src/__e2e__/filter-options-list.e2e.stories.js

@@ -0,0 +1,87 @@
+import React from 'react'
+import { Transfer } from '../transfer.js'
+import { options } from './common/options.js'
+import { statefulDecorator } from './common/stateful-decorator.js'
+
+export default {
+    title: 'Transfer filtering',
+    decorators: [statefulDecorator()],
+}
+
+export const EmptyResult = (_, { selected, onChange }) => (
+    <Transfer
+        filterable
+        initialSearchTerm="Foobarbaz"
+        selected={selected}
+        onChange={onChange}
+        sourceEmptyPlaceholder={<span data-test="no-results">No results</span>}
+        options={options}
+    />
+)
+
+export const SomeResults = (_, { selected, onChange }) => (
+    <Transfer
+        selected={selected}
+        filterable
+        initialSearchTerm="ANC"
+        onChange={onChange}
+        options={options}
+    />
+)
+
+export const UppercaseSearch = (_, { selected, onChange }) => (
+    <Transfer
+        selected={selected}
+        filterable
+        initialSearchTerm="ANC"
+        onChange={onChange}
+        options={options}
+    />
+)
+
+export const LowercaseSearch = (_, { selected, onChange }) => (
+    <Transfer
+        filterable
+        initialSearchTerm="anc"
+        selected={selected}
+        onChange={onChange}
+        options={options}
+    />
+)
+
+export const AncCustomFilter = (_, { selected, onChange }) => (
+    <Transfer
+        filterable
+        selected={selected}
+        onChange={onChange}
+        filterCallback={(options, filter) =>
+            options.filter(({ label }) => label.match(`(^| )ANC .*${filter}`))
+        }
+        options={options}
+    />
+)
+
+window.customFilterCallback = (options, filter) => {
+    return options.filter(({ label }) => label.indexOf(filter) !== -1)
+}
+
+window.Cypress && window.Cypress.cy.spy(window, 'customFilterCallback')
+
+export const ControlledFilter = (
+    _,
+    { filter, onChange, onFilterChange, selected }
+) => (
+    <Transfer
+        selected={selected}
+        onChange={onChange}
+        filterable
+        filterCallback={window.customFilterCallback}
+        searchTerm={filter}
+        onFilterChange={onFilterChange}
+        options={options}
+    />
+)
+
+ControlledFilter.story = {
+    decorators: [statefulDecorator()],
+}

package/src/__e2e__/highlight-range-of-options.e2e.stories.js

@@ -0,0 +1,52 @@
+import React from 'react'
+import { Transfer } from '../transfer.js'
+import { options } from './common/options.js'
+import { statefulDecorator } from './common/stateful-decorator.js'
+
+export default {
+    title: 'Transfer highlight range of options',
+    decorators: [statefulDecorator()],
+}
+
+export const HasOptions = (_, { onChange, selected }) => (
+    <Transfer
+        filterable
+        selected={selected}
+        onChange={onChange}
+        options={options}
+    />
+)
+
+export const HasSelected = (_, { onChange, selected }) => (
+    <Transfer
+        filterable
+        onChange={onChange}
+        selected={selected}
+        options={options}
+    />
+)
+
+HasSelected.story = {
+    decorators: [
+        statefulDecorator({
+            initialState: options.slice(0, 4).map(({ value }) => value),
+        }),
+    ],
+}
+
+export const AllSelected = (_, { onChange, selected }) => (
+    <Transfer
+        filterable
+        onChange={onChange}
+        selected={selected}
+        options={options}
+    />
+)
+
+AllSelected.story = {
+    decorators: [
+        statefulDecorator({
+            initialState: options.map(({ value }) => value),
+        }),
+    ],
+}

package/src/__e2e__/loading_lists.e2e.stories.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Transfer } from '../transfer.js'
+import { options } from './common/options.js'
+
+export default { title: 'Transfer Loading Lists' }
+
+export const LoadingSource = () => (
+    <Transfer loading selected={[]} onChange={() => null} options={options} />
+)
+
+export const LoadingPicked = () => (
+    <Transfer
+        loadingPicked
+        selected={[]}
+        onChange={() => null}
+        options={options}
+    />
+)
+
+export const NotLoadingSource = () => (
+    <Transfer selected={[]} onChange={() => null} options={options} />
+)
+
+export const NotLoadingPicked = () => (
+    <Transfer selected={[]} onChange={() => null} options={options} />
+)

package/src/__e2e__/notify_at_end_of_list.e2e.stories.js

@@ -0,0 +1,116 @@
+import React, { useMemo, useState } from 'react'
+import { Transfer } from '../transfer.js'
+import { options } from './common/options.js'
+import { statefulDecorator } from './common/stateful-decorator.js'
+
+export default {
+    title: 'Transfer End Of List',
+    decorators: [statefulDecorator()],
+}
+
+window.onEndReached = window.Cypress
+    ? window.Cypress.cy.stub()
+    : () => console.log('onEndReached')
+
+window.onEndReachedPicked = window.Cypress
+    ? window.Cypress.cy.stub()
+    : () => console.log('onEndReachedPicked')
+
+export const FullSourceList = (_, { selected, onChange }) => (
+    <Transfer
+        options={options}
+        selected={selected}
+        onChange={onChange}
+        onEndReached={window.onEndReached}
+    />
+)
+
+export const FullPickedList = (_, { selected, onChange }) => (
+    <Transfer
+        options={options}
+        selected={selected}
+        onChange={onChange}
+        onEndReachedPicked={window.onEndReachedPicked}
+    />
+)
+
+FullPickedList.story = {
+    decorators: [
+        statefulDecorator({
+            initialState: options.map(({ value }) => value),
+        }),
+    ],
+}
+
+export const PartialSourceList = (_, { selected, onChange }) => (
+    <Transfer
+        options={options.slice(0, 4)}
+        selected={selected}
+        onChange={onChange}
+        onEndReached={window.onEndReached}
+    />
+)
+
+export const PartialPickedList = (_, { selected, onChange }) => (
+    <Transfer
+        options={options}
+        selected={selected}
+        onChange={onChange}
+        onEndReachedPicked={window.onEndReachedPicked}
+    />
+)
+
+PartialPickedList.story = {
+    decorators: [
+        statefulDecorator({
+            initialState: options.slice(0, 4).map(({ value }) => value),
+        }),
+    ],
+}
+
+const selectedOptionsLookup = {
+    'val-9': {
+        value: 'val-9',
+        label: 'Option nr. 9',
+    },
+}
+
+export const OptionChangesForShortList = (_, { onChange, selected }) => {
+    const [optionsCount, setOptionsCount] = useState(7)
+    const myOptions = useMemo(() => {
+        let counter = 1
+        const newOptions = []
+        while (counter <= optionsCount) {
+            newOptions.push({
+                value: `val-${counter}`,
+                label: `Option nr. ${counter}`,
+            })
+            counter++
+        }
+        return newOptions
+    }, [optionsCount])
+
+    return (
+        <>
+            <button onClick={() => setOptionsCount((curr) => curr + 1)}>
+                Increment options lists
+            </button>
+            <Transfer
+                filterable
+                selected={selected}
+                selectedOptionsLookup={selectedOptionsLookup}
+                onChange={onChange}
+                options={myOptions}
+                onEndReached={window.onEndReached}
+                onEndReachedPicked={window.onEndReachedPicked}
+            />
+        </>
+    )
+}
+OptionChangesForShortList.story = {
+    decorators: [
+        statefulDecorator({
+            initialState: ['val-9'],
+        }),
+    ],
+}

package/src/__e2e__/reorder-with-buttons.e2e.stories.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import { Transfer } from '../transfer.js'
+import { options } from './common/options.js'
+import { statefulDecorator } from './common/stateful-decorator.js'
+
+export default { title: 'Transfer Reorder Buttons' }
+
+const renderReorderTransfer = (_, { selected, onChange }) => (
+    <Transfer
+        enableOrderChange
+        selected={selected}
+        onChange={onChange}
+        options={options}
+    />
+)
+
+export const HasSomeSelected = renderReorderTransfer.bind({})
+
+HasSomeSelected.story = {
+    decorators: [
+        statefulDecorator({
+            initialState: options.slice(0, 8).map(({ value }) => value),
+        }),
+    ],
+}
+
+export const HasThreeSelected = renderReorderTransfer.bind({})
+
+HasThreeSelected.story = {
+    decorators: [
+        statefulDecorator({
+            initialState: options.slice(0, 3).map(({ value }) => value),
+        }),
+    ],
+}

package/src/__e2e__/set_unset-highlighted-option.e2e.stories.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Transfer } from '../transfer.js'
+import { options } from './common/options.js'
+import { statefulDecorator } from './common/stateful-decorator.js'
+
+export default {
+    title: 'Transfer set & unset higlighted options',
+    decorators: [statefulDecorator()],
+}
+
+export const HasOptions = (_, { onChange, selected }) => (
+    <Transfer
+        filterable
+        selected={selected}
+        onChange={onChange}
+        options={options}
+    />
+)
+
+export const HasSelected = (_, { onChange, selected }) => (
+    <Transfer onChange={onChange} selected={selected} options={options} />
+)
+
+HasSelected.story = {
+    decorators: [
+        statefulDecorator({
+            initialState: options.slice(0, 4).map(({ value }) => value),
+        }),
+    ],
+}

package/src/__e2e__/transferring-items.e2e.stories.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Transfer } from '../transfer.js'
+import { options } from './common/options.js'
+import { statefulDecorator } from './common/stateful-decorator.js'
+
+export default {
+    title: 'Transfer Transferring Items',
+    decorators: [statefulDecorator()],
+}
+
+window.options = options
+
+export const HasOptions = (_, { selected, onChange }) => (
+    <Transfer selected={selected} onChange={onChange} options={options} />
+)
+
+export const SomeSelected = (_, { selected, onChange }) => (
+    <Transfer selected={selected} onChange={onChange} options={options} />
+)
+
+SomeSelected.story = {
+    decorators: [
+        statefulDecorator({
+            initialState: options.slice(0, 4).map(({ value }) => value),
+        }),
+    ],
+}