[v2] add onSearchBarCancelPressed Event (#3390)

Summary: This adds a new event `onSearchBarCancelPressed` that fires
when the user presses the cancel button on the search bar in the
navigation bar. `onSearchBarUpdated` does indirectly fire when the user
presses cancel, as the query will be reset to an empty string, but it is
not possible to distinguish those events from the user simply resetting
the query. My use case for this is to have a view that appears on top of
the normal content of the view controller when the search bar is
focused.

Test Plan: ran `npm run test-js` and confirmed added JS unit tests
passed.

I also tested this with my app, and confirmed the
`onSearchBarCancelPressed` method was called when I pressed the cancel
button.

docs/docs/events.md

@@ -103,3 +103,13 @@ class MyComponent extends Component {
   }
 }
 ```
+
+## onSearchBarCancelPressed (iOS 11+ only)
+Called when the cancel button on the SearchBar from NavigationBar gets pressed.
+```js
+class MyComponent extends Component {
+  onSearchBarCancelPressed() {
+
+  }
+}
+```

lib/ios/RNNEventEmitter.h

@@ -22,4 +22,6 @@
 
 -(void)sendOnSearchBarUpdated:(NSString *)componentId text:(NSString*)text isFocused:(BOOL)isFocused;
 
+-(void)sendOnSearchBarCancelPressed:(NSString *)componentId;
+
 @end

lib/ios/RNNEventEmitter.m

@@ -62,6 +62,12 @@ static NSString* const navigationEvent	= @"RNN.nativeEvent";
 												  @"isFocused": @(isFocused)}}];
 }
 
+- (void)sendOnSearchBarCancelPressed:(NSString *)componentId {
+	[self send:navigationEvent body:@{@"name": @"searchBarCancelPressed",
+									  @"params": @{
+											  @"componentId": componentId}}];
+}
+
 - (void)addListener:(NSString *)eventName {
 	[super addListener:eventName];
 	if ([eventName isEqualToString:onAppLaunched]) {

lib/ios/RNNRootViewController.h

@@ -13,7 +13,7 @@
 
 typedef void (^RNNReactViewReadyCompletionBlock)(void);
 
-@interface RNNRootViewController : UIViewController	<RNNRootViewProtocol, UIViewControllerPreviewingDelegate, UISearchResultsUpdating>
+@interface RNNRootViewController : UIViewController	<RNNRootViewProtocol, UIViewControllerPreviewingDelegate, UISearchResultsUpdating, UISearchBarDelegate>
 
 @property (nonatomic, strong) RNNNavigationOptions* options;
 @property (nonatomic, strong) RNNEventEmitter *eventEmitter;

lib/ios/RNNRootViewController.m

@@ -105,6 +105,10 @@
 									isFocused:searchController.searchBar.isFirstResponder];
 }
 
+- (void)searchBarCancelButtonClicked:(UISearchBar *)searchBar {
+	[self.eventEmitter sendOnSearchBarCancelPressed:self.componentId];
+}
+
 - (void)viewDidLoad {
 	[super viewDidLoad];
 }

lib/ios/RNNTopBarOptions.m

@@ -39,6 +39,7 @@ extern const NSInteger BLUR_TOPBAR_TAG;
 			if ([viewController conformsToProtocol:@protocol(UISearchResultsUpdating)]) {
 				[search setSearchResultsUpdater:((UIViewController <UISearchResultsUpdating> *) viewController)];
 			}
+			search.searchBar.delegate = (id<UISearchBarDelegate>)viewController;
 			if (self.searchBarPlaceholder) {
 				search.searchBar.placeholder = self.searchBarPlaceholder;
 			}

lib/src/components/ComponentWrapper.test.tsx

@@ -156,6 +156,7 @@ describe('ComponentWrapper', () => {
     const componentDidDisappearCallback = jest.fn();
     const onNavigationButtonPressedCallback = jest.fn();
     const onSearchBarCallback = jest.fn();
+    const onSearchBarCancelCallback = jest.fn();
 
     class MyLifecycleComponent extends MyComponent {
       componentDidAppear() {
@@ -173,6 +174,10 @@ describe('ComponentWrapper', () => {
       onSearchBarUpdated() {
         onSearchBarCallback();
       }
+
+      onSearchBarCancelPressed() {
+        onSearchBarCancelCallback();
+      }
     }
 
     it('componentDidAppear, componentDidDisappear and onNavigationButtonPressed are optional', () => {
@@ -182,6 +187,7 @@ describe('ComponentWrapper', () => {
       expect(() => tree.getInstance()!.componentDidDisappear()).not.toThrow();
       expect(() => tree.getInstance()!.onNavigationButtonPressed()).not.toThrow();
       expect(() => tree.getInstance()!.onSearchBarUpdated()).not.toThrow();
+      expect(() => tree.getInstance()!.onSearchBarCancelPressed()).not.toThrow();
     });
 
     it('calls componentDidAppear on OriginalComponent', () => {
@@ -215,5 +221,13 @@ describe('ComponentWrapper', () => {
       tree.getInstance()!.onSearchBarUpdated();
       expect(onSearchBarCallback).toHaveBeenCalledTimes(1);
     });
+
+    it('calls onSearchBarCancelPressed on OriginalComponent', () => {
+      const NavigationComponent = ComponentWrapper.wrap(componentName, MyLifecycleComponent, store);
+      const tree = renderer.create(<NavigationComponent componentId={'component1'} />);
+      expect(onSearchBarCancelCallback).toHaveBeenCalledTimes(0);
+      tree.getInstance()!.onSearchBarCancelPressed();
+      expect(onSearchBarCancelCallback).toHaveBeenCalledTimes(1);
+    });
   });
 });

lib/src/components/ComponentWrapper.tsx

@@ -58,6 +58,12 @@ export class ComponentWrapper {
         }
       }
 
+      onSearchBarCancelPressed() {
+        if (this.originalComponentRef.onSearchBarCancelPressed) {
+          this.originalComponentRef.onSearchBarCancelPressed();
+        }
+      }
+
       render() {
         return (
           <OriginalComponentClass

lib/src/events/ComponentEventsObserver.test.ts

@@ -19,7 +19,8 @@ describe(`ComponentEventsObserver`, () => {
       componentDidAppear: jest.fn(),
       componentDidDisappear: jest.fn(),
       onNavigationButtonPressed: jest.fn(),
-      onSearchBarUpdated: jest.fn()
+      onSearchBarUpdated: jest.fn(),
+      onSearchBarCancelPressed: jest.fn()
     };
 
     store = new Store();
@@ -44,6 +45,7 @@ describe(`ComponentEventsObserver`, () => {
     expect(mockComponentRef.componentDidDisappear).toHaveBeenCalledTimes(0);
     expect(mockComponentRef.onNavigationButtonPressed).toHaveBeenCalledTimes(0);
     expect(mockComponentRef.onSearchBarUpdated).toHaveBeenCalledTimes(0);
+    expect(mockComponentRef.onSearchBarCancelPressed).toHaveBeenCalledTimes(0);
     uut.registerForAllComponents();
     eventRegistry.registerComponentDidAppearListener.mock.calls[0][0](refId);
     eventRegistry.registerComponentDidDisappearListener.mock.calls[0][0](refId);
@@ -52,6 +54,7 @@ describe(`ComponentEventsObserver`, () => {
     expect(mockComponentRef.componentDidDisappear).toHaveBeenCalledTimes(1);
     expect(mockComponentRef.onNavigationButtonPressed).toHaveBeenCalledTimes(0);
     expect(mockComponentRef.onSearchBarUpdated).toHaveBeenCalledTimes(0);
+    expect(mockComponentRef.onSearchBarCancelPressed).toHaveBeenCalledTimes(0);
   });
 
   it('bubbles onNavigationButtonPressed to component by id', () => {
@@ -95,6 +98,26 @@ describe(`ComponentEventsObserver`, () => {
     expect(mockComponentRef.onSearchBarUpdated).toHaveBeenCalledWith('query', true);
   });
 
+  it('bubbles onSearchBarCancelPressed to component by id', () => {
+    const params = {
+      componentId: refId,
+    };
+    expect(mockComponentRef.onSearchBarCancelPressed).toHaveBeenCalledTimes(0);
+    uut.registerForAllComponents();
+
+    eventRegistry.registerNativeEventListener.mock.calls[0][0]('buttonPressed', params);
+    expect(mockComponentRef.onSearchBarCancelPressed).toHaveBeenCalledTimes(0);
+
+    eventRegistry.registerNativeEventListener.mock.calls[0][0]('searchBarCancelPressed', params);
+    expect(mockComponentRef.onSearchBarCancelPressed).toHaveBeenCalledTimes(1);
+
+    const paramsForUnexisted = {
+      componentId: 'NOT_EXISTED',
+    };
+    eventRegistry.registerNativeEventListener.mock.calls[0][0]('searchBarCancelPressed', paramsForUnexisted);
+    expect(mockComponentRef.onSearchBarCancelPressed).toHaveBeenCalledTimes(1);
+  });
+
   it('defensive unknown id', () => {
     uut.registerForAllComponents();
     expect(() => {

lib/src/events/ComponentEventsObserver.ts

@@ -3,6 +3,7 @@ import { Store } from '../components/Store';
 
 const BUTTON_PRESSED_EVENT_NAME = 'buttonPressed';
 const ON_SEARCH_BAR_UPDATED = 'searchBarUpdated';
+const ON_SEARCH_BAR_CANCEL_PRESSED = 'searchBarCancelPressed';
 
 export class ComponentEventsObserver {
   constructor(private eventsRegistry: EventsRegistry, private store: Store) {
@@ -44,5 +45,11 @@ export class ComponentEventsObserver {
         componentRef.onSearchBarUpdated(params.text, params.isFocused);
       }
     }
+    if (name === ON_SEARCH_BAR_CANCEL_PRESSED) {
+      const componentRef = this.store.getRefForId(params.componentId);
+      if (componentRef && componentRef.onSearchBarCancelPressed) {
+        componentRef.onSearchBarCancelPressed();
+      }
+    }
   }
 }