Context-menu repositioned

src/components/PopoverWithMeasuredContent.js

@@ -78,6 +78,14 @@ class PopoverWithMeasuredContent extends Component {
         ) || !_.isEqual(this.state, nextState);
     }
 
+    componentDidUpdate(prevProps) {
+        // When Popover is shown recalculate
+        if (!prevProps.isVisible && this.props.isVisible) {
+            // eslint-disable-next-line react/no-did-update-set-state
+            this.setState({isContentMeasured: false});
+        }
+    }
+
     /**
      * Measure the size of the popover's content.
      *

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

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const ContextMenuContextDefaultValue = {
+    showContextMenu: () => {},
+    hideContextMenu: () => {},
+    isActiveReportAction: () => {},
+    showDeleteConfirmModal: () => {},
+};
+const ContextMenuContext = React.createContext(ContextMenuContextDefaultValue);
+ContextMenuContext.displayName = 'ContextMenuContext';
+
+export {ContextMenuContext, ContextMenuContextDefaultValue};

src/pages/home/report/ContextMenu/MiniReportActionContextMenu/index.js

@@ -0,0 +1,36 @@
+import _ from 'underscore';
+import React from 'react';
+import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import {
+    propTypes as ReportActionContextMenuPropsTypes,
+    defaultProps as ReportActionContextMenuDefaultProps,
+} from '../ReportActionContextMenuPropsTypes';
+import withLocalize from '../../../../../components/withLocalize';
+import {getMiniReportActionContextMenuWrapperStyle} from '../../../../../styles/getReportActionItemStyles';
+import ReportActionContextMenu from '../ReportActionContextMenu';
+
+const propTypes = {
+    ..._.omit(ReportActionContextMenuPropsTypes, ['isMini']),
+
+    /** Should the comment have the appearance of being grouped with the previous comment? */
+    displayAsGroup: PropTypes.bool,
+};
+
+const defaultProps = {
+    ..._.omit(ReportActionContextMenuDefaultProps, ['isMini']),
+    displayAsGroup: false,
+};
+
+const MiniReportActionContextMenu = props => (
+    <View style={getMiniReportActionContextMenuWrapperStyle(props.displayAsGroup)}>
+        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+        <ReportActionContextMenu isMini {...props} />
+    </View>
+);
+
+MiniReportActionContextMenu.propTypes = propTypes;
+MiniReportActionContextMenu.defaultProps = defaultProps;
+MiniReportActionContextMenu.displayName = 'MiniReportActionContextMenu';
+
+export default withLocalize(MiniReportActionContextMenu);

src/pages/home/report/ContextMenu/MiniReportActionContextMenu/index.native.js

@@ -0,0 +1 @@
+export default () => null;

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

@@ -0,0 +1,258 @@
+import React from 'react';
+import {
+    Dimensions,
+} from 'react-native';
+import PropTypes from 'prop-types';
+import _ from 'underscore';
+import {
+    deleteReportComment,
+} from '../../../../libs/actions/Report';
+import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
+import PopoverWithMeasuredContent from '../../../../components/PopoverWithMeasuredContent';
+import ReportActionContextMenu from './ReportActionContextMenu';
+import ConfirmModal from '../../../../components/ConfirmModal';
+
+const propTypes = {
+    /** Update the callbacks on ContextMenu Context */
+    setValue: PropTypes.func.isRequired,
+    ...withLocalizePropTypes,
+};
+
+class PopoverReportActionContextMenu extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            reportID: 0,
+            reportAction: {},
+            selection: '',
+            reportActionDraftMessage: '',
+            isPopoverVisible: false,
+            isDeleteCommentConfirmModalVisible: false,
+            cursorRelativePosition: {
+                horizontal: 0,
+                vertical: 0,
+            },
+
+            // The horizontal and vertical position (relative to the screen) where the popover will display.
+            popoverAnchorPosition: {
+                horizontal: 0,
+                vertical: 0,
+            },
+        };
+        this.onPopoverHide = () => {};
+        this.contextMenuAchor = undefined;
+        this.showContextMenu = this.showContextMenu.bind(this);
+        this.hideContextMenu = this.hideContextMenu.bind(this);
+        this.measureContent = this.measureContent.bind(this);
+        this.measureContextMenuAnchorPosition = this.measureContextMenuAnchorPosition.bind(this);
+        this.confirmDeleteAndHideModal = this.confirmDeleteAndHideModal.bind(this);
+        this.hideDeleteConfirmModal = this.hideDeleteConfirmModal.bind(this);
+        this.showDeleteConfirmModal = this.showDeleteConfirmModal.bind(this);
+        this.contextMenuHidden = this.contextMenuHidden.bind(this);
+        this.getContextMenuMeasuredLocation = this.getContextMenuMeasuredLocation.bind(this);
+        this.isActiveReportAction = this.isActiveReportAction.bind(this);
+    }
+
+    componentDidMount() {
+        this.props.setValue({
+            showContextMenu: this.showContextMenu,
+            hideContextMenu: this.hideContextMenu,
+            isActiveReportAction: this.isActiveReportAction,
+            showDeleteConfirmModal: this.showDeleteConfirmModal,
+        });
+        Dimensions.addEventListener('change', this.measureContextMenuAnchorPosition);
+    }
+
+    shouldComponentUpdate(nextProps, nextState) {
+        return this.state.isPopoverVisible !== nextState.isPopoverVisible
+            || this.state.popoverAnchorPosition !== nextState.popoverAnchorPosition
+            || this.state.isDeleteCommentConfirmModalVisible !== nextState.isDeleteCommentConfirmModalVisible;
+    }
+
+    componentWillUnmount() {
+        Dimensions.removeEventListener('change', this.measureContextMenuAnchorPosition);
+    }
+
+    /**
+     * Get the Context menu anchor position
+     * We calculate the achor coordinates from measureInWindow async method
+     *
+     * @returns {Promise<Object>}
+     * @memberof PopoverReportActionContextMenu
+     */
+    getContextMenuMeasuredLocation() {
+        return new Promise((res) => {
+            if (this.contextMenuAchor) {
+                this.contextMenuAchor.measureInWindow((x, y) => res({x, y}));
+            } else {
+                res({x: 0, y: 0});
+            }
+        });
+    }
+
+    isActiveReportAction(actionId) {
+        return this.state.reportAction.reportActionID === actionId;
+    }
+
+    /**
+     * Show the ReportActionContextMenu modal popover.
+     *
+     * @param {Object} [event] - A press event.
+     * @param {string} [selection] - A copy text.
+     * @param {Element} contextMenuAnchor - popoverAnchor
+     * @param {Number} reportID - Active Report Id
+     * @param {Object} reportAction - ReportAction for ContextMenu
+     * @param {String} draftMessage - ReportAction Draftmessage
+     * @param {Function} [onShown=() => {}] - Run a callback when Menu is shown
+     * @memberof PopoverReportActionContextMenu
+     */
+    showContextMenu(event, selection, contextMenuAnchor, reportID, reportAction, draftMessage, onShown = () => {}) {
+        const nativeEvent = event.nativeEvent || {};
+        this.contextMenuAchor = contextMenuAnchor;
+        this.getContextMenuMeasuredLocation().then(({x, y}) => {
+            this.setState({
+                cursorRelativePosition: {
+                    horizontal: nativeEvent.pageX - x,
+                    vertical: nativeEvent.pageY - y,
+                },
+                popoverAnchorPosition: {
+                    horizontal: nativeEvent.pageX,
+                    vertical: nativeEvent.pageY,
+                },
+                reportID,
+                reportAction,
+                selection,
+                isPopoverVisible: true,
+                reportActionDraftMessage: draftMessage,
+            }, onShown);
+        });
+    }
+
+    /**
+     * This gets called on Dimensions change to find the anchor coordinates for the action context menu.
+     */
+    measureContextMenuAnchorPosition() {
+        if (!this.state.isPopoverVisible) {
+            return;
+        }
+        this.getContextMenuMeasuredLocation().then(({x, y}) => {
+            if (!x || !y) {
+                return;
+            }
+            this.setState(prev => ({
+                popoverAnchorPosition: {
+                    horizontal: prev.cursorRelativePosition.horizontal + x,
+                    vertical: prev.cursorRelativePosition.vertical + y,
+                },
+            }));
+        });
+    }
+
+    contextMenuHidden() {
+        this.onPopoverHide();
+
+        // After we have called the action, reset it.
+        this.onPopoverHide = () => {};
+    }
+
+    /**
+     * Hide the ReportActionContextMenu modal popover.
+     * @param {Function} onHideCallback Callback to be called after popover is completely hidden
+     */
+    hideContextMenu(onHideCallback) {
+        if (_.isFunction(onHideCallback)) {
+            this.onPopoverHide = onHideCallback;
+        }
+        this.setState({
+            reportID: 0,
+            reportAction: {},
+            selection: '',
+            reportActionDraftMessage: '',
+            isPopoverVisible: false,
+        });
+    }
+
+    /**
+     * Used to calculate the Context Menu Dimensions
+     *
+     * @returns {JSX}
+     * @memberof PopoverReportActionContextMenu
+     */
+    measureContent() {
+        return (
+            <ReportActionContextMenu
+                isVisible
+                selection={this.state.selection}
+                reportID={this.state.reportID}
+                reportAction={this.state.reportAction}
+                hidePopover={this.hideContextMenu}
+                showDeleteConfirmModal={this.showDeleteConfirmModal}
+            />
+        );
+    }
+
+    confirmDeleteAndHideModal() {
+        deleteReportComment(this.state.reportID, this.state.reportAction);
+        this.setState({isDeleteCommentConfirmModalVisible: false});
+    }
+
+    hideDeleteConfirmModal() {
+        this.setState({
+            reportID: 0,
+            reportAction: {},
+            isDeleteCommentConfirmModalVisible: false,
+        });
+    }
+
+    /**
+     * Opens the Confirm delete action modal
+     * @param {Number} reportID
+     * @param {Object} reportAction
+     * @memberof PopoverReportActionContextMenu
+     */
+    showDeleteConfirmModal(reportID, reportAction) {
+        this.setState({reportID, reportAction, isDeleteCommentConfirmModalVisible: true});
+    }
+
+    render() {
+        return (
+            <>
+                <PopoverWithMeasuredContent
+                    isVisible={this.state.isPopoverVisible}
+                    onClose={this.hideContextMenu}
+                    onModalHide={this.contextMenuHidden}
+                    anchorPosition={this.state.popoverAnchorPosition}
+                    animationIn="fadeIn"
+                    animationOutTiming={1}
+                    measureContent={this.measureContent}
+                    shouldSetModalVisibility={false}
+                    fullscreen={false}
+                >
+                    <ReportActionContextMenu
+                        isVisible
+                        reportID={this.state.reportID}
+                        reportAction={this.state.reportAction}
+                        draftMessage={this.state.reportActionDraftMessage}
+                        hidePopover={this.hideContextMenu}
+                        showDeleteConfirmModal={this.showDeleteConfirmModal}
+                    />
+                </PopoverWithMeasuredContent>
+                <ConfirmModal
+                    title={this.props.translate('reportActionContextMenu.deleteComment')}
+                    isVisible={this.state.isDeleteCommentConfirmModalVisible}
+                    onConfirm={this.confirmDeleteAndHideModal}
+                    onCancel={this.hideDeleteConfirmModal}
+                    prompt={this.props.translate('reportActionContextMenu.deleteConfirmation')}
+                    confirmText={this.props.translate('common.delete')}
+                    cancelText={this.props.translate('common.cancel')}
+                />
+            </>
+        );
+    }
+}
+
+PopoverReportActionContextMenu.propTypes = propTypes;
+PopoverReportActionContextMenu.displayName = 'PopoverReportActionContextMenu';
+
+export default withLocalize(PopoverReportActionContextMenu);