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

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

@@ -0,0 +1,30 @@
+import React, { useMemo, useState } from 'react'
+import { SimpleSingleSelect } from '../simple-single-select.js'
+import { options } from './options.js'
+
+export const WithFilterField = () => {
+    const [selected, setSelected] = useState(null)
+    const [filterValue, setFilterValue] = useState('')
+    const filteredOptions = useMemo(() => {
+        return filterValue
+            ? options.filter(
+                  ({ label, value }) =>
+                      label.match(new RegExp(filterValue), 'i') && value !== ''
+              )
+            : options
+    }, [filterValue])
+
+    return (
+        <SimpleSingleSelect
+            name="simple"
+            selected={selected}
+            onChange={setSelected}
+            filterable
+            filterPlaceholder="Filter placeholder"
+            filterValue={filterValue}
+            onFilterChange={setFilterValue}
+            noMatchText="No results for your filter"
+            options={filteredOptions}
+        />
+    )
+}

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

@@ -0,0 +1,29 @@
+import React, { useState } from 'react'
+import { SimpleSingleSelect } from '../simple-single-select.js'
+import { fiveOptions } from './options.js'
+
+export const WithInitialFocus = () => {
+    const [selected, setSelected] = useState(null)
+
+    return (
+        <>
+            <SimpleSingleSelect
+                autoFocus
+                name="simple"
+                selected={selected}
+                onChange={setSelected}
+                options={fiveOptions}
+            />
+
+            <select onChange={(e) => console.log(e)}>
+                <option value="">None</option>
+                <option value="1">One</option>
+                <option value="2">Two</option>
+                <option value="3">Three</option>
+                <option value="4">Four</option>
+                <option value="5">Five</option>
+                <option value="6">Six</option>
+            </select>
+        </>
+    )
+}

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

@@ -0,0 +1,19 @@
+import React, { useState } from 'react'
+import { SimpleSingleSelect } from '../simple-single-select.js'
+import { options } from './options.js'
+
+export const WithManyOptions = () => {
+    const [selected, setSelected] = useState({
+        label: 'ART entry point: No PMTCT',
+        value: 'art_entry_point:_no_pmtct',
+    })
+
+    return (
+        <SimpleSingleSelect
+            name="simple"
+            selected={selected}
+            onChange={setSelected}
+            options={options}
+        />
+    )
+}

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

@@ -0,0 +1,65 @@
+import React, { useState } from 'react'
+import { SimpleSingleSelect } from '../simple-single-select.js'
+import { fiveOptions as originalOptions } from './options.js'
+
+// simulating when the first option value is not empty string
+const fiveOptions = [
+    { label: 'None', value: 'unknown' },
+    ...originalOptions.slice(1),
+]
+
+export const WithMultipleSelectsAndScrollableParent = () => {
+    const [selected, setSelected] = useState(null)
+    const [selected2, setSelected2] = useState(null)
+
+    return (
+        <div style={{ overflow: 'scroll', height: '250px' }}>
+            Selected value from first select: {JSON.stringify(selected)}
+            <SimpleSingleSelect
+                inputMaxHeight="50px"
+                name="simple"
+                selected={selected}
+                onChange={setSelected}
+                options={fiveOptions}
+            />
+            <br />
+            Selected value from second select: {JSON.stringify(selected2)}
+            <SimpleSingleSelect
+                inputMaxHeight="50px"
+                name="simple"
+                selected={selected2}
+                onChange={setSelected2}
+                options={fiveOptions}
+                clearable
+                onClear={() => setSelected2(null)}
+            />
+            <br />
+            <input type="text" placeholder="just another field" />
+            <br />
+            <br />
+            <div>
+                Some text to force a window with scrolling (to validate the
+                KeyDown on the combo box does not scroll the whole window)
+                <br />
+                <br />
+                Some more text..
+                <br />
+                <br />
+                <br />
+                <br />
+                <br />
+                <br />
+                <br />
+                <br />
+                Some text to force scrolling
+                <br />
+                <br />
+                <br />
+                <br />
+                <br />
+                <br />
+                Some text to force scrolling
+            </div>
+        </div>
+    )
+}

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

@@ -0,0 +1,25 @@
+import React, { useMemo, useState } from 'react'
+import { SimpleSingleSelect } from '../simple-single-select.js'
+
+export const WithNoMatchText = () => {
+    const [selected, setSelected] = useState({
+        label: 'Foo',
+        value: 'foo',
+    })
+    const [filterValue, setFilterValue] = useState('Bar')
+    const filteredOptions = useMemo(() => [], [])
+
+    return (
+        <SimpleSingleSelect
+            name="simple"
+            selected={selected}
+            onChange={setSelected}
+            filterable
+            filterPlaceholder="Filter placeholder"
+            filterValue={filterValue}
+            onFilterChange={setFilterValue}
+            noMatchText="No results for your filter"
+            options={filteredOptions}
+        />
+    )
+}

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

@@ -0,0 +1,22 @@
+import React, { useState } from 'react'
+import { SimpleSingleSelect } from '../simple-single-select.js'
+import { fiveOptions } from './options.js'
+
+export const WithOnBlur = () => {
+    const [selected, setSelected] = useState(null)
+    const [blurTime, setBlurTime] = useState('')
+
+    return (
+        <>
+            <SimpleSingleSelect
+                onBlur={() => setBlurTime(new Date().toISOString())}
+                name="simple"
+                selected={selected}
+                onChange={setSelected}
+                options={fiveOptions}
+            />
+
+            <p>Last time select received blur: {blurTime || 'never'}</p>
+        </>
+    )
+}

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

@@ -0,0 +1,22 @@
+import React, { useState } from 'react'
+import { SimpleSingleSelect } from '../simple-single-select.js'
+import { fiveOptions } from './options.js'
+
+export const WithOnFocus = () => {
+    const [selected, setSelected] = useState(null)
+    const [focusTime, setFocusTime] = useState('')
+
+    return (
+        <>
+            <SimpleSingleSelect
+                onFocus={() => setFocusTime(new Date().toISOString())}
+                name="simple"
+                selected={selected}
+                onChange={setSelected}
+                options={fiveOptions}
+            />
+
+            <p>Last time select received focus: {focusTime || 'never'}</p>
+        </>
+    )
+}

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

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

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

@@ -0,0 +1,23 @@
+import React, { useState } from 'react'
+import { SimpleSingleSelect } from '../simple-single-select.js'
+
+const options = [
+    { label: 'None', value: '' },
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' },
+]
+
+export const WithOptionsAndLoading = () => {
+    const [selected, setSelected] = useState(null)
+
+    return (
+        <SimpleSingleSelect
+            loading
+            name="simple"
+            selected={selected}
+            onChange={setSelected}
+            options={options}
+        />
+    )
+}

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

@@ -0,0 +1,24 @@
+import React, { useState } from 'react'
+import { SimpleSingleSelect } from '../simple-single-select.js'
+
+const options = [
+    { label: 'None', value: '' },
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' },
+]
+
+export const WithOptionsAndLoadingText = () => {
+    const [selected, setSelected] = useState(null)
+
+    return (
+        <SimpleSingleSelect
+            loading
+            menuLoadingText="Loading options"
+            name="simple"
+            selected={selected}
+            onChange={setSelected}
+            options={options}
+        />
+    )
+}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,29 @@
+import React, { useEffect, useState } from 'react'
+import { SimpleSingleSelect } from '../simple-single-select.js'
+import { fiveOptions } from './options.js'
+
+export const WithRTL = () => {
+    const [selected, setSelected] = useState({
+        label: 'ANC 1st visit',
+        value: 'anc_1st_visit',
+    })
+
+    // as options are rendered in Portal, the body dir (of the iframe) needs to be set to 'rtl'
+    useEffect(() => {
+        document.body.dir = 'rtl'
+        return () => {
+            document.body.dir = 'ltr'
+        }
+    }, [])
+
+    return (
+        <div dir="rtl">
+            <SimpleSingleSelect
+                name="simple"
+                selected={selected}
+                onChange={setSelected}
+                options={fiveOptions}
+            />
+        </div>
+    )
+}

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

@@ -0,0 +1,51 @@
+import React, { useState } from 'react'
+import { SimpleSingleSelect } from '../simple-single-select.js'
+import { fiveOptions } from './options.js'
+
+export const WithScrollingParent = () => {
+    const [selected, setSelected] = useState(null)
+    const [selected2, setSelected2] = useState(null)
+
+    return (
+        <div style={{ overflow: 'scroll', height: '200px' }}>
+            <SimpleSingleSelect
+                tabIndex="1"
+                inputMaxHeight="50px"
+                name="simple"
+                selected={selected}
+                onChange={setSelected}
+                options={fiveOptions}
+            />
+            <SimpleSingleSelect
+                tabIndex="2"
+                inputMaxHeight="50px"
+                name="simple2"
+                selected={selected2}
+                onChange={setSelected2}
+                options={fiveOptions}
+            />
+            <div>
+                Some text to force a window with scrolling (to validate the
+                KeyDown on the combo box does not scroll the whole window)
+                <br />
+                <br />
+                <br />
+                <br />
+                <br />
+                <br />
+                <br />
+                <br />
+                <br />
+                <br />
+                Some text to force scrolling
+                <br />
+                <br />
+                <br />
+                <br />
+                <br />
+                <br />
+                Some text to force scrolling
+            </div>
+        </div>
+    )
+}

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

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

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

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