@dhis2-ui/organisation-unit-tree 10.16.2 → 10.16.3

package/src/organisation-unit-node/label/icon-empty.js

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export const IconEmpty = ({ dataTest }) => (
+    <svg
+        height="18px"
+        version="1.1"
+        viewBox="0 0 18 18"
+        width="18px"
+        data-test={`${dataTest}-iconempty`}
+    >
+        <g
+            fill="none"
+            fillRule="evenodd"
+            id="icon/empty"
+            stroke="none"
+            strokeWidth="1"
+        />
+
+        <style jsx>{`
+            svg {
+                display: block;
+                margin: 3px 0;
+            }
+        `}</style>
+    </svg>
+)
+
+IconEmpty.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+}

package/src/organisation-unit-node/label/icon-folder-closed.js

@@ -0,0 +1,38 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export const IconFolderClosed = ({ dataTest }) => (
+    <svg
+        width="18px"
+        height="18px"
+        viewBox="0 0 18 18"
+        version="1.1"
+        data-test={`${dataTest}-iconfolderclosed`}
+    >
+        <g
+            id="icon/folder/closed"
+            stroke="none"
+            strokeWidth="1"
+            fill="none"
+            fillRule="evenodd"
+        >
+            <path
+                d="M2,3.5 C1.17157288,3.5 0.5,4.17157288 0.5,5 L0.5,13 C0.5,13.8284271 1.17157288,14.5 2,14.5 L12,14.5 C12.8284271,14.5 13.5,13.8284271 13.5,13 L13.5,7 C13.5,6.17157288 12.8284271,5.5 12,5.5 L6.69098301,5.5 L5.82917961,3.7763932 C5.7444836,3.60700119 5.57135204,3.5 5.38196601,3.5 L2,3.5 Z"
+                id="Path-2"
+                stroke="#6C7787"
+                fill="#D5DDE5"
+            />
+        </g>
+
+        <style jsx>{`
+            svg {
+                display: block;
+                margin: 3px 0;
+            }
+        `}</style>
+    </svg>
+)
+
+IconFolderClosed.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+}

package/src/organisation-unit-node/label/icon-folder-open.js

@@ -0,0 +1,49 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export const IconFolderOpen = ({ dataTest }) => (
+    <svg
+        width="18px"
+        height="18px"
+        viewBox="0 0 18 18"
+        version="1.1"
+        data-test={`${dataTest}-iconfolderopen`}
+    >
+        <g
+            id="icon/folder/open"
+            stroke="none"
+            strokeWidth="1"
+            fill="none"
+            fillRule="evenodd"
+        >
+            <g
+                id="Group"
+                transform="translate(0.000000, 3.000000)"
+                stroke="#6C7787"
+            >
+                <path
+                    d="M2,0.5 C1.17157288,0.5 0.5,1.17157288 0.5,2 L0.5,10 C0.5,10.8284271 1.17157288,11.5 2,11.5 L12,11.5 C12.8284271,11.5 13.5,10.8284271 13.5,10 L13.5,4 C13.5,3.17157288 12.8284271,2.5 12,2.5 L6.69098301,2.5 L5.82917961,0.776393202 C5.7444836,0.607001188 5.57135204,0.5 5.38196601,0.5 L2,0.5 Z"
+                    id="Path-2"
+                    fill="#A0ADBA"
+                />
+
+                <path
+                    d="M1.53632259,10.7093809 C1.47575089,10.7941813 1.44318932,10.8957885 1.44318932,11 C1.44318932,11.2761424 1.66704695,11.5 1.94318932,11.5 L12.4853821,11.5 C12.6468577,11.5 12.7983931,11.4220172 12.8922488,11.2906191 L16.4636774,6.2906191 C16.5242491,6.20581872 16.5568107,6.10421149 16.5568107,6 C16.5568107,5.72385763 16.3329531,5.5 16.0568107,5.5 L5.5146179,5.5 C5.35314234,5.5 5.20160692,5.57798284 5.10775116,5.7093809 L1.53632259,10.7093809 Z"
+                    id="Path-3"
+                    fill="#FBFCFD"
+                />
+            </g>
+        </g>
+
+        <style jsx>{`
+            svg {
+                margin: 3px 0;
+                display: block;
+            }
+        `}</style>
+    </svg>
+)
+
+IconFolderOpen.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+}

package/src/organisation-unit-node/label/icon-single.js

@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export const IconSingle = ({ dataTest }) => (
+    <svg
+        height="18px"
+        version="1.1"
+        viewBox="0 0 18 18"
+        width="18px"
+        data-test={`${dataTest}-iconsingle`}
+    >
+        <g
+            fill="none"
+            fillRule="evenodd"
+            id="icon/single"
+            stroke="none"
+            strokeWidth="1"
+        >
+            <rect
+                fill="#A0ADBA"
+                height="4"
+                id="Rectangle"
+                rx="1"
+                width="4"
+                x="7"
+                y="7"
+            />
+        </g>
+
+        <style jsx>{`
+            svg {
+                display: block;
+                margin: 3px 0;
+            }
+        `}</style>
+    </svg>
+)
+
+IconSingle.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+}

package/src/organisation-unit-node/label/icon.js

@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { IconEmpty } from './icon-empty.js'
+import { IconFolderClosed } from './icon-folder-closed.js'
+import { IconFolderOpen } from './icon-folder-open.js'
+import { IconSingle } from './icon-single.js'
+
+/**
+ * @param {Object} props
+ * @param {bool} props.hasChildren
+ * @param {bool} props.open
+ * @returns {React.Component}
+ */
+export const Icon = ({ loading, hasChildren, open, dataTest }) => {
+    if (loading) {
+        return <IconEmpty dataTest={dataTest} />
+    }
+
+    if (!hasChildren) {
+        return <IconSingle dataTest={dataTest} />
+    }
+
+    if (open) {
+        return <IconFolderOpen dataTest={dataTest} />
+    }
+
+    return <IconFolderClosed dataTest={dataTest} />
+}
+
+Icon.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    hasChildren: PropTypes.bool,
+    loading: PropTypes.bool,
+    open: PropTypes.bool,
+}

package/src/organisation-unit-node/label/iconized-checkbox.js

@@ -0,0 +1,67 @@
+import { Checkbox } from '@dhis2-ui/checkbox'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Icon } from './icon.js'
+
+export const IconizedCheckbox = ({
+    checked,
+    dataTest,
+    hasChildren,
+    indeterminate,
+    children,
+    loading,
+    name,
+    open,
+    value,
+    onChange,
+}) => {
+    const icon = (
+        <Icon
+            loading={loading}
+            open={open}
+            hasChildren={hasChildren}
+            dataTest={dataTest}
+        />
+    )
+
+    const checkboxLabel = (
+        <>
+            <span>{icon}</span>
+            {children}
+
+            <style jsx>{`
+                span {
+                    display: inline-block;
+                    margin-inline-end: 4px;
+                }
+            `}</style>
+        </>
+    )
+
+    return (
+        <>
+            <Checkbox
+                dense
+                checked={checked}
+                name={name}
+                value={value}
+                label={checkboxLabel}
+                indeterminate={indeterminate}
+                onChange={onChange}
+            />
+        </>
+    )
+}
+
+IconizedCheckbox.propTypes = {
+    checked: PropTypes.bool.isRequired,
+    children: PropTypes.any.isRequired,
+    dataTest: PropTypes.string.isRequired,
+    hasChildren: PropTypes.bool.isRequired,
+    indeterminate: PropTypes.bool.isRequired,
+    loading: PropTypes.bool.isRequired,
+    name: PropTypes.string.isRequired,
+    open: PropTypes.bool.isRequired,
+    value: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+}

package/src/organisation-unit-node/label/index.js

@@ -0,0 +1 @@
+export { Label } from './label.js'

package/src/organisation-unit-node/label/label-container.js

@@ -0,0 +1,36 @@
+import { colors } from '@dhis2/ui-constants'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+/**
+ * @param {Object} props
+ * @param {bool} props.highlighted
+ * @param {React.Component|React.Component[]} props.children
+ * @returns {React.Component}
+ */
+export const LabelContainer = ({ highlighted, children }) => (
+    <div className={cx({ highlighted })}>
+        <span>{children}</span>
+
+        <style jsx>{`
+            div {
+                display: flex;
+            }
+
+            span {
+                display: block;
+            }
+
+            .highlighted {
+                background: ${colors.teal200};
+                padding-inline-end: 4px;
+            }
+        `}</style>
+    </div>
+)
+
+LabelContainer.propTypes = {
+    children: PropTypes.node,
+    highlighted: PropTypes.bool,
+}

package/src/organisation-unit-node/label/label.js

@@ -0,0 +1,146 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { orgUnitPathPropType } from '../../prop-types.js'
+import { DisabledSelectionLabel } from './disabled-selection-label.js'
+import { IconizedCheckbox } from './iconized-checkbox.js'
+import { LabelContainer } from './label-container.js'
+import { SingleSelectionLabel } from './single-selection-label.js'
+
+const createNewSelected = ({ selected, path, checked, singleSelection }) => {
+    const pathIndex = selected.indexOf(path)
+
+    if (checked && pathIndex !== -1) {
+        return selected
+    }
+    if (singleSelection && checked) {
+        return [path]
+    }
+    if (checked) {
+        return [...selected, path]
+    }
+    if (pathIndex === -1) {
+        return selected
+    }
+    if (singleSelection) {
+        return []
+    }
+    if (selected.indexOf(path) === 0) {
+        return selected.slice(1)
+    }
+
+    const prevSlice = selected.slice(0, pathIndex)
+    const nextSlice = selected.slice(pathIndex + 1)
+    return [...prevSlice, ...nextSlice]
+}
+
+const Label = ({
+    checked,
+    children,
+    dataTest,
+    disableSelection,
+    fullPath,
+    hasChildren,
+    hasSelectedDescendants,
+    highlighted,
+    loading,
+    node,
+    onChange,
+    onToggleOpen,
+    open,
+    rootId,
+    selected,
+    singleSelection,
+}) => {
+    const onClick = ({ checked }, event) => {
+        const newSelected = createNewSelected({
+            path: fullPath,
+            selected,
+            checked,
+            singleSelection,
+            rootId,
+        })
+
+        // @TODO: It'd make more sense to pass the node as an object
+        // instead of spread it. But that'd be a breaking change
+        const payload = {
+            ...node,
+            path: fullPath,
+            checked,
+            selected: newSelected,
+        }
+
+        onChange(payload, event)
+    }
+
+    if (disableSelection) {
+        return (
+            <LabelContainer highlighted={highlighted}>
+                <DisabledSelectionLabel
+                    loading={loading}
+                    onToggleOpen={onToggleOpen}
+                >
+                    {children}
+                </DisabledSelectionLabel>
+            </LabelContainer>
+        )
+    }
+
+    if (singleSelection) {
+        return (
+            <LabelContainer highlighted={highlighted}>
+                <SingleSelectionLabel
+                    checked={checked}
+                    onChange={onClick}
+                    loading={loading}
+                >
+                    {children}
+                </SingleSelectionLabel>
+            </LabelContainer>
+        )
+    }
+
+    return (
+        <LabelContainer highlighted={highlighted}>
+            <IconizedCheckbox
+                dataTest={dataTest}
+                checked={checked}
+                name="org-unit"
+                value={node.id}
+                loading={loading}
+                indeterminate={!checked && hasSelectedDescendants}
+                onChange={onClick}
+                open={open}
+                hasChildren={hasChildren}
+            >
+                {children}
+            </IconizedCheckbox>
+        </LabelContainer>
+    )
+}
+
+Label.propTypes = {
+    // This is `any` so it can be customized by the app
+    children: PropTypes.any.isRequired,
+    dataTest: PropTypes.string.isRequired,
+    fullPath: PropTypes.string.isRequired,
+    hasChildren: PropTypes.bool.isRequired,
+    loading: PropTypes.bool.isRequired,
+    node: PropTypes.shape({
+        displayName: PropTypes.string.isRequired,
+        id: PropTypes.string.isRequired,
+        children: PropTypes.number,
+        path: PropTypes.string,
+    }).isRequired,
+    open: PropTypes.bool.isRequired,
+    rootId: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    onToggleOpen: PropTypes.func.isRequired,
+    checked: PropTypes.bool,
+    disableSelection: PropTypes.bool,
+    hasSelectedDescendants: PropTypes.bool,
+    highlighted: PropTypes.bool,
+    selected: PropTypes.arrayOf(orgUnitPathPropType),
+    singleSelection: PropTypes.bool,
+}
+
+export { Label }

package/src/organisation-unit-node/label/single-selection-label.js

@@ -0,0 +1,60 @@
+import { colors } from '@dhis2/ui-constants'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+/**
+ * @param {Object} props
+ * @param {string} props.label
+ * @param {bool} [props.checked]
+ * @param {bool} [props.loading]
+ * @param {Function} [props.onChange]
+ * @returns {React.Component}
+ */
+export const SingleSelectionLabel = ({
+    checked,
+    children,
+    onChange,
+    loading,
+}) => (
+    <span
+        onClick={(event) => {
+            const payload = { checked: !checked }
+            onChange(payload, event)
+        }}
+        className={cx({ checked, loading })}
+    >
+        {children}
+
+        <style jsx>{`
+            span {
+                background: transparent;
+                border-radius: 3px;
+                color: ${colors.grey900};
+                cursor: pointer;
+                display: inline-block;
+                font-size: 14px;
+                line-height: 24px;
+                padding: 0 5px;
+                user-select: none;
+                white-space: nowrap;
+            }
+
+            .checked {
+                background: ${colors.teal700};
+                color: white;
+            }
+
+            .loading {
+                cursor: auto;
+            }
+        `}</style>
+    </span>
+)
+
+SingleSelectionLabel.propTypes = {
+    children: PropTypes.any.isRequired,
+    checked: PropTypes.bool,
+    loading: PropTypes.bool,
+    onChange: PropTypes.func,
+}

package/src/organisation-unit-node/loading-spinner.js

@@ -0,0 +1,22 @@
+import { CircularLoader } from '@dhis2-ui/loader'
+import React from 'react'
+import { resolve } from 'styled-jsx/css'
+
+const loadingSpinnerStyles = resolve`
+    .extrasmall {
+        display: block;
+        margin: 3px 0;
+    }
+`
+
+export const LoadingSpinner = () => (
+    <div>
+        <CircularLoader extrasmall className={loadingSpinnerStyles.className} />
+        <style>{loadingSpinnerStyles.styles}</style>
+        <style jsx>{`
+            div {
+                width: 24px;
+            }
+        `}</style>
+    </div>
+)

package/src/organisation-unit-node/organisation-unit-node-children.js

@@ -0,0 +1,123 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { isPathIncluded } from '../helpers/index.js'
+import i18n from '../locales/index.js'
+import { orgUnitPathPropType } from '../prop-types.js'
+import { LoadingSpinner } from './loading-spinner.js'
+import { useOrgChildren } from './use-org-children.js'
+
+const getFilteredChildren = ({ orgChildren, filter, node }) => {
+    if (!filter?.length) {
+        return orgChildren
+    }
+
+    return orgChildren.filter((child) => {
+        return isPathIncluded(filter, `${node.path}/${child.id}`)
+    })
+}
+
+export const OrganisationUnitNodeChildren = ({
+    node,
+    autoExpandLoadingError,
+    dataTest,
+    disableSelection,
+    displayProperty,
+    expanded,
+    filter,
+    highlighted,
+    isUserDataViewFallback,
+    onChange,
+    onChildrenLoaded,
+    onCollapse,
+    onExpand,
+    parentPath,
+    renderNodeLabel,
+    rootId,
+    selected,
+    singleSelection,
+    suppressAlphabeticalSorting,
+    OrganisationUnitNode,
+}) => {
+    const orgChildren = useOrgChildren({
+        node,
+        isUserDataViewFallback,
+        suppressAlphabeticalSorting,
+        onComplete: onChildrenLoaded,
+        displayProperty,
+    })
+
+    const displayChildren =
+        orgChildren.called && !orgChildren.loading && !orgChildren.error
+    const filteredChildren = displayChildren
+        ? getFilteredChildren({ orgChildren: orgChildren.data, filter, node })
+        : []
+
+    return (
+        <>
+            {orgChildren.loading && <LoadingSpinner />}
+            {orgChildren.error && `Error: ${orgChildren.error}`}
+            {displayChildren &&
+                !filteredChildren.length &&
+                i18n.t('No children match filter')}
+
+            {!!filteredChildren.length &&
+                filteredChildren.map((child) => {
+                    const childPath = `${parentPath}/${child.id}`
+
+                    return (
+                        <OrganisationUnitNode
+                            autoExpandLoadingError={autoExpandLoadingError}
+                            dataTest={dataTest}
+                            disableSelection={disableSelection}
+                            displayName={child.displayName}
+                            displayProperty={displayProperty}
+                            expanded={expanded}
+                            filter={filter}
+                            highlighted={highlighted}
+                            id={child.id}
+                            isUserDataViewFallback={isUserDataViewFallback}
+                            key={childPath}
+                            onChange={onChange}
+                            onChildrenLoaded={onChildrenLoaded}
+                            onCollapse={onCollapse}
+                            onExpand={onExpand}
+                            path={childPath}
+                            renderNodeLabel={renderNodeLabel}
+                            rootId={rootId}
+                            selected={selected}
+                            singleSelection={singleSelection}
+                            suppressAlphabeticalSorting={
+                                suppressAlphabeticalSorting
+                            }
+                        />
+                    )
+                })}
+        </>
+    )
+}
+
+OrganisationUnitNodeChildren.propTypes = {
+    // Prevent cirular imports
+    OrganisationUnitNode: PropTypes.func.isRequired,
+    dataTest: PropTypes.string.isRequired,
+    node: PropTypes.object.isRequired,
+    parentPath: PropTypes.string.isRequired,
+    renderNodeLabel: PropTypes.func.isRequired,
+    rootId: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+
+    autoExpandLoadingError: PropTypes.bool,
+    disableSelection: PropTypes.bool,
+    displayProperty: PropTypes.oneOf(['displayName', 'displayShortName']),
+    expanded: PropTypes.arrayOf(orgUnitPathPropType),
+    filter: PropTypes.arrayOf(orgUnitPathPropType),
+    highlighted: PropTypes.arrayOf(orgUnitPathPropType),
+    isUserDataViewFallback: PropTypes.bool,
+    selected: PropTypes.arrayOf(orgUnitPathPropType),
+    singleSelection: PropTypes.bool,
+    suppressAlphabeticalSorting: PropTypes.bool,
+
+    onChildrenLoaded: PropTypes.func,
+    onCollapse: PropTypes.func,
+    onExpand: PropTypes.func,
+}