feat(CalendarMonth): event param updates

patternfly · Mar 2, 2023 · 0664407 · 0664407
1 parent ef75271
commit 0664407
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 14 deletions.
diff --git a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
@@ -70,11 +70,11 @@ export interface CalendarProps extends CalendarFormat, Omit<React.HTMLProps<HTML
   /** Flag to set browser focus on the passed date. **/
   isDateFocused?: boolean;
   /** Callback when date is selected. */
-  onChange?: (date: Date) => void;
+  onChange?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, date: Date) => void;
   /** Callback when month or year is changed. */
   onMonthChange?: (
-    newDate?: Date,
-    event?: React.MouseEvent | React.ChangeEvent | React.FormEvent<HTMLInputElement>
+    event?: React.MouseEvent | React.ChangeEvent | React.FormEvent<HTMLInputElement>,
+    newDate?: Date
   ) => void;
   /** @hide Internal prop to allow pressing escape in select menu to not close popover. */
   onSelectToggle?: (open: boolean) => void;
@@ -187,11 +187,11 @@ export const CalendarMonth = ({
     }
   }, [focusedDate, isDateFocused, focusedDateValidated, focusRef]);
 
-  const onMonthClick = (newDate: Date, ev: React.MouseEvent) => {
+  const onMonthClick = (ev: React.MouseEvent, newDate: Date) => {
     setFocusedDate(newDate);
     setHoveredDate(newDate);
     setShouldFocus(false);
-    onMonthChange(newDate, ev);
+    onMonthChange(ev, newDate);
   };
 
   const onKeyDown = (ev: React.KeyboardEvent<HTMLTableSectionElement>) => {
@@ -252,7 +252,7 @@ export const CalendarMonth = ({
           <Button
             variant="plain"
             aria-label={prevMonthAriaLabel}
-            onClick={(ev: React.MouseEvent) => onMonthClick(prevMonth, ev)}
+            onClick={(ev: React.MouseEvent) => onMonthClick(ev, prevMonth)}
           >
             <AngleLeftIcon aria-hidden={true} />
           </Button>
@@ -282,7 +282,7 @@ export const CalendarMonth = ({
                   setFocusedDate(newDate);
                   setHoveredDate(newDate);
                   setShouldFocus(false);
-                  onMonthChange(newDate, ev);
+                  onMonthChange(ev, newDate);
                 }, 0);
               }}
               variant="single"
@@ -306,7 +306,7 @@ export const CalendarMonth = ({
                 setFocusedDate(newDate);
                 setHoveredDate(newDate);
                 setShouldFocus(false);
-                onMonthChange(newDate, ev);
+                onMonthChange(ev, newDate);
               }}
             />
           </div>
@@ -315,7 +315,7 @@ export const CalendarMonth = ({
           <Button
             variant="plain"
             aria-label={nextMonthAriaLabel}
-            onClick={(ev: React.MouseEvent) => onMonthClick(nextMonth, ev)}
+            onClick={(ev: React.MouseEvent) => onMonthClick(ev, nextMonth)}
           >
             <AngleRightIcon aria-hidden={true} />
           </Button>
@@ -377,7 +377,7 @@ export const CalendarMonth = ({
                         !isValid && styles.modifiers.disabled
                       )}
                       type="button"
-                      onClick={() => onChange(date)}
+                      onClick={(event) => onChange(event, date)}
                       onMouseOver={() => setHoveredDate(date)}
                       tabIndex={isFocused ? 0 : -1}
                       disabled={!isValid}

diff --git a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthSelectableDate.tsx b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthSelectableDate.tsx
@@ -4,7 +4,10 @@ import { CalendarMonth, Title, CalendarMonthInlineProps } from '@patternfly/reac
 export const CalendarMonthSelectableDate: React.FunctionComponent = () => {
   const [date, setDate] = React.useState(new Date(2020, 10, 24));
 
-  const onMonthChange = (newDate: Date) => {
+  const onMonthChange = (
+    _event: React.MouseEvent | React.ChangeEvent | React.FormEvent<HTMLInputElement> | undefined,
+    newDate: Date
+  ) => {
     // eslint-disable-next-line no-console
     console.log(`updated month: ${newDate.getMonth()}, updated year: ${newDate.getFullYear()}`);
   };
@@ -21,7 +24,12 @@ export const CalendarMonthSelectableDate: React.FunctionComponent = () => {
 
   return (
     <>
-      <CalendarMonth date={date} onChange={setDate} onMonthChange={onMonthChange} inlineProps={inlineProps} />
+      <CalendarMonth
+        date={date}
+        onChange={(_event: React.MouseEvent<HTMLButtonElement, MouseEvent>, date: Date) => setDate(date)}
+        onMonthChange={onMonthChange}
+        inlineProps={inlineProps}
+      />
       <pre>Selected date: {date.toString()}</pre>
     </>
   );

diff --git a/packages/react-core/src/components/DatePicker/DatePicker.tsx b/packages/react-core/src/components/DatePicker/DatePicker.tsx
@@ -165,7 +165,7 @@ const DatePickerBase = (
     }
   };
 
-  const onDateClick = (newValueDate: Date) => {
+  const onDateClick = (_event: React.MouseEvent<HTMLButtonElement, MouseEvent>, newValueDate: Date) => {
     const newValue = dateFormat(newValueDate);
     setValue(newValue);
     setValueDate(newValueDate);

diff --git a/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx b/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx
@@ -32,7 +32,7 @@ export const DateTimePicker: React.FunctionComponent = () => {
     setIsCalendarOpen(false);
   };
 
-  const onSelectCalendar = (newValueDate: Date) => {
+  const onSelectCalendar = (_event: React.MouseEvent<HTMLButtonElement, MouseEvent>, newValueDate: Date) => {
     const newValue = dateFormat(newValueDate);
     setValueDate(newValue);
     setIsCalendarOpen(!isCalendarOpen);