Added containerStyle props for platform specific searchbars (#999)

* Added containerBgColor and inputBgColor props for searchbar * Added inputContainerStyle prop for searchbar * minor changes in test for searchbar * Added test
react-native-elements · Mar 27, 2018 · fdfaa09 · fdfaa09
1 parent 3f9faed
commit fdfaa09
Show file tree

Hide file tree

Showing 9 changed files with 3,418 additions and 1,254 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/searchbar/SearchBar-android.js b/src/searchbar/SearchBar-android.js
@@ -65,6 +65,7 @@ class SearchBar extends Component {
       leftIcon,
       leftIconContainerStyle,
       rightIconContainerStyle,
+      inputContainerStyle,
       inputStyle,
       noIcon,
       showLoading,
@@ -82,15 +83,15 @@ class SearchBar extends Component {
       />
     );
     return (
-      <View style={styles.container}>
+      <View style={[styles.container, containerStyle]}>
         <Input
           {...attributes}
           onFocus={this.onFocus}
           onBlur={this.onBlur}
           onChangeText={this.onChangeText}
           ref={input => (this.input = input)}
           inputStyle={[styles.input, inputStyle]}
-          containerStyle={[styles.inputContainer, containerStyle]}
+          containerStyle={[styles.inputContainer, inputContainerStyle]}
           leftIcon={noIcon ? undefined : leftIcon ? leftIcon : searchIcon}
           leftIconContainerStyle={[
             styles.leftIconContainerStyle,
@@ -137,6 +138,7 @@ SearchBar.propTypes = {
   leftIcon: PropTypes.object,
   leftIconContainerStyle: ViewPropTypes.style,
   rightIconContainerStyle: ViewPropTypes.style,
+  inputContainerStyle: ViewPropTypes.style,
   inputStyle: Text.propTypes.style,
   onClear: PropTypes.func,
   onCancel: PropTypes.func,

diff --git a/src/searchbar/SearchBar-default.js b/src/searchbar/SearchBar-default.js
@@ -64,10 +64,7 @@ class Search extends Component {
       ...attributes
     } = this.props;
 
-    const {
-      style: loadingStyle,
-      ...otherLoadingProps
-    } = loadingProps;
+    const { style: loadingStyle, ...otherLoadingProps } = loadingProps;
 
     let Icon = MaterialIcons;
     if (icon.type) {
@@ -96,8 +93,9 @@ class Search extends Component {
             round && { borderRadius: Platform.OS === 'ios' ? 15 : 20 },
             inputStyle && inputStyle,
             clearIcon && showLoading && { paddingRight: 50 },
-            ((clearIcon && !showLoading) ||
-              (!clearIcon && showLoading)) && { paddingRight: 30 },
+            ((clearIcon && !showLoading) || (!clearIcon && showLoading)) && {
+              paddingRight: 30,
+            },
           ]}
         />
         {!noIcon && (

diff --git a/src/searchbar/SearchBar-ios.js b/src/searchbar/SearchBar-ios.js
@@ -71,6 +71,7 @@ class SearchBar extends Component {
       leftIcon,
       leftIconContainerStyle,
       rightIconContainerStyle,
+      inputContainerStyle,
       inputStyle,
       noIcon,
       placeholderTextColor,
@@ -84,7 +85,7 @@ class SearchBar extends Component {
       <Ionicon size={20} name={'ios-search'} color={IOS_GRAY} />
     );
     return (
-      <View style={styles.container}>
+      <View style={[styles.container, containerStyle]}>
         <Input
           {...attributes}
           onFocus={this.onFocus}
@@ -95,7 +96,7 @@ class SearchBar extends Component {
           containerStyle={[
             styles.inputContainer,
             !hasFocus && { width: SCREEN_WIDTH - 32, marginRight: 15 },
-            containerStyle,
+            inputContainerStyle,
           ]}
           leftIcon={noIcon ? undefined : leftIcon ? leftIcon : searchIcon}
           leftIconContainerStyle={[
@@ -148,6 +149,7 @@ SearchBar.propTypes = {
   leftIcon: PropTypes.object,
   leftIconContainerStyle: ViewPropTypes.style,
   rightIconContainerStyle: ViewPropTypes.style,
+  inputContainerStyle: ViewPropTypes.style,
   inputStyle: Text.propTypes.style,
   placeholderTextColor: PropTypes.string,
 };

diff --git a/src/searchbar/__tests__/SearchBar-android.js b/src/searchbar/__tests__/SearchBar-android.js
@@ -26,47 +26,37 @@ describe('Android SearchBar component', () => {
   });
 
   it('should render without search icon', () => {
-    const component = shallow(
-      <SearchBar noIcon />
-    );
+    const component = shallow(<SearchBar noIcon />);
 
     expect(component.length).toBe(1);
     expect(toJson(component)).toMatchSnapshot();
   });
 
   it('should render without clear icon', () => {
-    const component = shallow(
-      <SearchBar clearIcon={false} />
-    );
+    const component = shallow(<SearchBar clearIcon={false} />);
 
     expect(component.length).toBe(1);
     expect(toJson(component)).toMatchSnapshot();
   });
 
   it('should call onFocus when input is focused', () => {
     const onFocusMock = jest.fn();
-    const component = shallow(
-      <SearchBar onFocus={onFocusMock} />
-    );
+    const component = shallow(<SearchBar onFocus={onFocusMock} />);
     component.find('Input').simulate('focus');
     expect(onFocusMock).toBeCalled();
   });
 
   it('should call onBlur when input is blured', () => {
     const onBlurMock = jest.fn();
-    const component = shallow(
-      <SearchBar onFocus={onBlurMock} />
-    );
+    const component = shallow(<SearchBar onFocus={onBlurMock} />);
     component.find('Input').simulate('focus');
     component.find('Input').simulate('blur');
     expect(onBlurMock).toBeCalled();
   });
 
   it('should call onChangeText when input is changed', () => {
     const onChangeMock = jest.fn();
-    const component = shallow(
-      <SearchBar onChangeText={onChangeMock} />
-    );
+    const component = shallow(<SearchBar onChangeText={onChangeMock} />);
     component.find('Input').simulate('changeText', 'test');
     expect(onChangeMock).toBeCalled();
   });
@@ -75,7 +65,11 @@ describe('Android SearchBar component', () => {
     const onClearMock = jest.fn();
     const onCancelMock = jest.fn();
     const component = shallow(
-      <SearchBar onChangeText={onChangeTextMock} onClear={onClearMock} onCancel={onCancelMock} />
+      <SearchBar
+        onChangeText={onChangeTextMock}
+        onClear={onClearMock}
+        onCancel={onCancelMock}
+      />
     );
 
     expect(component.length).toBe(1);

diff --git a/src/searchbar/__tests__/SearchBar-ios.js b/src/searchbar/__tests__/SearchBar-ios.js
@@ -28,65 +28,51 @@ describe('iOS SearchBar component', () => {
   });
 
   it('should render with a custom search icon', () => {
-    const component = shallow(
-      <SearchBar leftIcon={<View />} />
-    );
+    const component = shallow(<SearchBar leftIcon={<View />} />);
 
     expect(component.length).toBe(1);
     expect(toJson(component)).toMatchSnapshot();
   });
 
   it('should render without search icon', () => {
-    const component = shallow(
-      <SearchBar noIcon />
-    );
+    const component = shallow(<SearchBar noIcon />);
 
     expect(component.length).toBe(1);
     expect(toJson(component)).toMatchSnapshot();
   });
 
   it('should render without clear icon', () => {
-    const component = shallow(
-      <SearchBar clearIcon={false} />
-    );
+    const component = shallow(<SearchBar clearIcon={false} />);
 
     expect(component.length).toBe(1);
     expect(toJson(component)).toMatchSnapshot();
   });
 
   it('should render with a custom Cancel button title', () => {
-    const component = shallow(
-      <SearchBar cancelButtonTitle="Annuler" />
-    );
+    const component = shallow(<SearchBar cancelButtonTitle="Annuler" />);
 
     expect(component.length).toBe(1);
     expect(toJson(component)).toMatchSnapshot();
   });
 
   it('should call onFocus when input is focused', () => {
     const onFocusMock = jest.fn();
-    const component = shallow(
-      <SearchBar onFocus={onFocusMock} />
-    );
+    const component = shallow(<SearchBar onFocus={onFocusMock} />);
     component.find('Input').simulate('focus');
     expect(onFocusMock).toBeCalled();
   });
 
   it('should call onBlur when input is blured', () => {
     const onBlurMock = jest.fn();
-    const component = shallow(
-      <SearchBar onFocus={onBlurMock} />
-    );
+    const component = shallow(<SearchBar onFocus={onBlurMock} />);
     component.find('Input').simulate('focus');
     component.find('Input').simulate('blur');
     expect(onBlurMock).toBeCalled();
   });
 
   it('should call onChangeText when input is changed', () => {
     const onChangeMock = jest.fn();
-    const component = shallow(
-      <SearchBar onChangeText={onChangeMock} />
-    );
+    const component = shallow(<SearchBar onChangeText={onChangeMock} />);
     component.find('Input').simulate('changeText', 'test');
     expect(onChangeMock).toBeCalled();
   });
@@ -96,7 +82,11 @@ describe('iOS SearchBar component', () => {
     const onClearMock = jest.fn();
     const onCancelMock = jest.fn();
     const component = shallow(
-      <SearchBar onChangeText={onChangeTextMock} onClear={onClearMock} onCancel={onCancelMock} />
+      <SearchBar
+        onChangeText={onChangeTextMock}
+        onClear={onClearMock}
+        onCancel={onCancelMock}
+      />
     );
 
     expect(component.length).toBe(1);

diff --git a/src/searchbar/__tests__/SearchBar.js b/src/searchbar/__tests__/SearchBar.js
@@ -12,33 +12,21 @@ describe('SearchBar wrapper component', () => {
   });
 
   it('should render a default SearchBar if wrong platform', () => {
-    const component = shallow(
-      <SearchBar
-        platform="wrong-platform"
-      />
-    );
+    const component = shallow(<SearchBar platform="wrong-platform" />);
 
     expect(component.length).toBe(1);
     expect(toJson(component)).toMatchSnapshot();
   });
 
   it('should render an iOS SearchBar', () => {
-    const component = shallow(
-      <SearchBar
-        platform="ios"
-      />
-    );
+    const component = shallow(<SearchBar platform="ios" />);
 
     expect(component.length).toBe(1);
     expect(toJson(component)).toMatchSnapshot();
   });
 
   it('should render an Android SearchBar', () => {
-    const component = shallow(
-      <SearchBar
-        platform="android"
-      />
-    );
+    const component = shallow(<SearchBar platform="android" />);
 
     expect(component.length).toBe(1);
     expect(toJson(component)).toMatchSnapshot();

diff --git a/src/searchbar/__tests__/__snapshots__/SearchBar-android.js.snap b/src/searchbar/__tests__/__snapshots__/SearchBar-android.js.snap
@@ -3,12 +3,15 @@
 exports[`Android SearchBar component should render with a custom methods 1`] = `
 <View
   style={
-    Object {
-      "backgroundColor": "white",
-      "paddingBottom": 8,
-      "paddingTop": 8,
-      "width": 750,
-    }
+    Array [
+      Object {
+        "backgroundColor": "white",
+        "paddingBottom": 8,
+        "paddingTop": 8,
+        "width": 750,
+      },
+      undefined,
+    ]
   }
 >
   <Input
@@ -77,12 +80,15 @@ exports[`Android SearchBar component should render with a custom methods 1`] = `
 exports[`Android SearchBar component should render with loading 1`] = `
 <View
   style={
-    Object {
-      "backgroundColor": "white",
-      "paddingBottom": 8,
-      "paddingTop": 8,
-      "width": 750,
-    }
+    Array [
+      Object {
+        "backgroundColor": "white",
+        "paddingBottom": 8,
+        "paddingTop": 8,
+        "width": 750,
+      },
+      undefined,
+    ]
   }
 >
   <Input
@@ -166,12 +172,15 @@ exports[`Android SearchBar component should render with loading 1`] = `
 exports[`Android SearchBar component should render without clear icon 1`] = `
 <View
   style={
-    Object {
-      "backgroundColor": "white",
-      "paddingBottom": 8,
-      "paddingTop": 8,
-      "width": 750,
-    }
+    Array [
+      Object {
+        "backgroundColor": "white",
+        "paddingBottom": 8,
+        "paddingTop": 8,
+        "width": 750,
+      },
+      undefined,
+    ]
   }
 >
   <Input
@@ -240,12 +249,15 @@ exports[`Android SearchBar component should render without clear icon 1`] = `
 exports[`Android SearchBar component should render without issues 1`] = `
 <View
   style={
-    Object {
-      "backgroundColor": "white",
-      "paddingBottom": 8,
-      "paddingTop": 8,
-      "width": 750,
-    }
+    Array [
+      Object {
+        "backgroundColor": "white",
+        "paddingBottom": 8,
+        "paddingTop": 8,
+        "width": 750,
+      },
+      undefined,
+    ]
   }
 >
   <Input
@@ -314,12 +326,15 @@ exports[`Android SearchBar component should render without issues 1`] = `
 exports[`Android SearchBar component should render without search icon 1`] = `
 <View
   style={
-    Object {
-      "backgroundColor": "white",
-      "paddingBottom": 8,
-      "paddingTop": 8,
-      "width": 750,
-    }
+    Array [
+      Object {
+        "backgroundColor": "white",
+        "paddingBottom": 8,
+        "paddingTop": 8,
+        "width": 750,
+      },
+      undefined,
+    ]
   }
 >
   <Input