feat(ios): dismiss detection support (#671)

* feat(ios): add picker dismissal detection

* fix test, improve docs

* fix test

* change evt listeners

Author: vonovak

README.md

@@ -301,6 +301,8 @@ List of possible values for iOS (maps to [preferredDatePickerStyle](https://deve
 Date change handler.
 
 This is called when the user changes the date or time in the UI. It receives the event and the date as parameters.
+It is also called when user dismisses the picker, which you can detect by checking the `event.type` property.
+The values can be: `'set' | 'dismissed' | 'neutralButtonPressed'`. (`neutralButtonPressed` is only available on Android).
 
 ```js
 setDate = (event, date) => {};

example/App.js

@@ -10,6 +10,7 @@ import {
   TextInput,
   useColorScheme,
   Switch,
+  Alert,
 } from 'react-native';
 import DateTimePicker from '@react-native-community/datetimepicker';
 import SegmentedControl from './SegmentedControl';
@@ -99,6 +100,14 @@ export const App = () => {
     if (Platform.OS === 'android') {
       setShow(false);
     }
+    if (event.type === 'dismissed') {
+      Alert.alert('picker was dismissed', undefined, [
+        {
+          text: 'great',
+        },
+      ]);
+      return;
+    }
 
     if (event.type === 'neutralButtonPressed') {
       setDate(new Date(0));

example/e2e/detoxTest.spec.js

@@ -51,10 +51,10 @@ describe('e2e tests', () => {
     }
   });
 
-  it('nothing should happen if date does not change', async () => {
-    if (isIOS()) {
-      await userOpensPicker({mode: 'date', display: 'compact'});
+  it('nothing should happen if picker is dismissed / cancelled', async () => {
+    await userOpensPicker({mode: 'date', display: 'default'});
 
+    if (isIOS()) {
       await element(
         by.traits(['staticText']).withAncestor(by.label('Date Picker')),
       ).tap();
@@ -65,7 +65,6 @@ describe('e2e tests', () => {
       await nextMonthArrow.tap();
       await userDismissesCompactDatePicker();
     } else {
-      await userOpensPicker({mode: 'date', display: 'default'});
       const calendarHorizontalScrollView = element(
         by
           .type('android.widget.ScrollView')
@@ -76,6 +75,7 @@ describe('e2e tests', () => {
       await userTapsCancelButtonAndroid();
     }
 
+    await elementByText('great').tap();
     await expect(getDateText()).toHaveText('11/13/2021');
   });
 
@@ -123,6 +123,7 @@ describe('e2e tests', () => {
     } else {
       await userChangesTimeValue({minutes: '22'});
       await userTapsCancelButtonAndroid();
+      await elementByText('great').tap();
     }
     await expect(getTimeText()).toHaveText('11:00');
   });

example/ios/Podfile

@@ -1,8 +1,8 @@
 require_relative '../../node_modules/react-native-test-app/test_app'
 
-# Flipper causes the build to fail on release when fabric is enabled 
+# Flipper causes the build to fail on release when fabric is enabled
 # https://github.com/facebook/react-native/issues/33764
-use_flipper!()
+# use_flipper!()
 
 workspace 'date-time-picker-example.xcworkspace'
 

example/ios/Podfile.lock

@@ -685,7 +685,7 @@ PODS:
     - React-Core
     - React-jsi
   - ReactTestApp-Resources (1.0.0-dev)
-  - RNDateTimePicker (6.4.0):
+  - RNDateTimePicker (6.4.2):
     - RCT-Folly
     - RCTRequired
     - RCTTypeSafety
@@ -923,12 +923,12 @@ SPEC CHECKSUMS:
   ReactCommon: de55f940495d7bf87b5d7bf55b5b15cdd50d7d7b
   ReactTestApp-DevSupport: 8a8cff38c37cd8145a12ac7d7d0503dd08f97d65
   ReactTestApp-Resources: ff5f151e465e890010b417ce65ca6c5de6aeccbb
-  RNDateTimePicker: 597591d8a3ae159acd7d7b19706024932da816af
+  RNDateTimePicker: 0913d8322a3b21bb3d2010aca96c5090248223b6
   RNLocalize: cbcb55d0e19c78086ea4eea20e03fe8000bbbced
   SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
   Yoga: 82c9e8f652789f67d98bed5aef9d6653f71b04a9
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
-PODFILE CHECKSUM: 6bca2b1533bd782af99c755ccf9b322ffa84edc5
+PODFILE CHECKSUM: d34f3e71e434db4f0211ec41f8c89e1a077c236f
 
 COCOAPODS: 1.11.3

ios/RNDateTimePicker.m

@@ -13,6 +13,7 @@
 @interface RNDateTimePicker ()
 
 @property (nonatomic, copy) RCTBubblingEventBlock onChange;
+@property (nonatomic, copy) RCTBubblingEventBlock onPickerDismiss;
 @property (nonatomic, assign) NSInteger reactMinuteInterval;
 
 @end
@@ -22,8 +23,14 @@ @implementation RNDateTimePicker
 - (instancetype)initWithFrame:(CGRect)frame
 {
   if ((self = [super initWithFrame:frame])) {
-    [self addTarget:self action:@selector(didChange)
+    #ifndef RCT_NEW_ARCH_ENABLED
+      // somehow, with Fabric, the callbacks are executed here as well as in RNDateTimePickerComponentView
+      // so do not register it with Fabric, to avoid potential problems
+      [self addTarget:self action:@selector(didChange)
                forControlEvents:UIControlEventValueChanged];
+      [self addTarget:self action:@selector(onDismiss:) forControlEvents:UIControlEventEditingDidEnd];
+    #endif
+
     _reactMinuteInterval = 1;
   }
   return self;
@@ -38,6 +45,13 @@ - (void)didChange
   }
 }
 
+- (void)onDismiss:(RNDateTimePicker *)sender
+{
+  if (_onPickerDismiss) {
+    _onPickerDismiss(@{});
+  }
+}
+
 - (void)setDatePickerMode:(UIDatePickerMode)datePickerMode
 {
   [super setDatePickerMode:datePickerMode];

ios/RNDateTimePickerManager.m

@@ -112,6 +112,7 @@ + (NSString*) datepickerStyleToString: (UIDatePickerStyle) style  API_AVAILABLE(
 RCT_EXPORT_VIEW_PROPERTY(minuteInterval, NSInteger)
 RCT_EXPORT_VIEW_PROPERTY(enabled, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onPickerDismiss, RCTBubblingEventBlock)
 
 RCT_REMAP_VIEW_PROPERTY(mode, datePickerMode, UIDatePickerMode)
 RCT_REMAP_VIEW_PROPERTY(timeZoneOffsetInMinutes, timeZone, NSTimeZone)

ios/fabric/RNDateTimePickerComponentView.mm

@@ -41,6 +41,7 @@ - (instancetype)initWithFrame:(CGRect)frame
         _dummyPicker = [RNDateTimePicker new];
 
         [_picker addTarget:self action:@selector(onChange:) forControlEvents:UIControlEventValueChanged];
+        [_picker addTarget:self action:@selector(onDismiss:) forControlEvents:UIControlEventEditingDidEnd];
 
         // Default Picker mode
         _picker.datePickerMode = UIDatePickerModeDate;
@@ -52,6 +53,16 @@ - (instancetype)initWithFrame:(CGRect)frame
     return self;
 }
 
+-(void)onDismiss:(RNDateTimePicker *)sender
+{
+    if (!_eventEmitter) {
+        return;
+    }
+    RNDateTimePickerEventEmitter::OnPickerDismiss event = {};
+    std::dynamic_pointer_cast<const RNDateTimePickerEventEmitter>(_eventEmitter)
+    ->onPickerDismiss(event);
+}
+
 -(void)onChange:(RNDateTimePicker *)sender
 {
     if (!_eventEmitter) {
@@ -103,7 +114,7 @@ -(void)updateTextColorForPicker:(UIDatePicker *)picker color:(UIColor *)color
             return;
         }
     }
-        
+
     if (color) {
         [picker setValue:color forKey:@"textColor"];
         [picker setValue:@(NO) forKey:@"highlightsToday"];

package.json

@@ -91,7 +91,7 @@
     "react": "18.1.0",
     "react-native": "^0.70.0",
     "react-native-localize": "^2.2.0",
-    "react-native-test-app": "^1.6.16",
+    "react-native-test-app": "^1.6.19",
     "react-native-windows": "^0.70.0-preview.2",
     "react-test-renderer": "18.1.0",
     "semantic-release": "^19.0.3"

src/constants.js

@@ -12,10 +12,11 @@ export const ANDROID_DISPLAY = Object.freeze({
 });
 
 export const EVENT_TYPE_SET = 'set';
+export const EVENT_TYPE_DISMISSED = 'dismissed';
 export const ANDROID_EVT_TYPE = Object.freeze({
   set: EVENT_TYPE_SET,
+  dismissed: EVENT_TYPE_DISMISSED,
   neutralButtonPressed: 'neutralButtonPressed',
-  dismissed: 'dismissed',
 });
 
 export const IOS_DISPLAY = Object.freeze({