chore: refactor code

dhis2 · May 29, 2024 · ca038ec · ca038ec
1 parent 2f336fb
commit ca038ec
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 97 deletions.
diff --git a/components/calendar/src/calendar-input/calendar-input.js b/components/calendar/src/calendar-input/calendar-input.js
@@ -1,9 +1,9 @@
 import { Button } from '@dhis2-ui/button'
 import { Card } from '@dhis2-ui/card'
-import { InputField, InputFieldProps } from '@dhis2-ui/input'
+import { InputField } from '@dhis2-ui/input'
 import { Layer } from '@dhis2-ui/layer'
 import { Popper } from '@dhis2-ui/popper'
-import { validateDateString } from '@dhis2/multi-calendar-dates'
+import { useDatePicker } from '@dhis2/multi-calendar-dates'
 import cx from 'classnames'
 import React, { useRef, useState, useEffect } from 'react'
 import { Calendar, CalendarProps } from '../calendar/calendar.js'
@@ -31,10 +31,11 @@ export const CalendarInput = ({
     editable,
     minDate,
     maxDate,
+    format,
+    validation,
     ...rest
 } = {}) => {
     const ref = useRef()
-    const [tempDate, setTempDate] = useState(date)
     const [open, setOpen] = useState(false)
     const [error, setError] = useState('')
     const [warning, setWarning] = useState('')
@@ -69,49 +70,34 @@ export const CalendarInput = ({
         width,
     ])
 
-    const onFocus = () => {
-        setOpen(true)
-    }
+    const pickerOptions = useDatePicker({
+        onDateSelect: (result) => {
+            setOpen(false)
+            onDateSelect(result)
+        },
+        date: date,
+        minDate: minDate,
+        maxDate: maxDate,
+        validation: validation,
+        format: format,
+        options: calendarProps,
+    })
 
     useEffect(() => {
-        setTempDate(date)
-        const { isValid, errorMessage, warningMessage } = validateDateString(
-            date,
-            {
-                minDateString: minDate,
-                maxDateString: maxDate,
-                validationType: 'throw',
-            }
-        )
-        if (isValid) {
-            setError('')
-            setWarning(warningMessage || '')
-        } else {
-            setError(errorMessage)
-            setOpen(true)
-        }
-    }, [date, maxDate, minDate])
+        setError(pickerOptions.errorMessage || '')
+        setWarning(pickerOptions.warningMessage || '')
+    }, [
+        pickerOptions.errorMessage,
+        pickerOptions.warningMessage,
+        pickerOptions.isValid,
+    ])
 
     const handleChange = (e) => {
-        setOpen(false)
-        const newDate = e.value
-        setTempDate(newDate)
-        const { isValid, errorMessage, warningMessage } = validateDateString(
-            newDate,
-            {
-                minDateString: minDate,
-                maxDateString: maxDate,
-                validationType: 'throw',
-            }
-        )
+        onDateSelect?.({ calendarDateString: e.value })
+    }
+
+    const onFocus = () => {
         setOpen(true)
-        if (isValid) {
-            setError('')
-            setWarning(warningMessage || '')
-            onDateSelect({ calendarDateString: newDate })
-        } else {
-            setError(errorMessage)
-        }
     }
 
     return (
@@ -122,7 +108,7 @@ export const CalendarInput = ({
                     {...rest}
                     type="text"
                     onFocus={onFocus}
-                    value={tempDate}
+                    value={date}
                     onChange={editable ? handleChange : undefined}
                     validationText={error || warning}
                     error={!!error}
@@ -144,7 +130,6 @@ export const CalendarInput = ({
                             secondary
                             small
                             onClick={() => {
-                                setTempDate('')
                                 onDateSelect?.(null)
                             }}
                             type="button"
@@ -166,7 +151,11 @@ export const CalendarInput = ({
                         modifiers={[offsetModifier]}
                     >
                         <Card>
-                            <Calendar {...calendarProps} date={date} />
+                            <Calendar
+                                {...calendarProps}
+                                {...pickerOptions}
+                                date={date}
+                            />
                         </Card>
                     </Popper>
                 </Layer>
@@ -199,5 +188,4 @@ CalendarInput.defaultProps = {
 }
 CalendarInput.propTypes = {
     ...CalendarProps,
-    ...InputFieldProps,
 }
diff --git a/components/calendar/src/calendar/calendar.js b/components/calendar/src/calendar/calendar.js
@@ -1,55 +1,27 @@
-import {
-    useDatePicker,
-    useResolvedDirection,
-} from '@dhis2/multi-calendar-dates'
+import { useResolvedDirection } from '@dhis2/multi-calendar-dates'
 import { colors } from '@dhis2/ui-constants'
 import PropTypes from 'prop-types'
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { CalendarTable } from './calendar-table.js'
 import { NavigationContainer } from './navigation-container.js'
 
-export const Calendar = ({
-    onDateSelect,
-    calendar,
-    date,
-    dir,
-    locale,
-    numberingSystem,
-    weekDayFormat,
-    timeZone,
-    width,
-    cellSize,
-}) => {
+export const Calendar = (calendarProps) => {
+    const {
+        date,
+        dir,
+        locale,
+        width,
+        cellSize,
+        calendarWeekDays,
+        weekDayLabels,
+        isValid,
+    } = calendarProps
+
     const wrapperBorderColor = colors.grey300
     const backgroundColor = 'none'
 
-    const [selectedDateString, setSelectedDateString] = useState(date)
     const languageDirection = useResolvedDirection(dir, locale)
 
-    useEffect(() => {
-        setSelectedDateString(date)
-    }, [date])
-
-    const options = {
-        locale,
-        calendar,
-        timeZone,
-        numberingSystem,
-        weekDayFormat,
-    }
-
-    const pickerOptions = useDatePicker({
-        onDateSelect: (result) => {
-            const { calendarDateString } = result
-            setSelectedDateString(calendarDateString)
-            onDateSelect(result)
-        },
-        date: selectedDateString,
-        options,
-    })
-
-    const { calendarWeekDays, weekDayLabels } = pickerOptions
-
     return (
         <div>
             <div
@@ -58,11 +30,11 @@ export const Calendar = ({
                 data-test="calendar"
             >
                 <NavigationContainer
-                    pickerOptions={pickerOptions}
+                    pickerOptions={calendarProps}
                     languageDirection={languageDirection}
                 />
                 <CalendarTable
-                    selectedDate={selectedDateString}
+                    selectedDate={isValid ? date : null}
                     calendarWeekDays={calendarWeekDays}
                     weekDayLabels={weekDayLabels}
                     cellSize={cellSize}
@@ -96,10 +68,6 @@ Calendar.defaultProps = {
 }
 
 export const CalendarProps = {
-    /** the calendar to use such gregory, ethiopic, nepali - full supported list here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/calendars.ts  */
-    calendar: PropTypes.any.isRequired,
-    /** Called with signature `(null)` \|\| `({ dateCalendarString: string, dateCalendar: Temporal.ZonedDateTime })` with `dateCalendarString` being the stringified date in the specified calendar in the format `yyyy-MM-dd` */
-    onDateSelect: PropTypes.func.isRequired,
     /** the size of a single cell in the table forming the calendar */
     cellSize: PropTypes.string,
     /** the currently selected date using an iso-like format YYYY-MM-DD, in the calendar system provided (not iso8601) */
@@ -108,14 +76,12 @@ export const CalendarProps = {
     dir: PropTypes.oneOf(['ltr', 'rtl']),
     /** any valid locale -  if none provided, the internal library will fallback to the user locale (more info here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/hooks/internal/useResolvedLocaleOptions.ts#L15) */
     locale: PropTypes.string,
-    /** numbering system to use - full list here https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/numberingSystems.ts */
-    numberingSystem: PropTypes.string,
-    /** the timeZone to use */
-    timeZone: PropTypes.string,
     /** the format to display for the week day, i.e. Monday (long), Mon (short), M (narrow) */
     weekDayFormat: PropTypes.oneOf(['narrow', 'short', 'long']),
     /** the width of the calendar component */
     width: PropTypes.string,
+    /** is date valid and within range */
+    isValid: PropTypes.bool,
 }
 
 Calendar.propTypes = CalendarProps