DateTimePicker - invoke value change only on real change

src/components/dateTimePicker/DateTimePicker.driver.ts

@@ -0,0 +1,31 @@
+import {fireEvent} from '@testing-library/react-native';
+import {
+  ComponentProps,
+  ExpandableOverlayDriver,
+  ButtonDriver
+} from '../../testkit';
+
+export const DateTimePickerDriver = (props: ComponentProps) => {
+  const {renderTree, testID} = props;
+  const expandableOverlayDriver = ExpandableOverlayDriver({...props, testID: `${testID}.overlay`});
+  const openPicker = () => {
+    expandableOverlayDriver.open();
+  };
+  const discardPicker = () => {
+    ButtonDriver({...props, testID: `${testID}.cancel`}).press();
+  };
+  const submitSelection = () => {
+    ButtonDriver({...props, testID: `${testID}.done`}).press();
+  };
+  const changeDateTo = (date: Date) => {
+    const pickerElement = renderTree.getByTestId(`${testID}.picker`);
+    fireEvent(pickerElement, 'onChange', {type: 'set'}, date);
+  };
+
+  return {
+    openPicker,
+    discardPicker,
+    submitSelection,
+    changeDateTo
+  };
+};

src/components/dateTimePicker/__tests__/index.spec.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import DateTimePicker, {DateTimePickerProps} from '../index';
+import {DateTimePickerDriver} from '../DateTimePicker.driver';
+
+const testID = 'dateTimePicker';
+const TestCase = (props: Partial<Omit<DateTimePickerProps, 'dialogProps'>>) => {
+  const defaultProps: DateTimePickerProps = {
+    value: new Date('2021-04-04T00:00:00Z'),
+    migrateDialog: true,
+    testID
+  };
+  return <DateTimePicker {...defaultProps} {...props}/>;
+};
+
+const someDate = new Date('2021-04-04T00:00:00Z');
+const someDateNextDay = new Date(someDate.getTime() + 24 * 60 * 60 * 1000);
+const someDateNextHour = new Date(someDate.getTime() + 60 * 60 * 1000);
+jest.mock('../../../optionalDependencies', () => {
+  const actualOptional = jest.requireActual('../../../optionalDependencies');
+  const view = jest.requireActual('../../view').default;
+  return {
+    ...actualOptional,
+    DateTimePickerPackage: view
+  };
+});
+
+describe('DateTimePicker', () => {
+  test.each(['time', 'date'] as const)('should invoke onChange when value is changed - mode %s', async mode => {
+    const onChange = jest.fn();
+    const renderTree = render(<TestCase onChange={onChange} mode={mode} value={someDate}/>);
+    expect(onChange).not.toHaveBeenCalled();
+    const driver = DateTimePickerDriver({renderTree, testID});
+    driver.openPicker();
+    driver.changeDateTo(mode === 'time' ? someDateNextHour : someDateNextDay);
+    expect(onChange).not.toHaveBeenCalled();
+    driver.submitSelection();
+    expect(onChange).toHaveBeenCalled();
+  });
+  test.each(['time', 'date'] as const)('should not invoke onChange when value is not changed - mode %s', mode => {
+    const onChange = jest.fn();
+    const renderTree = render(<TestCase onChange={onChange} mode={mode}/>);
+    expect(onChange).not.toHaveBeenCalled();
+    const driver = DateTimePickerDriver({renderTree, testID});
+    driver.openPicker();
+    driver.submitSelection();
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});

src/components/dateTimePicker/index.tsx

@@ -21,6 +21,7 @@ import View from '../view';
 import Button, {ButtonProps} from '../button';
 import ExpandableOverlay, {ExpandableOverlayMethods, RenderCustomOverlayProps} from '../../incubator/expandableOverlay';
 import useOldApi, {OldApiProps} from './useOldApi';
+import {isSameDate, isSameHourAndMinute} from '../../utils/dateUtils';
 
 export type DateTimePickerMode = 'date' | 'time';
 
@@ -203,16 +204,21 @@ const DateTimePicker = forwardRef((props: DateTimePickerPropsInternal, ref: Forw
     expandable.current?.toggleExpandable?.();
   }, []);
 
+  const isValueChanged = useCallback(() => {
+    return mode === 'time' ? !isSameHourAndMinute(chosenDate.current, value) : !isSameDate(chosenDate.current, value);
+  }, [mode, value]);
+
   const onDonePressed = useCallback(() => {
     toggleExpandableOverlay();
     if (Constants.isIOS && !chosenDate.current) {
       // since handleChange() is not called on iOS when there is no actual change
       chosenDate.current = new Date();
     }
-
-    onChange?.(chosenDate.current!);
+    if (isValueChanged() && chosenDate.current) {
+      onChange?.(chosenDate?.current);
+    }
     setValue(chosenDate.current);
-  }, [toggleExpandableOverlay, onChange]);
+  }, [toggleExpandableOverlay, onChange, isValueChanged]);
 
   const handleChange = useCallback((event: any = {}, date: Date) => {
     // NOTE: will be called on Android even when there was no actual change

src/testkit/index.ts

@@ -19,3 +19,4 @@ export {WheelPickerDriver} from '../components/WheelPicker/WheelPicker.driver';
 export {WheelPickerItemDriver} from '../components/WheelPicker/WheelPickerItem.driver';
 export {PickerDriver} from '../components/picker/Picker.driver.new';
 export {ExpandableOverlayDriver} from '../incubator/expandableOverlay/ExpandableOverlay.driver';
+export {DateTimePickerDriver} from '../components/dateTimePicker/DateTimePicker.driver';

src/utils/dateUtils.ts

@@ -0,0 +1,10 @@
+export function isSameDate(date1?: Date, date2?: Date) {
+  return (
+    date1?.getFullYear() === date2?.getFullYear() &&
+    date1?.getMonth() === date2?.getMonth() &&
+    date1?.getDate() === date2?.getDate()
+  );
+}
+export function isSameHourAndMinute(date1?: Date, date2?: Date) {
+  return date1?.getHours() === date2?.getHours() && date1?.getMinutes() === date2?.getMinutes();
+}

src/utils/index.ts

@@ -1,4 +1,5 @@
 import * as TextUtils from './textUtils';
 import * as StyleUtils from './styleUtils';
+import * as DateUtils from './dateUtils';
 
-export {TextUtils, StyleUtils};
+export {TextUtils, StyleUtils, DateUtils};