Merge pull request #17623 from Expensify/OSBotify-cherry-pick-staging…

…-17618

🍒 Cherry pick PR #17618 to staging 🍒

android/app/build.gradle

@@ -106,8 +106,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001030102
-        versionName "1.3.1-2"
+        versionCode 1001030103
+        versionName "1.3.1-3"
     }
 
     splits {

ios/NewExpensify/Info.plist

@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.3.1.2</string>
+	<string>1.3.1.3</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.3.1.2</string>
+	<string>1.3.1.3</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.3.1-2",
+  "version": "1.3.1-3",
   "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.",

src/components/MenuItem.js

@@ -1,6 +1,8 @@
 import _ from 'underscore';
 import React from 'react';
-import {View} from 'react-native';
+import {
+    View, Pressable,
+} from 'react-native';
 import Text from './Text';
 import styles from '../styles/styles';
 import * as StyleUtils from '../styles/StyleUtils';
@@ -16,14 +18,9 @@ import colors from '../styles/colors';
 import variables from '../styles/variables';
 import MultipleAvatars from './MultipleAvatars';
 import * as defaultWorkspaceAvatars from './Icon/WorkspaceDefaultAvatars';
-import PressableWithSecondaryInteraction from './PressableWithSecondaryInteraction';
-import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
-import * as DeviceCapabilities from '../libs/DeviceCapabilities';
-import ControlSelection from '../libs/ControlSelection';
 
 const propTypes = {
     ...menuItemPropTypes,
-    ...windowDimensionsPropTypes,
 };
 
 const defaultProps = {
@@ -49,13 +46,11 @@ const defaultProps = {
     subtitle: undefined,
     iconType: CONST.ICON_TYPE_ICON,
     onPress: () => {},
-    onSecondaryInteraction: undefined,
     interactive: true,
     fallbackIcon: Expensicons.FallbackAvatar,
     brickRoadIndicator: '',
     floatRightAvatars: [],
     shouldStackHorizontally: false,
-    shouldBlockSelection: false,
 };
 
 const MenuItem = (props) => {
@@ -76,7 +71,7 @@ const MenuItem = (props) => {
     ]);
 
     return (
-        <PressableWithSecondaryInteraction
+        <Pressable
             onPress={(e) => {
                 if (props.disabled) {
                     return;
@@ -88,16 +83,12 @@ const MenuItem = (props) => {
 
                 props.onPress(e);
             }}
-            onPressIn={() => props.shouldBlockSelection && props.isSmallScreenWidth && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
-            onPressOut={ControlSelection.unblock}
-            onSecondaryInteraction={props.onSecondaryInteraction}
             style={({hovered, pressed}) => ([
                 props.style,
                 StyleUtils.getButtonBackgroundColorStyle(getButtonState(props.focused || hovered, pressed, props.success, props.disabled, props.interactive), true),
                 ..._.isArray(props.wrapperStyle) ? props.wrapperStyle : [props.wrapperStyle],
             ])}
             disabled={props.disabled}
-            ref={props.forwardedRef}
         >
             {({hovered, pressed}) => (
                 <>
@@ -220,14 +211,12 @@ const MenuItem = (props) => {
                     </View>
                 </>
             )}
-        </PressableWithSecondaryInteraction>
+        </Pressable>
     );
 };
 
 MenuItem.propTypes = propTypes;
 MenuItem.defaultProps = defaultProps;
 MenuItem.displayName = 'MenuItem';
-export default withWindowDimensions(React.forwardRef((props, ref) => (
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    <MenuItem {...props} forwardedRef={ref} />
-)));
+
+export default MenuItem;

src/components/MenuItemList.js

@@ -3,8 +3,6 @@ import _ from 'underscore';
 import PropTypes from 'prop-types';
 import MenuItem from './MenuItem';
 import menuItemPropTypes from './menuItemPropTypes';
-import * as ReportActionContextMenu from '../pages/home/report/ContextMenu/ReportActionContextMenu';
-import {CONTEXT_MENU_TYPES} from '../pages/home/report/ContextMenu/ContextMenuActions';
 
 const propTypes = {
     /** An array of props that are pass to individual MenuItem components */
@@ -14,38 +12,17 @@ const defaultProps = {
     menuItems: [],
 };
 
-const MenuItemList = (props) => {
-    let popoverAnchor;
-
-    /**
-     * Handle the secondary interaction for a menu item.
-     *
-     * @param {*} link the menu item link or function to get the link
-     * @param {Event} e the interaction event
-     */
-    const secondaryInteraction = (link, e) => {
-        if (typeof link === 'function') {
-            link().then(url => ReportActionContextMenu.showContextMenu(CONTEXT_MENU_TYPES.LINK, e, url, popoverAnchor));
-        } else if (!_.isEmpty(link)) {
-            ReportActionContextMenu.showContextMenu(CONTEXT_MENU_TYPES.LINK, e, link, popoverAnchor);
-        }
-    };
-
-    return (
-        <>
-            {_.map(props.menuItems, menuItemProps => (
-                <MenuItem
-                    key={menuItemProps.title}
-                    onSecondaryInteraction={!_.isUndefined(menuItemProps.link) ? e => secondaryInteraction(menuItemProps.link, e) : undefined}
-                    ref={el => popoverAnchor = el}
-                    shouldBlockSelection={Boolean(menuItemProps.link)}
-                    // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...menuItemProps}
-                />
-            ))}
-        </>
-    );
-};
+const MenuItemList = props => (
+    <>
+        {_.map(props.menuItems, menuItemProps => (
+            <MenuItem
+                key={menuItemProps.title}
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...menuItemProps}
+            />
+        ))}
+    </>
+);
 
 MenuItemList.displayName = 'MenuItemList';
 MenuItemList.propTypes = propTypes;

src/components/PressableWithSecondaryInteraction/index.js

@@ -4,15 +4,13 @@ import {Pressable} from 'react-native';
 import * as pressableWithSecondaryInteractionPropTypes from './pressableWithSecondaryInteractionPropTypes';
 import styles from '../../styles/styles';
 import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
-import * as StyleUtils from '../../styles/StyleUtils';
 
 /**
  * This is a special Pressable that calls onSecondaryInteraction when LongPressed, or right-clicked.
  */
 class PressableWithSecondaryInteraction extends Component {
     constructor(props) {
         super(props);
-        this.executeSecondaryInteraction = this.executeSecondaryInteraction.bind(this);
         this.executeSecondaryInteractionOnContextMenu = this.executeSecondaryInteractionOnContextMenu.bind(this);
     }
 
@@ -27,28 +25,11 @@ class PressableWithSecondaryInteraction extends Component {
         this.pressableRef.removeEventListener('contextmenu', this.executeSecondaryInteractionOnContextMenu);
     }
 
-    /**
-     * @param {Event} e - the secondary interaction event
-     */
-    executeSecondaryInteraction(e) {
-        if (DeviceCapabilities.hasHoverSupport()) {
-            return;
-        }
-        if (this.props.withoutFocusOnSecondaryInteraction && this.pressableRef) {
-            this.pressableRef.blur();
-        }
-        this.props.onSecondaryInteraction(e);
-    }
-
     /**
      * @param {contextmenu} e - A right-click MouseEvent.
      * https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event
      */
     executeSecondaryInteractionOnContextMenu(e) {
-        if (!this.props.onSecondaryInteraction) {
-            return;
-        }
-
         e.stopPropagation();
         if (this.props.preventDefaultContentMenu) {
             e.preventDefault();
@@ -73,9 +54,17 @@ class PressableWithSecondaryInteraction extends Component {
         // On Web, Text does not support LongPress events thus manage inline mode with styling instead of using Text.
         return (
             <Pressable
-                style={StyleUtils.combineStyles(this.props.inline ? styles.dInline : this.props.style)}
+                style={this.props.inline && styles.dInline}
                 onPressIn={this.props.onPressIn}
-                onLongPress={this.props.onSecondaryInteraction ? this.executeSecondaryInteraction : undefined}
+                onLongPress={(e) => {
+                    if (DeviceCapabilities.hasHoverSupport()) {
+                        return;
+                    }
+                    if (this.props.withoutFocusOnSecondaryInteraction && this.pressableRef) {
+                        this.pressableRef.blur();
+                    }
+                    this.props.onSecondaryInteraction(e);
+                }}
                 onPressOut={this.props.onPressOut}
                 onPress={this.props.onPress}
                 ref={el => this.pressableRef = el}

src/components/PressableWithSecondaryInteraction/index.native.js

@@ -19,9 +19,6 @@ const PressableWithSecondaryInteraction = (props) => {
             ref={props.forwardedRef}
             onPress={props.onPress}
             onLongPress={(e) => {
-                if (!props.onSecondaryInteraction) {
-                    return;
-                }
                 e.preventDefault();
                 HapticFeedback.longPress();
                 props.onSecondaryInteraction(e);

src/components/PressableWithSecondaryInteraction/pressableWithSecondaryInteractionPropTypes.js

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import stylePropTypes from '../../styles/stylePropTypes';
 
 const propTypes = {
     /** The function that should be called when this pressable is pressed */
@@ -12,19 +11,13 @@ const propTypes = {
     onPressOut: PropTypes.func,
 
     /** The function that should be called when this pressable is LongPressed or right-clicked. */
-    onSecondaryInteraction: PropTypes.func,
+    onSecondaryInteraction: PropTypes.func.isRequired,
 
     /** The children which should be contained in this wrapper component. */
-    children: PropTypes.oneOfType([
-        PropTypes.func,
-        PropTypes.node,
-    ]).isRequired,
+    children: PropTypes.node.isRequired,
 
     /** The ref to the search input (may be null on small screen widths) */
-    forwardedRef: PropTypes.oneOfType([
-        PropTypes.func,
-        PropTypes.object,
-    ]),
+    forwardedRef: PropTypes.func,
 
     /** Prevent the default ContextMenu on web/Desktop */
     preventDefaultContentMenu: PropTypes.bool,
@@ -41,9 +34,6 @@ const propTypes = {
 
     /** Disable focus trap for the element on secondary interaction  */
     withoutFocusOnSecondaryInteraction: PropTypes.bool,
-
-    /** Used to apply styles to the Pressable */
-    style: stylePropTypes,
 };
 
 const defaultProps = {

src/components/menuItemPropTypes.js

@@ -88,18 +88,6 @@ const propTypes = {
 
     /** Prop to identify if we should load avatars vertically instead of diagonally */
     shouldStackHorizontally: PropTypes.bool,
-
-    /** The function that should be called when this component is LongPressed or right-clicked. */
-    onSecondaryInteraction: PropTypes.func,
-
-    /** Flag to indicate whether or not text selection should be disabled from long-pressing the menu item. */
-    shouldBlockSelection: PropTypes.bool,
-
-    /** The ref to the menu item */
-    forwardedRef: PropTypes.oneOfType([
-        PropTypes.func,
-        PropTypes.object,
-    ]),
 };
 
 export default propTypes;