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

package/src/__tests__/helper/use-highlighted-option/toggle-range.test.js

@@ -0,0 +1,150 @@
+import { toggleRange } from '../../../transfer/use-highlighted-options/toggle-range.js'
+
+describe('Transfer- useHighlightedOptions - toggleRange', () => {
+    const setHighlightedOptions = jest.fn()
+    const options = [
+        { label: 'Foo', value: 'foo' },
+        { label: 'Bar', value: 'bar' },
+        { label: 'Baz', value: 'baz' },
+        { label: 'Foobar', value: 'foobar' },
+        { label: 'Foobaz', value: 'foobaz' },
+        { label: 'Foobarbaz', value: 'foobarbaz' },
+    ]
+
+    afterEach(() => {
+        setHighlightedOptions.mockClear()
+    })
+
+    describe('maxSelections=1', () => {
+        const maxSelections = 1
+        const highlightedOptions = options.slice(0, 1).map(({ value }) => value)
+        const lastClicked = options[0].value
+
+        it('should replace the current highlighted option', () => {
+            const option = options[1]
+            const expected = [option.value]
+
+            toggleRange({
+                lastClicked,
+                maxSelections,
+                highlightedOptions,
+                option,
+                setHighlightedOptions,
+                options,
+            })
+
+            expect(setHighlightedOptions).toHaveBeenCalledWith(expected)
+        })
+
+        it('should not change the highlighted options', () => {
+            const option = options[0]
+            const expected = highlightedOptions
+
+            toggleRange({
+                lastClicked,
+                maxSelections,
+                highlightedOptions,
+                option,
+                setHighlightedOptions,
+                options,
+            })
+
+            expect(setHighlightedOptions).toHaveBeenCalledWith(expected)
+        })
+    })
+
+    describe('maxSelections=Infinity', () => {
+        const maxSelections = Infinity
+        const highlightedOptions = options.slice(0, 1).map(({ value }) => value)
+        const lastClicked = options[0].value
+
+        it('should not change the highlighted options', () => {
+            const option = options[0]
+            const expected = highlightedOptions
+
+            toggleRange({
+                lastClicked,
+                maxSelections,
+                highlightedOptions,
+                option,
+                setHighlightedOptions,
+                options,
+            })
+
+            expect(setHighlightedOptions).toHaveBeenCalledWith(expected)
+        })
+
+        it('should highlight all option from the highlighted one to the clicked one', () => {
+            const expected = options.slice(0, 4).map(({ value }) => value)
+
+            toggleRange({
+                option: options[3],
+                lastClicked,
+                maxSelections,
+                highlightedOptions,
+                setHighlightedOptions,
+                options,
+            })
+
+            expect(setHighlightedOptions).toHaveBeenCalledWith(expected)
+        })
+
+        it('should highlight from the lastClicked to the most recently clicked one', () => {
+            const expected = options.slice(1, 4).map(({ value }) => value)
+
+            toggleRange({
+                option: options[3],
+                lastClicked: options[1].value,
+                maxSelections,
+                highlightedOptions,
+                setHighlightedOptions,
+                options,
+            })
+
+            expect(setHighlightedOptions).toHaveBeenCalledWith(expected)
+        })
+
+        /**
+         * E. g. lastClicked is hidden because of a filter change
+         */
+        it('should highlight from the highest in list to the clicked when last clicked not visible anymore', () => {
+            const expected = options.slice(1, 6).map(({ value }) => value)
+
+            toggleRange({
+                option: options[5],
+                lastClicked: 'not visible anymore',
+                maxSelections,
+                highlightedOptions: [
+                    ...options.slice(1, 2),
+                    ...options.slice(3, 5),
+                ].map(({ value }) => value),
+                setHighlightedOptions,
+                options,
+            })
+
+            expect(setHighlightedOptions).toHaveBeenCalledWith(expected)
+        })
+
+        /**
+         * E. g. lastClicked is null because all options so far
+         * have been clicked with shift
+         */
+        it('should highlight from the highest in list to the clicked when last clicked null', () => {
+            const expected = options.slice(1, 6).map(({ value }) => value)
+
+            toggleRange({
+                option: options[5],
+                lastClicked: null,
+                maxSelections,
+                highlightedOptions: [
+                    ...options.slice(1, 2),
+                    ...options.slice(3, 5),
+                ].map(({ value }) => value),
+                setHighlightedOptions,
+                options,
+            })
+
+            expect(setHighlightedOptions).toHaveBeenCalledWith(expected)
+        })
+    })
+})

package/src/__tests__/helper/use-highlighted-option/toggle-replace.test.js

@@ -0,0 +1,39 @@
+import { toggleReplace } from '../../../transfer/use-highlighted-options/toggle-replace.js'
+
+describe('Transfer - useHighlightedOptions - toggleReplace', () => {
+    const setHighlightedOptions = jest.fn()
+
+    afterEach(() => {
+        setHighlightedOptions.mockClear()
+    })
+
+    describe('maxSelections=1', () => {
+        it('should replace the current highlighted option', () => {
+            const highlightedOptions = ['foo']
+            const option = { value: 'bar', label: 'Bar' }
+            const expected = [option.value]
+
+            toggleReplace({
+                highlightedOptions,
+                option,
+                setHighlightedOptions,
+            })
+
+            expect(setHighlightedOptions).toHaveBeenCalledWith(expected)
+        })
+
+        it('should empty the highlighted options', () => {
+            const highlightedOptions = ['foo']
+            const option = { value: 'foo', label: 'Foo' }
+            const expected = []
+
+            toggleReplace({
+                highlightedOptions,
+                option,
+                setHighlightedOptions,
+            })
+
+            expect(setHighlightedOptions).toHaveBeenCalledWith(expected)
+        })
+    })
+})

package/src/__tests__/helper/use-highlighted-option.test.js

@@ -0,0 +1,41 @@
+import { createToggleHighlightedOption } from '../../transfer/use-highlighted-options/create-toggle-highlighted-option.js'
+import { useHighlightedOptions } from '../../transfer/use-highlighted-options.js'
+
+jest.mock(
+    '../../transfer/use-highlighted-options/create-toggle-highlighted-option.js',
+    () => ({
+        createToggleHighlightedOption: jest.fn(),
+    })
+)
+
+jest.mock('react', () => ({
+    useState: jest.fn((initialValue) => [initialValue, jest.fn()]),
+}))
+
+describe('Transfer - useHighlightedOptions', () => {
+    it('should use null as the default value of lastClicked', () => {
+        useHighlightedOptions({})
+        expect(createToggleHighlightedOption).toHaveBeenCalledWith(
+            expect.objectContaining({
+                lastClicked: null,
+            })
+        )
+    })
+
+    it('should use an empty array as default value of highlightedOptions', () => {
+        const { highlightedOptions } = useHighlightedOptions({})
+        expect(highlightedOptions).toEqual([])
+    })
+
+    it('should use the createToggleHighlightedOption factory to create the toggleHighlightedOption function', () => {
+        const createToggleHighlightedOptionReturnValue = jest.fn()
+        createToggleHighlightedOption.mockImplementationOnce(
+            () => createToggleHighlightedOptionReturnValue
+        )
+
+        const { toggleHighlightedOption } = useHighlightedOptions({})
+        expect(toggleHighlightedOption).toBe(
+            createToggleHighlightedOptionReturnValue
+        )
+    })
+})

package/src/__tests__/reordering-actions.test.js

@@ -0,0 +1,165 @@
+import { mount } from 'enzyme'
+import React from 'react'
+import { ReorderingActions } from '../reordering-actions.js'
+
+const findButton = (wrapper, dataTest) =>
+    wrapper.find(`button[data-test="${dataTest}"]`)
+
+const allButtonHooks = (dataTest) => [
+    `${dataTest}-buttonmovetotop`,
+    `${dataTest}-buttonmoveup`,
+    `${dataTest}-buttonmovedown`,
+    `${dataTest}-buttonmovetobottom`,
+]
+
+describe('Transfer - ReorderingActions', () => {
+    const dataTest = 'test-reorderingactions'
+    const baseProps = {
+        dataTest,
+        onChangeUp: jest.fn(),
+        onChangeDown: jest.fn(),
+        onChangeToTop: jest.fn(),
+        onChangeToBottom: jest.fn(),
+    }
+
+    afterEach(() => {
+        Object.values(baseProps).forEach((value) => {
+            if (jest.isMockFunction(value)) {
+                value.mockClear()
+            }
+        })
+    })
+
+    it('renders all four reorder buttons', () => {
+        const wrapper = mount(<ReorderingActions {...baseProps} />)
+
+        expect(findButton(wrapper, `${dataTest}-buttonmovetotop`)).toHaveLength(
+            1
+        )
+        expect(findButton(wrapper, `${dataTest}-buttonmoveup`)).toHaveLength(1)
+        expect(findButton(wrapper, `${dataTest}-buttonmovedown`)).toHaveLength(
+            1
+        )
+        expect(
+            findButton(wrapper, `${dataTest}-buttonmovetobottom`)
+        ).toHaveLength(1)
+    })
+
+    it('invokes the corresponding handler for each button', () => {
+        const wrapper = mount(<ReorderingActions {...baseProps} />)
+
+        findButton(wrapper, `${dataTest}-buttonmovetotop`).simulate('click')
+        expect(baseProps.onChangeToTop).toHaveBeenCalledTimes(1)
+
+        findButton(wrapper, `${dataTest}-buttonmoveup`).simulate('click')
+        expect(baseProps.onChangeUp).toHaveBeenCalledTimes(1)
+
+        findButton(wrapper, `${dataTest}-buttonmovedown`).simulate('click')
+        expect(baseProps.onChangeDown).toHaveBeenCalledTimes(1)
+
+        findButton(wrapper, `${dataTest}-buttonmovetobottom`).simulate('click')
+        expect(baseProps.onChangeToBottom).toHaveBeenCalledTimes(1)
+    })
+
+    it('does not cross-fire handlers when a single button is clicked', () => {
+        const wrapper = mount(<ReorderingActions {...baseProps} />)
+
+        findButton(wrapper, `${dataTest}-buttonmoveup`).simulate('click')
+
+        expect(baseProps.onChangeUp).toHaveBeenCalledTimes(1)
+        expect(baseProps.onChangeDown).not.toHaveBeenCalled()
+        expect(baseProps.onChangeToTop).not.toHaveBeenCalled()
+        expect(baseProps.onChangeToBottom).not.toHaveBeenCalled()
+    })
+
+    it('disables both up-side buttons when disabledUp is true', () => {
+        const wrapper = mount(
+            <ReorderingActions {...baseProps} disabledUp={true} />
+        )
+
+        expect(
+            findButton(wrapper, `${dataTest}-buttonmovetotop`).prop('disabled')
+        ).toBe(true)
+        expect(
+            findButton(wrapper, `${dataTest}-buttonmoveup`).prop('disabled')
+        ).toBe(true)
+        expect(
+            findButton(wrapper, `${dataTest}-buttonmovedown`).prop('disabled')
+        ).toBeFalsy()
+        expect(
+            findButton(wrapper, `${dataTest}-buttonmovetobottom`).prop(
+                'disabled'
+            )
+        ).toBeFalsy()
+    })
+
+    it('disables both down-side buttons when disabledDown is true', () => {
+        const wrapper = mount(
+            <ReorderingActions {...baseProps} disabledDown={true} />
+        )
+
+        expect(
+            findButton(wrapper, `${dataTest}-buttonmovedown`).prop('disabled')
+        ).toBe(true)
+        expect(
+            findButton(wrapper, `${dataTest}-buttonmovetobottom`).prop(
+                'disabled'
+            )
+        ).toBe(true)
+        expect(
+            findButton(wrapper, `${dataTest}-buttonmoveup`).prop('disabled')
+        ).toBeFalsy()
+        expect(
+            findButton(wrapper, `${dataTest}-buttonmovetotop`).prop('disabled')
+        ).toBeFalsy()
+    })
+
+    it('does not invoke handlers for disabled buttons', () => {
+        const wrapper = mount(
+            <ReorderingActions
+                {...baseProps}
+                disabledUp={true}
+                disabledDown={true}
+            />
+        )
+
+        findButton(wrapper, `${dataTest}-buttonmovetotop`).simulate('click')
+        findButton(wrapper, `${dataTest}-buttonmoveup`).simulate('click')
+        findButton(wrapper, `${dataTest}-buttonmovedown`).simulate('click')
+        findButton(wrapper, `${dataTest}-buttonmovetobottom`).simulate('click')
+
+        expect(baseProps.onChangeToTop).not.toHaveBeenCalled()
+        expect(baseProps.onChangeUp).not.toHaveBeenCalled()
+        expect(baseProps.onChangeDown).not.toHaveBeenCalled()
+        expect(baseProps.onChangeToBottom).not.toHaveBeenCalled()
+    })
+
+    it('sets aria-label on every button', () => {
+        const wrapper = mount(<ReorderingActions {...baseProps} />)
+
+        const assertLabel = (hook, label) => {
+            expect(findButton(wrapper, hook).prop('aria-label')).toBe(label)
+        }
+
+        assertLabel(`${dataTest}-buttonmovetotop`, 'Move selected items to top')
+        assertLabel(`${dataTest}-buttonmoveup`, 'Move selected items up')
+        assertLabel(`${dataTest}-buttonmovedown`, 'Move selected items down')
+        assertLabel(
+            `${dataTest}-buttonmovetobottom`,
+            'Move selected items to bottom'
+        )
+    })
+
+    it('still renders and wires up all four buttons when filterActive is true', () => {
+        const wrapper = mount(
+            <ReorderingActions {...baseProps} filterActive={true} />
+        )
+
+        allButtonHooks(dataTest).forEach((hook) => {
+            expect(findButton(wrapper, hook)).toHaveLength(1)
+        })
+
+        findButton(wrapper, `${dataTest}-buttonmoveup`).simulate('click')
+        expect(baseProps.onChangeUp).toHaveBeenCalledTimes(1)
+    })
+})

package/src/__tests__/transfer.test.js

@@ -0,0 +1,137 @@
+import { mount } from 'enzyme'
+import React from 'react'
+import { Transfer } from '../transfer.js'
+
+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',
+    },
+]
+
+describe('Pass selected state to renderOptions function', () => {
+    it('should pass selected=false to source options', () => {
+        const renderOption = jest.fn()
+        mount(
+            <Transfer
+                renderOption={renderOption}
+                onChange={jest.fn()}
+                selected={[]}
+                options={options}
+            />
+        )
+
+        expect(renderOption).toHaveBeenCalledTimes(options.length)
+        renderOption.mock.calls.forEach(([{ selected }]) => {
+            expect(selected).toBe(false)
+        })
+    })
+
+    it('should pass selected=true to picked options', () => {
+        const renderOption = jest.fn()
+        const picked = options.slice(0, 3)
+        const pickedValues = picked.map(({ value }) => value)
+
+        mount(
+            <Transfer
+                renderOption={renderOption}
+                onChange={jest.fn()}
+                selected={pickedValues}
+                options={options}
+            />
+        )
+
+        const withSelectedTrue = renderOption.mock.calls.filter(
+            ([{ selected }]) => selected
+        )
+
+        expect(withSelectedTrue).toHaveLength(picked.length)
+        withSelectedTrue.forEach(([selected], index) => {
+            expect(selected).toEqual(expect.objectContaining(picked[index]))
+        })
+    })
+})

package/src/actions.js

@@ -0,0 +1,33 @@
+import { spacers } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export const Actions = ({ children, dataTest }) => (
+    <div data-test={dataTest}>
+        {children}
+
+        <style jsx>{`
+            div {
+                align-content: center;
+                display: flex;
+                flex-direction: column;
+                flex-shrink: 1;
+                justify-content: center;
+                margin: 0 ${spacers.dp8};
+            }
+
+            div > :global(button) {
+                margin-top: 8px;
+            }
+
+            div > :global(button):first-child {
+                margin-top: 0;
+            }
+        `}</style>
+    </div>
+)
+
+Actions.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    children: PropTypes.node,
+}

package/src/add-all.js

@@ -0,0 +1,27 @@
+import { Button } from '@dhis2-ui/button'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { IconAddAll } from './icons.js'
+
+export const AddAll = ({ label, dataTest, disabled, onClick }) => (
+    <Button
+        dataTest={dataTest}
+        disabled={disabled}
+        onClick={onClick}
+        icon={
+            <IconAddAll
+                dataTest={`${dataTest}-iconaddall`}
+                disabled={disabled}
+            />
+        }
+    >
+        {label}
+    </Button>
+)
+
+AddAll.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    onClick: PropTypes.func.isRequired,
+    disabled: PropTypes.bool,
+    label: PropTypes.string,
+}

package/src/add-individual.js

@@ -0,0 +1,27 @@
+import { Button } from '@dhis2-ui/button'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { IconAddIndividual } from './icons.js'
+
+export const AddIndividual = ({ label, dataTest, disabled, onClick }) => (
+    <Button
+        dataTest={dataTest}
+        disabled={disabled}
+        onClick={onClick}
+        icon={
+            <IconAddIndividual
+                disabled={disabled}
+                dataTest={`${dataTest}-iconaddindividual`}
+            />
+        }
+    >
+        {label}
+    </Button>
+)
+
+AddIndividual.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    onClick: PropTypes.func.isRequired,
+    disabled: PropTypes.bool,
+    label: PropTypes.string,
+}

package/src/common/find-option-index.js

@@ -0,0 +1,9 @@
+import { isOption } from './is-option.js'
+
+/**
+ * @param {Object[]} options
+ * @param {Object} option
+ * @returns {Int}
+ */
+export const findOptionIndex = (options, option) =>
+    options.findIndex((current) => isOption(current, option))

package/src/common/get-mode-by-modifier-key.js

@@ -0,0 +1,35 @@
+import { ADD_MODE, RANGE_MODE, REPLACE_MODE } from './modes.js'
+
+/**
+ * @param {Object} args
+ * @param {bool} args.altKey
+ * @param {bool} args.shiftKey
+ * @param {bool} args.ctrlKey
+ * @param {bool} args.metaKey
+ * @return {string}
+ */
+export const getModeByModifierKey = ({
+    altKey,
+    shiftKey,
+    ctrlKey,
+    metaKey,
+}) => {
+    const keys = [altKey, shiftKey, ctrlKey, metaKey]
+    const amountKeyPressed = keys.filter((v) => v)
+    const moreThanOneKeyPressed = amountKeyPressed.length
+
+    if (moreThanOneKeyPressed !== 1) {
+        return REPLACE_MODE
+    }
+
+    if (altKey || ctrlKey || metaKey) {
+        return ADD_MODE
+    }
+
+    if (shiftKey) {
+        return RANGE_MODE
+    }
+
+    // default to replace mode
+    return REPLACE_MODE
+}

package/src/common/index.js

@@ -0,0 +1,5 @@
+export { ADD_MODE, RANGE_MODE, REPLACE_MODE } from './modes.js'
+export { findOptionIndex } from './find-option-index.js'
+export { getModeByModifierKey } from './get-mode-by-modifier-key.js'
+export { isOption } from './is-option.js'
+export { toggleValue } from './toggle-value.js'

package/src/common/is-option.js

@@ -0,0 +1,7 @@
+/**
+ * @param {Object} left
+ * @param {Object} left
+ * @returns {bool}
+ */
+export const isOption = (left, right) =>
+    left.label === right.label && left.value === right.value