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

package/src/calendar/navigation-container.js

@@ -0,0 +1,295 @@
+import { colors, spacers } from '@dhis2/ui-constants'
+import { IconChevronLeft16, IconChevronRight16 } from '@dhis2/ui-icons'
+import PropTypes from 'prop-types'
+import React from 'react'
+import i18n from '../locales/index.js'
+
+const wrapperBorderColor = colors.grey300
+const headerBackground = colors.grey100
+
+export const NavigationContainer = ({
+    languageDirection,
+    currMonth,
+    currYear,
+    nextMonth,
+    nextYear,
+    prevMonth,
+    prevYear,
+    navigateToYear,
+    navigateToMonth,
+    months,
+    years,
+}) => {
+    const PreviousIcon =
+        languageDirection === 'ltr' ? IconChevronLeft16 : IconChevronRight16
+    const NextIcon =
+        languageDirection === 'ltr' ? IconChevronRight16 : IconChevronLeft16
+
+    const handleYearChange = (e) => {
+        const targetYear = parseInt(e.target.value)
+        navigateToYear(targetYear)
+    }
+
+    const handleMonthChange = (e) => {
+        const selectedMonth = months.find(
+            (month) => month.label === e.target.value
+        )
+
+        if (selectedMonth) {
+            navigateToMonth(selectedMonth.value)
+        }
+    }
+
+    return (
+        <>
+            <div className="navigation-container">
+                <div className="month">
+                    <div className="prev">
+                        <button
+                            onClick={prevMonth.navigateTo}
+                            name="previous-month"
+                            data-test="calendar-previous-month"
+                            aria-label={`${i18n.t(`Go to ${prevMonth.label}`)}`}
+                            type="button"
+                        >
+                            <PreviousIcon />
+                        </button>
+                    </div>
+                    <div className="monthList">
+                        <select
+                            value={currMonth.label}
+                            onChange={handleMonthChange}
+                            className="month-select"
+                            data-test="calendar-month-select"
+                        >
+                            {months.map((month) => (
+                                <option key={month.value} value={month.label}>
+                                    {month.label}
+                                </option>
+                            ))}
+                        </select>
+                        <svg
+                            width="16"
+                            height="16"
+                            viewBox="0 0 16 16"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                        >
+                            <path
+                                d="M10.1465 6.85363L10.8536 6.14652L8.00004 3.29297L5.14648 6.14652L5.85359 6.85363L8.00004 4.70718L10.1465 6.85363ZM5.85367 9.1466L5.14656 9.8537L8.00011 12.7073L10.8537 9.8537L10.1466 9.1466L8.00011 11.293L5.85367 9.1466Z"
+                                fill={colors.grey700}
+                            />
+                        </svg>
+                    </div>
+                    <div className="next">
+                        <button
+                            onClick={nextMonth.navigateTo}
+                            data-test="calendar-next-month"
+                            name="next-month"
+                            aria-label={`${i18n.t(`Go to ${nextMonth.label}`)}`}
+                            type="button"
+                        >
+                            <NextIcon />
+                        </button>
+                    </div>
+                </div>
+                <div className="year">
+                    <div className="prev">
+                        <button
+                            onClick={prevYear.navigateTo}
+                            name="previous-year"
+                            aria-label={`${i18n.t('Go to previous year')}`}
+                            type="button"
+                        >
+                            <PreviousIcon />
+                        </button>
+                    </div>
+                    <div className="yearList">
+                        <select
+                            value={currYear.value}
+                            onChange={handleYearChange}
+                            className="year-select"
+                            data-test="calendar-year-select"
+                        >
+                            {years.map((year) => (
+                                <option key={year.value} value={year.value}>
+                                    {/* ToDo: this is a workaround for Ethiopic years showing the era
+                                    The workaround is needed but should be done in multi-calendar lib */}
+                                    {year.label?.replace(/ERA\d/, '')}
+                                </option>
+                            ))}
+                        </select>
+                        <svg
+                            width="16"
+                            height="16"
+                            viewBox="0 0 16 16"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                        >
+                            <path
+                                d="M10.1465 6.85363L10.8536 6.14652L8.00004 3.29297L5.14648 6.14652L5.85359 6.85363L8.00004 4.70718L10.1465 6.85363ZM5.85367 9.1466L5.14656 9.8537L8.00011 12.7073L10.8537 9.8537L10.1466 9.1466L8.00011 11.293L5.85367 9.1466Z"
+                                fill={colors.grey700}
+                            />
+                        </svg>
+                    </div>
+                    <div className="next">
+                        <button
+                            onClick={nextYear.navigateTo}
+                            name="next-year"
+                            aria-label={`${i18n.t('Go to next year')}`}
+                            type="button"
+                        >
+                            <NextIcon />
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <style jsx>{`
+                .navigation-container {
+                    display: flex;
+                    justify-content: space-between;
+                    gap: ${spacers.dp4};
+                    padding: ${spacers.dp4};
+                    border-bottom: 1px solid ${wrapperBorderColor};
+                    background-color: ${headerBackground};
+                    font-size: 1em;
+                    width: 100%;
+                }
+                .month,
+                .year {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    border: 1px solid ${colors.grey300};
+                    border-radius: 3px;
+                    background: ${colors.white};
+                }
+                .month {
+                    flex-grow: 1;
+                }
+                .prev {
+                    border-inline-end: 1px solid ${colors.grey300};
+                }
+                .next {
+                    border-inline-start: 1px solid ${colors.grey300};
+                }
+                .prev,
+                .next,
+                .monthList,
+                .yearList {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+                .prev,
+                .next {
+                    width: 20px;
+                    flex-shrink: 0;
+                }
+                .monthList,
+                .yearList {
+                    flex: 0 1 auto;
+                    overflow: hidden;
+                    position: relative;
+                }
+                .monthList {
+                    flex-grow: 1;
+                    width: 100%;
+                }
+                .monthList svg,
+                .yearList svg {
+                    position: absolute;
+                    inset-inline-end: 0px;
+                    pointer-events: none;
+                }
+                button {
+                    background: none;
+                    border: 0;
+                    padding: ${spacers.dp4} 2px;
+                    height: 24px;
+                    width: 20px;
+                    color: ${colors.grey700};
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+                button:hover {
+                    background-color: ${colors.grey200};
+                    color: ${colors.grey900};
+                    cursor: pointer;
+                }
+                .month-select,
+                .year-select {
+                    padding-inline-start: 4px;
+                    padding-inline-end: 16px;
+                    height: 24px;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-align: start;
+                    width: 100%;
+                    max-width: 100%;
+                    border-radius: 0px;
+                    border: 0;
+                    color: ${colors.grey800};
+                    background: none;
+                    appearance: none;
+                }
+                .month-select:hover,
+                .year-select:hover {
+                    background: ${colors.grey200};
+                    cursor: pointer;
+                }
+                .month-select:focus,
+                .month-select-active,
+                .year-select:focus,
+                .year-select-active {
+                    background: ${colors.grey200};
+                    outline-color: ${colors.grey700};
+                }
+            `}</style>
+        </>
+    )
+}
+
+export const NavigationContainerProps = {
+    currMonth: PropTypes.shape({
+        label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    }),
+    currYear: PropTypes.shape({
+        label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        value: PropTypes.number,
+    }),
+    languageDirection: PropTypes.oneOf(['ltr', 'rtl']),
+    months: PropTypes.arrayOf(
+        PropTypes.shape({
+            label: PropTypes.string.isRequired,
+            value: PropTypes.number.isRequired,
+        })
+    ),
+    navigateToMonth: PropTypes.func,
+    navigateToYear: PropTypes.func,
+    nextMonth: PropTypes.shape({
+        label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        navigateTo: PropTypes.func,
+    }),
+    nextYear: PropTypes.shape({
+        label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        navigateTo: PropTypes.func,
+    }),
+    prevMonth: PropTypes.shape({
+        label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        navigateTo: PropTypes.func,
+    }),
+    prevYear: PropTypes.shape({
+        label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        navigateTo: PropTypes.func,
+    }),
+    years: PropTypes.arrayOf(
+        PropTypes.shape({
+            label: PropTypes.string.isRequired,
+            value: PropTypes.number.isRequired,
+        })
+    ),
+}
+
+NavigationContainer.propTypes = NavigationContainerProps

package/src/calendar-input/__tests__/calendar-input.test.js

@@ -0,0 +1,344 @@
+import { Button } from '@dhis2-ui/button'
+import { fireEvent, render, waitFor, within } from '@testing-library/react'
+import React, { useState } from 'react'
+import { Field, Form } from 'react-final-form'
+import { CalendarInput } from '../calendar-input.js'
+
+describe('Calendar Input', () => {
+    it('allow selection of a date through the calendar widget', async () => {
+        jest.useFakeTimers()
+        jest.setSystemTime(new Date('2024-10-22T09:05:00.000Z'))
+
+        const onDateSelectMock = jest.fn()
+        const screen = render(
+            <CalendarInput calendar="gregory" onDateSelect={onDateSelectMock} />
+        )
+
+        const dateInput = within(
+            screen.getByTestId('dhis2-uicore-input')
+        ).getByRole('textbox')
+
+        fireEvent.focus(dateInput)
+
+        const calendar = await screen.findByTestId('calendar')
+        expect(calendar).toBeInTheDocument()
+
+        const todayString = '2024-10-22'
+        const today = within(calendar).getByTestId(todayString)
+
+        fireEvent.click(today)
+
+        await waitFor(() => {
+            expect(calendar).not.toBeInTheDocument()
+        })
+        expect(onDateSelectMock).toHaveBeenCalledWith(
+            expect.objectContaining({
+                calendarDateString: todayString,
+            })
+        )
+
+        jest.useRealTimers()
+    })
+
+    it('allow selection of a date through the input', async () => {
+        const onDateSelectMock = jest.fn()
+        const screen = render(
+            <CalendarInput calendar="gregory" onDateSelect={onDateSelectMock} />
+        )
+
+        const dateInputString = '2024/10/12'
+        const dateInput = within(
+            screen.getByTestId('dhis2-uicore-input')
+        ).getByRole('textbox')
+
+        fireEvent.change(dateInput, { target: { value: dateInputString } })
+        fireEvent.blur(dateInput)
+
+        expect(onDateSelectMock).toHaveBeenCalledWith(
+            expect.objectContaining({
+                calendarDateString: dateInputString,
+            })
+        )
+    })
+
+    describe('validation', () => {
+        it('should validate minimum date', () => {
+            const onDateSelectMock = jest.fn()
+            const screen = render(
+                <CalendarWithValidation
+                    calendar="gregory"
+                    minDate="2024-01-01"
+                    onDateSelect={onDateSelectMock}
+                />
+            )
+
+            const dateInputString = '2023-10-12'
+            const dateInput = within(
+                screen.getByTestId('dhis2-uicore-input')
+            ).getByRole('textbox')
+
+            fireEvent.change(dateInput, { target: { value: dateInputString } })
+            fireEvent.blur(dateInput)
+
+            expect(
+                screen.getByText(
+                    'Date 2023-10-12 is less than the minimum allowed date 2024-01-01.'
+                )
+            ).toBeInTheDocument()
+            expect(onDateSelectMock).toHaveBeenCalledTimes(1)
+        })
+        it('should validate maximum date', () => {
+            const { getByTestId, getByText } = render(
+                <CalendarWithValidation
+                    calendar="gregory"
+                    maxDate="2024-01-01"
+                />
+            )
+
+            const dateInputString = '2024-10-12'
+            const dateInput = within(
+                getByTestId('dhis2-uicore-input')
+            ).getByRole('textbox')
+
+            fireEvent.change(dateInput, { target: { value: dateInputString } })
+            fireEvent.blur(dateInput)
+
+            expect(
+                getByText(
+                    'Date 2024-10-12 is greater than the maximum allowed date 2024-01-01.'
+                )
+            ).toBeInTheDocument()
+        })
+        // Temporarily disabled
+        it.skip('should validate date in ethiopic calendar', () => {
+            const onDateSelectMock = jest.fn()
+            const { getByTestId, getByText, queryByText } = render(
+                <CalendarWithValidation
+                    calendar="ethiopian"
+                    minDate="2018-13-04"
+                    onDateSelect={onDateSelectMock}
+                />
+            )
+
+            let dateInputString = '2018-13-02'
+            const dateInput = within(
+                getByTestId('dhis2-uicore-input')
+            ).getByRole('textbox')
+
+            fireEvent.change(dateInput, { target: { value: dateInputString } })
+            fireEvent.blur(dateInput)
+
+            expect(
+                getByTestId('dhis2-uiwidgets-calendar-inputfield-validation')
+            ).toBeInTheDocument()
+            expect(
+                getByText(
+                    'Date 2018-13-02 is less than the minimum allowed date 2018-13-04.'
+                )
+            ).toBeInTheDocument()
+
+            dateInputString = '2018-13-05'
+            fireEvent.change(dateInput, { target: { value: dateInputString } })
+            fireEvent.blur(dateInput)
+
+            expect(
+                queryByText(
+                    'Date 2018-13-04 is less than the minimum allowed date 2018-13-05.'
+                )
+            ).not.toBeInTheDocument()
+
+            dateInputString = '2018-13-07'
+            fireEvent.change(dateInput, { target: { value: dateInputString } })
+            fireEvent.blur(dateInput)
+
+            expect(
+                getByText('Invalid date in specified calendar')
+            ).toBeInTheDocument()
+        })
+        // ToDo: these scenarios seem to work but they timeout on CI sporadically - ticket: https://dhis2.atlassian.net/browse/LIBS-763
+        it('should validate date in nepali calendar', () => {
+            const onDateSelectMock = jest.fn()
+            const { getByTestId, getByText, queryByText } = render(
+                <CalendarWithValidation
+                    calendar="nepali"
+                    maxDate="2080-05-30"
+                    onDateSelect={onDateSelectMock}
+                />
+            )
+
+            let dateInputString = '2080-06-01'
+            const dateInput = within(
+                getByTestId('dhis2-uicore-input')
+            ).getByRole('textbox')
+
+            fireEvent.change(dateInput, { target: { value: dateInputString } })
+            fireEvent.blur(dateInput)
+
+            expect(
+                getByText(
+                    'Date 2080-06-01 is greater than the maximum allowed date 2080-05-30.'
+                )
+            ).toBeInTheDocument()
+
+            dateInputString = '2080-04-32'
+            fireEvent.change(dateInput, { target: { value: dateInputString } })
+            fireEvent.blur(dateInput)
+
+            expect(
+                queryByText(/greater than the maximum allowed date/)
+            ).not.toBeInTheDocument()
+
+            dateInputString = '2080-01-32'
+            fireEvent.change(dateInput, { target: { value: dateInputString } })
+            fireEvent.blur(dateInput)
+
+            expect(
+                getByText('Invalid date in specified calendar')
+            ).toBeInTheDocument()
+        })
+        it('should validate from date picker', () => {
+            jest.useFakeTimers()
+            jest.setSystemTime(new Date('2024-10-22T09:05:00.000Z'))
+
+            const onDateSelectMock = jest.fn()
+            const { queryByText, getByText, getByTestId } = render(
+                <CalendarWithValidation
+                    calendar="gregory"
+                    minDate="2024-02-16"
+                    onDateSelect={onDateSelectMock}
+                />
+            )
+
+            const dateInput = within(
+                getByTestId('dhis2-uicore-input')
+            ).getByRole('textbox')
+
+            fireEvent.focusIn(dateInput)
+            fireEvent.click(getByText('17'))
+
+            expect(queryByText('17')).not.toBeInTheDocument()
+
+            // Checking fix for Bug where callback used to be called twice - first with undefined
+            expect(onDateSelectMock).toHaveBeenCalledTimes(1)
+            expect(onDateSelectMock).toHaveBeenCalledWith({
+                calendarDateString: '2024-10-17',
+                validation: { error: false, valid: true, warning: false },
+            })
+
+            jest.useRealTimers()
+        })
+
+        it('should validate with Clear', () => {
+            const onDateSelectMock = jest.fn()
+            const { queryByText, getByText, getByTestId } = render(
+                <CalendarWithValidation
+                    calendar="gregory"
+                    minDate="2024-02-16"
+                    onDateSelect={onDateSelectMock}
+                    clearable
+                />
+            )
+
+            const dateInputString = '2023-10-12'
+            const dateInput = within(
+                getByTestId('dhis2-uicore-input')
+            ).getByRole('textbox')
+
+            fireEvent.change(dateInput, { target: { value: dateInputString } })
+            fireEvent.blur(dateInput)
+
+            expect(
+                getByTestId('dhis2-uiwidgets-calendar-inputfield-validation')
+            ).toBeInTheDocument()
+
+            fireEvent.click(getByText('Clear'))
+            expect(queryByText('17')).not.toBeInTheDocument()
+
+            expect(onDateSelectMock).toHaveBeenLastCalledWith({
+                calendarDateString: null,
+                validation: { valid: true },
+            })
+        })
+
+        it('should validate when Clearing manually (i.e. deleting text not using clear button)', () => {
+            const onDateSelectMock = jest.fn()
+            const { getByTestId } = render(
+                <CalendarWithValidation
+                    calendar="gregory"
+                    minDate="2024-02-16"
+                    onDateSelect={onDateSelectMock}
+                    clearable
+                />
+            )
+
+            const dateInputString = '2023-10-12'
+            const dateInput = within(
+                getByTestId('dhis2-uicore-input')
+            ).getByRole('textbox')
+
+            fireEvent.change(dateInput, { target: { value: dateInputString } })
+            fireEvent.blur(dateInput)
+
+            expect(
+                getByTestId('dhis2-uiwidgets-calendar-inputfield-validation')
+            ).toBeInTheDocument()
+
+            fireEvent.change(dateInput, { target: { value: '' } })
+            fireEvent.blur(dateInput)
+
+            expect(onDateSelectMock).toHaveBeenCalledWith({
+                calendarDateString: null,
+                validation: { valid: true },
+            })
+        })
+    })
+})
+
+const CalendarWithValidation = (propsFromParent) => {
+    const [date, setDate] = useState()
+
+    const [validation, setValidation] = useState({})
+
+    const errored = () => {
+        if (validation?.error) {
+            return { calendar: validation.validationText }
+        }
+    }
+
+    return (
+        <Form onSubmit={() => {}} validate={errored}>
+            {({ handleSubmit, invalid }) => {
+                return (
+                    <form>
+                        <Field name="calendar">
+                            {(props) => (
+                                <CalendarInput
+                                    {...props}
+                                    date={date}
+                                    label="Enter a date"
+                                    editable
+                                    calendar="gregory"
+                                    {...validation}
+                                    {...propsFromParent}
+                                    onDateSelect={(date) => {
+                                        setDate(date?.calendarDateString)
+                                        setValidation(date?.validation)
+                                        propsFromParent.onDateSelect?.(date)
+                                    }}
+                                />
+                            )}
+                        </Field>
+
+                        <Button
+                            type="submit"
+                            disabled={invalid}
+                            onClick={handleSubmit}
+                        >
+                            Submit
+                        </Button>
+                    </form>
+                )
+            }}
+        </Form>
+    )
+}