From f5dd7e5217e0b58896ac277a927d5e145132c916 Mon Sep 17 00:00:00 2001
From: Kyle Roach <kroach.work@gmail.com>
Date: Mon, 8 Jan 2018 16:23:14 -0400
Subject: [PATCH] Better handle cancel button internally (#137)

* feat: Handle cancel button behaviour on blur, cancel, search, and focus for showCancelWhileEditing

Rename showCancelWhileEditing to showCancelButtonWhileEditing

* fix(onCancelButtonPress): Clear text in search bar
---
 ios/RNSearchBarManager.m |  4 ++--
 src/SearchBar.js         | 37 ++++++++++++++++++++++++++++++-------
 src/index.d.ts           |  7 +++++++
 3 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/ios/RNSearchBarManager.m b/ios/RNSearchBarManager.m
index ab306c3..070c1bd 100644
--- a/ios/RNSearchBarManager.m
+++ b/ios/RNSearchBarManager.m
@@ -52,8 +52,8 @@ + (BOOL)requiresMainQueueSetup
 RCT_EXPORT_VIEW_PROPERTY(text, NSString)
 RCT_CUSTOM_VIEW_PROPERTY(showsCancelButton, BOOL, RNSearchBar)
 {
-  BOOL value = [RCTConvert BOOL:json];
-  view.showsCancelButton = value;
+    BOOL value = [RCTConvert BOOL:json];
+    view.showsCancelButton = value;
 }
 RCT_EXPORT_VIEW_PROPERTY(barTintColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(tintColor, UIColor)
diff --git a/src/SearchBar.js b/src/SearchBar.js
index ab08643..2cecd41 100644
--- a/src/SearchBar.js
+++ b/src/SearchBar.js
@@ -45,6 +45,7 @@ class SearchBar extends React.PureComponent {
     searchBarStyle: PropTypes.oneOf(['default', 'prominent', 'minimal']),
     editable: PropTypes.bool,
     returnKeyType: PropTypes.string,
+    showsCancelButtonWhileEditing: PropTypes.bool,
   }
 
   static defaultProps = {
@@ -66,6 +67,7 @@ class SearchBar extends React.PureComponent {
     autoCapitalize: 'sentences',
     autoCorrect: false,
     spellCheck: false,
+    showsCancelButtonWhileEditing: true,
     onChange: () => null,
     onChangeText: () => null,
     onFocus: () => null,
@@ -83,6 +85,31 @@ class SearchBar extends React.PureComponent {
     this.props.onSearchButtonPress(e.nativeEvent.searchText)
   }
 
+  onFocus = () => {
+    if (this.props.showsCancelButtonWhileEditing) {
+      NativeModules.RNSearchBarManager.toggleCancelButton(findNodeHandle(this), true)
+    }
+
+    this.props.onFocus()
+  }
+
+  onCancelButtonPress = () => {
+    if (this.props.showsCancelButtonWhileEditing) {
+      NativeModules.RNSearchBarManager.toggleCancelButton(findNodeHandle(this), false)
+    }
+
+    this.props.onChangeText('')
+    this.props.onCancelButtonPress()
+  }
+
+  onBlur = () => {
+    if (this.props.showsCancelButtonWhileEditing) {
+      NativeModules.RNSearchBarManager.toggleCancelButton(findNodeHandle(this), false)
+    }
+
+    this.props.onBlur()
+  }
+
   blur() {
     return NativeModules.RNSearchBarManager.blur(findNodeHandle(this))
   }
@@ -98,12 +125,6 @@ class SearchBar extends React.PureComponent {
   unFocus() {
     return NativeModules.RNSearchBarManager.unFocus(findNodeHandle(this))
   }
-  
-  componentDidUpdate (prevProps) {
-    if (prevProps.showsCancelButton !== this.props.showsCancelButton) {
-      NativeModules.RNSearchBarManager.toggleCancelButton(findNodeHandle(this), this.props.showsCancelButton);
-    }
-  }
 
   render() {
     return (
@@ -112,8 +133,10 @@ class SearchBar extends React.PureComponent {
         {...this.props}
         onChange={this.onChange}
         onPress={this.onPress}
+        onFocus={this.onFocus}
+        onBlur={this.onBlur}
         onSearchButtonPress={this.onSearchButtonPress}
-        onCancelButtonPress={this.props.onCancelButtonPress}
+        onCancelButtonPress={this.onCancelButtonPress}
       />
     )
   }
diff --git a/src/index.d.ts b/src/index.d.ts
index a12aa3d..9d41956 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -46,6 +46,13 @@ interface Props {
    */
   showsCancelButton?: boolean
 
+  /**
+   * Only shows the cancel button while the search bar has focus
+   * 
+   * Default is true
+   */
+  showsCancelButtonWhileEditing?: boolean
+
   /**
    * Indicates whether the Return key is automatically enabled when the user is entering text.
    *