ui-core: enable the user to type in the date picker

Signed-off-by: Clara Ni <[email protected]>

Author: clarani

ui-core/src/components/inputs/datePicker/CalendarPicker.tsx

@@ -15,12 +15,12 @@ export type CalendarPickerPrivateProps = {
     left: number;
   };
   calendarPickerRef: React.RefObject<HTMLDivElement>;
+  selectableSlot?: CalendarSlot;
 };
 
 export type CalendarPickerPublicProps = {
   initialDate?: Date;
   numberOfMonths?: 1 | 2 | 3;
-  selectableSlot?: CalendarSlot;
 };
 
 export type CalendarPickerProps = CalendarPickerPrivateProps & CalendarPickerPublicProps;

ui-core/src/components/inputs/datePicker/DatePicker.tsx

@@ -9,8 +9,11 @@ import useDatePicker from './useDatePicker';
 import Input, { type InputProps } from '../Input';
 
 type BaseDatePickerProps = {
+  selectableSlot?: CalendarSlot;
   inputProps: InputProps;
   calendarPickerProps?: CalendarPickerPublicProps;
+  errorMessage?: string;
+  width?: number;
 };
 
 export type SingleDatePickerProps = BaseDatePickerProps & {
@@ -30,6 +33,7 @@ export type DatePickerProps = SingleDatePickerProps | RangeDatePickerProps;
 export const DatePicker = (props: DatePickerProps) => {
   const {
     inputValue,
+    inputIsValid,
     selectedSlot,
     showPicker,
     modalPosition,
@@ -38,8 +42,12 @@ export const DatePicker = (props: DatePickerProps) => {
     setShowPicker,
     handleDayClick,
     handleInputClick,
+    handleInputOnChange,
   } = useDatePicker(props);
+
   const { inputFieldWrapperClassname, ...otherInputProps } = props.inputProps;
+  const { selectableSlot, errorMessage } = props;
+
   return (
     <div className="date-picker">
       <div>
@@ -53,8 +61,19 @@ export const DatePicker = (props: DatePickerProps) => {
             content: <CalendarIcon />,
             onClickCallback: () => setShowPicker(!showPicker),
           }}
-          inputFieldWrapperClassname={cx('date-picker-input', inputFieldWrapperClassname)}
+          inputFieldWrapperClassname={cx('date-picker-input', inputFieldWrapperClassname, {
+            'range-mode': props.isRangeMode,
+          })}
           autoComplete="off"
+          onChange={handleInputOnChange}
+          statusWithMessage={
+            !inputIsValid
+              ? {
+                  status: 'error',
+                  message: errorMessage ?? 'Invalid date',
+                }
+              : undefined
+          }
         />
       </div>
       {showPicker && (
@@ -65,6 +84,7 @@ export const DatePicker = (props: DatePickerProps) => {
             onDayClick={handleDayClick}
             modalPosition={modalPosition}
             calendarPickerRef={calendarPickerRef}
+            selectableSlot={selectableSlot}
           />
         </div>
       )}

ui-core/src/components/inputs/datePicker/useCalendarPicker.ts

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { type CalendarPickerProps } from './CalendarPicker';
 import { generateSequentialDates, validateSlots } from './utils';
@@ -10,9 +10,9 @@ export default function useCalendarPicker({
   numberOfMonths = 1,
 }: Omit<CalendarPickerProps, 'modalPosition' | 'calendarPickerRef' | 'onDayClick'>) {
   validateSlots(selectedSlot, selectableSlot, initialDate);
-  const initialActiveDate =
-    initialDate ?? selectedSlot?.start ?? selectableSlot?.start ?? new Date();
-  const [activeDate, setActiveDate] = useState<Date>(initialActiveDate);
+
+  const [activeDate, setActiveDate] = useState(new Date());
+
   const displayedMonthsStartDates = generateSequentialDates(activeDate, numberOfMonths);
 
   const activeYear = activeDate.getFullYear();
@@ -48,6 +48,10 @@ export default function useCalendarPicker({
     }
   };
 
+  useEffect(() => {
+    setActiveDate(initialDate ?? selectedSlot?.start ?? selectableSlot?.start ?? new Date());
+  }, [initialDate, selectedSlot, selectableSlot]);
+
   return {
     displayedMonthsStartDates,
     showNavigationBtn,

ui-core/src/components/inputs/datePicker/useDatePicker.ts

@@ -1,25 +1,38 @@
 import { useState, useRef, useEffect } from 'react';
 
 import type { DatePickerProps } from './DatePicker';
-import { computeNewSelectedSlot, formatInputValue, formatValueToSlot } from './utils';
+import {
+  computeNewSelectedSlot,
+  formatInputValue,
+  formatValueToSlot,
+  isWithinInterval,
+} from './utils';
 import { useModalPosition } from '../../../hooks/useModalPosition';
 import useOutsideClick from '../../../hooks/useOutsideClick';
 
 const MODAL_HORIZONTAL_OFFSET = -24;
 const MODAL_VERTICAL_OFFSET = 3;
 
+// Regex for "xx/xx/xx"
+const SINGLE_DATE_REGEX = /^\d{2}\/\d{2}\/\d{2}$/;
+
 export default function useDatePicker(datePickerProps: DatePickerProps) {
-  const { inputProps, value, isRangeMode, onDateChange } = datePickerProps;
+  const { value, isRangeMode, selectableSlot, onDateChange } = datePickerProps;
   const [showPicker, setShowPicker] = useState(false);
   const [inputValue, setInputValue] = useState(formatInputValue(datePickerProps));
   const [selectedSlot, setSelectedSlot] = useState(formatValueToSlot(datePickerProps));
+  const [inputIsValid, setInputIsValid] = useState(true);
 
   const calendarPickerRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   useOutsideClick(calendarPickerRef, (e) => {
     // Do not close the picker if any children in input wrapper is clicked.
     // This wrapper include, the input itself, the trailing content (which contains the calendar icon) and the leading content
-    if (inputRef.current && inputRef.current.parentElement?.contains(e.target as Node)) return;
+    if (
+      inputRef.current &&
+      inputRef.current.parentElement?.parentElement?.contains(e.target as Node)
+    )
+      return;
     setShowPicker(false);
   });
   const { calculatePosition, modalPosition } = useModalPosition(
@@ -29,9 +42,10 @@ export default function useDatePicker(datePickerProps: DatePickerProps) {
     MODAL_HORIZONTAL_OFFSET
   );
 
-  const handleInputClick = (e: React.MouseEvent<HTMLInputElement, MouseEvent>) => {
-    setShowPicker(true);
-    inputProps.onClick?.(e);
+  const handleInputClick = () => {
+    if (isRangeMode) {
+      setShowPicker(true);
+    }
   };
 
   const handleDayClick = (clickedDate: Date) => {
@@ -43,25 +57,53 @@ export default function useDatePicker(datePickerProps: DatePickerProps) {
     }
   };
 
+  const handleInputOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (isRangeMode) {
+      return;
+    }
+
+    const inputIsValid = SINGLE_DATE_REGEX.test(e.target.value);
+    setInputValue(e.target.value);
+
+    if (inputIsValid) {
+      const [day, month, year] = e.target.value.split('/').map(Number);
+      const date = new Date(year + 2000, month - 1, day);
+
+      if (!isNaN(date.getTime()) && isWithinInterval(date, selectableSlot) && onDateChange) {
+        onDateChange(date);
+      } else {
+        setInputIsValid(false);
+      }
+    }
+  };
+
   useEffect(() => {
     if (showPicker) calculatePosition();
   }, [showPicker, calculatePosition]);
 
   useEffect(() => {
-    setInputValue(formatInputValue(datePickerProps));
+    const newInput = formatInputValue(datePickerProps);
+    if (newInput !== inputValue) {
+      // we only set the input value if it has changed
+      // otherwise the user loses the focus
+      setInputValue(newInput);
+    }
+    setInputIsValid(true);
     setSelectedSlot(formatValueToSlot(datePickerProps));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
 
   return {
     showPicker,
     inputValue,
+    inputIsValid,
     selectedSlot,
     modalPosition,
     inputRef,
     calendarPickerRef,
     setShowPicker,
     handleDayClick,
     handleInputClick,
+    handleInputOnChange,
   };
 }

ui-core/src/stories/DatePicker.stories.tsx

@@ -10,6 +10,7 @@ import {
   type CalendarSlot,
 } from '../components/inputs/datePicker';
 import '@osrd-project/ui-core/dist/theme.css';
+import './stories.css';
 
 const now = new Date();
 const endSelectableDate = new Date(now);
@@ -38,11 +39,13 @@ const DatePickerStory = (props: DatePickerProps) => {
     );
   } else {
     return (
-      <DatePicker
-        {...props}
-        value={value as SingleDatePickerProps['value']}
-        onDateChange={onDayChange}
-      />
+      <div className="date-picker-story-wrapper">
+        <DatePicker
+          {...props}
+          value={value as SingleDatePickerProps['value']}
+          onDateChange={onDayChange}
+        />
+      </div>
     );
   }
 };
@@ -64,13 +67,14 @@ const meta: Meta<typeof DatePicker> = {
     },
   },
   args: {
+    selectableSlot,
     calendarPickerProps: {
       numberOfMonths: 1,
-      selectableSlot,
     },
     inputProps: {
       id: 'date-picker',
       label: 'Select a date',
+      inputFieldWrapperClassname: 'date-picker-input-wrapper',
     },
   },
   render: (props) => <DatePickerStory {...props} />,

ui-core/src/stories/stories.css

@@ -0,0 +1,5 @@
+.date-picker-story-wrapper {
+  .date-picker-input-wrapper {
+    width: 300px;
+  }
+}

ui-core/src/styles/inputs/datePicker.css

@@ -5,8 +5,10 @@
         @apply text-primary-60;
       }
     }
-    .input {
-      caret-color: transparent;
+    &.range-mode {
+      .input {
+        caret-color: transparent;
+      }
     }
   }