Merge branch 'main' of https://github.com/rezkiy37/Expensify into feature/21456-polish-admin-rooms

Author: rezkiy37

src/components/Composer/index.js

@@ -10,6 +10,7 @@ import themeColors from '../../styles/themes/default';
 import updateIsFullComposerAvailable from '../../libs/ComposerUtils/updateIsFullComposerAvailable';
 import * as ComposerUtils from '../../libs/ComposerUtils';
 import * as Browser from '../../libs/Browser';
+import * as StyleUtils from '../../styles/StyleUtils';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
 import compose from '../../libs/compose';
 import styles from '../../styles/styles';
@@ -482,6 +483,7 @@ class Composer extends React.Component {
                         // We are hiding the scrollbar to prevent it from reducing the text input width,
                         // so we can get the correct scroll height while calculating the number of lines.
                         this.state.numberOfLines < this.props.maxLines ? styles.overflowHidden : {},
+                        StyleUtils.getComposeTextAreaPadding(this.props.numberOfLines),
                     ]}
                     /* eslint-disable-next-line react/jsx-props-no-spreading */
                     {...propsWithoutStyles}

src/pages/ReportDetailsPage.js

@@ -61,7 +61,7 @@ function ReportDetailsPage(props) {
     const policy = useMemo(() => props.policies[`${ONYXKEYS.COLLECTION.POLICY}${props.report.policyID}`], [props.policies, props.report.policyID]);
     const isPolicyAdmin = useMemo(() => PolicyUtils.isPolicyAdmin(policy), [policy]);
     const shouldDisableSettings = useMemo(() => ReportUtils.shouldDisableSettings(props.report), [props.report]);
-    const shouldUseFullTitle = shouldDisableSettings;
+    const shouldUseFullTitle = !shouldDisableSettings;
     const isThread = useMemo(() => ReportUtils.isChatThread(props.report), [props.report]);
     const isUserCreatedPolicyRoom = useMemo(() => ReportUtils.isUserCreatedPolicyRoom(props.report), [props.report]);
     const isArchivedRoom = useMemo(() => ReportUtils.isArchivedRoom(props.report), [props.report]);

src/pages/home/report/ReportActionCompose.js

@@ -49,6 +49,7 @@ import OfflineWithFeedback from '../../../components/OfflineWithFeedback';
 import * as ComposerUtils from '../../../libs/ComposerUtils';
 import * as Welcome from '../../../libs/actions/Welcome';
 import Permissions from '../../../libs/Permissions';
+import containerComposeStyles from '../../../styles/containerComposeStyles';
 import * as Task from '../../../libs/actions/Task';
 import * as Browser from '../../../libs/Browser';
 import * as IOU from '../../../libs/actions/IOU';
@@ -1110,7 +1111,7 @@ class ReportActionCompose extends React.Component {
                                             </>
                                         )}
                                     </AttachmentPicker>
-                                    <View style={[styles.textInputComposeSpacing, styles.textInputComposeBorder]}>
+                                    <View style={[containerComposeStyles, styles.textInputComposeBorder]}>
                                         <DragAndDrop
                                             dropZoneId={this.props.dragAndDropId}
                                             activeDropZoneId={CONST.REPORT.ACTIVE_DROP_NATIVE_ID + this.props.reportID}

src/pages/home/report/ReportActionItemMessageEdit.js

@@ -9,6 +9,7 @@ import reportActionPropTypes from './reportActionPropTypes';
 import styles from '../../../styles/styles';
 import themeColors from '../../../styles/themes/default';
 import * as StyleUtils from '../../../styles/StyleUtils';
+import containerComposeStyles from '../../../styles/containerComposeStyles';
 import Composer from '../../../components/Composer';
 import * as Report from '../../../libs/actions/Report';
 import openReportActionComposeViewWhenClosingMessageEdit from '../../../libs/openReportActionComposeViewWhenClosingMessageEdit';
@@ -305,7 +306,7 @@ function ReportActionItemMessageEdit(props) {
                         hasExceededMaxCommentLength && styles.borderColorDanger,
                     ]}
                 >
-                    <View style={styles.textInputComposeSpacing}>
+                    <View style={containerComposeStyles}>
                         <Composer
                             multiline
                             ref={(el) => {

src/pages/home/report/ReportActionsList.js

@@ -176,7 +176,7 @@ function ReportActionsList(props) {
                 ref={reportScrollManager.ref}
                 data={props.sortedReportActions}
                 renderItem={renderItem}
-                contentContainerStyle={[styles.chatContentScrollView, shouldShowReportRecipientLocalTime, shouldOmitBottomSpace && styles.pt0]}
+                contentContainerStyle={[styles.chatContentScrollView, shouldShowReportRecipientLocalTime || shouldOmitBottomSpace ? styles.pt0 : {}]}
                 keyExtractor={keyExtractor}
                 initialRowHeight={32}
                 initialNumToRender={calculateInitialNumToRender()}

src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js

@@ -1,6 +1,7 @@
 import React, {useCallback, useState, useEffect, useRef} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
+import _ from 'underscore';
 import {withOnyx} from 'react-native-onyx';
 import lodashGet from 'lodash/get';
 import MagicCodeInput from '../../../../../components/MagicCodeInput';
@@ -71,6 +72,7 @@ function BaseValidateCodeForm(props) {
     const [validateCode, setValidateCode] = useState('');
     const loginData = props.loginList[props.contactMethod];
     const inputValidateCodeRef = useRef();
+    const validateLoginError = ErrorUtils.getEarliestErrorField(loginData, 'validateLogin');
 
     useEffect(() => {
         if (!props.hasMagicCodeBeenSent) {
@@ -134,6 +136,7 @@ function BaseValidateCodeForm(props) {
                 value={validateCode}
                 onChangeText={onTextInput}
                 errorText={formError.validateCode ? props.translate(formError.validateCode) : ErrorUtils.getLatestErrorMessage(props.account)}
+                hasError={!_.isEmpty(validateLoginError)}
                 onFulfill={validateAndSubmitForm}
                 autoFocus
                 shouldDelayFocus={shouldDelayFocus}
@@ -168,7 +171,7 @@ function BaseValidateCodeForm(props) {
             </OfflineWithFeedback>
             <OfflineWithFeedback
                 pendingAction={lodashGet(loginData, 'pendingFields.validateLogin', null)}
-                errors={ErrorUtils.getEarliestErrorField(loginData, 'validateLogin')}
+                errors={validateLoginError}
                 errorRowStyles={[styles.mt2]}
                 onClose={() => User.clearContactMethodErrors(props.contactMethod, 'validateLogin')}
             >

src/styles/StyleUtils.js

@@ -1222,6 +1222,22 @@ function getMentionTextColor(isOurMention) {
     return isOurMention ? themeColors.ourMentionText : themeColors.mentionText;
 }
 
+/**
+ * Returns padding vertical based on number of lines
+ * @param {Number} numberOfLines
+ * @returns {Object}
+ */
+function getComposeTextAreaPadding(numberOfLines) {
+    let paddingValue = 5;
+    if (numberOfLines === 1) paddingValue = 9;
+    // In case numberOfLines = 3, there will be a Expand Icon appearing at the top left, so it has to be recalculated so that the textArea can be full height
+    if (numberOfLines === 3) paddingValue = 8;
+    return {
+        paddingTop: paddingValue,
+        paddingBottom: paddingValue,
+    };
+}
+
 /**
  * Returns style object for the mobile on WEB
  * @param {Number} windowHeight
@@ -1357,6 +1373,7 @@ export {
     getEmojiPickerListHeight,
     getMentionStyle,
     getMentionTextColor,
+    getComposeTextAreaPadding,
     getHeightOfMagicCodeInput,
     getOuterModalStyle,
     getWrappingStyle,

src/styles/containerComposeStyles/index.js

@@ -0,0 +1,6 @@
+import styles from '../styles';
+
+// We need to set paddingVertical = 0 on web to avoid displaying a normal pointer on some parts of compose box when not in focus
+const containerComposeStyles = [styles.textInputComposeSpacing, {paddingVertical: 0}];
+
+export default containerComposeStyles;

src/styles/containerComposeStyles/index.native.js

@@ -0,0 +1,5 @@
+import styles from '../styles';
+
+const containerComposeStyles = [styles.textInputComposeSpacing];
+
+export default containerComposeStyles;