feat(SearchBar-ios): Add showCancel prop (react-native-elements#2039)

Allows the cancel button of the search bar to remain visible after blur events. Resolves react-native-elements#1303
thandhla · Aug 30, 2019 · 01fc426 · 01fc426
1 parent f8324b8
commit 01fc426
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 55 deletions.
diff --git a/docs/searchbar.md b/docs/searchbar.md
@@ -76,6 +76,7 @@ export default class App extends React.Component {
 - [`placeholder`](#placeholder)
 - [`placeholderTextColor`](#placeholdertextcolor)
 - [`round`](#round-platform-default-only) (**`platform="default"` only**)
+- [`showCancel`](#showcancel-platform-ios-only) (**`platform="ios"` only**)
 - [`showLoading`](#showloading)
 - [`underlineColorAndroid`](#underlinecolorandroid)
 - [`cancelButtonTitle`](#cancelbuttontitle)
@@ -249,6 +250,16 @@ change TextInput styling to rounded corners
 
 ---
 
+### `showCancel` (**`platform="ios"` only**)
+
+When `true` the cancel button will stay visible after blur events.
+
+|  Type   | Default |
+| :-----: | :-----: |
+| boolean |  false  |
+
+---
+
 ### `showLoading`
 
 show the loading ActivityIndicator effect

diff --git a/src/index.d.ts b/src/index.d.ts
@@ -1486,6 +1486,11 @@ export interface SearchBarIOS extends SearchBarPlatform {
    * title of cancel button on iOS.  Default: 'Cancel'.
    */
   cancelButtonTitle?: string;
+
+  /**
+   * When `true` the cancel button will stay visible after blur events.
+   */
+  showCancel?: boolean;
 }
 
 export type SearchBarProps = SearchBarWrapper &

diff --git a/src/searchbar/SearchBar-ios.js b/src/searchbar/SearchBar-ios.js
@@ -58,6 +58,11 @@ class SearchBar extends Component {
   cancel = () => {
     this.onChangeText('');
 
+    if (this.props.showCancel) {
+      UIManager.configureNextLayoutAnimation && LayoutAnimation.easeInEaseOut();
+      this.setState({ hasFocus: false });
+    }
+
     setTimeout(() => {
       this.blur();
       this.props.onCancel();
@@ -78,9 +83,11 @@ class SearchBar extends Component {
     this.props.onBlur();
     UIManager.configureNextLayoutAnimation && LayoutAnimation.easeInEaseOut();
 
-    this.setState({
-      hasFocus: false,
-    });
+    if (!this.props.showCancel) {
+      this.setState({
+        hasFocus: false,
+      });
+    }
   };
 
   onChangeText = text => {
@@ -102,6 +109,7 @@ class SearchBar extends Component {
       showLoading,
       loadingProps,
       searchIcon,
+      showCancel,
       ...attributes
     } = this.props;
     const { hasFocus, isEmpty } = this.state;
@@ -225,6 +233,7 @@ SearchBar.propTypes = {
   inputContainerStyle: ViewPropTypes.style,
   inputStyle: Text.propTypes.style,
   placeholderTextColor: PropTypes.string,
+  showCancel: PropTypes.bool,
 };
 
 SearchBar.defaultProps = {
@@ -241,6 +250,7 @@ SearchBar.defaultProps = {
   placeholderTextColor: IOS_GRAY,
   searchIcon: defaultSearchIcon,
   clearIcon: defaultClearIcon,
+  showCancel: false,
 };
 
 const styles = StyleSheet.create({

diff --git a/src/searchbar/__tests__/__snapshots__/SearchBar.js.snap b/src/searchbar/__tests__/__snapshots__/SearchBar.js.snap
@@ -256,6 +256,7 @@ exports[`SearchBar wrapper component should render an iOS SearchBar 1`] = `
       "type": "ionicon",
     }
   }
+  showCancel={false}
   showLoading={false}
   value=""
 />

diff --git a/website/i18n/en.json b/website/i18n/en.json
@@ -93,161 +93,161 @@
       "troubleshooting": {
         "title": "Troubleshooting"
       },
-      "version-0.19.1/version-0.19.1-avatar": {
+      "version-0.19.1-avatar": {
         "title": "Avatar"
       },
-      "version-0.19.1/version-0.19.1-badge": {
+      "version-0.19.1-badge": {
         "title": "Badge"
       },
-      "version-0.19.1/version-0.19.1-button_group": {
+      "version-0.19.1-button_group": {
         "title": "ButtonGroup"
       },
-      "version-0.19.1/version-0.19.1-button": {
+      "version-0.19.1-button": {
         "title": "Button"
       },
-      "version-0.19.1/version-0.19.1-card": {
+      "version-0.19.1-card": {
         "title": "Card"
       },
-      "version-0.19.1/version-0.19.1-checkbox": {
+      "version-0.19.1-checkbox": {
         "title": "CheckBox"
       },
-      "version-0.19.1/version-0.19.1-contributing": {
+      "version-0.19.1-contributing": {
         "title": "Contributing"
       },
-      "version-0.19.1/version-0.19.1-customization": {
+      "version-0.19.1-customization": {
         "title": "Customization"
       },
-      "version-0.19.1/version-0.19.1-divider": {
+      "version-0.19.1-divider": {
         "title": "Divider"
       },
-      "version-0.19.1/version-0.19.1-forms": {
+      "version-0.19.1-forms": {
         "title": "Forms"
       },
-      "version-0.19.1/version-0.19.1-getting_started": {
+      "version-0.19.1-getting_started": {
         "title": "Getting Started",
         "sidebar_label": "Getting Started"
       },
-      "version-0.19.1/version-0.19.1-header": {
+      "version-0.19.1-header": {
         "title": "Header"
       },
-      "version-0.19.1/version-0.19.1-icon": {
+      "version-0.19.1-icon": {
         "title": "Icon"
       },
-      "version-0.19.1/version-0.19.1-labels": {
+      "version-0.19.1-labels": {
         "title": "Label Guide"
       },
-      "version-0.19.1/version-0.19.1-lists": {
+      "version-0.19.1-lists": {
         "title": "Lists"
       },
-      "version-0.19.1/version-0.19.1-overview": {
+      "version-0.19.1-overview": {
         "title": "Overview"
       },
-      "version-0.19.1/version-0.19.1-pricing": {
+      "version-0.19.1-pricing": {
         "title": "Pricing"
       },
-      "version-0.19.1/version-0.19.1-rating": {
+      "version-0.19.1-rating": {
         "title": "Rating"
       },
-      "version-0.19.1/version-0.19.1-searchbar": {
+      "version-0.19.1-searchbar": {
         "title": "SearchBar"
       },
-      "version-0.19.1/version-0.19.1-slider": {
+      "version-0.19.1-slider": {
         "title": "Slider"
       },
-      "version-0.19.1/version-0.19.1-social_icon": {
+      "version-0.19.1-social_icon": {
         "title": "SocialIcon"
       },
-      "version-0.19.1/version-0.19.1-testing": {
+      "version-0.19.1-testing": {
         "title": "Testing"
       },
-      "version-0.19.1/version-0.19.1-text": {
+      "version-0.19.1-text": {
         "title": "Text"
       },
-      "version-0.19.1/version-0.19.1-tile": {
+      "version-0.19.1-tile": {
         "title": "Tile"
       },
-      "version-0.19.1/version-0.19.1-troubleshooting": {
+      "version-0.19.1-troubleshooting": {
         "title": "Troubleshooting"
       },
-      "version-1.0.0/version-1.0.0-avatar": {
+      "version-1.0.0-avatar": {
         "title": "Avatar"
       },
-      "version-1.0.0/version-1.0.0-badge": {
+      "version-1.0.0-badge": {
         "title": "Badge"
       },
-      "version-1.0.0/version-1.0.0-button_group": {
+      "version-1.0.0-button_group": {
         "title": "ButtonGroup"
       },
-      "version-1.0.0/version-1.0.0-button": {
+      "version-1.0.0-button": {
         "title": "Button"
       },
-      "version-1.0.0/version-1.0.0-card": {
+      "version-1.0.0-card": {
         "title": "Card"
       },
-      "version-1.0.0/version-1.0.0-checkbox": {
+      "version-1.0.0-checkbox": {
         "title": "CheckBox"
       },
-      "version-1.0.0/version-1.0.0-contributing": {
+      "version-1.0.0-contributing": {
         "title": "Contributing"
       },
-      "version-1.0.0/version-1.0.0-customization": {
+      "version-1.0.0-customization": {
         "title": "Customization"
       },
-      "version-1.0.0/version-1.0.0-divider": {
+      "version-1.0.0-divider": {
         "title": "Divider"
       },
-      "version-1.0.0/version-1.0.0-header": {
+      "version-1.0.0-header": {
         "title": "Header"
       },
-      "version-1.0.0/version-1.0.0-icon": {
+      "version-1.0.0-icon": {
         "title": "Icon"
       },
-      "version-1.0.0/version-1.0.0-image": {
+      "version-1.0.0-image": {
         "title": "Image"
       },
-      "version-1.0.0/version-1.0.0-input": {
+      "version-1.0.0-input": {
         "title": "Input"
       },
-      "version-1.0.0/version-1.0.0-listitem": {
+      "version-1.0.0-listitem": {
         "title": "ListItem"
       },
-      "version-1.0.0/version-1.0.0-overlay": {
+      "version-1.0.0-overlay": {
         "title": "Overlay"
       },
-      "version-1.0.0/version-1.0.0-overview": {
+      "version-1.0.0-overview": {
         "title": "Overview"
       },
-      "version-1.0.0/version-1.0.0-pricing": {
+      "version-1.0.0-pricing": {
         "title": "Pricing"
       },
-      "version-1.0.0/version-1.0.0-rating": {
+      "version-1.0.0-rating": {
         "title": "Rating"
       },
-      "version-1.0.0/version-1.0.0-searchbar": {
+      "version-1.0.0-searchbar": {
         "title": "SearchBar"
       },
-      "version-1.0.0/version-1.0.0-slider": {
+      "version-1.0.0-slider": {
         "title": "Slider"
       },
-      "version-1.0.0/version-1.0.0-social_icon": {
+      "version-1.0.0-social_icon": {
         "title": "SocialIcon"
       },
-      "version-1.0.0/version-1.0.0-text": {
+      "version-1.0.0-text": {
         "title": "Text"
       },
-      "version-1.0.0/version-1.0.0-tile": {
+      "version-1.0.0-tile": {
         "title": "Tile"
       },
-      "version-1.0.0/version-1.0.0-tooltip": {
+      "version-1.0.0-tooltip": {
         "title": "Tooltip"
       },
-      "version-1.1.0/version-1.1.0-checkbox": {
+      "version-1.1.0-checkbox": {
         "title": "CheckBox"
       },
-      "version-1.1.0/version-1.1.0-input": {
+      "version-1.1.0-input": {
         "title": "Input"
       },
-      "version-1.1.0/version-1.1.0-text": {
+      "version-1.1.0-text": {
         "title": "Text"
       }
     },