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

package/src/select/select.js

@@ -0,0 +1,256 @@
+import { sharedPropTypes } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+import { debounce } from './debounce/debounce.js'
+import { InputWrapper } from './input-wrapper.js'
+import { MenuWrapper } from './menu-wrapper.js'
+
+// Keycodes for the keypress event handlers
+const TAB_KEY = 9
+const ESCAPE_KEY = 27
+const SPACE_KEY = 32
+const UP_KEY = 38
+const DOWN_KEY = 40
+
+export class Select extends Component {
+    state = {
+        open: false,
+        menuWidth: 'auto',
+    }
+
+    static defaultProps = {
+        dataTest: 'dhis2-uicore-select',
+    }
+
+    selectRef = React.createRef()
+    inputRef = React.createRef()
+
+    componentDidMount() {
+        if (this.props.initialFocus) {
+            this.inputRef.current.focus()
+        }
+
+        this.setState({ menuWidth: this.getMenuWidth() })
+        window.addEventListener('resize', this.onResize)
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('resize', this.onResize)
+    }
+
+    /**
+     * We're debouncing this so it doesn't fire continually during a resize.
+     *
+     * Additionally we should use requestPostAnimationFrame to not trigger a forced
+     * layout, but that's just a proposal, and the added complexity of solving this
+     * in another manner does not seem worth it, considering the minor perf penalty.
+     *
+     * See: https://nolanlawson.com/2018/09/25/accurately-measuring-layout-on-the-web
+     */
+    onResize = debounce(() => {
+        const menuWidth = this.getMenuWidth()
+
+        if (this.state.menuWidth !== menuWidth) {
+            this.setState({ menuWidth })
+        }
+    }, 50)
+
+    getMenuWidth() {
+        const { offsetWidth } = this.inputRef.current
+        const { menuWidth } = this.state
+
+        if (offsetWidth && `${offsetWidth}px` !== menuWidth) {
+            return `${offsetWidth}px`
+        }
+        return menuWidth
+    }
+
+    handleFocusInput = () => {
+        this.inputRef.current.focus()
+    }
+
+    onFocus = (e) => {
+        const { onFocus, disabled, selected } = this.props
+
+        if (disabled || !onFocus) {
+            return
+        }
+
+        onFocus({ selected }, e)
+    }
+
+    handleOpen = () => {
+        this.setState({
+            open: true,
+            menuWidth: this.getMenuWidth(),
+        })
+    }
+
+    handleClose = () => {
+        this.setState({ open: false })
+    }
+
+    onToggle = (e) => {
+        if (this.props.disabled) {
+            return
+        }
+
+        e.stopPropagation()
+
+        this.state.open ? this.handleClose() : this.handleOpen()
+    }
+
+    onOutsideClick = (e) => {
+        const { onBlur, disabled, selected } = this.props
+
+        if (disabled) {
+            return
+        }
+
+        this.handleClose()
+
+        if (onBlur) {
+            onBlur({ selected }, e)
+        }
+    }
+
+    onKeyDown = (e) => {
+        const { onKeyDown, disabled, selected } = this.props
+
+        if (disabled) {
+            return
+        }
+
+        if (onKeyDown) {
+            onKeyDown({ selected }, e)
+        }
+
+        if (e.defaultPrevented) {
+            return
+        }
+
+        const { open } = this.state
+        const { keyCode } = e
+        const shouldOpen =
+            !open &&
+            (keyCode === SPACE_KEY ||
+                keyCode === UP_KEY ||
+                keyCode === DOWN_KEY)
+
+        /* Do not block event propagation when the Select is closed unless
+         * the key to open it is pressed, so that other components like
+         * the Modal can still respond to keypresses (i.e. ESC to close) */
+        if (open || shouldOpen) {
+            e.stopPropagation()
+        }
+
+        if (open && keyCode === ESCAPE_KEY) {
+            return this.handleClose()
+        }
+
+        if (open && keyCode === TAB_KEY) {
+            // Defer so Tab advances focus before the menu unmounts.
+            return requestAnimationFrame(this.handleClose)
+        }
+
+        if (shouldOpen) {
+            return this.handleOpen()
+        }
+    }
+
+    render() {
+        const { open, menuWidth } = this.state
+        const {
+            children,
+            className,
+            selected,
+            onChange,
+            tabIndex,
+            maxHeight,
+            error,
+            warning,
+            valid,
+            disabled,
+            dense,
+            dataTest,
+        } = this.props
+
+        // Create the input
+        const inputProps = {
+            selected,
+            onChange,
+            options: children,
+            disabled,
+        }
+        const input = React.cloneElement(this.props.input, inputProps)
+
+        // Create the menu
+        const menuProps = {
+            selected,
+            onChange,
+            options: children,
+            handleClose: this.handleClose,
+            handleFocusInput: this.handleFocusInput,
+        }
+        const menu = React.cloneElement(this.props.menu, menuProps)
+
+        return (
+            <div
+                className={className}
+                ref={this.selectRef}
+                onFocus={this.onFocus}
+                onKeyDown={this.onKeyDown}
+                data-test={dataTest}
+            >
+                <InputWrapper
+                    onToggle={this.onToggle}
+                    inputRef={this.inputRef}
+                    tabIndex={disabled ? '-1' : tabIndex}
+                    error={error}
+                    warning={warning}
+                    valid={valid}
+                    disabled={disabled}
+                    dense={dense}
+                    dataTest={`${dataTest}-input`}
+                >
+                    {input}
+                </InputWrapper>
+                {open && (
+                    <MenuWrapper
+                        onClick={this.onOutsideClick}
+                        maxHeight={maxHeight}
+                        selectRef={this.selectRef}
+                        menuWidth={menuWidth}
+                        dataTest={`${dataTest}-menu`}
+                    >
+                        {menu}
+                    </MenuWrapper>
+                )}
+            </div>
+        )
+    }
+}
+
+Select.propTypes = {
+    input: PropTypes.element.isRequired,
+    menu: PropTypes.element.isRequired,
+    selected: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.arrayOf(PropTypes.string),
+    ]).isRequired,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    dense: PropTypes.bool,
+    disabled: PropTypes.bool,
+    error: sharedPropTypes.statusPropType,
+    initialFocus: PropTypes.bool,
+    maxHeight: PropTypes.string,
+    tabIndex: PropTypes.string,
+    valid: sharedPropTypes.statusPropType,
+    warning: sharedPropTypes.statusPropType,
+    onBlur: PropTypes.func,
+    onChange: PropTypes.func,
+    onFocus: PropTypes.func,
+    onKeyDown: PropTypes.func,
+}

package/src/simple-single-select/__stories__/DefaultPosition.js

@@ -0,0 +1,37 @@
+import React, { useState } from 'react'
+import { SimpleSingleSelect } from '../simple-single-select.js'
+import { fiveOptions } from './options.js'
+
+export const DefaultPosition = () => {
+    const [selected, setSelected] = useState({
+        label: 'ANC 1st visit',
+        value: 'anc_1st_visit',
+    })
+
+    return (
+        <div
+            style={{
+                position: 'relative',
+                // Accounting for the padding on the body
+                height: 'calc(100vh - 32px)',
+            }}
+        >
+            <div
+                style={{
+                    position: 'absolute',
+                    top: '50%',
+                    left: 0,
+                    transform: 'translateY(-50%)',
+                    width: '100%',
+                }}
+            >
+                <SimpleSingleSelect
+                    name="simple"
+                    selected={selected}
+                    onChange={setSelected}
+                    options={fiveOptions}
+                />
+            </div>
+        </div>
+    )
+}

package/src/simple-single-select/__stories__/Dense.js

@@ -0,0 +1,17 @@
+import React, { useState } from 'react'
+import { SimpleSingleSelect } from '../simple-single-select.js'
+import { fiveOptions } from './options.js'
+
+export const Dense = () => {
+    const [selected, setSelected] = useState(null)
+
+    return (
+        <SimpleSingleSelect
+            dense
+            name="simple"
+            selected={selected}
+            onChange={setSelected}
+            options={fiveOptions}
+        />
+    )
+}

package/src/simple-single-select/__stories__/Empty.js

@@ -0,0 +1,15 @@
+import React, { useState } from 'react'
+import { SimpleSingleSelect } from '../simple-single-select.js'
+
+export const Empty = () => {
+    const [selected, setSelected] = useState(null)
+
+    return (
+        <SimpleSingleSelect
+            name="simple"
+            selected={selected}
+            onChange={setSelected}
+            options={[]}
+        />
+    )
+}

package/src/simple-single-select/__stories__/EmptyWithEmptyNode.js

@@ -0,0 +1,27 @@
+import React, { useState } from 'react'
+import { SimpleSingleSelect } from '../simple-single-select.js'
+
+export const EmptyWithEmptyNode = () => {
+    const [selected, setSelected] = useState(null)
+    const emptyNode = (
+        <div
+            style={{
+                color: 'red',
+                textAlign: 'center',
+                padding: '10px 0',
+            }}
+        >
+            Custom empty text
+        </div>
+    )
+
+    return (
+        <SimpleSingleSelect
+            name="simple"
+            selected={selected}
+            onChange={setSelected}
+            options={[]}
+            empty={emptyNode}
+        />
+    )
+}

package/src/simple-single-select/__stories__/EmptyWithEmptyText.js

@@ -0,0 +1,16 @@
+import React, { useState } from 'react'
+import { SimpleSingleSelect } from '../simple-single-select.js'
+
+export const EmptyWithEmptyText = () => {
+    const [selected, setSelected] = useState(null)
+
+    return (
+        <SimpleSingleSelect
+            name="simple"
+            selected={selected}
+            onChange={setSelected}
+            options={[]}
+            empty="Custom empty text"
+        />
+    )
+}

package/src/simple-single-select/__stories__/FlippedPosition.js

@@ -0,0 +1,36 @@
+import React, { useState } from 'react'
+import { SimpleSingleSelect } from '../simple-single-select.js'
+import { fiveOptions } from './options.js'
+
+export const FlippedPosition = () => {
+    const [selected, setSelected] = useState({
+        label: 'ANC 1st visit',
+        value: 'anc_1st_visit',
+    })
+
+    return (
+        <div
+            style={{
+                position: 'relative',
+                // Accounting for the padding on the body
+                height: 'calc(100vh - 32px)',
+            }}
+        >
+            <div
+                style={{
+                    position: 'absolute',
+                    bottom: 0,
+                    left: 0,
+                    width: '100%',
+                }}
+            >
+                <SimpleSingleSelect
+                    name="simple"
+                    selected={selected}
+                    onChange={setSelected}
+                    options={fiveOptions}
+                />
+            </div>
+        </div>
+    )
+}

package/src/simple-single-select/__stories__/InfiniteLoading.js

@@ -0,0 +1,65 @@
+import React, { useCallback, useState } from 'react'
+import { SimpleSingleSelect } from '../simple-single-select.js'
+import { options } from './options.js'
+
+// The select displays exactly 9 options per page,
+// using 10 so the user has to scroll to see the effect
+const CHUNK_SIZE = 10
+
+const optionChunks = options.reduce((chunks, option, index) => {
+    if (index === 0) {
+        return [[option]]
+    }
+
+    const prevChunkIndex = chunks.length - 1
+    const prevChunk = chunks[prevChunkIndex]
+    const prevChunkLength = prevChunk.length
+
+    if (prevChunkLength < CHUNK_SIZE) {
+        return [...chunks.slice(0, prevChunkIndex), [...prevChunk, option]]
+    }
+
+    return [...chunks, [option]]
+}, [])
+
+export const InfiniteLoading = () => {
+    const [loading, setLoading] = useState(false)
+    const [curLoadedPage, setCurLoadedPage] = useState(0)
+    const [selected, setSelected] = useState(null)
+    const [loadedOptions, setLoadedOptions] = useState(optionChunks[0])
+
+    const loadNextOptions = useCallback(() => {
+        const nextPage = curLoadedPage + 1
+
+        if (
+            // We're already loading a page
+            loading ||
+            // No need to load anything when already loaded everything
+            nextPage >= optionChunks.length
+        ) {
+            return
+        }
+
+        setLoading(true)
+        setCurLoadedPage(nextPage)
+
+        // Fake network request to show loader a reasonable amount of time
+        setTimeout(() => {
+            const nextChunk = optionChunks[nextPage]
+            setLoadedOptions((prevOptions) => [...prevOptions, ...nextChunk])
+            setLoading(false)
+        }, 1500)
+    }, [curLoadedPage, loading])
+
+    return (
+        <SimpleSingleSelect
+            name="simple"
+            selected={selected}
+            loading={loading}
+            menuLoadingText="Foo bar baz"
+            onChange={setSelected}
+            options={loadedOptions}
+            onEndReached={loadNextOptions}
+        />
+    )
+}

package/src/simple-single-select/__stories__/Loading.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import { SimpleSingleSelect } from '../simple-single-select.js'
+import { options } from './options.js'
+
+export const Loading = () => {
+    return (
+        <SimpleSingleSelect
+            loading
+            name="simple"
+            selected={null}
+            onChange={() => null}
+            options={options}
+        />
+    )
+}

package/src/simple-single-select/__stories__/ShiftedIntoView.js

@@ -0,0 +1,35 @@
+import React, { useState } from 'react'
+import { SimpleSingleSelect } from '../simple-single-select.js'
+import { fiveOptions } from './options.js'
+
+export const ShiftedIntoView = () => {
+    const [selected, setSelected] = useState({
+        label: 'ANC 1st visit',
+        value: 'anc_1st_visit',
+    })
+
+    return (
+        <>
+            <SimpleSingleSelect
+                name="simple"
+                selected={selected}
+                onChange={setSelected}
+                options={fiveOptions}
+            />
+
+            <style jsx>{`
+                :global(html),
+                :global(body),
+                :global(#storybook-root) {
+                    position: relative;
+                    height: 300px !important;
+                    max-height: 300px;
+                }
+
+                :global(#storybook-root) {
+                    padding-top: 130px !important;
+                }
+            `}</style>
+        </>
+    )
+}

package/src/simple-single-select/__stories__/WithClearButton.js

@@ -0,0 +1,26 @@
+import React, { useState } from 'react'
+import { SimpleSingleSelect } from '../simple-single-select.js'
+import { fiveOptions } from './options.js'
+
+export const WithClearButton = () => {
+    const [selected, setSelected] = useState({
+        label: 'ANC 1st visit',
+        value: 'anc_1st_visit',
+    })
+
+    return (
+        <SimpleSingleSelect
+            clearable
+            name="simple"
+            onClear={() =>
+                setSelected({
+                    label: '',
+                    value: '',
+                })
+            }
+            selected={selected}
+            onChange={setSelected}
+            options={fiveOptions}
+        />
+    )
+}

package/src/simple-single-select/__stories__/WithCustomLowMaxHeight.js

@@ -0,0 +1,17 @@
+import React, { useState } from 'react'
+import { SimpleSingleSelect } from '../simple-single-select.js'
+import { options } from './options.js'
+
+export const WithCustomLowMaxHeight = () => {
+    const [selected, setSelected] = useState(null)
+
+    return (
+        <SimpleSingleSelect
+            name="simple"
+            selected={selected}
+            onChange={setSelected}
+            options={options}
+            menuMaxHeight="100px"
+        />
+    )
+}

package/src/simple-single-select/__stories__/WithCustomOptions.js

@@ -0,0 +1,78 @@
+import React, { useState, useMemo } from 'react'
+import { SimpleSingleSelect } from '../simple-single-select.js'
+import { options } from './options.js'
+
+const CustomOption = ({ label }) => (
+    <span className="container">
+        <span className="label">{label}</span>
+
+        <span
+            className="button"
+            role="button"
+            onClick={(e) => {
+                e.stopPropagation()
+                alert('Custom "button" clicked!')
+            }}
+        >
+            x
+        </span>
+
+        <style jsx>{`
+            .container {
+                display: flex;
+                color: white;
+                cursor: pointer;
+                height: 30px;
+            }
+
+            .label {
+                flex-grow: 1;
+                background: green;
+                padding: 5px 10px;
+            }
+
+            .label:hover {
+                background: blue;
+            }
+
+            .button {
+                height: 30px;
+                width: 30px;
+                padding: 0;
+                border: 0;
+                background: none;
+                background: white;
+                cursor: pointer;
+                font-size: 20px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: black;
+            }
+
+            .button:hover {
+                background: black;
+                color: white;
+            }
+        `}</style>
+    </span>
+)
+
+export const WithCustomOptions = () => {
+    const [selected, setSelected] = useState(null)
+    const optionsWithCustomStyle = useMemo(() => {
+        return options.slice(0, 3).map((option) => ({
+            ...option,
+            component: CustomOption,
+        }))
+    }, [])
+
+    return (
+        <SimpleSingleSelect
+            name="simple"
+            selected={selected}
+            onChange={setSelected}
+            options={optionsWithCustomStyle}
+        />
+    )
+}

package/src/simple-single-select/__stories__/WithDisabledOption.js

@@ -0,0 +1,25 @@
+import React, { useState } from 'react'
+import { SimpleSingleSelect } from '../simple-single-select.js'
+import { fiveOptions } from './options.js'
+
+const fiveOptionsWithFourthDisabled = [
+    ...fiveOptions.slice(0, 3),
+    { ...fiveOptions[3], disabled: true },
+    ...fiveOptions.slice(4),
+]
+
+export const WithDisabledOption = () => {
+    const [selected, setSelected] = useState({
+        label: 'ANC 1st visit',
+        value: 'anc_1st_visit',
+    })
+
+    return (
+        <SimpleSingleSelect
+            name="simple"
+            selected={selected}
+            onChange={setSelected}
+            options={fiveOptionsWithFourthDisabled}
+        />
+    )
+}