Merge pull request #14603 from Expensify/update-staging-from-main

Update version to 1.2.60-0 on staging

android/app/build.gradle

@@ -156,8 +156,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001025901
-        versionName "1.2.59-1"
+        versionCode 1001026000
+        versionName "1.2.60-0"
         buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
 
         if (isNewArchitectureEnabled()) {

config/webpack/webpack.common.js

@@ -142,6 +142,13 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
                 ],
             },
 
+            // We are importing this worker as a string by using asset/source otherwise it will default to loading via an HTTPS request later.
+            // This causes issues if we have gone offline before the pdfjs web worker is set up as we won't be able to load it from the server.
+            {
+                test: new RegExp('node_modules/pdfjs-dist/legacy/build/pdf.worker.js'),
+                type: 'asset/source',
+            },
+
             // Rule for react-native-web-webview
             {
                 test: /postMock.html$/,

ios/NewExpensify/Info.plist

@@ -17,7 +17,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.2.59</string>
+	<string>1.2.60</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.2.59.1</string>
+	<string>1.2.60.0</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

@@ -15,10 +15,10 @@
 	<key>CFBundlePackageType</key>
 	<string>BNDL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.2.59</string>
+	<string>1.2.60</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.2.59.1</string>
+	<string>1.2.60.0</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.2.59-1",
+  "version": "1.2.60-0",
   "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.",
@@ -68,7 +68,7 @@
     "babel-polyfill": "^6.26.0",
     "dom-serializer": "^0.2.2",
     "domhandler": "^4.3.0",
-    "expensify-common": "git+https://github.com/Expensify/expensify-common.git#6657a014d9c295c998d98562806b4df8bc9fd17e",
+    "expensify-common": "git+https://github.com/Expensify/expensify-common.git#ca07936e09ff4ebbaf4b423f43adfb35e17c799d",
     "fbjs": "^3.0.2",
     "file-loader": "^6.0.0",
     "html-entities": "^1.3.1",

react-native.config.js

@@ -1,6 +1,6 @@
 module.exports = {
     project: {
-        ios: {},
+        ios: {sourceDir: 'ios'},
         android: {},
     },
     assets: ['./assets/fonts/native'],

src/components/AddressSearch.js

@@ -152,6 +152,7 @@ const AddressSearch = (props) => {
         >
             <View style={styles.w100}>
                 <GooglePlacesAutocomplete
+                    disableScroll
                     fetchDetails
                     suppressDefaultStyles
                     enablePoweredByContainer={false}

src/components/Form.js

@@ -1,6 +1,6 @@
 import lodashGet from 'lodash/get';
 import React from 'react';
-import {View, ScrollView} from 'react-native';
+import {ScrollView, StyleSheet} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import {withOnyx} from 'react-native-onyx';
@@ -10,8 +10,10 @@ import * as FormActions from '../libs/actions/FormActions';
 import * as ErrorUtils from '../libs/ErrorUtils';
 import styles from '../styles/styles';
 import FormAlertWithSubmitButton from './FormAlertWithSubmitButton';
+import FormSubmit from './FormSubmit';
 import SafeAreaConsumer from './SafeAreaConsumer';
 import ScrollViewWithContext from './ScrollViewWithContext';
+import stylePropTypes from '../styles/stylePropTypes';
 
 const propTypes = {
     /** A unique Onyx key identifying the form */
@@ -67,6 +69,9 @@ const propTypes = {
      */
     scrollContextEnabled: PropTypes.bool,
 
+    /** Container styles */
+    style: stylePropTypes,
+
     ...withLocalizePropTypes,
 };
 
@@ -81,6 +86,7 @@ const defaultProps = {
     isSubmitActionDangerous: false,
     scrollToOverflowEnabled: false,
     scrollContextEnabled: false,
+    style: [],
 };
 
 class Form extends React.Component {
@@ -273,7 +279,7 @@ class Form extends React.Component {
 
     render() {
         const scrollViewContent = safeAreaPaddingBottomStyle => (
-            <View style={[this.props.style, safeAreaPaddingBottomStyle]}>
+            <FormSubmit style={StyleSheet.flatten([this.props.style, safeAreaPaddingBottomStyle])} onSubmit={this.submit}>
                 {this.childrenWrapperWithProps(this.props.children)}
                 {this.props.isSubmitButtonVisible && (
                 <FormAlertWithSubmitButton
@@ -298,9 +304,10 @@ class Form extends React.Component {
                     containerStyles={[styles.mh0, styles.mt5, styles.flex1]}
                     enabledWhenOffline={this.props.enabledWhenOffline}
                     isSubmitActionDangerous={this.props.isSubmitActionDangerous}
+                    disablePressOnEnter
                 />
                 )}
-            </View>
+            </FormSubmit>
         );
 
         return (

src/components/FormAlertWithSubmitButton.js

@@ -36,6 +36,9 @@ const propTypes = {
     /** Should the button be enabled when offline */
     enabledWhenOffline: PropTypes.bool,
 
+    /** Disable press on enter for submit button */
+    disablePressOnEnter: PropTypes.bool,
+
     /** Whether the form submit action is dangerous */
     isSubmitActionDangerous: PropTypes.bool,
 };
@@ -48,6 +51,7 @@ const defaultProps = {
     isLoading: false,
     onFixTheErrorsLinkPressed: () => {},
     enabledWhenOffline: false,
+    disablePressOnEnter: false,
     isSubmitActionDangerous: false,
 };
 
@@ -70,7 +74,7 @@ const FormAlertWithSubmitButton = props => (
         ) : (
             <Button
                 success
-                pressOnEnter
+                pressOnEnter={!props.disablePressOnEnter}
                 text={props.buttonText}
                 onPress={props.onSubmit}
                 isDisabled={props.isDisabled}

src/components/FormSubmit/formSubmitPropTypes.js

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+import stylePropTypes from '../../styles/stylePropTypes';
+
+const propTypes = {
+    /* A function to execute when form is submitted with ENTER */
+    onSubmit: PropTypes.func.isRequired,
+
+    /** Children to wrap with FormSubmit. */
+    children: PropTypes.node.isRequired,
+
+    /** Container styles */
+    style: stylePropTypes,
+};
+
+const defaultProps = {
+    style: [],
+};
+
+export {propTypes, defaultProps};

src/components/FormSubmit/index.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import lodashGet from 'lodash/get';
+import {View} from 'react-native';
+import * as formSubmitPropTypes from './formSubmitPropTypes';
+
+// This is a wrapper component to handle the ENTER key press, and submit the form.
+class FormSubmit extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.submitForm = this.submitForm.bind(this);
+    }
+
+    /**
+     * Calls the submit callback when ENTER is pressed on a form element.
+     * @param {Object} event
+     */
+
+    submitForm(event) {
+        // ENTER is pressed with modifier key, do not submit the form
+        if (event.shiftKey || event.key !== 'Enter') {
+            return;
+        }
+
+        const tagName = lodashGet(event, 'target.tagName', '');
+
+        // ENTER is pressed on INPUT or SELECT element, call the submit callback.
+        if (tagName === 'INPUT' || tagName === 'SELECT') {
+            this.props.onSubmit();
+            return;
+        }
+
+        // Pressing Enter on TEXTAREA element adds a new line. When `dataset.submitOnEnter` prop is passed, call the submit callback.
+        if (tagName === 'TEXTAREA' && lodashGet(event, 'target.dataset.submitOnEnter', 'false') === 'true') {
+            this.props.onSubmit();
+            return;
+        }
+
+        // ENTER is pressed on checkbox element, call the submit callback.
+        if (lodashGet(event, 'target.role') === 'checkbox') {
+            this.props.onSubmit();
+        }
+    }
+
+    render() {
+        return (
+
+            // React-native-web prevents event bubbling on TextInput for key presses
+            // https://github.com/necolas/react-native-web/blob/fa47f80d34ee6cde2536b2a2241e326f84b633c4/packages/react-native-web/src/exports/TextInput/index.js#L272
+            // Thus use capture phase.
+            <View onKeyDownCapture={this.submitForm} style={this.props.style}>{this.props.children}</View>
+        );
+    }
+}
+
+FormSubmit.propTypes = formSubmitPropTypes.propTypes;
+FormSubmit.defaultProps = formSubmitPropTypes.defaultProps;
+
+export default FormSubmit;

src/components/FormSubmit/index.native.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import {View} from 'react-native';
+import * as formSubmitPropTypes from './formSubmitPropTypes';
+
+const FormSubmit = props => <View style={props.style}>{props.children}</View>;
+
+FormSubmit.propTypes = formSubmitPropTypes.propTypes;
+FormSubmit.defaultProps = formSubmitPropTypes.defaultProps;
+FormSubmit.displayName = 'FormSubmit';
+
+export default FormSubmit;

src/components/LocalePicker.js

@@ -10,6 +10,7 @@ import CONST from '../CONST';
 import Permissions from '../libs/Permissions';
 import * as Localize from '../libs/Localize';
 import Picker from './Picker';
+import styles from '../styles/styles';
 
 const propTypes = {
     /** Indicates which locale the user currently has selected */
@@ -59,6 +60,7 @@ const LocalePicker = (props) => {
             items={_.values(localesToLanguages)}
             size={props.size}
             value={props.preferredLocale}
+            containerStyles={[props.size === 'small' && [styles.pickerContainerSmall]]}
         />
     );
 };

src/components/PDFView/index.js

@@ -1,7 +1,8 @@
 import _ from 'underscore';
 import React, {Component} from 'react';
 import {View, Dimensions} from 'react-native';
-import {Document, Page} from 'react-pdf/dist/esm/entry.webpack';
+import {Document, Page, pdfjs} from 'react-pdf/dist/esm/entry.webpack';
+import pdfWorkerSource from 'pdfjs-dist/legacy/build/pdf.worker';
 import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator';
 import styles from '../../styles/styles';
 import variables from '../../styles/variables';
@@ -27,6 +28,9 @@ class PDFView extends Component {
         this.initiatePasswordChallenge = this.initiatePasswordChallenge.bind(this);
         this.attemptPDFLoad = this.attemptPDFLoad.bind(this);
         this.toggleKeyboardOnSmallScreens = this.toggleKeyboardOnSmallScreens.bind(this);
+
+        const workerBlob = new Blob([pdfWorkerSource], {type: 'text/javascript'});
+        pdfjs.GlobalWorkerOptions.workerSrc = URL.createObjectURL(workerBlob);
     }
 
     componentDidUpdate(prevProps) {

src/components/Picker/index.js → src/components/Picker.js

@@ -3,14 +3,13 @@ import React, {PureComponent} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import RNPickerSelect from 'react-native-picker-select';
-import Icon from '../Icon';
-import * as Expensicons from '../Icon/Expensicons';
-import FormHelpMessage from '../FormHelpMessage';
-import Text from '../Text';
-import styles from '../../styles/styles';
-import themeColors from '../../styles/themes/default';
-import pickerStyles from './pickerStyles';
-import {ScrollContext} from '../ScrollViewWithContext';
+import Icon from './Icon';
+import * as Expensicons from './Icon/Expensicons';
+import FormHelpMessage from './FormHelpMessage';
+import Text from './Text';
+import styles from '../styles/styles';
+import themeColors from '../styles/themes/default';
+import {ScrollContext} from './ScrollViewWithContext';
 
 const propTypes = {
     /** Picker label */
@@ -170,7 +169,7 @@ class Picker extends PureComponent {
 
                         // We add a text color to prevent white text on white background dropdown items on Windows
                         items={_.map(this.props.items, item => ({...item, color: themeColors.pickerOptionsTextColor}))}
-                        style={this.props.size === 'normal' ? pickerStyles(this.props.isDisabled) : styles.pickerSmall}
+                        style={this.props.size === 'normal' ? styles.picker(this.props.isDisabled) : styles.pickerSmall}
                         useNativeAndroidPickerStyle={false}
                         placeholder={this.placeholder}
                         value={this.props.value}