fix styles with ReportActionCompose

Expensify · Aug 2, 2022 · 2518e21 · 2518e21
1 parent 5a1a414
commit 2518e21
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 14 deletions.
diff --git a/src/CONST.js b/src/CONST.js
@@ -477,6 +477,7 @@ const CONST = {
     EMOJI_PICKER_ITEM_HEIGHT: 40,
     EMOJI_PICKER_HEADER_HEIGHT: 38,
     COMPOSER_MAX_HEIGHT: 125,
+    CHAT_FOOTER_MIN_HEIGHT: 65,
     CHAT_SKELETON_VIEW: {
         AVERAGE_ROW_HEIGHT: 80,
         HEIGHT_FOR_ROW_COUNT: {
@@ -745,7 +746,7 @@ const CONST = {
     },
 
     // There's a limit of 60k characters in Auth - https://github.com/Expensify/Auth/blob/198d59547f71fdee8121325e8bc9241fc9c3236a/auth/lib/Request.h#L28
-    MAX_COMMENT_LENGTH: 60000,
+    MAX_COMMENT_LENGTH: 1,
 
     ONYX: {
         METHOD: {

diff --git a/src/components/ScreenWrapper/BaseScreenWrapper.js b/src/components/ScreenWrapper/BaseScreenWrapper.js
@@ -88,10 +88,8 @@ class BaseScreenWrapper extends React.Component {
                                         : this.props.children
                                 }
                                 <KeyboardShortcutsModal />
-                                {this.props.isSmallScreenWidth && this.props.network.isOffline && (
-                                    <View style={styles.chatItemComposeSecondaryRow}>
-                                        <OfflineIndicator />
-                                    </View>
+                                {this.props.isSmallScreenWidth && (
+                                    <OfflineIndicator />
                                 )}
                             </KeyboardAvoidingView>
                         </View>

diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
@@ -22,6 +22,9 @@ import ReportActionsSkeletonView from '../../components/ReportActionsSkeletonVie
 import reportActionPropTypes from './report/reportActionPropTypes';
 import ArchivedReportFooter from '../../components/ArchivedReportFooter';
 import toggleReportActionComposeView from '../../libs/toggleReportActionComposeView';
+import {withNetwork} from '../../components/OnyxProvider';
+import compose from '../../libs/compose';
+import networkPropTypes from '../../components/networkPropTypes';
 
 const propTypes = {
     /** Navigation route context info provided by react navigation */
@@ -76,6 +79,9 @@ const propTypes = {
         /** The type of the policy */
         type: PropTypes.string,
     })).isRequired,
+
+    /** Information about the network */
+    network: networkPropTypes.isRequired,
 };
 
 const defaultProps = {
@@ -165,6 +171,10 @@ class ReportScreen extends React.Component {
         return !getReportID(this.props.route) || (_.isEmpty(this.props.reportActions) && this.props.isLoadingInitialReportActions);
     }
 
+    setChatFooterStyles(isOffline) {
+        return {...styles.chatFooter, minHeight: !isOffline ? CONST.CHAT_FOOTER_MIN_HEIGHT : 0};
+    }
+
     /**
      * Persists the currently viewed report id
      */
@@ -231,7 +241,7 @@ class ReportScreen extends React.Component {
                             />
                         )}
                     {(isArchivedRoom || this.props.session.shouldShowComposeInput) && (
-                        <View style={[styles.chatFooter, this.props.isComposerFullSize && styles.chatFooterFullCompose]}>
+                        <View style={[this.setChatFooterStyles(this.props.network.isOffline), this.props.isComposerFullSize && styles.chatFooterFullCompose]}>
                             {
                                 isArchivedRoom
                                     ? (
@@ -262,7 +272,7 @@ class ReportScreen extends React.Component {
 ReportScreen.propTypes = propTypes;
 ReportScreen.defaultProps = defaultProps;
 
-export default withOnyx({
+export default compose(withNetwork(), withOnyx({
     isSidebarLoaded: {
         key: ONYXKEYS.IS_SIDEBAR_LOADED,
     },
@@ -289,4 +299,4 @@ export default withOnyx({
     policies: {
         key: ONYXKEYS.COLLECTION.POLICY,
     },
-})(ReportScreen);
+}))(ReportScreen);
diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
@@ -673,9 +673,9 @@ class ReportActionCompose extends React.Component {
                         </Tooltip>
                     </View>
                 </View>
-                <View style={[styles.chatItemComposeSecondaryRow, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}>
+                <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}>
                     {!this.props.isSmallScreenWidth && <OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRowOffset]} />}
-                    <ReportTypingIndicator reportID={this.props.reportID} />
+                    <ReportTypingIndicator reportID={this.props.reportID} containerStyles={[styles.chatItemComposeSecondaryRowOffset]} />
                     <ExceededCommentLength commentLength={this.comment.length} />
                 </View>
             </View>

diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js
@@ -103,7 +103,7 @@ class ReportActionsList extends React.Component {
         const minimumReportActionHeight = styles.chatItem.paddingTop + styles.chatItem.paddingBottom
             + variables.fontSizeNormalHeight;
         const availableHeight = this.props.windowHeight
-            - (styles.chatFooter.minHeight + variables.contentHeaderHeight);
+            - (CONST.CHAT_FOOTER_MIN_HEIGHT + variables.contentHeaderHeight);
         return Math.ceil(availableHeight / minimumReportActionHeight);
     }
 

diff --git a/src/pages/home/report/ReportTypingIndicator.js b/src/pages/home/report/ReportTypingIndicator.js
@@ -19,11 +19,15 @@ const propTypes = {
     /** Information about the network */
     network: networkPropTypes.isRequired,
 
+    /** Additional styles to apply to the container */
+    containerStyles: PropTypes.arrayOf(PropTypes.object),
+
     ...withLocalizePropTypes,
 };
 
 const defaultProps = {
     userTypingStatuses: {},
+    containerStyles: {},
 };
 
 class ReportTypingIndicator extends React.Component {
@@ -67,7 +71,7 @@ class ReportTypingIndicator extends React.Component {
                         leadingText={PersonalDetails.getDisplayName(this.state.usersTyping[0])}
                         trailingText={` ${this.props.translate('reportTypingIndicator.isTyping')}`}
                         textStyle={[styles.chatItemComposeSecondaryRowSubText]}
-                        wrapperStyle={styles.chatItemComposeSecondaryRow}
+                        wrapperStyle={[...styles.chatItemComposeSecondaryRow, ...this.props.containerStyles]}
                         leadingTextParentStyle={styles.chatItemComposeSecondaryRowOffset}
                     />
                 );
@@ -78,6 +82,7 @@ class ReportTypingIndicator extends React.Component {
                         style={[
                             styles.chatItemComposeSecondaryRowSubText,
                             styles.chatItemComposeSecondaryRowOffset,
+                            ...this.props.containerStyles,
                         ]}
                         numberOfLines={1}
                     >

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -670,7 +670,8 @@ const styles = {
     },
 
     offlineIndicatorMobile: {
-        marginLeft: 25,
+        paddingLeft: 20,
+        paddingBottom: 12,
     },
 
     // Actions
@@ -1367,7 +1368,6 @@ const styles = {
     },
 
     chatFooter: {
-        minHeight: 65,
         marginBottom: 5,
         paddingLeft: 20,
         paddingRight: 20,