Merge branch 'main' of github.com:Expensify/App

Expensify · Jun 15, 2022 · 8f80eff · 8f80eff
2 parents 1bba39e + 0d6850a
commit 8f80eff
Show file tree

Hide file tree

Showing 38 changed files with 776 additions and 309 deletions.
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -152,8 +152,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001017602
-        versionName "1.1.76-2"
+        versionCode 1001017702
+        versionName "1.1.77-2"
     }
     splits {
         abi {

diff --git a/assets/images/collapse.svg b/assets/images/collapse.svg
diff --git a/assets/images/expand.svg b/assets/images/expand.svg
diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist
@@ -17,7 +17,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.1.76</string>
+	<string>1.1.77</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.1.76.2</string>
+	<string>1.1.77.2</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist
@@ -15,10 +15,10 @@
 	<key>CFBundlePackageType</key>
 	<string>BNDL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.1.76</string>
+	<string>1.1.77</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.1.76.2</string>
+	<string>1.1.77.2</string>
 </dict>
 </plist>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.1.76-2",
+  "version": "1.1.77-2",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

diff --git a/src/CONST.js b/src/CONST.js
@@ -273,6 +273,14 @@ const CONST = {
         MAX_ROOM_NAME_LENGTH: 80,
         LAST_MESSAGE_TEXT_MAX_LENGTH: 80,
     },
+    COMPOSER: {
+        MAX_LINES: 16,
+        MAX_LINES_SMALL_SCREEN: 6,
+        MAX_LINES_FULL: -1,
+
+        // The minimum number of typed lines needed to enable the full screen composer
+        FULL_COMPOSER_MIN_LINES: 3,
+    },
     MODAL: {
         MODAL_TYPE: {
             CONFIRM: 'confirm',
@@ -330,6 +338,7 @@ const CONST = {
         IOS_NETWORK_CONNECTION_LOST: 'The network connection was lost.',
         IOS_NETWORK_CONNECTION_LOST_RUSSIAN: 'Сетевое соединение потеряно.',
         IOS_NETWORK_CONNECTION_LOST_SWEDISH: 'Nätverksanslutningen förlorades.',
+        IOS_NETWORK_CONNECTION_LOST_SPANISH: 'La conexión a Internet parece estar desactivada.',
         IOS_LOAD_FAILED: 'Load failed',
         SAFARI_CANNOT_PARSE_RESPONSE: 'cannot parse response',
         GATEWAY_TIMEOUT: 'Gateway Timeout',
@@ -384,6 +393,7 @@ const CONST = {
 
     PUSHER: {
         PRIVATE_USER_CHANNEL_PREFIX: 'private-encrypted-user-accountID-',
+        PRIVATE_REPORT_CHANNEL_PREFIX: 'private-report-reportID-',
     },
 
     EMOJI_SPACER: 'SPACER',

diff --git a/src/ONYXKEYS.js b/src/ONYXKEYS.js
@@ -105,6 +105,7 @@ export default {
         REPORT_IOUS: 'reportIOUs_',
         POLICY: 'policy_',
         REPORTS_WITH_DRAFT: 'reportWithDraft_',
+        REPORT_IS_COMPOSER_FULL_SIZE: 'reportIsComposerFullSize_',
     },
 
     // Indicates which locale should be used

diff --git a/src/components/Button.js b/src/components/Button.js
@@ -233,6 +233,10 @@ class Button extends Component {
         return (
             <Pressable
                 onPress={(e) => {
+                    if (e && e.type === 'click') {
+                        e.currentTarget.blur();
+                    }
+
                     if (this.props.shouldEnableHapticFeedback) {
                         HapticFeedback.trigger();
                     }
@@ -253,36 +257,39 @@ class Button extends Component {
                 ]}
                 nativeID={this.props.nativeID}
             >
-                {({pressed, hovered}) => (
-                    <OpacityView
-                        shouldDim={pressed}
-                        style={[
-                            styles.button,
-                            this.props.small ? styles.buttonSmall : undefined,
-                            this.props.medium ? styles.buttonMedium : undefined,
-                            this.props.large ? styles.buttonLarge : undefined,
-                            this.props.extraLarge ? styles.buttonExtraLarge : undefined,
-                            this.props.success ? styles.buttonSuccess : undefined,
-                            this.props.danger ? styles.buttonDanger : undefined,
-                            (this.props.isDisabled && this.props.success) ? styles.buttonSuccessDisabled : undefined,
-                            (this.props.isDisabled && this.props.danger) ? styles.buttonDangerDisabled : undefined,
-                            (this.props.isDisabled && !this.props.danger && !this.props.success) ? styles.buttonDisable : undefined,
-                            (this.props.success && hovered) ? styles.buttonSuccessHovered : undefined,
-                            (this.props.danger && hovered) ? styles.buttonDangerHovered : undefined,
-                            this.props.shouldRemoveRightBorderRadius ? styles.noRightBorderRadius : undefined,
-                            this.props.shouldRemoveLeftBorderRadius ? styles.noLeftBorderRadius : undefined,
-                            ...this.props.innerStyles,
-                        ]}
-                    >
-                        {this.renderContent()}
-                        {this.props.isLoading && (
-                            <ActivityIndicator
-                                color={(this.props.success || this.props.danger) ? themeColors.textReversed : themeColors.text}
-                                style={[styles.pAbsolute, styles.l0, styles.r0]}
-                            />
-                        )}
-                    </OpacityView>
-                )}
+                {({pressed, hovered}) => {
+                    const activeAndHovered = !this.props.isDisabled && hovered;
+                    return (
+                        <OpacityView
+                            shouldDim={pressed}
+                            style={[
+                                styles.button,
+                                this.props.small ? styles.buttonSmall : undefined,
+                                this.props.medium ? styles.buttonMedium : undefined,
+                                this.props.large ? styles.buttonLarge : undefined,
+                                this.props.extraLarge ? styles.buttonExtraLarge : undefined,
+                                this.props.success ? styles.buttonSuccess : undefined,
+                                this.props.danger ? styles.buttonDanger : undefined,
+                                (this.props.isDisabled && this.props.success) ? styles.buttonSuccessDisabled : undefined,
+                                (this.props.isDisabled && this.props.danger) ? styles.buttonDangerDisabled : undefined,
+                                (this.props.isDisabled && !this.props.danger && !this.props.success) ? styles.buttonDisable : undefined,
+                                (this.props.success && activeAndHovered) ? styles.buttonSuccessHovered : undefined,
+                                (this.props.danger && activeAndHovered) ? styles.buttonDangerHovered : undefined,
+                                this.props.shouldRemoveRightBorderRadius ? styles.noRightBorderRadius : undefined,
+                                this.props.shouldRemoveLeftBorderRadius ? styles.noLeftBorderRadius : undefined,
+                                ...this.props.innerStyles,
+                            ]}
+                        >
+                            {this.renderContent()}
+                            {this.props.isLoading && (
+                                <ActivityIndicator
+                                    color={(this.props.success || this.props.danger) ? themeColors.textReversed : themeColors.text}
+                                    style={[styles.pAbsolute, styles.l0, styles.r0]}
+                                />
+                            )}
+                        </OpacityView>
+                    );
+                }}
             </Pressable>
         );
     }

diff --git a/src/components/Composer/index.android.js b/src/components/Composer/index.android.js
@@ -1,16 +1,11 @@
 import React from 'react';
+import {StyleSheet} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import RNTextInput from '../RNTextInput';
 import themeColors from '../../styles/themes/default';
 import CONST from '../../CONST';
-
-/**
- * On native layers we like to have the Text Input not focused so the user can read new chats without they keyboard in
- * the way of the view
- * On Android, the selection prop is required on the TextInput but this prop has issues on IOS
- * https://github.com/facebook/react-native/issues/29063
- */
+import * as ComposerUtils from '../../libs/ComposerUtils';
 
 const propTypes = {
     /** If the input should clear, it actually gets intercepted instead of .clear() */
@@ -29,6 +24,25 @@ const propTypes = {
     /** Prevent edits and interactions like focus for this input. */
     isDisabled: PropTypes.bool,
 
+    /** Selection Object */
+    selection: PropTypes.shape({
+        start: PropTypes.number,
+        end: PropTypes.number,
+    }),
+
+    /** Whether the full composer can be opened */
+    isFullComposerAvailable: PropTypes.bool,
+
+    /** Allow the full composer to be opened */
+    setIsFullComposerAvailable: PropTypes.func,
+
+    /** Whether the composer is full size */
+    isComposerFullSize: PropTypes.bool.isRequired,
+
+    /** General styles to apply to the text input */
+    // eslint-disable-next-line react/forbid-prop-types
+    style: PropTypes.any,
+
 };
 
 const defaultProps = {
@@ -37,9 +51,24 @@ const defaultProps = {
     autoFocus: false,
     isDisabled: false,
     forwardedRef: null,
+    selection: {
+        start: 0,
+        end: 0,
+    },
+    isFullComposerAvailable: false,
+    setIsFullComposerAvailable: () => {},
+    style: null,
 };
 
 class Composer extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            propStyles: StyleSheet.flatten(this.props.style),
+        };
+    }
+
     componentDidMount() {
         // This callback prop is used by the parent component using the constructor to
         // get a ref to the inner textInput element e.g. if we do
@@ -67,17 +96,19 @@ class Composer extends React.Component {
                 autoComplete="off"
                 placeholderTextColor={themeColors.placeholderText}
                 ref={el => this.textInput = el}
-                maxHeight={CONST.COMPOSER_MAX_HEIGHT}
+                maxHeight={this.props.isComposerFullSize ? '100%' : CONST.COMPOSER_MAX_HEIGHT}
+                onContentSizeChange={e => ComposerUtils.updateNumberOfLines(this.props, e)}
                 rejectResponderTermination={false}
-                editable={!this.props.isDisabled}
+                textAlignVertical="center"
+                style={this.state.propStyles}
                 /* eslint-disable-next-line react/jsx-props-no-spreading */
                 {...this.props}
+                editable={!this.props.isDisabled}
             />
         );
     }
 }
 
-Composer.displayName = 'Composer';
 Composer.propTypes = propTypes;
 Composer.defaultProps = defaultProps;
 

diff --git a/src/components/Composer/index.ios.js b/src/components/Composer/index.ios.js
@@ -1,16 +1,11 @@
 import React from 'react';
+import {StyleSheet} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import RNTextInput from '../RNTextInput';
 import themeColors from '../../styles/themes/default';
 import CONST from '../../CONST';
-
-/**
- * On native layers we like to have the Text Input not focused so the user can read new chats without they keyboard in
- * the way of the view
- * On Android, the selection prop is required on the TextInput but this prop has issues on IOS
- * https://github.com/facebook/react-native/issues/29063
- */
+import * as ComposerUtils from '../../libs/ComposerUtils';
 
 const propTypes = {
     /** If the input should clear, it actually gets intercepted instead of .clear() */
@@ -35,6 +30,19 @@ const propTypes = {
         end: PropTypes.number,
     }),
 
+    /** Whether the full composer can be opened */
+    isFullComposerAvailable: PropTypes.bool,
+
+    /** Allow the full composer to be opened */
+    setIsFullComposerAvailable: PropTypes.func,
+
+    /** Whether the composer is full size */
+    isComposerFullSize: PropTypes.bool.isRequired,
+
+    /** General styles to apply to the text input */
+    // eslint-disable-next-line react/forbid-prop-types
+    style: PropTypes.any,
+
 };
 
 const defaultProps = {
@@ -47,9 +55,20 @@ const defaultProps = {
         start: 0,
         end: 0,
     },
+    isFullComposerAvailable: false,
+    setIsFullComposerAvailable: () => {},
+    style: null,
 };
 
 class Composer extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            propStyles: StyleSheet.flatten(this.props.style),
+        };
+    }
+
     componentDidMount() {
         // This callback prop is used by the parent component using the constructor to
         // get a ref to the inner textInput element e.g. if we do
@@ -72,18 +91,24 @@ class Composer extends React.Component {
     }
 
     render() {
-        // Selection Property not worked in IOS properly, So removed from props.
+        // On native layers we like to have the Text Input not focused so the
+        // user can read new chats without the keyboard in the way of the view.
+        // On Android, the selection prop is required on the TextInput but this prop has issues on IOS
+        // https://github.com/facebook/react-native/issues/29063
         const propsToPass = _.omit(this.props, 'selection');
         return (
             <RNTextInput
                 autoComplete="off"
                 placeholderTextColor={themeColors.placeholderText}
                 ref={el => this.textInput = el}
-                maxHeight={CONST.COMPOSER_MAX_HEIGHT}
+                maxHeight={this.props.isComposerFullSize ? '100%' : CONST.COMPOSER_MAX_HEIGHT}
+                onContentSizeChange={e => ComposerUtils.updateNumberOfLines(this.props, e)}
                 rejectResponderTermination={false}
-                editable={!this.props.isDisabled}
+                textAlignVertical="center"
+                style={this.state.propStyles}
                 /* eslint-disable-next-line react/jsx-props-no-spreading */
                 {...propsToPass}
+                editable={!this.props.isDisabled}
             />
         );
     }