Merge pull request Expensify#9095 from Expensify/tgolen-move-istyping

Move all the compose meta data to be above the compose input
ojasjadhav2 · May 27, 2022 · 70479c3 · 70479c3
2 parents 3e52b9a + 120803d
commit 70479c3
Show file tree

Hide file tree

Showing 6 changed files with 113 additions and 64 deletions.
diff --git a/src/components/ExceededCommentLength.js b/src/components/ExceededCommentLength.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CONST from '../CONST';
+import Text from './Text';
+import styles from '../styles/styles';
+
+const propTypes = {
+    /** The current length of the comment */
+    commentLength: PropTypes.number.isRequired,
+};
+
+const ExceededCommentLength = (props) => {
+    if (props.commentLength <= CONST.MAX_COMMENT_LENGTH) {
+        return null;
+    }
+
+    return (
+        <Text style={[styles.textMicro, styles.textDanger]}>
+            {`${props.commentLength}/${CONST.MAX_COMMENT_LENGTH}`}
+        </Text>
+    );
+};
+
+ExceededCommentLength.propTypes = propTypes;
+ExceededCommentLength.displayName = 'ExceededCommentLength';
+
+export default ExceededCommentLength;
diff --git a/src/components/OfflineIndicator.js b/src/components/OfflineIndicator.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import {View} from 'react-native';
+import {withNetwork} from './OnyxProvider';
+import networkPropTypes from './networkPropTypes';
+import Icon from './Icon';
+import * as Expensicons from './Icon/Expensicons';
+import variables from '../styles/variables';
+import Text from './Text';
+import styles from '../styles/styles';
+import compose from '../libs/compose';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
+
+const propTypes = {
+    /** Information about the network */
+    network: networkPropTypes.isRequired,
+
+    ...withLocalizePropTypes,
+};
+
+const OfflineIndicator = (props) => {
+    if (!props.network.isOffline) {
+        return null;
+    }
+    return (
+        <View style={[styles.flexRow]}>
+            <Icon
+                src={Expensicons.Offline}
+                width={variables.iconSizeExtraSmall}
+                height={variables.iconSizeExtraSmall}
+            />
+            <Text style={[styles.ml2, styles.chatItemComposeSecondaryRowSubText]}>
+                {props.translate('reportActionCompose.youAppearToBeOffline')}
+            </Text>
+        </View>
+    );
+};
+
+OfflineIndicator.propTypes = propTypes;
+OfflineIndicator.displayName = 'OfflineIndicator';
+
+export default compose(
+    withLocalize,
+    withNetwork(),
+)(OfflineIndicator);
diff --git a/src/pages/home/report/ParticipantLocalTime.js b/src/pages/home/report/ParticipantLocalTime.js
@@ -1,7 +1,4 @@
 import React, {PureComponent} from 'react';
-import {
-    View,
-} from 'react-native';
 import lodashGet from 'lodash/get';
 import Str from 'expensify-common/lib/str';
 import styles from '../../../styles/styles';
@@ -60,23 +57,18 @@ class ParticipantLocalTime extends PureComponent {
                 : this.props.participant.displayName);
 
         return (
-            <View style={[styles.chatItemComposeSecondaryRow]}>
-                <Text
-                    style={[
-                        styles.chatItemComposeSecondaryRowSubText,
-                        styles.chatItemComposeSecondaryRowOffset,
-                    ]}
-                    numberOfLines={1}
-                >
-                    {this.props.translate(
-                        'reportActionCompose.localTime',
-                        {
-                            user: reportRecipientDisplayName,
-                            time: this.state.localTime,
-                        },
-                    )}
-                </Text>
-            </View>
+            <Text
+                style={[styles.chatItemComposeSecondaryRowSubText]}
+                numberOfLines={1}
+            >
+                {this.props.translate(
+                    'reportActionCompose.localTime',
+                    {
+                        user: reportRecipientDisplayName,
+                        time: this.state.localTime,
+                    },
+                )}
+            </Text>
         );
     }
 }

diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
@@ -26,25 +26,24 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '../../../componen
 import withDrawerState from '../../../components/withDrawerState';
 import CONST from '../../../CONST';
 import canFocusInputOnScreenFocus from '../../../libs/canFocusInputOnScreenFocus';
-import variables from '../../../styles/variables';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import Permissions from '../../../libs/Permissions';
 import Navigation from '../../../libs/Navigation/Navigation';
 import ROUTES from '../../../ROUTES';
 import reportActionPropTypes from './reportActionPropTypes';
 import * as ReportUtils from '../../../libs/ReportUtils';
 import ReportActionComposeFocusManager from '../../../libs/ReportActionComposeFocusManager';
-import Text from '../../../components/Text';
 import participantPropTypes from '../../../components/participantPropTypes';
 import ParticipantLocalTime from './ParticipantLocalTime';
-import {withNetwork, withPersonalDetails} from '../../../components/OnyxProvider';
+import {withPersonalDetails} from '../../../components/OnyxProvider';
 import DateUtils from '../../../libs/DateUtils';
 import * as User from '../../../libs/actions/User';
 import Tooltip from '../../../components/Tooltip';
 import EmojiPickerButton from '../../../components/EmojiPicker/EmojiPickerButton';
 import VirtualKeyboard from '../../../libs/VirtualKeyboard';
 import canUseTouchScreen from '../../../libs/canUseTouchscreen';
-import networkPropTypes from '../../../components/networkPropTypes';
+import OfflineIndicator from '../../../components/OfflineIndicator';
+import ExceededCommentLength from '../../../components/ExceededCommentLength';
 
 const propTypes = {
     /** Beta features list */
@@ -87,9 +86,6 @@ const propTypes = {
     /** Is composer screen focused */
     isFocused: PropTypes.bool.isRequired,
 
-    /** Information about the network */
-    network: networkPropTypes.isRequired,
-
     // The NVP describing a user's block status
     blockedFromConcierge: PropTypes.shape({
         // The date that the user will be unblocked
@@ -447,9 +443,28 @@ class ReportActionCompose extends React.Component {
         const hasExceededMaxCommentLength = this.comment.length > CONST.MAX_COMMENT_LENGTH;
 
         return (
-            <View style={[shouldShowReportRecipientLocalTime && styles.chatItemComposeWithFirstRow]}>
-                {shouldShowReportRecipientLocalTime
-                    && <ParticipantLocalTime participant={reportRecipient} />}
+            <View style={[styles.chatItemComposeWithFirstRow]}>
+                <View style={[styles.flexRow, styles.chatItemComposeSecondaryRow, styles.chatItemComposeSecondaryRowOffset, styles.flexWrap]}>
+                    {shouldShowReportRecipientLocalTime
+                        && (
+                            <View style={[styles.mr3]}>
+                                <ParticipantLocalTime participant={reportRecipient} />
+                            </View>
+                        )}
+
+                    <View style={[styles.mr3]}>
+                        <OfflineIndicator />
+                    </View>
+
+                    <View style={[styles.mr3]}>
+                        <ExceededCommentLength commentLength={this.comment.length} />
+                    </View>
+
+                    <View style={[styles.mr3]}>
+                        <ReportTypingIndicator reportID={this.props.reportID} />
+                    </View>
+                </View>
+
                 <View style={[
                     (!isBlockedFromConcierge && (this.state.isFocused || this.state.isDraggingOver))
                         ? styles.chatItemComposeBoxFocusedColor
@@ -589,31 +604,6 @@ class ReportActionCompose extends React.Component {
                         </Tooltip>
                     </View>
                 </View>
-                <View style={[styles.chatItemComposeSecondaryRow, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}>
-                    <View>
-                        {this.props.network.isOffline ? (
-                            <View style={[
-                                styles.chatItemComposeSecondaryRowOffset,
-                                styles.flexRow,
-                                styles.alignItemsCenter]}
-                            >
-                                <Icon
-                                    src={Expensicons.Offline}
-                                    width={variables.iconSizeExtraSmall}
-                                    height={variables.iconSizeExtraSmall}
-                                />
-                                <Text style={[styles.ml2, styles.chatItemComposeSecondaryRowSubText]}>
-                                    {this.props.translate('reportActionCompose.youAppearToBeOffline')}
-                                </Text>
-                            </View>
-                        ) : <ReportTypingIndicator reportID={this.props.reportID} />}
-                    </View>
-                    {hasExceededMaxCommentLength && (
-                        <Text style={[styles.textMicro, styles.textDanger, styles.chatItemComposeSecondaryRow]}>
-                            {`${this.comment.length}/${CONST.MAX_COMMENT_LENGTH}`}
-                        </Text>
-                    )}
-                </View>
             </View>
         );
     }
@@ -628,7 +618,6 @@ export default compose(
     withNavigationFocus,
     withLocalize,
     withPersonalDetails(),
-    withNetwork(),
     withOnyx({
         betas: {
             key: ONYXKEYS.BETAS,

diff --git a/src/pages/home/report/ReportTypingIndicator.js b/src/pages/home/report/ReportTypingIndicator.js
@@ -49,24 +49,21 @@ class ReportTypingIndicator extends React.Component {
         // Decide on the Text element that will hold the display based on the number of users that are typing.
         switch (numUsersTyping) {
             case 0:
-                return <></>;
+                return null;
+
             case 1:
                 return (
                     <TextWithEllipsis
                         leadingText={PersonalDetails.getDisplayName(this.state.usersTyping[0])}
                         trailingText={` ${this.props.translate('reportTypingIndicator.isTyping')}`}
                         textStyle={[styles.chatItemComposeSecondaryRowSubText]}
-                        wrapperStyle={styles.chatItemComposeSecondaryRow}
-                        leadingTextParentStyle={styles.chatItemComposeSecondaryRowOffset}
                     />
                 );
+
             default:
                 return (
                     <Text
-                        style={[
-                            styles.chatItemComposeSecondaryRowSubText,
-                            styles.chatItemComposeSecondaryRowOffset,
-                        ]}
+                        style={[styles.chatItemComposeSecondaryRowSubText]}
                         numberOfLines={1}
                     >
                         {this.props.translate('reportTypingIndicator.multipleUsers')}

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -644,7 +644,7 @@ const styles = {
     },
 
     chatItemComposeSecondaryRow: {
-        height: 15,
+        minHeight: 15,
         marginBottom: 5,
         marginTop: 5,
     },