Fix sidebar search bar (#4350)

app/components/search_bar/index.js

@@ -23,6 +23,8 @@ import {memoizeResult} from '@mm-redux/utils/helpers';
 
 import CustomPropTypes from 'app/constants/custom_prop_types';
 
+const LEFT_COMPONENT_INITIAL_POSITION = Platform.OS === 'ios' ? 7 : 0;
+
 export default class Search extends PureComponent {
     static propTypes = {
         onBlur: PropTypes.func,
@@ -94,7 +96,7 @@ export default class Search extends PureComponent {
             leftComponentWidth: 0,
         };
 
-        this.leftComponentAnimated = new Animated.Value(0);
+        this.leftComponentAnimated = new Animated.Value(LEFT_COMPONENT_INITIAL_POSITION);
         this.searchContainerAnimated = new Animated.Value(0);
     }
 
@@ -115,10 +117,11 @@ export default class Search extends PureComponent {
     };
 
     onBlur = async () => {
+        this.props.onBlur();
+
         if (this.props.leftComponent) {
             await this.collapseAnimation();
         }
-        this.props.onBlur();
     };
 
     onLeftComponentLayout = (event) => {
@@ -142,13 +145,13 @@ export default class Search extends PureComponent {
 
     onFocus = () => {
         InteractionManager.runAfterInteractions(async () => {
-            if (this.props.leftComponent) {
-                await this.expandAnimation();
-            }
-
             if (this.props.onFocus) {
                 this.props.onFocus();
             }
+
+            if (this.props.leftComponent) {
+                await this.expandAnimation();
+            }
         });
     };
 
@@ -176,7 +179,7 @@ export default class Search extends PureComponent {
                 Animated.timing(
                     this.leftComponentAnimated,
                     {
-                        toValue: 115,
+                        toValue: -115,
                         duration: 200,
                     },
                 ),
@@ -197,7 +200,7 @@ export default class Search extends PureComponent {
                 Animated.timing(
                     this.leftComponentAnimated,
                     {
-                        toValue: 0,
+                        toValue: LEFT_COMPONENT_INITIAL_POSITION,
                         duration: 200,
                     },
                 ),
@@ -289,9 +292,9 @@ export default class Search extends PureComponent {
             <View style={[searchBarStyle.container, this.props.containerStyle]}>
                 {((this.props.leftComponent) ?
                     <Animated.View
-                        style={{
-                            right: this.leftComponentAnimated,
-                        }}
+                        style={[styles.leftComponent, {
+                            left: this.leftComponentAnimated,
+                        }]}
                         onLayout={this.onLeftComponentLayout}
                     >
                         {this.props.leftComponent}
@@ -424,7 +427,6 @@ const styles = StyleSheet.create({
         flex: 1,
     },
     inputContainer: {
-        marginLeft: 0,
         borderRadius: Platform.select({
             ios: 2,
             android: 0,
@@ -440,11 +442,11 @@ const styles = StyleSheet.create({
     },
     leftIcon: {
         marginLeft: 4,
+        width: 30,
     },
     searchContainer: {
         paddingTop: 0,
         paddingBottom: 0,
-        marginLeft: 0,
     },
     text: {
         fontSize: Platform.select({
@@ -453,4 +455,8 @@ const styles = StyleSheet.create({
         }),
         color: '#fff',
     },
+    leftComponent: {
+        position: 'relative',
+        marginLeft: 2,
+    },
 });

app/components/sidebars/main/channels_list/channels_list.js

@@ -31,9 +31,9 @@ export default class ChannelsList extends PureComponent {
         onSearchEnds: PropTypes.func.isRequired,
         onSearchStart: PropTypes.func.isRequired,
         onSelectChannel: PropTypes.func.isRequired,
-        onShowTeams: PropTypes.func.isRequired,
         theme: PropTypes.object.isRequired,
         isLandscape: PropTypes.bool.isRequired,
+        onShowTeams: PropTypes.func,
     };
 
     static contextTypes = {
@@ -126,6 +126,8 @@ export default class ChannelsList extends PureComponent {
             fontSize: 15,
         };
 
+        const leftComponent = onShowTeams ? <SwitchTeamsButton onShowTeams={onShowTeams}/> : null;
+
         const title = (
             <View style={[styles.searchContainer, padding(isLandscape)]}>
                 <SearchBar
@@ -148,12 +150,7 @@ export default class ChannelsList extends PureComponent {
                     keyboardAppearance={getKeyboardAppearanceFromTheme(theme)}
                     value={term}
                     showCancel={Platform.OS === 'android'}
-                    leftComponentWidth={67}
-                    leftComponent={(
-                        <SwitchTeamsButton
-                            onShowTeams={onShowTeams}
-                        />
-                    )}
+                    leftComponent={leftComponent}
                 />
             </View>
         );
@@ -206,7 +203,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
         },
         headerContainer: {
             alignItems: 'center',
-            paddingLeft: 13,
             backgroundColor: theme.sidebarBg,
             flexDirection: 'row',
             borderBottomWidth: 1,
@@ -236,7 +232,8 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             ...Platform.select({
                 android: {
                     marginBottom: 1,
-                    paddingRight: 17,
+                    paddingRight: 8,
+                    paddingLeft: 8,
                 },
                 ios: {
                     marginBottom: 3,
@@ -253,10 +250,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             justifyContent: 'center',
             marginHorizontal: 16,
         },
-        switchContainer: {
-            position: 'relative',
-            top: -1,
-        },
         title: {
             color: theme.sidebarText,
             opacity: 0.4,

app/components/sidebars/main/main_sidebar_base.js

@@ -166,7 +166,7 @@ export default class MainSidebarBase extends Component {
     };
 
     showTeams = () => {
-        if (this.drawerSwiper && this.props.teamsCount > 1) {
+        if (this.drawerSwiper) {
             this.drawerSwiper.showTeamsPage();
         }
     };
@@ -232,7 +232,7 @@ export default class MainSidebarBase extends Component {
                     ref={this.channelListRef}
                     onSelectChannel={this.selectChannel}
                     onJoinChannel={this.joinChannel}
-                    onShowTeams={this.showTeams}
+                    onShowTeams={multipleTeams ? this.showTeams : undefined}
                     onSearchStart={this.onSearchStart}
                     onSearchEnds={this.onSearchEnds}
                     theme={theme}