Add support for onInvalidChange prop

wojtekmaj · May 22, 2023 · 8145fa9 · 8145fa9
1 parent 3326e1e
commit 8145fa9
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -118,6 +118,7 @@ Displays an input field complete with custom inputs, native input, and a calenda
 | onClockClose         | Function called when the clock closes.                                                                                                                                                                                                                                                                                                       | n/a                     | `() => alert('Clock closed')`                                                                                                                                                                                                                                          |
 | onClockOpen          | Function called when the clock opens.                                                                                                                                                                                                                                                                                                        | n/a                     | `() => alert('Clock opened')`                                                                                                                                                                                                                                          |
 | onFocus              | Function called when the focuses an input.                                                                                                                                                                                                                                                                                                   | n/a                     | `(event) => alert('Focused input: ', event.target.name)`                                                                                                                                                                                                               |
+| onInvalidChange      | Function called when the user picks an invalid datetime.                                                                                                                                                                                                                                                                                     | n/a                     | `() => alert('Invalid datetime')`                                                                                                                                                                                                                                      |
 | openWidgetsOnFocus   | Whether to open the widgets on input focus. Note: It's recommended to use shouldOpenWidgets function instead.                                                                                                                                                                                                                                | `true`                  | `false`                                                                                                                                                                                                                                                                |
 | portalContainer      | Element to render the widgets in using portal.                                                                                                                                                                                                                                                                                               | n/a                     | `document.getElementById('my-div')`                                                                                                                                                                                                                                    |
 | rangeDivider         | Divider between datetime inputs.                                                                                                                                                                                                                                                                                                             | `"–"`                   | `" to "`                                                                                                                                                                                                                                                               |

diff --git a/package.json b/package.json
@@ -49,7 +49,7 @@
     "prop-types": "^15.6.0",
     "react-calendar": "^4.2.1",
     "react-clock": "^4.2.0",
-    "react-datetime-picker": "^5.0.1",
+    "react-datetime-picker": "^5.2.0",
     "react-fit": "^1.5.1"
   },
   "devDependencies": {

diff --git a/src/DateTimeRangePicker.spec.tsx b/src/DateTimeRangePicker.spec.tsx
@@ -1056,6 +1056,23 @@ describe('DateTimeRangePicker', () => {
     expect(onChange).toHaveBeenCalledWith([valueFrom, nextValueTo]);
   });
 
+  it('calls onInvalidChange callback when changing value to an invalid one', () => {
+    const value = new Date(2023, 0, 31, 21, 40, 11);
+    const onInvalidChange = vi.fn();
+
+    const { container } = render(
+      <DateTimeRangePicker maxDetail="second" onInvalidChange={onInvalidChange} value={value} />,
+    );
+
+    const dayInput = container.querySelector('input[name="day"]') as HTMLInputElement;
+
+    act(() => {
+      fireEvent.change(dayInput, { target: { value: '32' } });
+    });
+
+    expect(onInvalidChange).toHaveBeenCalled();
+  });
+
   it('clears the value when clicking on a button', () => {
     const onChange = vi.fn();
 

diff --git a/src/DateTimeRangePicker.tsx b/src/DateTimeRangePicker.tsx
@@ -99,6 +99,7 @@ export type DateTimeRangePickerProps = {
   onClockClose?: () => void;
   onClockOpen?: () => void;
   onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
+  onInvalidChange?: () => void;
   openWidgetsOnFocus?: boolean;
   portalContainer?: HTMLElement | null;
   rangeDivider?: React.ReactNode;
@@ -153,6 +154,7 @@ export default function DateTimeRangePicker(props: DateTimeRangePickerProps) {
     onClockClose,
     onClockOpen,
     onFocus: onFocusProps,
+    onInvalidChange,
     openWidgetsOnFocus = true,
     rangeDivider = '–',
     required,
@@ -468,6 +470,7 @@ export default function DateTimeRangePicker(props: DateTimeRangePickerProps) {
       maxDate,
       maxDetail,
       minDate,
+      onInvalidChange,
       required,
       showLeadingZeros,
     };

diff --git a/yarn.lock b/yarn.lock
@@ -809,7 +809,7 @@ __metadata:
     react: ^18.2.0
     react-calendar: ^4.2.1
     react-clock: ^4.2.0
-    react-datetime-picker: ^5.0.1
+    react-datetime-picker: ^5.2.0
     react-dom: ^18.2.0
     react-fit: ^1.5.1
     rimraf: ^3.0.0
@@ -4083,9 +4083,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-datetime-picker@npm:^5.0.1":
-  version: 5.0.1
-  resolution: "react-datetime-picker@npm:5.0.1"
+"react-datetime-picker@npm:^5.2.0":
+  version: 5.2.0
+  resolution: "react-datetime-picker@npm:5.2.0"
   dependencies:
     "@wojtekmaj/date-utils": ^1.1.3
     clsx: ^1.2.1
@@ -4100,7 +4100,7 @@ __metadata:
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 08a946e44409613fd8701fd23c50337860283bc769ea13adb14e935657f1619fd5c8ea5c5850c43dbc9cb0438a4972c2e51674e3ec8f6a79f265f3ab2d9b0d34
+  checksum: 1de089b1c33ffca989585cbf4e8291c5be98b464c935476175f6d43a616ebc08e0086cd538dec7d3bf5a6ba5f6c5579c91583a181f4ce3c0e85e772d686f0e11
   languageName: node
   linkType: hard