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

package/src/select/filterable-menu.js

@@ -0,0 +1,106 @@
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+import { FilterInput } from './filter-input.js'
+import { NoMatch } from './no-match.js'
+import { filterIgnored, checkIfValidOption } from './option-helpers.js'
+
+export class FilterableMenu extends Component {
+    state = {
+        filter: '',
+    }
+
+    onFilterChange = ({ value }) => {
+        this.setState({ filter: value })
+    }
+
+    render() {
+        const {
+            dataTest,
+            options,
+            onChange,
+            selected,
+            empty,
+            handleClose,
+            handleFocusInput,
+            placeholder,
+            noMatchText,
+            Menu,
+        } = this.props
+        const { filter } = this.state
+        const menuProps = {
+            onChange,
+            selected,
+            empty,
+            handleClose,
+            handleFocusInput,
+            dataTest,
+        }
+
+        const renderedOptions = filterIgnored(options)
+
+        // If there are no options or there's no filter, just pass everything through
+        if (React.Children.count(renderedOptions) === 0 || !filter) {
+            return (
+                <React.Fragment>
+                    <FilterInput
+                        dataTest={`${dataTest}-filterinput`}
+                        placeholder={placeholder}
+                        value={filter}
+                        onChange={this.onFilterChange}
+                    />
+                    <Menu {...menuProps} options={options} />
+                </React.Fragment>
+            )
+        }
+
+        const filtered = React.Children.map(options, (child) => {
+            const isValidOption = checkIfValidOption(child)
+
+            // Filter it out if it's an invalid option
+            if (!isValidOption) {
+                return null
+            }
+
+            const { label } = child.props
+
+            // Filter by label, because that's the part of an option that's displayed to the user
+            const match = label.toLowerCase().includes(filter.toLowerCase())
+
+            return match ? child : null
+        })
+
+        const hasMatch = React.Children.count(filtered) > 0
+
+        return (
+            <React.Fragment>
+                <FilterInput
+                    dataTest={`${dataTest}-filterinput`}
+                    placeholder={placeholder}
+                    value={filter}
+                    onChange={this.onFilterChange}
+                />
+                {hasMatch ? (
+                    <Menu {...menuProps} options={filtered} />
+                ) : (
+                    <NoMatch message={noMatchText} />
+                )}
+            </React.Fragment>
+        )
+    }
+}
+
+FilterableMenu.propTypes = {
+    Menu: PropTypes.elementType.isRequired,
+    dataTest: PropTypes.string.isRequired,
+    noMatchText: PropTypes.string.isRequired,
+    selected: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.arrayOf(PropTypes.string),
+    ]).isRequired,
+    empty: PropTypes.node,
+    handleClose: PropTypes.func,
+    handleFocusInput: PropTypes.func,
+    options: PropTypes.node,
+    placeholder: PropTypes.string,
+    onChange: PropTypes.func,
+}

package/src/select/index.js

@@ -0,0 +1,14 @@
+export { Select } from './select.js'
+export { Loading } from './loading.js'
+export { FilterableMenu } from './filterable-menu.js'
+export { Empty } from './empty.js'
+export {
+    checkIfValidOption,
+    filterIgnored,
+    findOptionChild,
+    findOption,
+    removeOption,
+} from './option-helpers.js'
+export { InputClearButton } from './input-clear-button.js'
+export { InputPlaceholder } from './input-placeholder.js'
+export { InputPrefix } from './input-prefix.js'

package/src/select/input-clear-button.js

@@ -0,0 +1,66 @@
+import { colors, theme } from '@dhis2/ui-constants'
+import { Tooltip } from '@dhis2-ui/tooltip'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const InputClearButton = ({ onClear, clearText, className, dataTest }) => (
+    <Tooltip openDelay={500} content={clearText}>
+        <button
+            data-test={dataTest}
+            onClick={onClear}
+            type="button"
+            className={className}
+        >
+            <svg
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Zm3.536-5.879a1 1 0 1 1-1.415 1.414l-2.12-2.12-2.122 2.121a1 1 0 1 1-1.415-1.414L6.586 8 4.464 5.878A1 1 0 1 1 5.88 4.464L8 6.586l2.121-2.121a1 1 0 1 1 1.415 1.414L9.415 8l2.12 2.121Z"
+                    fill="none"
+                />
+            </svg>
+            <style jsx>{`
+                button {
+                    background: none;
+                    border: none;
+                    display: flex;
+                    flex-shrink: 0;
+                    align-items: center;
+                    justify-content: center;
+                    cursor: pointer;
+                    height: 24px;
+                    width: 24px;
+                    border-radius: 3px;
+                }
+                button svg {
+                    flex-shrink: 0;
+                }
+                button svg path {
+                    fill: ${colors.grey500};
+                }
+                button:hover svg path {
+                    fill: ${colors.grey800};
+                }
+                button:hover {
+                    background: ${colors.grey200};
+                }
+                button:focus {
+                    outline: 2px solid ${theme.focus};
+                }
+            `}</style>
+        </button>
+    </Tooltip>
+)
+
+InputClearButton.propTypes = {
+    clearText: PropTypes.string.isRequired,
+    dataTest: PropTypes.string.isRequired,
+    onClear: PropTypes.func.isRequired,
+    className: PropTypes.string,
+}
+
+export { InputClearButton }

package/src/select/input-placeholder.js

@@ -0,0 +1,30 @@
+import { colors } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const InputPlaceholder = ({ placeholder, className, dataTest }) => {
+    if (!placeholder) {
+        return null
+    }
+
+    return (
+        <div className={className} data-test={dataTest}>
+            {placeholder}
+
+            <style jsx>{`
+                div {
+                    color: ${colors.grey600};
+                    user-select: none;
+                }
+            `}</style>
+        </div>
+    )
+}
+
+InputPlaceholder.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    className: PropTypes.string,
+    placeholder: PropTypes.string,
+}
+
+export { InputPlaceholder }

package/src/select/input-prefix.js

@@ -0,0 +1,32 @@
+import { colors, spacers } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const InputPrefix = ({ prefix, className, dataTest }) => {
+    if (!prefix) {
+        return null
+    }
+
+    return (
+        <div className={className} data-test={dataTest}>
+            {prefix}
+
+            <style jsx>{`
+                div {
+                    color: ${colors.grey600};
+                    padding-inline-end: ${spacers.dp12};
+                    font-size: 14px;
+                    user-select: none;
+                }
+            `}</style>
+        </div>
+    )
+}
+
+InputPrefix.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    className: PropTypes.string,
+    prefix: PropTypes.string,
+}
+
+export { InputPrefix }

package/src/select/input-wrapper.js

@@ -0,0 +1,114 @@
+import { colors, theme, sharedPropTypes } from '@dhis2/ui-constants'
+import { IconChevronDown16 } from '@dhis2/ui-icons'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const InputWrapper = ({
+    dataTest,
+    onToggle,
+    children,
+    tabIndex = '0',
+    error,
+    warning,
+    valid,
+    disabled,
+    dense,
+    className,
+    inputRef,
+}) => {
+    const classNames = cx(className, 'root', {
+        error,
+        warning,
+        valid,
+        disabled,
+        dense,
+    })
+
+    return (
+        <div
+            className={classNames}
+            onClick={onToggle}
+            tabIndex={tabIndex}
+            ref={inputRef}
+            data-test={dataTest}
+        >
+            <div className="root-children">{children}</div>
+            <div className="root-right">
+                <IconChevronDown16 />
+            </div>
+
+            <style jsx>{`
+                .root {
+                    align-items: center;
+                    background-color: white;
+                    border-radius: 3px;
+                    border: 1px solid ${colors.grey500};
+                    box-sizing: border-box;
+                    display: flex;
+                    min-height: 40px;
+                    padding-block: 6px;
+                    padding-inline: 12px 6px;
+                    box-shadow: inset 0 0 1px 0 rgba(48, 54, 60, 0.1);
+                }
+
+                .root:not(.disabled):focus,
+                .root:not(.disabled):active {
+                    outline: none;
+                    box-shadow: inset 0 0 0 2px ${theme.focus};
+                    border-color: ${theme.focus};
+                }
+
+                .root.valid {
+                    border-color: ${theme.valid};
+                }
+
+                .root.warning {
+                    border-color: ${theme.warning};
+                }
+
+                .root.error {
+                    border-color: ${theme.error};
+                }
+
+                .root.disabled {
+                    background-color: ${colors.grey100};
+                    border-color: ${colors.grey500};
+                    color: ${theme.disabled};
+                    cursor: not-allowed;
+                }
+
+                .root.dense {
+                    padding-block: 2px;
+                    padding-inline: 8px 4px;
+                    min-height: 32px;
+                }
+
+                .root-children {
+                    flex-grow: 1;
+                }
+
+                .root-right {
+                    margin-block-start: 4px;
+                    margin-inline-start: 2px;
+                }
+            `}</style>
+        </div>
+    )
+}
+
+InputWrapper.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    inputRef: PropTypes.object.isRequired,
+    onToggle: PropTypes.func.isRequired,
+    children: PropTypes.element,
+    className: PropTypes.string,
+    dense: PropTypes.bool,
+    disabled: PropTypes.bool,
+    error: sharedPropTypes.statusPropType,
+    tabIndex: PropTypes.string,
+    valid: sharedPropTypes.statusPropType,
+    warning: sharedPropTypes.statusPropType,
+}
+
+export { InputWrapper }

package/src/select/loading.js

@@ -0,0 +1,33 @@
+import { colors, spacers, theme } from '@dhis2/ui-constants'
+import { CircularLoader } from '@dhis2-ui/loader'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export const Loading = ({ message, className, dataTest }) => (
+    <div className={cx(className, 'container')} data-test={dataTest}>
+        <div>
+            <CircularLoader small />
+        </div>
+        {message}
+        <style jsx>{`
+            .container {
+                display: flex;
+                gap: ${spacers.dp16};
+                align-items: center;
+                justify-content: center;
+                color: ${colors.grey700};
+                font-family: ${theme.fonts};
+                font-size: 13px;
+                padding-block: ${spacers.dp8};
+                padding-inline: ${spacers.dp24};
+            }
+        `}</style>
+    </div>
+)
+
+Loading.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    className: PropTypes.string,
+    message: PropTypes.string,
+}

package/src/select/menu-wrapper.js

@@ -0,0 +1,52 @@
+import { colors, elevations } from '@dhis2/ui-constants'
+import { Layer } from '@dhis2-ui/layer'
+import { Popper } from '@dhis2-ui/popper'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const MenuWrapper = ({
+    children,
+    dataTest,
+    maxHeight = '280px',
+    menuWidth,
+    onClick,
+    selectRef,
+}) => {
+    return (
+        <Layer onBackdropClick={onClick} transparent>
+            <Popper
+                reference={selectRef}
+                placement="bottom-start"
+                observeReferenceResize
+            >
+                <div data-test={`${dataTest}-menuwrapper`}>
+                    {children}
+
+                    <style jsx>{`
+                        div {
+                            width: ${menuWidth};
+                            height: auto;
+                            max-height: ${maxHeight};
+                            overflow: auto;
+                            background: ${colors.white};
+                            border: 1px solid ${colors.grey200};
+                            border-radius: 3px;
+                            box-shadow: ${elevations.popover};
+                        }
+                    `}</style>
+                </div>
+            </Popper>
+        </Layer>
+    )
+}
+
+MenuWrapper.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    menuWidth: PropTypes.string.isRequired,
+    selectRef: PropTypes.object.isRequired,
+    children: PropTypes.node,
+    maxHeight: PropTypes.string,
+    onClick: PropTypes.func,
+}
+
+export { MenuWrapper }

package/src/select/no-match.js

@@ -0,0 +1,28 @@
+import { colors, spacers, theme } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const NoMatch = ({ message, className }) => (
+    <div className={className}>
+        {message}
+
+        <style jsx>{`
+            div {
+                color: ${colors.grey700};
+                font-family: ${theme.fonts};
+                font-size: 13px;
+                line-height: 16px;
+                padding-block: ${spacers.dp8};
+                padding-inline: ${spacers.dp24};
+                text-align: center;
+            }
+        `}</style>
+    </div>
+)
+
+NoMatch.propTypes = {
+    message: PropTypes.string.isRequired,
+    className: PropTypes.string,
+}
+
+export { NoMatch }

package/src/select/option-helpers.js

@@ -0,0 +1,34 @@
+import React from 'react'
+
+// Check whether an option is valid
+export const checkIfValidOption = (option) =>
+    option &&
+    'props' in option &&
+    'value' in option.props &&
+    'label' in option.props
+
+// Filters all children that won't be rendered from an array of react children
+export const filterIgnored = (children) =>
+    React.Children.toArray(children).filter(
+        (child) => child !== null && child !== false && child !== undefined
+    )
+
+// Find an option in an array of react children
+export const findOptionChild = (value, optionChildren) =>
+    React.Children.toArray(optionChildren).find((currentOption) => {
+        if (!currentOption.props) {
+            return false
+        }
+
+        return value === currentOption.props.value
+    })
+
+// Find an option in an array of option objects
+export const findOption = (value, optionArray) =>
+    optionArray.find((optionValue) => value === optionValue)
+
+// Remove a specific option from an array of options
+export const removeOption = (value, optionArray) =>
+    optionArray.filter((optionValue) => {
+        return optionValue !== value
+    })