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
umhan35 · Jan 8, 2018 · 0e8ba00 · 0e8ba00
1 parent 7e2771a
commit 0e8ba00
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 9 deletions.
diff --git 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
@@ -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,
@@ -80,9 +82,38 @@ class SearchBar extends React.PureComponent {
   }
 
   onSearchButtonPress = (e) => {
+    if (this.props.showsCancelButtonWhileEditing) {
+      NativeModules.RNSearchBarManager.toggleCancelButton(findNodeHandle(this), true)
+    }
+
     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 +129,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 +137,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
@@ -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.
    *