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

package/src/single-select-field/single-select-field.js

@@ -0,0 +1,178 @@
+import { sharedPropTypes } from '@dhis2/ui-constants'
+import { Box } from '@dhis2-ui/box'
+import { Field } from '@dhis2-ui/field'
+import PropTypes from 'prop-types'
+import React from 'react'
+import i18n from '../locales/index.js'
+import { SingleSelect } from '../single-select/index.js'
+
+// TODO: translate
+const translate = (prop, interpolationObject) => {
+    if (typeof prop === 'function') {
+        return prop(interpolationObject)
+    }
+
+    return prop
+}
+class SingleSelectField extends React.Component {
+    static defaultProps = {
+        dataTest: 'dhis2-uiwidgets-singleselectfield',
+        selected: '',
+
+        clearText: () => i18n.t('Clear'),
+        empty: () => i18n.t('No data found'),
+        filterPlaceholder: () => i18n.t('Type to filter options'),
+        loadingText: () => i18n.t('Loading options'),
+        noMatchText: () => i18n.t('No options found'),
+    }
+
+    render() {
+        const {
+            className,
+            onChange,
+            onFocus,
+            onKeyDown,
+            onBlur,
+            required,
+            label,
+            valid,
+            error,
+            warning,
+            disabled,
+            loading,
+            selected = SingleSelectField.defaultProps.selected,
+            tabIndex,
+            helpText,
+            validationText,
+            maxHeight,
+            inputMaxHeight,
+            inputWidth,
+            children,
+            clearable,
+            clearText = SingleSelectField.defaultProps.clearText,
+            filterable,
+            filterPlaceholder = SingleSelectField.defaultProps
+                .filterPlaceholder,
+            placeholder,
+            prefix,
+            empty = SingleSelectField.defaultProps.empty,
+            loadingText = SingleSelectField.defaultProps.loadingText,
+            noMatchText = SingleSelectField.defaultProps.noMatchText,
+            initialFocus,
+            dense,
+            dataTest = SingleSelectField.defaultProps.dataTest,
+        } = this.props
+
+        return (
+            <Field
+                className={className}
+                dataTest={dataTest}
+                disabled={disabled}
+                required={required}
+                label={label}
+                helpText={helpText}
+                validationText={validationText}
+                error={error}
+                warning={warning}
+                valid={valid}
+            >
+                <Box width={inputWidth} minWidth="100px">
+                    <SingleSelect
+                        selected={selected}
+                        tabIndex={tabIndex}
+                        maxHeight={maxHeight}
+                        inputMaxHeight={inputMaxHeight}
+                        onChange={onChange}
+                        onFocus={onFocus}
+                        onKeyDown={onKeyDown}
+                        onBlur={onBlur}
+                        loading={loading}
+                        error={error}
+                        warning={warning}
+                        valid={valid}
+                        disabled={disabled}
+                        clearable={clearable}
+                        clearText={translate(clearText)}
+                        filterable={filterable}
+                        filterPlaceholder={translate(filterPlaceholder)}
+                        placeholder={placeholder}
+                        prefix={prefix}
+                        empty={translate(empty)}
+                        loadingText={translate(loadingText)}
+                        noMatchText={translate(noMatchText)}
+                        initialFocus={initialFocus}
+                        dense={dense}
+                    >
+                        {children}
+                    </SingleSelect>
+                </Box>
+            </Field>
+        )
+    }
+}
+
+SingleSelectField.propTypes = {
+    /** Should be `SingleSelectOption` components */
+    children: PropTypes.node,
+    className: PropTypes.string,
+    /** Label for the button that clears selections */
+    clearText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    /** Adds a button to the SingleSelect that clears selections when pressed */
+    clearable: PropTypes.bool,
+    dataTest: PropTypes.string,
+    /** Makes the SingleSelect smaller */
+    dense: PropTypes.bool,
+    /** Disables the SingleSelect */
+    disabled: PropTypes.bool,
+    /** Text to display when there are no options */
+    empty: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+    /** Adds 'error' appearance for validation feedback. Mutually exclusive with 'valid' and 'warning' props */
+    error: sharedPropTypes.statusPropType,
+    /** Placeholder text to show in the filter field when it is empty */
+    filterPlaceholder: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+    /** Adds a field to filter options */
+    filterable: PropTypes.bool,
+    /** Useful guiding text to display below the SingleSelect */
+    helpText: PropTypes.string,
+    /** Grabs initial focus on the page */
+    initialFocus: PropTypes.bool,
+    /** Constrains the height of the input */
+    inputMaxHeight: PropTypes.string,
+    /** Sets the width of the input. Can be any valid CSS measurement */
+    inputWidth: PropTypes.string,
+    /** Text for the label above the SingleSelect */
+    label: PropTypes.string,
+    /** Applies a loading appearance to the dropdown options */
+    loading: PropTypes.bool,
+    /** Text to display when `loading` is true */
+    loadingText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    /** Constrains height of the SingleSelect */
+    maxHeight: PropTypes.string,
+    /** Text to display when there are no filter results */
+    noMatchText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    /** Placeholder text when the SingleSelect is empty */
+    placeholder: PropTypes.string,
+    /** Leading text to prefix selections */
+    prefix: PropTypes.string,
+    /** Indicates that a selection is required */
+    required: PropTypes.bool,
+    /** Selected item in the SingleSelect (the string should refer to the item's `value` attribute) */
+    selected: PropTypes.string,
+    tabIndex: PropTypes.string,
+    /** Adds 'valid' appearance for validation feedback. Mutually exclusive with 'error' and 'warning' props */
+    valid: sharedPropTypes.statusPropType,
+    /** Text to provide form validation feedback. Receives styles according to validation status */
+    validationText: PropTypes.string,
+    /** Adds 'warning' appearance for validation feedback. Mutually exclusive with 'valid' and 'error' props */
+    warning: sharedPropTypes.statusPropType,
+    /** Called with signature `({ selected: string }, event)` */
+    onBlur: PropTypes.func,
+    /** Called with signature `({ selected: string }, event)` */
+    onChange: PropTypes.func,
+    /** Called with signature `({ selected: string }, event)` */
+    onFocus: PropTypes.func,
+    /** Called with signature `({ selected: string }, event)` */
+    onKeyDown: PropTypes.func,
+}
+
+export { SingleSelectField }

package/src/single-select-field/single-select-field.prod.stories.js

@@ -0,0 +1,146 @@
+import { sharedPropTypes } from '@dhis2/ui-constants'
+import React from 'react'
+import { SingleSelectOption } from '../index.js'
+import { SingleSelectField } from './index.js'
+
+const description = `
+\`SingleSelectField\` is a wrapper around a \`SingleSelect\` component that adds a label, help text, validation text, and other features.
+
+See the SingleSelect for more information, and read more at [Design System: Select](https://github.com/dhis2/design-system/blob/master/molecules/select.md#multiple-selection).
+
+\`\`\`js
+import { SingleSelectField, SingleSelectOption } from '@dhis2/ui'
+\`\`\`
+
+_**Note**: The dropdowns in some of the following stories won't appear correctly on this page. View these demos in the 'Canvas' tab._
+`
+
+const onChange = (selected) =>
+    alert(`Selected changed to: ${JSON.stringify(selected, null, 2)}`)
+
+const options = [
+    <SingleSelectOption key="1" value="1" label="one" />,
+    <SingleSelectOption key="2" value="2" label="two" />,
+    <SingleSelectOption key="3" value="3" label="three" />,
+    <SingleSelectOption key="4" value="4" label="four" />,
+    <SingleSelectOption key="5" value="5" label="five" />,
+    <SingleSelectOption key="6" value="6" label="six" />,
+    <SingleSelectOption key="7" value="7" label="seven" />,
+    <SingleSelectOption key="8" value="8" label="eight" />,
+    <SingleSelectOption key="9" value="9" label="nine" />,
+    <SingleSelectOption key="10" value="10" label="ten" />,
+]
+
+export default {
+    title: 'Single Select Field',
+    component: SingleSelectField,
+    subcomponents: { SingleSelectOption },
+    parameters: { docs: { description: { component: description } } },
+    // default args for stories
+    args: {
+        // Fix default prop issues - causes 'i18n is not defined' error
+        dataTest: 'dhis2-uiwidgets-singleselectfield',
+        selected: '',
+
+        clearText: 'Clear',
+        empty: 'No data found',
+        filterPlaceholder: 'Type to filter options',
+        loadingText: 'Loading options',
+        noMatchText: 'No options found',
+
+        label: 'Default label',
+        children: options,
+        onChange: onChange,
+    },
+    argTypes: {
+        valid: { ...sharedPropTypes.statusArgType },
+        warning: { ...sharedPropTypes.statusArgType },
+        error: { ...sharedPropTypes.statusArgType },
+    },
+}
+
+const Template = (args) => <SingleSelectField {...args} />
+
+export const Default = Template.bind({})
+
+export const WithHelpText = Template.bind({})
+WithHelpText.args = { helpText: 'Helpful text.' }
+WithHelpText.parameters = {
+    docs: {
+        description: {
+            story: `_**Note**: The dropdowns in the following stories won't appear correctly on this page. View these demos in the 'Canvas' tab._`,
+        },
+    },
+}
+
+export const StatusValid = Template.bind({})
+StatusValid.args = {
+    valid: true,
+    validationText: 'Totally valid!',
+    ...WithHelpText.args,
+}
+StatusValid.storyName = 'Status: Valid'
+
+export const StatusWarning = Template.bind({})
+StatusWarning.args = {
+    warning: true,
+    validationText: 'Hm, not quite, I warn thee!',
+    ...WithHelpText.args,
+}
+StatusWarning.storyName = 'Status: Warning'
+
+export const StatusError = Template.bind({})
+StatusError.args = {
+    error: true,
+    validationText: 'That value is wrong. Sorry!',
+    ...WithHelpText.args,
+}
+StatusError.storyName = 'Status: Error'
+
+export const StatusDisabled = Template.bind({})
+StatusDisabled.args = {
+    disabled: true,
+    ...WithHelpText.args,
+}
+StatusDisabled.storyName = 'Status: Disabled'
+
+export const Required = Template.bind({})
+Required.args = { required: true }
+
+export const InputWidth = Template.bind({})
+InputWidth.args = {
+    inputWidth: '200px',
+    label: 'A very long label indeed, well at least longer than the input field to show how it looks and works and stuff',
+    required: true,
+}
+
+export const DefaultClearText = Template.bind({})
+DefaultClearText.args = {
+    selected: '1',
+    clearable: true,
+    label: null,
+    children: (
+        <SingleSelectOption
+            key="1"
+            value="1"
+            label="Not translated, just for showing clear button"
+        />
+    ),
+}
+DefaultClearText.storyName = 'Default: clearText'
+
+export const DefaultEmpty = Template.bind({})
+DefaultEmpty.args = { children: null, label: null }
+DefaultEmpty.storyName = 'Default: empty'
+
+export const DefaultFilterPlaceholderAndNoMatchText = Template.bind({})
+DefaultFilterPlaceholderAndNoMatchText.args = {
+    filterable: true,
+    ...DefaultEmpty.args,
+}
+DefaultFilterPlaceholderAndNoMatchText.storyName =
+    'Default: filterPlaceholder and noMatchText'
+
+export const DefaultLoadingText = Template.bind({})
+DefaultLoadingText.args = { loading: true, ...DefaultEmpty.args }
+DefaultLoadingText.storyName = 'Default: loadingText'

package/src/single-select-option/index.js

@@ -0,0 +1 @@
+export { SingleSelectOption } from './single-select-option.js'

package/src/single-select-option/single-select-option.js

@@ -0,0 +1,84 @@
+import { colors, spacers } from '@dhis2/ui-constants'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const SingleSelectOption = ({
+    label,
+    active,
+    disabled,
+    onClick,
+    className,
+    dataTest = 'dhis2-uicore-singleselectoption',
+    value,
+}) => (
+    <div
+        className={cx(className, {
+            disabled,
+            active,
+        })}
+        onClick={(e) => onClick({}, e)}
+        data-test={dataTest}
+        data-value={value}
+        data-label={label}
+    >
+        <span className="checkmark" aria-hidden="true"></span>
+        <span className="content">{label}</span>
+        <style jsx>{`
+            div {
+                display: flex;
+                align-items: center;
+                cursor: pointer;
+                font-size: 14px;
+                text-decoration: none;
+                color: ${colors.grey900};
+                padding-block: ${spacers.dp8};
+                padding-inline: 6px ${spacers.dp12};
+            }
+
+            div:hover {
+                background-color: ${colors.grey200};
+            }
+
+            div:active,
+            div.active {
+                background-color: ${colors.teal050};
+                cursor: auto;
+            }
+
+            div.disabled {
+                color: ${colors.grey500};
+                cursor: not-allowed;
+                user-select: none;
+            }
+
+            div.disabled:hover {
+                background-color: initial;
+            }
+
+            div .checkmark {
+                width: 16px;
+                height: 16px;
+                margin-inline-end: 6px;
+                flex-shrink: 0;
+                background-size: contain;
+                background-repeat: no-repeat;
+                background-image: ${active
+                    ? `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNjMyMDkgNy44MzIxNEMzLjI3MjA5IDcuNDcyMTQgMi43MjAwOSA3LjQ3MjE0IDIuMzYwMDkgNy44MzIxNEMyLjAwMDA5IDguMTkyMTQgMi4wMDAwOSA4Ljc0NDE0IDIuMzYwMDkgOS4xMDQxNEw1LjYyNDA5IDEyLjM2ODFDNS45ODQwOSAxMi43MjgxIDYuNTM2MDkgMTIuNzI4MSA2Ljg5NjA5IDEyLjM2ODFMMTQuNjQ4MSA0LjY0MDE0QzE1LjAwODEgNC4yODAxNCAxNS4wMDgxIDMuNzI4MTQgMTQuNjQ4MSAzLjM2ODE0QzE0LjI4ODEgMy4wMDgxNCAxMy43MzYxIDMuMDA4MTQgMTMuMzUyMSAzLjM2ODE0TDYuMjcyMDkgMTAuNDcyMUwzLjYzMjA5IDcuODMyMTRaIiBmaWxsPSIjMDA2OTVDIi8+Cjwvc3ZnPgo=')`
+                    : 'none'};
+            }
+        `}</style>
+    </div>
+)
+
+SingleSelectOption.propTypes = {
+    label: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+    active: PropTypes.bool,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    disabled: PropTypes.bool,
+    onClick: PropTypes.func,
+}
+
+export { SingleSelectOption }