Context Menu rendering

src/CONST.js

@@ -84,6 +84,7 @@ const CONST = {
             BOTTOM_DOCKED: 'bottom_docked',
             POPOVER: 'popover',
             RIGHT_DOCKED: 'right_docked',
+            CONTEXT_MENU: 'context_menu',
         },
         ANCHOR_ORIGIN_VERTICAL: {
             TOP: 'top',

src/components/ContextMenuPopover/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import {createPortal} from 'react-dom';
+import {propTypes, defaultProps} from '../Popover/PopoverPropTypes';
+import withWindowDimensions from '../withWindowDimensions';
+import Popover from '../Popover';
+import CONST from '../../CONST';
+
+const ContextMenuPopover = props => (!props.isSmallScreenWidth ? createPortal(
+    <Popover
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        type={CONST.MODAL.MODAL_TYPE.CONTEXT_MENU}
+        shouldCloseOnOutsideClick
+    />,
+    document.body,
+) : (
+    <Popover
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        type={CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED}
+    />
+));
+
+ContextMenuPopover.propTypes = propTypes;
+ContextMenuPopover.defaultProps = defaultProps;
+ContextMenuPopover.displayName = 'ContextMenuPopover';
+
+export default withWindowDimensions(ContextMenuPopover);

src/components/ContextMenuPopover/index.native.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import {propTypes, defaultProps} from '../Popover/PopoverPropTypes';
+import withWindowDimensions from '../withWindowDimensions';
+import Popover from '../Popover';
+import CONST from '../../CONST';
+
+/*
+ * This is a convenience wrapper around the Modal component for a responsive Popover.
+ * On small screen widths, it uses BottomDocked modal type, and a Popover type on wide screen widths.
+ */
+const ContextMenuPopover = props => (
+    <Popover
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        type={CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED}
+    />
+);
+
+ContextMenuPopover.propTypes = propTypes;
+ContextMenuPopover.defaultProps = defaultProps;
+ContextMenuPopover.displayName = 'ContextMenuPopover';
+
+export default withWindowDimensions(ContextMenuPopover);

src/components/Modal/BaseModal.js

@@ -58,6 +58,8 @@ class BaseModal extends PureComponent {
             shouldAddTopSafeAreaPadding,
             shouldAddBottomSafeAreaPadding,
             hideBackdrop,
+            hasBackdrop,
+            coverScreen,
         } = getModalStyles(
             this.props.type,
             {
@@ -93,6 +95,8 @@ class BaseModal extends PureComponent {
                 backdropColor={themeColors.modalBackdrop}
                 backdropOpacity={hideBackdrop ? 0 : 0.5}
                 backdropTransitionOutTiming={0}
+                hasBackdrop={hasBackdrop}
+                coverScreen={coverScreen}
                 style={modalStyle}
                 deviceHeight={this.props.windowHeight}
                 deviceWidth={this.props.windowWidth}
@@ -127,6 +131,7 @@ class BaseModal extends PureComponent {
                                     ...modalContainerStyle,
                                     ...modalPaddingStyles,
                                 }}
+                                ref={this.props.forwardRef}
                             >
                                 {this.props.children}
                             </View>
@@ -141,4 +146,7 @@ class BaseModal extends PureComponent {
 BaseModal.propTypes = propTypes;
 BaseModal.defaultProps = defaultProps;
 BaseModal.displayName = 'BaseModal';
-export default BaseModal;
+export default React.forwardRef((props, ref) => (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <BaseModal {...props} forwardRef={ref} />
+));

src/components/Modal/ModalPropTypes.js

@@ -4,6 +4,9 @@ import CONST from '../../CONST';
 import {windowDimensionsPropTypes} from '../withWindowDimensions';
 
 const propTypes = {
+    /** Should we close modal on outside click */
+    shouldCloseOnOutsideClick: PropTypes.bool,
+
     /** Should we announce the Modal visibility changes? */
     shouldSetModalVisibility: PropTypes.bool,
 
@@ -52,6 +55,7 @@ const propTypes = {
 };
 
 const defaultProps = {
+    shouldCloseOnOutsideClick: false,
     shouldSetModalVisibility: true,
     onSubmit: null,
     type: '',

src/components/Modal/index.js

@@ -1,14 +1,47 @@
-import React from 'react';
+import React, {PureComponent} from 'react';
 import withWindowDimensions from '../withWindowDimensions';
 import BaseModal from './BaseModal';
 import {propTypes, defaultProps} from './ModalPropTypes';
 
-const Modal = props => (
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    <BaseModal {...props}>
-        {props.children}
-    </BaseModal>
-);
+
+class Modal extends PureComponent {
+    constructor(props) {
+        super(props);
+        this.closeOnOutsideClick = this.closeOnOutsideClick.bind(this);
+    }
+
+    componentDidMount() {
+        if (this.props.shouldCloseOnOutsideClick) {
+            document.addEventListener('mousedown', this.closeOnOutsideClick);
+        }
+    }
+
+    componentWillUnmount() {
+        if (this.props.shouldCloseOnOutsideClick) {
+            document.removeEventListener('mousedown', this.closeOnOutsideClick);
+        }
+    }
+
+    closeOnOutsideClick(event) {
+        if (this.props.isVisible
+            && this.baseModalRef && !this.baseModalRef.contains(event.target)
+            && this.props.shouldCloseOnOutsideClick) {
+            this.props.onClose();
+        }
+    }
+
+    render() {
+        return (
+            <BaseModal
+                ref={el => this.baseModalRef = el}
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...this.props}
+            >
+                {this.props.children}
+            </BaseModal>
+        );
+    }
+}
 
 Modal.propTypes = propTypes;
 Modal.defaultProps = defaultProps;

src/components/Popover/PopoverPropTypes.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {propTypes as modalPropTypes, defaultProps as defaultModalProps} from '../Modal/ModalPropTypes';
 
 const propTypes = {
-    ...(_.omit(modalPropTypes, 'type', 'popoverAnchorPosition')),
+    ...(_.omit(modalPropTypes, 'popoverAnchorPosition')),
 
     /** The anchor position of the popover */
     anchorPosition: PropTypes.shape({
@@ -15,7 +15,7 @@ const propTypes = {
 };
 
 const defaultProps = {
-    ...(_.omit(defaultModalProps, 'type', 'popoverAnchorPosition')),
+    ...(_.omit(defaultModalProps, 'popoverAnchorPosition')),
 
     // Anchor position is optional only because it is not relevant on mobile
     anchorPosition: {},

src/components/PopoverWithMeasuredContent.js

@@ -2,7 +2,7 @@ import _ from 'underscore';
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {View} from 'react-native';
-import Popover from './Popover';
+import ContextMenuPopover from './ContextMenuPopover';
 import {propTypes as popoverPropTypes, defaultProps as defaultPopoverProps} from './Popover/PopoverPropTypes';
 import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
 import CONST from '../CONST';
@@ -12,7 +12,7 @@ import {computeHorizontalShift, computeVerticalShift} from '../styles/getPopover
 const propTypes = {
     // All popover props except:
     // 1) anchorPosition (which is overridden for this component)
-    ...(_.omit(popoverPropTypes, ['anchorPosition'])),
+    ...(_.omit(popoverPropTypes, ['type', 'anchorPosition'])),
 
     /** The horizontal and vertical anchors points for the popover */
     anchorPosition: PropTypes.shape({
@@ -34,7 +34,7 @@ const propTypes = {
 };
 
 const defaultProps = {
-    ...defaultPopoverProps,
+    ...(_.omit(defaultPopoverProps, ['type'])),
 
     // Default positioning of the popover
     anchorOrigin: {
@@ -149,13 +149,13 @@ class PopoverWithMeasuredContent extends Component {
         };
         return this.state.isContentMeasured
             ? (
-                <Popover
+                <ContextMenuPopover
                     // eslint-disable-next-line react/jsx-props-no-spreading
                     {...this.props}
                     anchorPosition={shifedAnchorPosition}
                 >
                     {this.props.measureContent()}
-                </Popover>
+                </ContextMenuPopover>
             ) : (
 
                 /*

src/styles/getModalStyles.js

@@ -17,6 +17,8 @@ export default (type, windowDimensions, popoverAnchorPosition = {}) => {
     let hideBackdrop = false;
     let shouldAddBottomSafeAreaPadding = false;
     let shouldAddTopSafeAreaPadding = false;
+    let coverScreen = true;
+    let hasBackdrop = true;
 
     switch (type) {
         case CONST.MODAL.MODAL_TYPE.CONFIRM:
@@ -131,6 +133,32 @@ export default (type, windowDimensions, popoverAnchorPosition = {}) => {
             animationIn = 'fadeIn';
             animationOut = 'fadeOut';
             break;
+        case CONST.MODAL.MODAL_TYPE.CONTEXT_MENU:
+            modalStyle = {
+                ...modalStyle,
+                ...popoverAnchorPosition,
+                ...{
+                    position: 'absolute',
+                    alignItems: 'center',
+                    justifyContent: 'flex-end',
+                },
+            };
+            modalContainerStyle = {
+                borderRadius: 12,
+                borderWidth: 1,
+                borderColor: themeColors.border,
+                justifyContent: 'center',
+                overflow: 'hidden',
+                boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.025)',
+            };
+
+            hideBackdrop = true;
+            swipeDirection = undefined;
+            animationIn = 'fadeIn';
+            animationOut = 'fadeOut';
+            coverScreen = false;
+            hasBackdrop = false;
+            break;
         case CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED:
             modalStyle = {
                 ...modalStyle,
@@ -184,5 +212,7 @@ export default (type, windowDimensions, popoverAnchorPosition = {}) => {
         hideBackdrop,
         shouldAddBottomSafeAreaPadding,
         shouldAddTopSafeAreaPadding,
+        coverScreen,
+        hasBackdrop,
     };
 };