feat: add StartEndDate component

src/components/StartEndDate/CalendarInput.jsx

@@ -0,0 +1,131 @@
+import i18n from '@dhis2/d2-i18n'
+import { Button, Card, InputField, Layer, Popper, Calendar } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React, { useRef, useState } from 'react'
+import styles from './styles/CalendarInput.style.js'
+
+const offsetModifier = {
+    name: 'offset',
+    options: {
+        offset: [0, 2],
+    },
+}
+
+export const CalendarInput = ({
+    onDateSelect,
+    calendar,
+    date,
+    dir,
+    locale,
+    numberingSystem,
+    weekDayFormat,
+    timeZone,
+    width,
+    cellSize,
+    clearable,
+    dataTest = 'calendar-inputfield',
+    ...rest
+} = {}) => {
+    const ref = useRef()
+    const [open, setOpen] = useState(false)
+
+    const calendarProps = React.useMemo(() => {
+        const onDateSelectWrapper = (selectedDate) => {
+            setOpen(false)
+            onDateSelect?.(selectedDate)
+        }
+        return {
+            onDateSelect: onDateSelectWrapper,
+            calendar,
+            date,
+            dir,
+            locale,
+            numberingSystem,
+            weekDayFormat,
+            timeZone,
+            width,
+            cellSize,
+        }
+    }, [
+        calendar,
+        cellSize,
+        date,
+        dir,
+        locale,
+        numberingSystem,
+        onDateSelect,
+        timeZone,
+        weekDayFormat,
+        width,
+    ])
+
+    const onFocus = () => {
+        setOpen(true)
+    }
+
+    const onChange = (e) => {
+        setOpen(false)
+        rest.onChange(e)
+    }
+
+    return (
+        <>
+            <div className="calendarInputWrapper" ref={ref}>
+                <InputField
+                    {...rest}
+                    dataTest={dataTest}
+                    type="text"
+                    onFocus={onFocus}
+                    onChange={onChange}
+                    value={date}
+                />
+                {clearable && (
+                    <div className="calendarClearButton">
+                        <Button
+                            dataTest="calendar-clear-button"
+                            secondary
+                            small
+                            onClick={() => calendarProps.onDateSelect(null)}
+                            type="button"
+                        >
+                            {i18n.t('Clear')}
+                        </Button>
+                    </div>
+                )}
+            </div>
+            {open && (
+                <Layer
+                    onBackdropClick={() => {
+                        setOpen(false)
+                    }}
+                >
+                    <Popper
+                        reference={ref}
+                        placement="bottom-start"
+                        modifiers={[offsetModifier]}
+                    >
+                        <Card>
+                            <Calendar {...calendarProps} date={date} />
+                        </Card>
+                    </Popper>
+                </Layer>
+            )}
+            <style jsx>{styles}</style>
+        </>
+    )
+}
+
+CalendarInput.propTypes = {
+    calendar: PropTypes.object,
+    cellSize: PropTypes.number,
+    clearable: PropTypes.bool,
+    dataTest: PropTypes.string,
+    date: PropTypes.string,
+    dir: PropTypes.string,
+    locale: PropTypes.string,
+    numberingSystem: PropTypes.string,
+    timeZone: PropTypes.string,
+    weekDayFormat: PropTypes.string,
+    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    onDateSelect: PropTypes.func,
+}

src/components/StartEndDate/StartEndDate.jsx

@@ -0,0 +1,184 @@
+import i18n from '@dhis2/d2-i18n'
+import { Field, IconArrowRight16, colors } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React, { useEffect, useState } from 'react'
+import { CalendarInput } from './CalendarInput.jsx'
+import {
+    DEFAULT_CALENDAR,
+    DEFAULT_PLACEHOLDER,
+    formatDateInput,
+    formatDateOnBlur,
+    nextCharIsAutoHyphen,
+    nextCharIsManualHyphen,
+} from './dateUtils.js'
+import styles from './styles/StartEndDate.style.js'
+import useKeyDown from './useKeyDown.js'
+
+const StartEndDate = ({
+    startDate,
+    endDate,
+    onStartDateChange,
+    onEndDateChange,
+    errorText,
+    periodsSettings,
+}) => {
+    const formattedStartDate = formatDateInput({ date: startDate })
+    const formattedEndDate = formatDateInput({ date: endDate })
+
+    const [startDateChangeCount, setStartDateChangeCount] = useState(0)
+    const [endDateChangeCount, setEndDateChangeCount] = useState(0)
+
+    const [startCaretPosition, setStartCaretPosition] = useState(null)
+    const [endCaretPosition, setEndCaretPosition] = useState(null)
+
+    const onDateChange = (type, date) => {
+        const stateMap = {
+            start: {
+                prevDate: startDate,
+                inputSelector: '.start input',
+                onDateChange: onStartDateChange,
+                setDateChangeCount: setStartDateChangeCount,
+                setCaret: setStartCaretPosition,
+            },
+            end: {
+                prevDate: endDate,
+                inputSelector: '.end input',
+                onDateChange: onEndDateChange,
+                setDateChangeCount: setEndDateChangeCount,
+                setCaret: setEndCaretPosition,
+            },
+        }
+        if (!(type in stateMap)) {
+            console.error(
+                `Invalid type "${type}" passed to onDateChange. Expected "start" or "end".`
+            )
+            return
+        }
+
+        const {
+            prevDate: rawPrevDate,
+            inputSelector,
+            onDateChange,
+            setDateChangeCount,
+            setCaret,
+        } = stateMap[type]
+        const prevDate = rawPrevDate ? rawPrevDate.split('T')[0] : ''
+
+        if (prevDate === date) {
+            return
+        }
+
+        const caret = document.querySelector(inputSelector)?.selectionStart
+        const dateInfo = { date, prevDate, caret }
+
+        let newCaretPosition = caret
+        if (nextCharIsAutoHyphen(dateInfo)) {
+            newCaretPosition = caret + 1
+        } else if (nextCharIsManualHyphen(dateInfo)) {
+            // No change needed for caret position
+        } else if (/\D/.test(date?.[caret - 1] || '')) {
+            newCaretPosition = caret - 1
+        }
+        setCaret(newCaretPosition)
+
+        const formattedDate = formatDateInput(dateInfo)
+        onDateChange(formattedDate)
+
+        setDateChangeCount((prevCount) => prevCount + 1)
+    }
+
+    useEffect(() => {
+        if (startCaretPosition !== null) {
+            const input = document.querySelector('.start input')
+            input.setSelectionRange(startCaretPosition, startCaretPosition)
+        }
+    }, [startDateChangeCount, startCaretPosition])
+
+    useEffect(() => {
+        if (endCaretPosition !== null) {
+            const input = document.querySelector('.end input')
+            input.setSelectionRange(endCaretPosition, endCaretPosition)
+        }
+    }, [endDateChangeCount, endCaretPosition])
+
+    // Forces calendar to close when using Tab/Enter navigation
+    useKeyDown(['Tab', 'Enter'], () => {
+        const backdropElement = document.querySelectorAll('.backdrop')
+        if (backdropElement?.length === 3) {
+            backdropElement[2].click()
+        }
+    })
+
+    const hasDate = startDate !== undefined && endDate !== undefined
+    if (!hasDate) {
+        return null
+    }
+
+    return (
+        <Field
+            className={styles.field}
+            helpText={i18n.t(
+                'Start and end dates are inclusive and will be reflected in the outputs.'
+            )}
+        >
+            {periodsSettings?.calendar !== DEFAULT_CALENDAR && (
+                <p>
+                    {i18n.t(
+                        'Start and end dates must be entered using the ISO 8601 (Gregorian) date format.'
+                    )}
+                </p>
+            )}
+            <div className={styles.row}>
+                <CalendarInput
+                    className="start"
+                    label={i18n.t('Start date')}
+                    calendar={DEFAULT_CALENDAR}
+                    locale={periodsSettings?.locale}
+                    date={formattedStartDate}
+                    onDateSelect={(e) =>
+                        onStartDateChange(e?.calendarDateString)
+                    }
+                    onChange={(e) => onDateChange('start', e?.value)}
+                    onBlur={(e) =>
+                        onStartDateChange(formatDateOnBlur(e?.value))
+                    }
+                    placeholder={DEFAULT_PLACEHOLDER}
+                    width={styles.width}
+                    dataTest="start-date-input"
+                    clearable={true}
+                />
+                <div className={styles.icon}>
+                    <IconArrowRight16 color={colors.grey500} />
+                </div>
+                <CalendarInput
+                    className="end"
+                    label={i18n.t('End date')}
+                    calendar={DEFAULT_CALENDAR}
+                    locale={periodsSettings?.locale}
+                    date={formattedEndDate}
+                    onDateSelect={(e) => onEndDateChange(e?.calendarDateString)}
+                    onChange={(e) => onDateChange('end', e?.value)}
+                    onBlur={(e) => onEndDateChange(formatDateOnBlur(e?.value))}
+                    placeholder={DEFAULT_PLACEHOLDER}
+                    width={styles.width}
+                    dataTest="end-date-input"
+                    clearable={true}
+                />
+            </div>
+            {errorText && <div className={styles.error}>{errorText}</div>}
+        </Field>
+    )
+}
+StartEndDate.propTypes = {
+    onEndDateChange: PropTypes.func.isRequired,
+    onStartDateChange: PropTypes.func.isRequired,
+    endDate: PropTypes.string,
+    errorText: PropTypes.string,
+    periodsSettings: PropTypes.shape({
+        calendar: PropTypes.string,
+        locale: PropTypes.string,
+    }),
+    startDate: PropTypes.string,
+}
+
+export default StartEndDate