feat: add icon-button that opens the picker widget

dhis2 · Jan 25, 2024 · 6203ab3 · 6203ab3
1 parent 74b2ce1
commit 6203ab3
Showing 2 changed files with 65 additions and 56 deletions.
diff --git a/components/calendar/src/calendar-input/calendar-input.js b/components/calendar/src/calendar-input/calendar-input.js
@@ -4,6 +4,7 @@ import { InputField, InputFieldProps } from '@dhis2-ui/input'
 import { Layer } from '@dhis2-ui/layer'
 import { Popper } from '@dhis2-ui/popper'
 import { useDatePicker } from '@dhis2/multi-calendar-dates'
+import { IconCheckmark24 } from '@dhis2/ui-icons'
 import cx from 'classnames'
 import React, { useCallback, useRef, useState } from 'react'
 import { Calendar, CalendarProps } from '../calendar/calendar.js'
@@ -50,72 +51,45 @@ export const CalendarInput = ({
     const ref = useRef()
     const [open, setOpen] = useState(false)
     const [tempInputValue, _setTempInputValue] = useState(date)
-
-    const setTempInputValue = (nextTempValue) => {
+    const currentValidDate = validateInput(tempInputValue)
+        ? tempInputValue
+        : date
+    const { calendarWeekDays } = useDatePicker({
+        date: currentValidDate,
+        options: { calendar },
+    })
+
+    const setTempInputValue = useCallback((nextTempValue) => {
         _setTempInputValue(nextTempValue)
         const isValidInputDate = validateInput(nextTempValue)
 
         if (isValidInputDate) {
-            const [year, month, day] = nextTempValue.split('-')
-            const nextDate = Temporal.PlainDate.from({
-                calendar,
-                year,
-                month,
-                day,
-            })
-
+            const calendarDate = searchCalendarWeekDays(nextTempValue, calendarWeekDays)
             onDateSelect({
-                calendarDate: nextDate,
+                calendarDate,
                 calendarDateString: nextTempValue,
             })
         }
-    }
+    }, [onDateSelect, calendarWeekDays])
 
-    const calendarProps = React.useMemo(() => {
-        const onDateSelectWrapper = (selectedDate) => {
-            setOpen(false)
-            setTempInputValue(selectedDate.calendarDateString)
-        }
-
-        return {
-            onDateSelect: onDateSelectWrapper,
-            calendar,
-            date,
-            dir,
-            locale,
-            numberingSystem,
-            weekDayFormat,
-            timeZone,
-            width,
-            cellSize,
-        }
-    }, [
-        calendar,
-        cellSize,
-        date,
-        dir,
-        locale,
-        numberingSystem,
-        timeZone,
-        weekDayFormat,
-        width,
-    ])
-
-    const onFocus = () => {
-        setOpen(true)
-    }
+    const onDateSelectWrapper = useCallback((selectedDate) => {
+        setOpen(false)
+        setTempInputValue(selectedDate?.calendarDateString || '')
+    }, [setTempInputValue])
 
     return (
         <>
             <div className="calendar-input-wrapper" ref={ref}>
-                <InputField
-                    label="Pick a date"
-                    {...rest}
-                    type="text"
-                    onFocus={onFocus}
-                    value={tempInputValue}
-                    onChange={({ value }) => setTempInputValue(value)}
-                />
+                <div className="input">
+                    <InputField
+                        label="Pick a date"
+                        {...rest}
+                        type="text"
+                        value={tempInputValue}
+                        onChange={({ value }) => setTempInputValue(value)}
+                    />
+                </div>
+
                 {clearable && (
                     <div
                         className={cx('calendar-clear-button', {
@@ -134,13 +108,22 @@ export const CalendarInput = ({
                             dataTest="calendar-clear-button"
                             secondary
                             small
-                            onClick={() => calendarProps.onDateSelect(null)}
+                            onClick={() => {
+                                onDateSelectWrapper(null)
+                            }}
                             type="button"
                         >
                             {i18n.t('Clear')}
                         </Button>
                     </div>
                 )}
+
+                <div className="open-calendar-widget">
+                    <Button
+                        icon={<IconCheckmark24 color="#000000" />}
+                        onClick={() => setOpen(true)}
+                    />
+                </div>
             </div>
             {open && (
                 <Layer
@@ -154,7 +137,18 @@ export const CalendarInput = ({
                         modifiers={[offsetModifier]}
                     >
                         <Card>
-                            <Calendar {...calendarProps} date={date} />
+                            <Calendar
+                                onDateSelect={onDateSelectWrapper}
+                                calendar={calendar}
+                                date={date}
+                                dir={dir}
+                                locale={locale}
+                                numberingSystem={numberingSystem}
+                                weekDayFormat={weekDayFormat}
+                                timeZone={timeZone}
+                                width={width}
+                                cellSize={cellSize}
+                            />
                         </Card>
                     </Popper>
                 </Layer>
@@ -164,19 +158,33 @@ export const CalendarInput = ({
                 {`
                     .calendar-input-wrapper {
                         position: relative;
+                        display: flex;
+                        gap: 8px;
+                    }
+
+                    .input {
+                        flex-grow: 1;
                     }
+
                     .calendar-clear-button {
                         position: absolute;
-                        inset-inline-end: 6px;
+                        inset-inline-end: 51px;
                         inset-block-start: 27px;
                     }
 
                     .calendar-clear-button.with-icon {
                         inset-inline-end: 36px;
+
                     }
+
                     .calendar-clear-button.with-dense-wrapper {
                         inset-block-start: 23px;
                     }
+
+                    .open-calendar-widget {
+                        padding-top: 22px;
+                        flex-shrink: 1;
+                    }
                 `}
             </style>
         </>

diff --git a/components/calendar/src/stories/calendar-input.stories.js b/components/calendar/src/stories/calendar-input.stories.js
@@ -27,6 +27,7 @@ const buildCalendar =
     () =>
         (
             <CalendarStoryWrapper
+                clearable
                 component={CalendarInput}
                 dir="ltr"
                 timeZone="Africa/Khartoum"