Merge pull request #4932 from yuki0410-dev/bugfix/4922

fix DatePickerProps

Author: martijnrusschen

src/index.tsx

@@ -126,7 +126,7 @@ export type DatePickerProps = Omit<
   | "selectsMultiple"
   | "dropdownMode"
 > &
-  Pick<AdditionalProps, "excludeScrollbar"> &
+  Partial<Pick<AdditionalProps, "excludeScrollbar">> &
   Pick<CalendarIconProps, "icon"> &
   Omit<PortalProps, "children" | "portalId"> &
   Omit<
@@ -197,7 +197,7 @@ export type DatePickerProps = Omit<
     onChangeRaw?: (
       event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
     ) => void;
-    onSelect: (
+    onSelect?: (
       date: Date | null,
       event?:
         | React.MouseEvent<HTMLElement, MouseEvent>
@@ -207,7 +207,7 @@ export type DatePickerProps = Omit<
     | {
         selectsRange?: never;
         selectsMultiple?: never;
-        onChange: (
+        onChange?: (
           date: Date | null,
           event?:
             | React.MouseEvent<HTMLElement>
@@ -217,7 +217,7 @@ export type DatePickerProps = Omit<
     | {
         selectsRange: true;
         selectsMultiple?: never;
-        onChange: (
+        onChange?: (
           date: [Date | null, Date | null],
           event?:
             | React.MouseEvent<HTMLElement>
@@ -227,7 +227,7 @@ export type DatePickerProps = Omit<
     | {
         selectsRange?: never;
         selectsMultiple: true;
-        onChange: (
+        onChange?: (
           date: Date[] | null,
           event?:
             | React.MouseEvent<HTMLElement>
@@ -752,27 +752,41 @@ export default class DatePicker extends Component<
         const hasStartRange = startDate && !endDate;
         const isRangeFilled = startDate && endDate;
         if (noRanges) {
-          onChange([changedDate, null], event);
+          onChange
+            ? onChange([changedDate, null], event)
+            : DatePicker.defaultProps.onChange;
         } else if (hasStartRange) {
           if (changedDate === null) {
-            onChange([null, null], event);
+            onChange
+              ? onChange([null, null], event)
+              : DatePicker.defaultProps.onChange;
           } else if (isDateBefore(changedDate, startDate)) {
             if (swapRange) {
-              onChange([changedDate, startDate], event);
+              onChange
+                ? onChange([changedDate, startDate], event)
+                : DatePicker.defaultProps.onChange;
             } else {
-              onChange([changedDate, null], event);
+              onChange
+                ? onChange([changedDate, null], event)
+                : DatePicker.defaultProps.onChange;
             }
           } else {
-            onChange([startDate, changedDate], event);
+            onChange
+              ? onChange([startDate, changedDate], event)
+              : DatePicker.defaultProps.onChange;
           }
         }
         if (isRangeFilled) {
-          onChange([changedDate, null], event);
+          onChange
+            ? onChange([changedDate, null], event)
+            : DatePicker.defaultProps.onChange;
         }
       } else if (selectsMultiple) {
         if (changedDate !== null) {
           if (!selectedDates?.length) {
-            onChange([changedDate], event);
+            onChange
+              ? onChange([changedDate], event)
+              : DatePicker.defaultProps.onChange;
           } else {
             const isChangedDateAlreadySelected = selectedDates.some(
               (selectedDate) => isSameDay(selectedDate, changedDate),
@@ -783,19 +797,26 @@ export default class DatePicker extends Component<
                 (selectedDate) => !isSameDay(selectedDate, changedDate),
               );
 
-              onChange(nextDates, event);
+              onChange
+                ? onChange(nextDates, event)
+                : DatePicker.defaultProps.onChange;
             } else {
-              onChange([...selectedDates, changedDate], event);
+              onChange
+                ? onChange([...selectedDates, changedDate], event)
+                : DatePicker.defaultProps.onChange;
             }
           }
         }
       } else {
-        onChange(changedDate, event);
+        onChange
+          ? onChange(changedDate, event)
+          : DatePicker.defaultProps.onChange;
       }
     }
 
     if (!keepInput) {
-      this.props.onSelect(changedDate, event);
+      const onSelect = this.props.onSelect ?? DatePicker.defaultProps.onSelect;
+      onSelect(changedDate, event);
       this.setState({ inputValue: null });
     }
   };
@@ -856,7 +877,8 @@ export default class DatePicker extends Component<
       preSelection: changedDate,
     });
 
-    this.props.onChange(changedDate);
+    const onChange = this.props.onChange ?? DatePicker.defaultProps.onChange;
+    onChange(changedDate);
     if (this.props.shouldCloseOnSelect && !this.props.showTimeInput) {
       this.sendFocusBackToInput();
       this.setOpen(false);
@@ -1154,16 +1176,13 @@ export default class DatePicker extends Component<
 
     const { selectsRange, onChange } = this.props;
     if (selectsRange) {
-      onChange([null, null], event);
+      onChange
+        ? onChange([null, null], event)
+        : DatePicker.defaultProps.onChange();
     } else {
-      onChange(null, event);
+      onChange ? onChange(null, event) : DatePicker.defaultProps.onChange();
     }
 
-    if (this.props.selectsRange) {
-      this.props.onChange([null, null], event);
-    } else {
-      this.props.onChange(null, event);
-    }
     this.setState({ inputValue: null });
   };