Improve calendar selects

ecmwf-projects · Oct 16, 2023 · 96cd847 · 96cd847
1 parent a701f7d
commit 96cd847
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 29 deletions.
diff --git a/src/common/DateField.tsx b/src/common/DateField.tsx
@@ -32,8 +32,8 @@ interface DateFieldProps {
   value: CalendarDate
   onChange(date: CalendarDate): void
   defaultValue: CalendarDate
-  minStart: CalendarDate
-  maxEnd: CalendarDate
+  minStart?: CalendarDate
+  maxEnd?: CalendarDate
   isDateUnavailable?: (date: DateValue) => boolean
   error?: string
   disabled?: boolean
@@ -83,7 +83,7 @@ const DateField = ({
       </StyledReservedSpace>
       <StyledPopover>
         <StyledDialog>
-          <StyledCalendar>
+          <StyledCalendar focusedValue={value}>
             <StyledCalendarHeader>
               {months && months.length > 0 && years && years.length > 0 ? (
                 <DateSelects
@@ -148,8 +148,8 @@ const DateSelects = React.memo(
     const monthOptions = React.useMemo(
       () =>
         months.map((m, i) => ({
-          id: (m + 1).toString(),
-          label: Months[m]
+          id: m.toString(),
+          label: Months[m - 1]
         })),
       [months]
     )
@@ -160,7 +160,6 @@ const DateSelects = React.memo(
         target: { value: selectValue }
       }: React.ChangeEvent<HTMLSelectElement>) => {
         const newDate = value.set({ [key]: parseInt(selectValue) })
-        console.log(selectValue, newDate.month)
         onDateChange(newDate)
       }
 

diff --git a/src/widgets/DateRangeWidget.tsx b/src/widgets/DateRangeWidget.tsx
@@ -118,6 +118,10 @@ const getDateLimits = (
   const fMinStart = parseDate(minStart),
     fMaxEnd = parseDate(maxEnd)
 
+  if (!fMinStart || !fMaxEnd || !startDate || !endDate) {
+    return {}
+  }
+
   let startMinDate = fMinStart,
     startMaxDate = endDate,
     endMinDate = startDate,
@@ -141,32 +145,49 @@ const getDateLimits = (
 
 const getAvailableYears = (minDate: CalendarDate, maxDate: CalendarDate) => {
   const delta = maxDate.year - minDate.year
-  if (delta <= 0) {
+
+  console.log(minDate, maxDate, delta)
+
+  if (maxDate.year === minDate.year || delta <= 0) {
     return [minDate.year]
   }
 
-  return new Array(delta).fill(0).map((_, i) => minDate.year + i)
+  return new Array(delta + 1).fill(0).map((_, i) => minDate.year + i)
 }
 
-const getAvailableMonths = () =>
-  // date: CalendarDate,
-  // minDate: CalendarDate,
-  // maxDate: CalendarDate
-  {
-    // if (date.year !== minDate.year && date.year !== maxDate.year) {
-    //   if (date.year === minDate.year && date.year === maxDate.year) {
-    //     const delta = maxDate.month - minDate.month;
-    //     return new Array(delta).map((_, i) => minDate.month + i);
-    //   }
+const getAvailableMonths = (
+  date?: CalendarDate,
+  minDate?: CalendarDate,
+  maxDate?: CalendarDate
+) => {
+  if (!date || !minDate || !maxDate) {
+    return []
+  }
 
-    //   if (date.year === minDate.year) {
+  if (date.year === minDate.year && date.year === maxDate.year) {
+    const delta = maxDate.month - minDate.month + 1
+    return delta >= 0
+      ? new Array(delta).fill(0).map((_, i) => minDate.month + i)
+      : [minDate.month]
+  }
 
-    //   }
-    // }
+  if (date.year === minDate.year) {
+    const delta = 12 - minDate.month + 1
+    return delta >= 0
+      ? new Array(delta).fill(0).map((_, i) => minDate.month + i)
+      : [minDate.month]
+  }
 
-    return new Array(12).fill(1).map((_, i) => i)
+  if (date.year === maxDate.year) {
+    const delta = maxDate.month
+    return delta >= 0
+      ? new Array(delta).fill(1).map((_, i) => i + 1)
+      : [date.month]
   }
 
+  return new Array(12).fill(1).map((_, i) => i + 1)
+}
+
 interface DateRangeWidgetConfiguration {
   type: 'DateRangeWidget'
   help: string | null
@@ -285,14 +306,26 @@ const DateRangeWidget = ({
     }, [startDate, endDate, configuration.details])
 
   const startYears = React.useMemo(() => {
-    return getAvailableYears(startMinDate, endDate)
-  }, [startMinDate, endDate.year])
+    return startMinDate && startMaxDate
+      ? getAvailableYears(startMinDate, startMaxDate)
+      : []
+  }, [startMinDate, startMaxDate])
 
   const endYears = React.useMemo(() => {
-    return getAvailableYears(startDate, startMaxDate)
-  }, [startDate.year, startMaxDate])
+    return endMinDate && endMaxDate
+      ? getAvailableYears(endMinDate, endMaxDate)
+      : []
+  }, [endMinDate, endMaxDate])
+
+  const startMonths = React.useMemo(
+    () => getAvailableMonths(startDate, startMinDate, startMaxDate),
+    [startDate, startMinDate, startMaxDate]
+  )
 
-  const months = React.useMemo(() => getAvailableMonths(), [])
+  const endMonths = React.useMemo(
+    () => getAvailableMonths(endDate, endMinDate, endMaxDate),
+    [endDate, endMinDate, endMaxDate]
+  )
 
   return (
     <Widget data-stylizable='widget date-range-widget'>
@@ -327,7 +360,7 @@ const DateRangeWidget = ({
             disabled={disabled}
             required={configuration.required}
             years={startYears}
-            months={months}
+            months={startMonths}
           />
           <DateField
             value={endDate}
@@ -342,7 +375,7 @@ const DateRangeWidget = ({
             disabled={disabled}
             required={configuration.required}
             years={endYears}
-            months={months}
+            months={endMonths}
           />
         </Row>
       </Fieldset>