feat(transfer): add component

src/Transfer/Actions.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import propTypes from '@dhis2/prop-types'
+import { spacers } from '../theme.js'
+
+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,
+}

src/Transfer/AddAll.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import propTypes from '@dhis2/prop-types'
+
+import { Button } from '../Button'
+import { IconAddAll } from './icons'
+
+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,
+}

src/Transfer/AddIndividual.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import propTypes from '@dhis2/prop-types'
+
+import { Button } from '../Button'
+import { IconAddIndividual } from './icons'
+
+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,
+}

src/Transfer/Container.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import propTypes from '@dhis2/prop-types'
+
+export const Container = ({ children, dataTest, className, height }) => (
+    <div data-test={dataTest} className={className}>
+        {children}
+
+        <style jsx>{`
+            div {
+                display: flex;
+                width: 100%;
+                height: ${height};
+            }
+        `}</style>
+    </div>
+)
+
+Container.propTypes = {
+    height: propTypes.string.isRequired,
+    children: propTypes.node,
+    className: propTypes.string,
+    dataTest: propTypes.string,
+}

src/Transfer/Filter.js

@@ -0,0 +1,46 @@
+import { resolve } from 'styled-jsx/css'
+import React from 'react'
+import propTypes from '@dhis2/prop-types'
+
+import { InputField } from '../InputField.js'
+import { spacers } from '../theme.js'
+
+// "div" is required for specificity
+const filterStyles = resolve`
+    div {
+        margin: 0;
+    }
+`
+
+export const Filter = ({ dataTest, filter, onChange, label }) => {
+    return (
+        <div data-test={dataTest}>
+            <InputField
+                className={filterStyles.className}
+                label={label}
+                type="search"
+                name={dataTest}
+                value={filter}
+                onChange={onChange}
+            />
+
+            {filterStyles.styles}
+            <style jsx>{`
+                div {
+                    padding-bottom: ${spacers.dp8};
+                }
+
+                div:first-child {
+                    padding-top: ${spacers.dp8};
+                }
+            `}</style>
+        </div>
+    )
+}
+
+Filter.propTypes = {
+    dataTest: propTypes.string.isRequired,
+    filter: propTypes.string.isRequired,
+    onChange: propTypes.func.isRequired,
+    label: propTypes.string,
+}

src/Transfer/LeftFooter.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import propTypes from '@dhis2/prop-types'
+
+import { borderColor } from './common.js'
+import { spacers } from '../theme.js'
+
+export const LeftFooter = ({ children, dataTest }) => (
+    <div data-test={dataTest}>
+        {children}
+
+        <style jsx>{`
+            div {
+                flex-grow: 0;
+                border-top: 1px solid ${borderColor};
+                padding: 0 ${spacers.dp8};
+            }
+        `}</style>
+    </div>
+)
+
+LeftFooter.propTypes = {
+    children: propTypes.node,
+    dataTest: propTypes.string,
+}

src/Transfer/LeftHeader.js

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

src/Transfer/LeftSide.js

@@ -0,0 +1,34 @@
+import React from 'react'
+import propTypes from '@dhis2/prop-types'
+
+import { borderColor, borderRadius } from './common.js'
+
+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;
+                border-radius: ${borderRadius};
+                border: 1px solid ${borderColor};
+                min-height: 240px;
+                max-width: 100%;
+                width: ${width};
+            }
+        `}</style>
+    </div>
+)
+
+LeftSide.propTypes = {
+    width: propTypes.string.isRequired,
+    children: propTypes.node,
+    dataTest: propTypes.string,
+}

src/Transfer/PickedOptions.js

@@ -0,0 +1,51 @@
+import React from 'react'
+import propTypes from '@dhis2/prop-types'
+
+import { findOption, getModeByModifierKey } from './common'
+import { multiSelectedPropType } from '../common-prop-types'
+import { spacers } from '../theme.js'
+
+export const PickedOptions = ({
+    children,
+    dataTest,
+    toggleHighlightedPickedOption,
+    selectedEmptyComponent,
+    highlightedPickedOptions,
+    deselectSingleOption,
+}) => (
+    <div data-test={dataTest}>
+        {!React.Children.count(children) && selectedEmptyComponent}
+        {React.Children.map(children, child => {
+            const option = {
+                label: child.props.label,
+                value: child.props.value,
+            }
+
+            return React.cloneElement(child, {
+                onClick: (_, event) => {
+                    const mode = getModeByModifierKey(event)
+                    toggleHighlightedPickedOption({ option, mode })
+                },
+                onDoubleClick: deselectSingleOption,
+                highlighted: !!findOption(highlightedPickedOptions, option),
+            })
+        })}
+
+        <style jsx>{`
+            div {
+                padding: ${spacers.dp4} 0;
+                flex-grow: 1;
+                overflow-y: auto;
+            }
+        `}</style>
+    </div>
+)
+
+PickedOptions.propTypes = {
+    children: propTypes.node.isRequired,
+    dataTest: propTypes.string.isRequired,
+    deselectSingleOption: propTypes.func.isRequired,
+    toggleHighlightedPickedOption: propTypes.func.isRequired,
+    highlightedPickedOptions: multiSelectedPropType,
+    selectedEmptyComponent: propTypes.node,
+}

src/Transfer/RemoveAll.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import propTypes from '@dhis2/prop-types'
+
+import { Button } from '../Button'
+import { IconRemoveAll } from './icons'
+
+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,
+}

src/Transfer/RemoveIndividual.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import propTypes from '@dhis2/prop-types'
+
+import { Button } from '../Button'
+import { IconRemoveIndividual } from './icons'
+
+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,
+}