MM-12424 Remove unused props from KeyboardLayout and simplify methods (#2203)

* MM-12424 Remove unused props from KeyboardLayout and simplify methods

* Update snapshots

app/components/layout/keyboard_layout/index.js

@@ -1,19 +1,6 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {connect} from 'react-redux';
-
-import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
-
-import {getStatusBarHeight} from 'app/selectors/device';
-
 import KeyboardLayout from './keyboard_layout';
 
-function mapStateToProps(state) {
-    return {
-        statusBarHeight: getStatusBarHeight(state),
-        theme: getTheme(state),
-    };
-}
-
-export default connect(mapStateToProps)(KeyboardLayout);
+export default KeyboardLayout;

app/components/layout/keyboard_layout/keyboard_layout.js

@@ -3,34 +3,33 @@
 
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import {Keyboard, Platform, View} from 'react-native';
+import {
+    Keyboard,
+    Platform,
+    StyleSheet,
+    View,
+} from 'react-native';
 
-import {makeStyleSheetFromTheme} from 'app/utils/theme';
+import * as CustomPropTypes from 'app/constants/custom_prop_types';
 
 export default class KeyboardLayout extends PureComponent {
     static propTypes = {
         children: PropTypes.node,
-        statusBarHeight: PropTypes.number,
-        theme: PropTypes.object.isRequired,
-    };
-
-    static defaultProps = {
-        keyboardVerticalOffset: 0,
+        style: CustomPropTypes.Style,
     };
 
     constructor(props) {
         super(props);
         this.subscriptions = [];
-        this.count = 0;
         this.state = {
-            bottom: 0,
+            keyboardHeight: 0,
         };
     }
 
-    componentWillMount() {
+    componentDidMount() {
         if (Platform.OS === 'ios') {
             this.subscriptions = [
-                Keyboard.addListener('keyboardWillChangeFrame', this.onKeyboardChange),
+                Keyboard.addListener('keyboardWillShow', this.onKeyboardWillShow),
                 Keyboard.addListener('keyboardWillHide', this.onKeyboardWillHide),
             ];
         }
@@ -41,52 +40,36 @@ export default class KeyboardLayout extends PureComponent {
     }
 
     onKeyboardWillHide = () => {
-        this.setState({bottom: 0});
+        this.setState({
+            keyboardHeight: 0,
+        });
     };
 
-    onKeyboardChange = (e) => {
-        if (!e) {
-            this.setState({bottom: 0});
-            return;
-        }
-
-        const {endCoordinates} = e;
-        const {height} = endCoordinates;
-
-        this.setState({bottom: height});
+    onKeyboardWillShow = (e) => {
+        this.setState({
+            keyboardHeight: e?.endCoordinates?.height || 0,
+        });
     };
 
     render() {
-        const {children, theme, ...otherProps} = this.props;
-        const style = getStyleFromTheme(theme);
+        const layoutStyle = [this.props.style, style.keyboardLayout];
 
-        if (Platform.OS === 'android') {
-            return (
-                <View
-                    style={style.keyboardLayout}
-                    {...otherProps}
-                >
-                    {children}
-                </View>
-            );
+        if (Platform.OS === 'ios') {
+            // iOS doesn't resize the app automatically
+            layoutStyle.push({paddingBottom: this.state.keyboardHeight});
         }
 
         return (
-            <View
-                style={[style.keyboardLayout, {marginBottom: this.state.bottom}]}
-            >
-                {children}
+            <View style={layoutStyle}>
+                {this.props.children}
             </View>
         );
     }
 }
 
-const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
-    return {
-        keyboardLayout: {
-            position: 'relative',
-            backgroundColor: theme.centerChannelBg,
-            flex: 1,
-        },
-    };
+const style = StyleSheet.create({
+    keyboardLayout: {
+        position: 'relative',
+        flex: 1,
+    },
 });

app/screens/channel/channel.js

@@ -395,6 +395,7 @@ export default class Channel extends PureComponent {
 const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
     return {
         postList: {
+            backgroundColor: theme.centerChannelBg,
             flex: 1,
         },
         loading: {

app/screens/more_channels/__snapshots__/more_channels.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`MoreChannels should match snapshot 1`] = `
-<Connect(KeyboardLayout)>
+<KeyboardLayout>
   <Connect(StatusBar) />
   <React.Fragment>
     <Component
@@ -95,5 +95,5 @@ exports[`MoreChannels should match snapshot 1`] = `
       }
     />
   </React.Fragment>
-</Connect(KeyboardLayout)>
+</KeyboardLayout>
 `;

app/screens/thread/thread.js

@@ -165,11 +165,7 @@ class Thread extends PureComponent {
                 keyboardOffset={20}
             >
                 <StatusBar/>
-                <KeyboardLayout
-                    behavior='padding'
-                    style={style.container}
-                    keyboardVerticalOffset={65}
-                >
+                <KeyboardLayout style={style.container}>
                     {content}
                     {postTextBox}
                 </KeyboardLayout>