diff --git a/src/index.tsx b/src/index.tsx index 7a385a85d..fbceec1e5 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -126,7 +126,7 @@ export type DatePickerProps = Omit< | "selectsMultiple" | "dropdownMode" > & - Pick & + Partial> & Pick & Omit & Omit< @@ -197,7 +197,7 @@ export type DatePickerProps = Omit< onChangeRaw?: ( event?: React.MouseEvent | React.KeyboardEvent, ) => void; - onSelect: ( + onSelect?: ( date: Date | null, event?: | React.MouseEvent @@ -207,7 +207,7 @@ export type DatePickerProps = Omit< | { selectsRange?: never; selectsMultiple?: never; - onChange: ( + onChange?: ( date: Date | null, event?: | React.MouseEvent @@ -217,7 +217,7 @@ export type DatePickerProps = Omit< | { selectsRange: true; selectsMultiple?: never; - onChange: ( + onChange?: ( date: [Date | null, Date | null], event?: | React.MouseEvent @@ -227,7 +227,7 @@ export type DatePickerProps = Omit< | { selectsRange?: never; selectsMultiple: true; - onChange: ( + onChange?: ( date: Date[] | null, event?: | React.MouseEvent @@ -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 }); };