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

package/src/left-header.js

@@ -0,0 +1,22 @@
+import { colors, spacers } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export const LeftHeader = ({ children, dataTest }) => (
+    <div data-test={dataTest}>
+        {children}
+
+        <style jsx>{`
+            div {
+                border-bottom: 1px solid ${colors.grey400};
+                flex-grow: 0;
+                padding: 0 ${spacers.dp8};
+            }
+        `}</style>
+    </div>
+)
+
+LeftHeader.propTypes = {
+    children: PropTypes.node,
+    dataTest: PropTypes.string,
+}

package/src/left-side.js

@@ -0,0 +1,34 @@
+import { colors } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export const LeftSide = ({ children, dataTest, width }) => (
+    <div data-test={dataTest}>
+        {children}
+
+        {
+            /**
+             * Flex basis 0px to make sure right and left side
+             * always have the same width
+             */ ''
+        }
+        <style jsx>{`
+            div {
+                display: flex;
+                flex-direction: column;
+                background-color: ${colors.white};
+                border-radius: 3px;
+                border: 1px solid ${colors.grey400};
+                min-height: 240px;
+                max-width: 100%;
+                width: ${width};
+            }
+        `}</style>
+    </div>
+)
+
+LeftSide.propTypes = {
+    width: PropTypes.string.isRequired,
+    children: PropTypes.node,
+    dataTest: PropTypes.string,
+}

package/src/locales/en/translations.json

@@ -0,0 +1,7 @@
+{
+    "Reordering not allowed when filtering list": "Reordering not allowed when filtering list",
+    "Move selected items to top": "Move selected items to top",
+    "Move selected items up": "Move selected items up",
+    "Move selected items down": "Move selected items down",
+    "Move selected items to bottom": "Move selected items to bottom"
+}

package/src/locales/index.js

@@ -0,0 +1,16 @@
+//------------------------------------------------------------------------------
+// <auto-generated>
+// This code was generated by d2-i18n-generate.
+//
+// Changes to this file may cause incorrect behavior and will be lost if
+// the code is regenerated.
+// </auto-generated>
+//------------------------------------------------------------------------------
+import i18n from '@dhis2/d2-i18n'
+
+import enTranslations from './en/translations.json'
+
+const namespace = 'default'
+i18n.addResources('en', namespace, enTranslations)
+
+export default i18n

package/src/options-container.js

@@ -0,0 +1,127 @@
+import { CircularLoader } from '@dhis2-ui/loader'
+import PropTypes from 'prop-types'
+import React, { Fragment, useRef } from 'react'
+import { EndIntersectionDetector } from './end-intersection-detector.js'
+import { useOptionsKeyMonitor } from './transfer/use-options-key-monitor.js'
+
+export const OptionsContainer = ({
+    allOptionsKey,
+    dataTest,
+    emptyComponent,
+    onEndReached,
+    getOptionClickHandlers,
+    highlightedOptions,
+    loading,
+    renderOption,
+    options,
+    selected = false,
+    selectionHandler,
+    toggleHighlightedOption,
+}) => {
+    const scrollBoxRef = useRef(null)
+    const listRef = useRef(null)
+    useOptionsKeyMonitor({
+        scrollBoxRef,
+        listRef,
+        allOptionsKey,
+        onEndReached,
+    })
+    return (
+        <div className="optionsContainer">
+            {loading && (
+                <div className="loading">
+                    <CircularLoader />
+                </div>
+            )}
+
+            <div className="container" data-test={dataTest} ref={scrollBoxRef}>
+                <div className="content-container" ref={listRef}>
+                    {!options.length && emptyComponent}
+                    {options.map((option) => {
+                        const highlighted = !!highlightedOptions.find(
+                            (highlightedSourceOption) =>
+                                highlightedSourceOption === option.value
+                        )
+
+                        return (
+                            <Fragment key={option.value}>
+                                {renderOption({
+                                    ...option,
+                                    ...getOptionClickHandlers(
+                                        option,
+                                        selectionHandler,
+                                        toggleHighlightedOption
+                                    ),
+                                    highlighted,
+                                    selected,
+                                })}
+                            </Fragment>
+                        )
+                    })}
+
+                    {onEndReached && (
+                        <EndIntersectionDetector
+                            dataTest={`${dataTest}-endintersectiondetector`}
+                            rootRef={scrollBoxRef}
+                            onEndReached={onEndReached}
+                        />
+                    )}
+                </div>
+            </div>
+
+            <style jsx>{`
+                .optionsContainer {
+                    flex-grow: 1;
+                    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-container {
+                    z-index: 1;
+                    position: relative;
+                }
+
+                .loading + .container .content-container {
+                    filter: blur(2px);
+                }
+            `}</style>
+        </div>
+    )
+}
+
+OptionsContainer.propTypes = {
+    allOptionsKey: PropTypes.string.isRequired,
+    dataTest: PropTypes.string.isRequired,
+    getOptionClickHandlers: PropTypes.func.isRequired,
+    emptyComponent: PropTypes.node,
+    highlightedOptions: PropTypes.arrayOf(PropTypes.string),
+    loading: PropTypes.bool,
+    options: PropTypes.arrayOf(
+        PropTypes.shape({
+            label: PropTypes.string.isRequired,
+            value: PropTypes.string.isRequired,
+        })
+    ),
+    renderOption: PropTypes.func,
+    selected: PropTypes.bool,
+    selectionHandler: PropTypes.func,
+    toggleHighlightedOption: PropTypes.func,
+    onEndReached: PropTypes.func,
+}

package/src/remove-all.js

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

package/src/remove-individual.js

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

package/src/reordering-actions.js

@@ -0,0 +1,136 @@
+import { spacers } from '@dhis2/ui-constants'
+import { Button } from '@dhis2-ui/button'
+import { Tooltip } from '@dhis2-ui/tooltip'
+import PropTypes from 'prop-types'
+import React from 'react'
+import {
+    IconMoveDown,
+    IconMoveToBottom,
+    IconMoveToTop,
+    IconMoveUp,
+} from './icons.js'
+import i18n from './locales/index.js'
+
+const filterActiveTooltip = i18n.t('Reordering not allowed when filtering list')
+
+export const ReorderingActions = ({
+    dataTest,
+    disabledDown,
+    disabledUp,
+    filterActive,
+    onChangeUp,
+    onChangeDown,
+    onChangeToTop,
+    onChangeToBottom,
+}) => {
+    const moveToTopLabel = i18n.t('Move selected items to top')
+    const moveUpLabel = i18n.t('Move selected items up')
+    const moveDownLabel = i18n.t('Move selected items down')
+    const moveToBottomLabel = i18n.t('Move selected items to bottom')
+
+    const renderButtons = (tooltipHandlers = {}) => (
+        <div data-test={dataTest} {...tooltipHandlers}>
+            <Button
+                small
+                secondary
+                disabled={disabledUp}
+                onClick={() => !disabledUp && onChangeToTop()}
+                dataTest={`${dataTest}-buttonmovetotop`}
+                aria-label={moveToTopLabel}
+                icon={
+                    <IconMoveToTop
+                        dataTest={`${dataTest}-iconmovetotop`}
+                        disabled={disabledUp}
+                    />
+                }
+            />
+
+            <Button
+                small
+                secondary
+                disabled={disabledUp}
+                onClick={() => !disabledUp && onChangeUp()}
+                dataTest={`${dataTest}-buttonmoveup`}
+                aria-label={moveUpLabel}
+                icon={
+                    <IconMoveUp
+                        dataTest={`${dataTest}-iconmoveup`}
+                        disabled={disabledUp}
+                    />
+                }
+            />
+            <Button
+                small
+                secondary
+                disabled={disabledDown}
+                onClick={() => !disabledDown && onChangeDown()}
+                dataTest={`${dataTest}-buttonmovedown`}
+                aria-label={moveDownLabel}
+                icon={
+                    <IconMoveDown
+                        dataTest={`${dataTest}-iconmovedown`}
+                        disabled={disabledDown}
+                    />
+                }
+            />
+            <Button
+                small
+                secondary
+                disabled={disabledDown}
+                onClick={() => !disabledDown && onChangeToBottom()}
+                dataTest={`${dataTest}-buttonmovetobottom`}
+                aria-label={moveToBottomLabel}
+                icon={
+                    <IconMoveToBottom
+                        dataTest={`${dataTest}-iconmovetobottom`}
+                        disabled={disabledDown}
+                    />
+                }
+            />
+
+            <style jsx>{`
+                div {
+                    display: flex;
+                    justify-content: flex-end;
+                    margin-inline-start: auto;
+                    width: fit-content;
+                    gap: ${spacers.dp4};
+                    padding-top: ${spacers.dp8};
+                }
+
+                div:last-child {
+                    padding-bottom: ${spacers.dp8};
+                }
+            `}</style>
+        </div>
+    )
+
+    if (filterActive) {
+        return (
+            <Tooltip openDelay={500} content={filterActiveTooltip}>
+                {({ onMouseOver, onMouseOut, onFocus, onBlur, ref }) =>
+                    renderButtons({
+                        ref,
+                        onMouseOver,
+                        onMouseOut,
+                        onFocus,
+                        onBlur,
+                    })
+                }
+            </Tooltip>
+        )
+    }
+
+    return renderButtons()
+}
+
+ReorderingActions.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    onChangeDown: PropTypes.func.isRequired,
+    onChangeToBottom: PropTypes.func.isRequired,
+    onChangeToTop: PropTypes.func.isRequired,
+    onChangeUp: PropTypes.func.isRequired,
+    disabledDown: PropTypes.bool,
+    disabledUp: PropTypes.bool,
+    filterActive: PropTypes.bool,
+}

package/src/right-footer.js

@@ -0,0 +1,22 @@
+import { colors, spacers } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export const RightFooter = ({ children, dataTest }) => (
+    <div data-test={dataTest}>
+        {children}
+
+        <style jsx>{`
+            div {
+                flex-grow: 0;
+                border-top: 1px solid ${colors.grey400};
+                padding: 0 ${spacers.dp8};
+            }
+        `}</style>
+    </div>
+)
+
+RightFooter.propTypes = {
+    children: PropTypes.node,
+    dataTest: PropTypes.string,
+}

package/src/right-header.js

@@ -0,0 +1,22 @@
+import { colors, spacers } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export const RightHeader = ({ children, dataTest }) => (
+    <div data-test={dataTest}>
+        {children}
+
+        <style jsx>{`
+            div {
+                border-bottom: 1px solid ${colors.grey400};
+                flex-grow: 0;
+                padding: 0 ${spacers.dp8};
+            }
+        `}</style>
+    </div>
+)
+
+RightHeader.propTypes = {
+    children: PropTypes.node,
+    dataTest: PropTypes.string,
+}

package/src/right-side.js

@@ -0,0 +1,33 @@
+import { colors } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export const RightSide = ({ children, dataTest, width }) => (
+    <div data-test={dataTest}>
+        {children}
+
+        {
+            /**
+             * Flex basis 0px to make sure right and left side
+             * always have the same width
+             */ ''
+        }
+        <style jsx>{`
+            div {
+                background-color: ${colors.white};
+                border: 1px solid ${colors.grey400};
+                border-radius: 3px;
+                display: flex;
+                flex-direction: column;
+                max-width: 100%;
+                width: ${width};
+            }
+        `}</style>
+    </div>
+)
+
+RightSide.propTypes = {
+    width: PropTypes.string.isRequired,
+    children: PropTypes.node,
+    dataTest: PropTypes.string,
+}

package/src/transfer/add-all-selectable-source-options.js

@@ -0,0 +1,37 @@
+/**
+ * @param {Object} args
+ * @param {Object[]} args.sourceOptions
+ * @param {string[]} args.selected
+ * @param {Function} args.onChange
+ * @param {Function} arg.setHighlightedSourceOptions
+ * @returns {void}
+ */
+export const addAllSelectableSourceOptions = ({
+    sourceOptions,
+    onChange,
+    selected,
+    setHighlightedSourceOptions,
+}) => {
+    const enabledSourceOptions = sourceOptions.filter(
+        ({ disabled }) => !disabled
+    )
+
+    const newSelected = enabledSourceOptions.reduce(
+        (accumulatedSelected, enabledSourceOption) => [
+            ...accumulatedSelected,
+            enabledSourceOption.value,
+        ],
+        selected
+    )
+
+    setHighlightedSourceOptions([])
+
+    // If we ever allow maxSelection to be any value
+    // other than 1 and Infinity, we need to think
+    // about how this should behave:
+    //
+    // Either we hide this button when it's not "Infinity",
+    // or we have to decide whether we want to take the first
+    // nth options or the last
+    onChange({ selected: newSelected })
+}

package/src/transfer/add-individual-source-options.js

@@ -0,0 +1,61 @@
+/**
+ * @param {Object} args
+ * @param {bool} args.filterable
+ * @param {Object[]} args.sourceOptions
+ * @param {string[]} args.highlightedSourceOptions
+ * @param {string[]} args.selected
+ * @param {Function} args.onChange
+ * @param {Function} args.setHighlightedSourceOptions
+ * @returns void
+ */
+export const addIndividualSourceOptions = ({
+    filterable,
+    sourceOptions,
+    highlightedSourceOptions,
+    maxSelections,
+    onChange,
+    selected,
+    setHighlightedSourceOptions,
+}) => {
+    /**
+     * Creates a subset of the highlighted options to reflect a changed
+     * filter value in case previously highlighted options are now
+     * hidden.
+     *
+     * This enables us to keep items highlighted while searching for
+     * a particular one.
+     *
+     * With this subset we only select the subset when the user
+     * clicks the "add individuals" button
+     */
+    const filteredHighlightedSourceOptions = filterable
+        ? highlightedSourceOptions.filter((value) =>
+              sourceOptions.find(
+                  (filteredOption) => filteredOption.value === value
+              )
+          )
+        : highlightedSourceOptions
+
+    const newSelected = filteredHighlightedSourceOptions.reduce(
+        (accumulatedSelected, value) => [
+            ...accumulatedSelected,
+            filteredHighlightedSourceOptions.find(
+                (filteredHighlightedSourceOption) =>
+                    filteredHighlightedSourceOption === value
+            ),
+        ],
+        selected
+    )
+
+    setHighlightedSourceOptions([])
+
+    /**
+     * This will extract from the end, hence the "-1 *"
+     * As the "newest" additions are always at the end of the array,
+     * it's safe to just take the last nth (depending on maxSelection)
+     * to always get the right ones
+     */
+    onChange({
+        selected: newSelected.slice(-1 * maxSelections),
+    })
+}

package/src/transfer/create-double-click-handlers.js

@@ -0,0 +1,36 @@
+/**
+ * @param {Object} args
+ * @param {number} args.maxSelections
+ * @param {string[]} args.selected
+ * @param {Function} args.onChange
+ * @param {Function} args.setHighlightedSourceOptions
+ * @param {Function} args.setHighlightedPickedOptions
+ * @returns void
+ */
+export const createDoubleClickHandlers = ({
+    maxSelections,
+    onChange,
+    selected,
+    setHighlightedPickedOptions,
+    setHighlightedSourceOptions,
+}) => {
+    const selectSingleOption = ({ value }) => {
+        const newSelected = selected.includes(value)
+            ? selected
+            : [...selected, value]
+
+        setHighlightedSourceOptions([])
+        onChange({ selected: newSelected.slice(-1 * maxSelections) })
+    }
+
+    const deselectSingleOption = ({ value }) => {
+        const newSelected = selected.filter(
+            (curSelected) => curSelected !== value
+        )
+
+        setHighlightedPickedOptions([])
+        onChange({ selected: newSelected })
+    }
+
+    return { selectSingleOption, deselectSingleOption }
+}

package/src/transfer/default-filter-callback.js

@@ -0,0 +1,17 @@
+/**
+ * @param {Object[]} options
+ * @param {string} filter
+ * @returns {Object[]}
+ */
+export const defaultFilterCallback = (options, filter) => {
+    if (filter === '') {
+        return options
+    }
+    try {
+        const regex = new RegExp(filter, 'i')
+        return options.filter(({ label }) => label.match(regex))
+    } catch {
+        console.warn('Invalid regex filter:', filter)
+        return options
+    }
+}

package/src/transfer/get-highlighted-picked-indices.js

@@ -0,0 +1,26 @@
+/**
+ * Returns the indices, in ascending order, of `highlightedPickedOptions`
+ * within `selected`. Values in `highlightedPickedOptions` that don't appear
+ * in `selected` are ignored, so callers can pass a potentially stale
+ * highlight list without filtering first.
+ *
+ * Runs in O(n) over `selected` via a Set lookup.
+ *
+ * @param {Object} args
+ * @param {string[]} args.selected
+ * @param {string[]} args.highlightedPickedOptions
+ * @returns {number[]}
+ */
+export const getHighlightedPickedIndices = ({
+    selected,
+    highlightedPickedOptions,
+}) => {
+    const highlightedSet = new Set(highlightedPickedOptions)
+    const indices = []
+    selected.forEach((value, index) => {
+        if (highlightedSet.has(value)) {
+            indices.push(index)
+        }
+    })
+    return indices
+}

package/src/transfer/get-option-click-handlers.js

@@ -0,0 +1,19 @@
+import { getModeByModifierKey } from '../common/index.js'
+
+/**
+ * @param {Object} option
+ * @param {Function} selectionHandler
+ * @param {Function} toggleHighlightedOption
+ * @returns {Object}
+ */
+export const getOptionClickHandlers = (
+    option,
+    selectionHandler,
+    toggleHighlightedOption
+) => ({
+    onClick: (_, event) => {
+        const mode = getModeByModifierKey(event)
+        toggleHighlightedOption({ option, mode })
+    },
+    onDoubleClick: selectionHandler,
+})