Refactor ReportActionItem to use hooks

src/components/PressableWithSecondaryInteraction/index.js

@@ -17,8 +17,12 @@ class PressableWithSecondaryInteraction extends Component {
     }
 
     componentDidMount() {
-        if (this.props.forwardedRef && _.isFunction(this.props.forwardedRef)) {
-            this.props.forwardedRef(this.pressableRef);
+        if (this.props.forwardedRef) {
+            if (_.isFunction(this.props.forwardedRef)) {
+                this.props.forwardedRef(this.pressableRef);
+            } else if (_.isObject(this.props.forwardedRef)) {
+                this.props.forwardedRef.current = this.pressableRef;
+            }
         }
         this.pressableRef.addEventListener('contextmenu', this.executeSecondaryInteractionOnContextMenu);
     }

src/components/PressableWithSecondaryInteraction/pressableWithSecondaryInteractionPropTypes.js

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import refPropTypes from '../refPropTypes';
 import stylePropTypes from '../../styles/stylePropTypes';
 
 const propTypes = {
@@ -18,7 +19,7 @@ const propTypes = {
     children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
 
     /** The ref to the search input (may be null on small screen widths) */
-    forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    forwardedRef: refPropTypes,
 
     /** Prevent the default ContextMenu on web/Desktop */
     preventDefaultContextMenu: PropTypes.bool,

src/components/ReportActionItem/IOUPreview.js

@@ -27,6 +27,7 @@ import * as OptionsListUtils from '../../libs/OptionsListUtils';
 import * as CurrencyUtils from '../../libs/CurrencyUtils';
 import * as IOUUtils from '../../libs/IOUUtils';
 import * as ReportUtils from '../../libs/ReportUtils';
+import refPropTypes from '../refPropTypes';
 
 const propTypes = {
     /** The active IOUReport, used for Onyx subscription */
@@ -43,7 +44,7 @@ const propTypes = {
     action: PropTypes.shape(reportActionPropTypes),
 
     /** Popover context menu anchor, used for showing context menu */
-    contextMenuAnchor: PropTypes.shape({current: PropTypes.elementType}),
+    contextMenuAnchor: refPropTypes,
 
     /** Callback for updating context menu active state, used for showing context menu */
     checkIfContextMenuActive: PropTypes.func,

src/components/ReportActionItem/MoneyRequestAction.js

@@ -20,6 +20,7 @@ import * as ReportUtils from '../../libs/ReportUtils';
 import * as Report from '../../libs/actions/Report';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import * as ReportActionsUtils from '../../libs/ReportActionsUtils';
+import refPropTypes from '../refPropTypes';
 
 const propTypes = {
     /** All the data of the action */
@@ -35,7 +36,7 @@ const propTypes = {
     isMostRecentIOUReportAction: PropTypes.bool.isRequired,
 
     /** Popover context menu anchor, used for showing context menu */
-    contextMenuAnchor: PropTypes.shape({current: PropTypes.elementType}),
+    contextMenuAnchor: refPropTypes,
 
     /** Callback for updating context menu active state, used for showing context menu */
     checkIfContextMenuActive: PropTypes.func,

src/components/ReportActionItem/ReportPreview.js

@@ -24,6 +24,7 @@ import SettlementButton from '../SettlementButton';
 import themeColors from '../../styles/themes/default';
 import getButtonState from '../../libs/getButtonState';
 import * as IOU from '../../libs/actions/IOU';
+import refPropTypes from '../refPropTypes';
 
 const propTypes = {
     /** All the data of the action */
@@ -71,7 +72,7 @@ const propTypes = {
     }),
 
     /** Popover context menu anchor, used for showing context menu */
-    contextMenuAnchor: PropTypes.shape({current: PropTypes.elementType}),
+    contextMenuAnchor: refPropTypes,
 
     /** Callback for updating context menu active state, used for showing context menu */
     checkIfContextMenuActive: PropTypes.func,

src/components/refPropTypes.js

@@ -0,0 +1,3 @@
+import PropTypes from 'prop-types';
+
+export default PropTypes.oneOfType([PropTypes.func, PropTypes.object]);

src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js

@@ -95,7 +95,7 @@ class PopoverReportActionContextMenu extends React.Component {
     getContextMenuMeasuredLocation() {
         return new Promise((resolve) => {
             if (this.contextMenuAnchor) {
-                this.contextMenuAnchor.measureInWindow((x, y) => resolve({x, y}));
+                this.contextMenuAnchor.current.measureInWindow((x, y) => resolve({x, y}));
             } else {
                 resolve({x: 0, y: 0});
             }