From 8a38ca86d3f1eabb9c3271e24ee6f8ddd14c4544 Mon Sep 17 00:00:00 2001
From: Harrison Healey <harrisonmhealey@gmail.com>
Date: Wed, 21 Jun 2017 15:49:54 -0400
Subject: [PATCH] RN-216 Hid file upload button when files are disabled (#656)

---
 app/components/post_textbox/index.js        |   2 +
 app/components/post_textbox/post_textbox.js | 123 +++++++++++---------
 app/screens/channel/channel.js              |  21 +++-
 3 files changed, 85 insertions(+), 61 deletions(-)

diff --git a/app/components/post_textbox/index.js b/app/components/post_textbox/index.js
index 73b95fbae..ebb7f111d 100644
--- a/app/components/post_textbox/index.js
+++ b/app/components/post_textbox/index.js
@@ -8,6 +8,7 @@ import {userTyping} from 'mattermost-redux/actions/websocket';
 
 import {handleClearFiles, handleRemoveLastFile, handleUploadFiles} from 'app/actions/views/file_upload';
 import {getTheme} from 'app/selectors/preferences';
+import {getConfig} from 'mattermost-redux/selectors/entities/general';
 import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
 import {getUsersTyping} from 'mattermost-redux/selectors/entities/typing';
 
@@ -17,6 +18,7 @@ function mapStateToProps(state, ownProps) {
     return {
         ...ownProps,
         channelIsLoading: state.views.channel.loading,
+        config: getConfig(state),
         currentUserId: getCurrentUserId(state),
         typing: getUsersTyping(state),
         theme: getTheme(state),
diff --git a/app/components/post_textbox/post_textbox.js b/app/components/post_textbox/post_textbox.js
index cf9c1c52f..37e0fe17c 100644
--- a/app/components/post_textbox/post_textbox.js
+++ b/app/components/post_textbox/post_textbox.js
@@ -40,6 +40,7 @@ class PostTextbox extends PureComponent {
         }).isRequired,
         channelId: PropTypes.string.isRequired,
         channelIsLoading: PropTypes.bool.isRequired,
+        config: PropTypes.object.isRequired,
         currentUserId: PropTypes.string.isRequired,
         files: PropTypes.array,
         intl: intlShape.isRequired,
@@ -97,10 +98,10 @@ class PostTextbox extends PureComponent {
             );
         }
 
-        const canSend = (
-                (valueLength > 0 && valueLength <= MAX_MESSAGE_LENGTH) ||
-                files.filter((f) => !f.failed).length > 0
-            ) && uploadFileRequestStatus !== RequestStatus.STARTED;
+        const canSend =
+            (valueLength > 0 && valueLength <= MAX_MESSAGE_LENGTH) &&
+            files.filter((f) => !f.failed).length === 0 &&
+            uploadFileRequestStatus !== RequestStatus.STARTED;
         this.setState({
             canSend
         });
@@ -387,6 +388,26 @@ class PostTextbox extends PureComponent {
             placeholder = {id: 'create_post.write', defaultMessage: 'Write a message...'};
         }
 
+        let fileUpload = null;
+        const inputContainerStyle = [style.inputContainer];
+        if (this.props.config.EnableFileAttachments === 'true') {
+            fileUpload = (
+                <TouchableOpacity
+                    onPress={this.showFileAttachmentOptions}
+                    style={style.buttonContainer}
+                >
+                    <Icon
+                        size={30}
+                        style={style.attachIcon}
+                        color={changeOpacity(theme.centerChannelColor, 0.9)}
+                        name='md-add'
+                    />
+                </TouchableOpacity>
+            );
+        } else {
+            inputContainerStyle.push(style.inputContainerWithoutFileUpload);
+        }
+
         return (
             <View>
                 <Text
@@ -415,49 +436,35 @@ class PostTextbox extends PureComponent {
                     onChangeText={this.props.onChangeText}
                     rootId={this.props.rootId}
                 />
-                <View style={{backgroundColor: theme.centerChannelBg, elevation: 5}}>
-                    <View
-                        style={style.inputWrapper}
-                    >
-                        <TouchableOpacity
-                            onPress={this.showFileAttachmentOptions}
-                            style={style.buttonContainer}
-                        >
-                            <Icon
-                                size={30}
-                                style={style.attachIcon}
-                                color={changeOpacity(theme.centerChannelColor, 0.9)}
-                                name='md-add'
-                            />
-                        </TouchableOpacity>
-                        <View style={style.inputContainer}>
-                            <TextInput
-                                ref='input'
-                                value={textValue}
-                                onChangeText={this.handleTextChange}
-                                onSelectionChange={this.handleSelectionChange}
-                                placeholder={intl.formatMessage(placeholder)}
-                                placeholderTextColor={changeOpacity('#000', 0.5)}
-                                multiline={true}
-                                numberOfLines={10}
-                                blurOnSubmit={false}
-                                underlineColorAndroid='transparent'
-                                style={[style.input, {height: textInputHeight}]}
-                                onLayout={this.handleInputSizeChange}
-                            />
-                            {this.state.canSend &&
-                                <TouchableOpacity
-                                    onPress={this.handleSendMessage}
-                                    style={style.sendButton}
-                                >
-                                    <PaperPlane
-                                        height={13}
-                                        width={15}
-                                        color={theme.buttonColor}
-                                    />
-                                </TouchableOpacity>
-                            }
-                        </View>
+                <View style={style.inputWrapper}>
+                    {fileUpload}
+                    <View style={inputContainerStyle}>
+                        <TextInput
+                            ref='input'
+                            value={textValue}
+                            onChangeText={this.handleTextChange}
+                            onSelectionChange={this.handleSelectionChange}
+                            placeholder={intl.formatMessage(placeholder)}
+                            placeholderTextColor={changeOpacity('#000', 0.5)}
+                            multiline={true}
+                            numberOfLines={10}
+                            blurOnSubmit={false}
+                            underlineColorAndroid='transparent'
+                            style={[style.input, {height: textInputHeight}]}
+                            onLayout={this.handleInputSizeChange}
+                        />
+                        {this.state.canSend &&
+                            <TouchableOpacity
+                                onPress={this.handleSendMessage}
+                                style={style.sendButton}
+                            >
+                                <PaperPlane
+                                    height={13}
+                                    width={15}
+                                    color={theme.buttonColor}
+                                />
+                            </TouchableOpacity>
+                        }
                     </View>
                 </View>
             </View>
@@ -468,7 +475,10 @@ class PostTextbox extends PureComponent {
 const getStyleSheet = makeStyleSheetFromTheme((theme) => {
     return StyleSheet.create({
         buttonContainer: {
-            height: 36,
+            height: Platform.select({
+                ios: 34,
+                android: 36
+            }),
             width: 45,
             alignItems: 'center',
             justifyContent: 'center'
@@ -485,7 +495,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
         },
         hidden: {
             position: 'absolute',
-            top: 10000,  // way off screen
+            top: 10000, // way off screen
             left: 10000, // way off screen
             backgroundColor: 'transparent',
             borderColor: 'transparent',
@@ -498,22 +508,21 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             alignItems: 'flex-end',
             marginRight: 10
         },
+        inputContainerWithoutFileUpload: {
+            marginLeft: 10
+        },
         inputWrapper: {
             alignItems: 'flex-end',
             flexDirection: 'row',
             paddingVertical: 4,
-            backgroundColor: changeOpacity(theme.centerChannelColor, 0.05),
+            backgroundColor: theme.centerChannelBg,
             borderTopWidth: 1,
             borderTopColor: changeOpacity(theme.centerChannelColor, 0.20)
         },
         attachIcon: {
-            ...Platform.select({
-                ios: {
-                    marginTop: 2
-                },
-                android: {
-                    marginTop: 0
-                }
+            marginTop: Platform.select({
+                ios: 2,
+                android: 0
             })
         },
         sendButton: {
diff --git a/app/screens/channel/channel.js b/app/screens/channel/channel.js
index 4bba9bf99..d3cbc4c02 100644
--- a/app/screens/channel/channel.js
+++ b/app/screens/channel/channel.js
@@ -171,16 +171,17 @@ class Channel extends PureComponent {
             theme
         } = this.props;
 
+        const style = getStyleFromTheme(theme);
+
         if (!currentTeam || !currentChannel) {
             return (
-                <View style={{flex: 1, backgroundColor: theme.centerChannelBg}}>
+                <View style={style.loading}>
                     <Loading/>
                 </View>
             );
         }
 
         const channelDraft = this.props.drafts[currentChannel.id] || {};
-        const style = getStyleFromTheme(theme);
 
         return (
             <ChannelDrawer
@@ -190,7 +191,7 @@ class Channel extends PureComponent {
                 <StatusBar/>
                 <KeyboardLayout
                     behavior='padding'
-                    style={{flex: 1, backgroundColor: theme.centerChannelBg}}
+                    style={style.keyboardLayout}
                     keyboardVerticalOffset={0}
                 >
                     <View style={style.postList}>
@@ -208,7 +209,7 @@ class Channel extends PureComponent {
                         navigator={navigator}
                     />
                 </KeyboardLayout>
-                <View style={{flex: 1, position: 'absolute'}}>
+                <View style={style.headerContainer}>
                     <View style={style.header}>
                         <ChannelDrawerButton/>
                         <ChannelTitle
@@ -224,6 +225,10 @@ class Channel extends PureComponent {
 
 const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
     return StyleSheet.create({
+        headerContainer: {
+            flex: 1,
+            position: 'absolute'
+        },
         header: {
             backgroundColor: theme.sidebarHeaderBg,
             flexDirection: 'row',
@@ -251,6 +256,14 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
                     marginTop: 64
                 }
             })
+        },
+        loading: {
+            backgroundColor: theme.centerChannelBg,
+            flex: 1
+        },
+        keyboardLayout: {
+            backgroundColor: theme.centerChannelBg,
+            flex: 1
         }
     });
 });