From 5dfd8b329474a2976a52033a90cc250dea9280c5 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Thu, 10 Jun 2021 20:31:36 +0530 Subject: [PATCH 01/11] new: modal types added --- src/CONST.js | 1 + src/styles/getModalStyles.js | 30 ++++++++++++++++++++++++++++++ 2 files changed, 31 insertions(+) diff --git a/src/CONST.js b/src/CONST.js index d268f302177f..7b5fd899d31b 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -73,6 +73,7 @@ const CONST = { BOTTOM_DOCKED: 'bottom_docked', POPOVER: 'popover', RIGHT_DOCKED: 'right_docked', + CONTEXT_MENU: 'context_menu', }, ANCHOR_ORIGIN_VERTICAL: { TOP: 'top', diff --git a/src/styles/getModalStyles.js b/src/styles/getModalStyles.js index 8921167c1cb1..69e126e3ee33 100644 --- a/src/styles/getModalStyles.js +++ b/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, }; }; From a530555d702d6ecd77718006db2801949a687973 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Thu, 10 Jun 2021 20:32:57 +0530 Subject: [PATCH 02/11] new : context menu modal added --- src/components/ContextMenuPopover/index.js | 33 +++++++++++++++++++ .../ContextMenuPopover/index.native.js | 21 ++++++++++++ src/components/Popover/PopoverPropTypes.js | 5 +++ src/components/Popover/index.js | 2 +- 4 files changed, 60 insertions(+), 1 deletion(-) create mode 100644 src/components/ContextMenuPopover/index.js create mode 100644 src/components/ContextMenuPopover/index.native.js diff --git a/src/components/ContextMenuPopover/index.js b/src/components/ContextMenuPopover/index.js new file mode 100644 index 000000000000..aba3c883e9d8 --- /dev/null +++ b/src/components/ContextMenuPopover/index.js @@ -0,0 +1,33 @@ +import _ from 'underscore'; +import React from 'react'; +import {createPortal} from 'react-dom'; +import {propTypes, defaultProps as defaultPopoverProps} from '../Popover/PopoverPropTypes'; +import withWindowDimensions from '../withWindowDimensions'; +import Popover from '../Popover'; +import CONST from '../../CONST'; + +const defaultProps = { + ...(_.omit(defaultPopoverProps, 'type')), +}; + +const ContextMenuPopover = props => (!props.isSmallScreenWidth ? createPortal( + , + document.body, +) : ( + +)); + +ContextMenuPopover.propTypes = propTypes; +ContextMenuPopover.defaultProps = defaultProps; +ContextMenuPopover.displayName = 'ContextMenuPopover'; + +export default withWindowDimensions(ContextMenuPopover); diff --git a/src/components/ContextMenuPopover/index.native.js b/src/components/ContextMenuPopover/index.native.js new file mode 100644 index 000000000000..9e9a9e3fa537 --- /dev/null +++ b/src/components/ContextMenuPopover/index.native.js @@ -0,0 +1,21 @@ +import React from 'react'; +import {propTypes, defaultProps} from '../Popover/PopoverPropTypes'; +import withWindowDimensions from '../withWindowDimensions'; +import Popover from '../Popover'; + +/* + * 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 => ( + +); + +ContextMenuPopover.propTypes = propTypes; +ContextMenuPopover.defaultProps = defaultProps; +ContextMenuPopover.displayName = 'ContextMenuPopover'; + +export default withWindowDimensions(ContextMenuPopover); diff --git a/src/components/Popover/PopoverPropTypes.js b/src/components/Popover/PopoverPropTypes.js index ae11632acc0e..82dbfe9cc910 100644 --- a/src/components/Popover/PopoverPropTypes.js +++ b/src/components/Popover/PopoverPropTypes.js @@ -1,6 +1,7 @@ import _ from 'underscore'; import PropTypes from 'prop-types'; import {propTypes as modalPropTypes, defaultProps as defaultModalProps} from '../Modal/ModalPropTypes'; +import CONST from '../../CONST'; const propTypes = { ...(_.omit(modalPropTypes, 'type', 'popoverAnchorPosition')), @@ -12,6 +13,9 @@ const propTypes = { bottom: PropTypes.number, left: PropTypes.number, }), + + /** Modal type to override the default Popover type */ + type: PropTypes.oneOf(_.values(CONST.MODAL.MODAL_TYPE)), }; const defaultProps = { @@ -19,6 +23,7 @@ const defaultProps = { // Anchor position is optional only because it is not relevant on mobile anchorPosition: {}, + type: CONST.MODAL.MODAL_TYPE.POPOVER, }; export {propTypes, defaultProps}; diff --git a/src/components/Popover/index.js b/src/components/Popover/index.js index 9879d1d79a5f..c558823a9b92 100644 --- a/src/components/Popover/index.js +++ b/src/components/Popover/index.js @@ -10,7 +10,7 @@ import withWindowDimensions from '../withWindowDimensions'; */ const Popover = props => ( Date: Thu, 10 Jun 2021 20:33:39 +0530 Subject: [PATCH 03/11] replace popover with context menu popover in report actionitem --- src/components/PopoverWithMeasuredContent.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/PopoverWithMeasuredContent.js b/src/components/PopoverWithMeasuredContent.js index bf67ba3a3327..bc3830944900 100644 --- a/src/components/PopoverWithMeasuredContent.js +++ b/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'; @@ -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 ? ( - {this.props.measureContent()} - + ) : ( /* From e2c64b9dc4146a1061cbc04e959f271ec17358c4 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Thu, 10 Jun 2021 20:34:48 +0530 Subject: [PATCH 04/11] added props to base modal to remove the backdrop --- src/components/Modal/BaseModal.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/Modal/BaseModal.js b/src/components/Modal/BaseModal.js index f0b5fb6a1a7a..98584e7206dc 100644 --- a/src/components/Modal/BaseModal.js +++ b/src/components/Modal/BaseModal.js @@ -56,6 +56,8 @@ class BaseModal extends PureComponent { shouldAddTopSafeAreaPadding, shouldAddBottomSafeAreaPadding, hideBackdrop, + hasBackdrop, + coverScreen, } = getModalStyles( this.props.type, { @@ -89,6 +91,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} @@ -123,6 +127,7 @@ class BaseModal extends PureComponent { ...modalContainerStyle, ...modalPaddingStyles, }} + ref={this.props.forwardRef} > {this.props.children} @@ -137,4 +142,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 + +)); From e842554186a7185704243fbf1e087d1119411bf8 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Thu, 10 Jun 2021 20:35:36 +0530 Subject: [PATCH 05/11] outside click close to Modal --- src/components/Modal/index.js | 47 +++++++++++++++++++++++++++++------ 1 file changed, 40 insertions(+), 7 deletions(-) diff --git a/src/components/Modal/index.js b/src/components/Modal/index.js index 169b63d794e6..c3faef65332d 100644 --- a/src/components/Modal/index.js +++ b/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 - - {props.children} - -); + +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 ( + this.baseModalRef = el} + // eslint-disable-next-line react/jsx-props-no-spreading + {...this.props} + > + {this.props.children} + + ); + } +} Modal.propTypes = propTypes; Modal.defaultProps = defaultProps; From 18b9be052aa7bc0c3bb02fa347df25b906d21001 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Thu, 10 Jun 2021 21:15:05 +0530 Subject: [PATCH 06/11] fix: Prop types --- src/components/ContextMenuPopover/index.js | 12 +++--------- src/components/Modal/ModalPropTypes.js | 4 ++++ src/components/Popover/PopoverPropTypes.js | 7 ++----- src/components/PopoverWithMeasuredContent.js | 4 ++-- 4 files changed, 11 insertions(+), 16 deletions(-) diff --git a/src/components/ContextMenuPopover/index.js b/src/components/ContextMenuPopover/index.js index aba3c883e9d8..56bfefc147ac 100644 --- a/src/components/ContextMenuPopover/index.js +++ b/src/components/ContextMenuPopover/index.js @@ -1,26 +1,20 @@ -import _ from 'underscore'; import React from 'react'; import {createPortal} from 'react-dom'; -import {propTypes, defaultProps as defaultPopoverProps} from '../Popover/PopoverPropTypes'; +import {propTypes, defaultProps} from '../Popover/PopoverPropTypes'; import withWindowDimensions from '../withWindowDimensions'; import Popover from '../Popover'; import CONST from '../../CONST'; -const defaultProps = { - ...(_.omit(defaultPopoverProps, 'type')), -}; - const ContextMenuPopover = props => (!props.isSmallScreenWidth ? createPortal( , document.body, ) : ( diff --git a/src/components/Modal/ModalPropTypes.js b/src/components/Modal/ModalPropTypes.js index 6e6f7dd850d7..f375f0f67841 100644 --- a/src/components/Modal/ModalPropTypes.js +++ b/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, + /** Callback method fired when the user requests to close the modal */ onClose: PropTypes.func.isRequired, @@ -49,6 +52,7 @@ const propTypes = { }; const defaultProps = { + shouldCloseOnOutsideClick: false, onSubmit: null, type: '', onModalHide: () => {}, diff --git a/src/components/Popover/PopoverPropTypes.js b/src/components/Popover/PopoverPropTypes.js index 82dbfe9cc910..7d87de319da9 100644 --- a/src/components/Popover/PopoverPropTypes.js +++ b/src/components/Popover/PopoverPropTypes.js @@ -4,7 +4,7 @@ import {propTypes as modalPropTypes, defaultProps as defaultModalProps} from '.. import CONST from '../../CONST'; const propTypes = { - ...(_.omit(modalPropTypes, 'type', 'popoverAnchorPosition')), + ...(_.omit(modalPropTypes, 'popoverAnchorPosition')), /** The anchor position of the popover */ anchorPosition: PropTypes.shape({ @@ -13,13 +13,10 @@ const propTypes = { bottom: PropTypes.number, left: PropTypes.number, }), - - /** Modal type to override the default Popover type */ - type: PropTypes.oneOf(_.values(CONST.MODAL.MODAL_TYPE)), }; const defaultProps = { - ...(_.omit(defaultModalProps, 'type', 'popoverAnchorPosition')), + ...(_.omit(defaultModalProps, 'popoverAnchorPosition')), // Anchor position is optional only because it is not relevant on mobile anchorPosition: {}, diff --git a/src/components/PopoverWithMeasuredContent.js b/src/components/PopoverWithMeasuredContent.js index bc3830944900..e68bc1a6f649 100644 --- a/src/components/PopoverWithMeasuredContent.js +++ b/src/components/PopoverWithMeasuredContent.js @@ -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 = { - ...(_.omit(defaultPopoverProps, 'type')), + ...(_.omit(defaultPopoverProps, ['type'])), // Default positioning of the popover anchorOrigin: { From 80869c948855583643b0986780db81bcccc55832 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Thu, 10 Jun 2021 21:31:46 +0530 Subject: [PATCH 07/11] fix: props for contextmenu --- src/components/ContextMenuPopover/index.js | 1 + src/components/ContextMenuPopover/index.native.js | 2 ++ src/components/Popover/PopoverPropTypes.js | 2 -- src/components/Popover/index.js | 2 +- 4 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/ContextMenuPopover/index.js b/src/components/ContextMenuPopover/index.js index 56bfefc147ac..03d325b0e67e 100644 --- a/src/components/ContextMenuPopover/index.js +++ b/src/components/ContextMenuPopover/index.js @@ -17,6 +17,7 @@ const ContextMenuPopover = props => (!props.isSmallScreenWidth ? createPortal( )); diff --git a/src/components/ContextMenuPopover/index.native.js b/src/components/ContextMenuPopover/index.native.js index 9e9a9e3fa537..6d278e9e321a 100644 --- a/src/components/ContextMenuPopover/index.native.js +++ b/src/components/ContextMenuPopover/index.native.js @@ -2,6 +2,7 @@ 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. @@ -11,6 +12,7 @@ const ContextMenuPopover = props => ( ); diff --git a/src/components/Popover/PopoverPropTypes.js b/src/components/Popover/PopoverPropTypes.js index 7d87de319da9..e6f9c6856cfe 100644 --- a/src/components/Popover/PopoverPropTypes.js +++ b/src/components/Popover/PopoverPropTypes.js @@ -1,7 +1,6 @@ import _ from 'underscore'; import PropTypes from 'prop-types'; import {propTypes as modalPropTypes, defaultProps as defaultModalProps} from '../Modal/ModalPropTypes'; -import CONST from '../../CONST'; const propTypes = { ...(_.omit(modalPropTypes, 'popoverAnchorPosition')), @@ -20,7 +19,6 @@ const defaultProps = { // Anchor position is optional only because it is not relevant on mobile anchorPosition: {}, - type: CONST.MODAL.MODAL_TYPE.POPOVER, }; export {propTypes, defaultProps}; diff --git a/src/components/Popover/index.js b/src/components/Popover/index.js index c558823a9b92..9879d1d79a5f 100644 --- a/src/components/Popover/index.js +++ b/src/components/Popover/index.js @@ -10,7 +10,7 @@ import withWindowDimensions from '../withWindowDimensions'; */ const Popover = props => ( Date: Tue, 15 Jun 2021 03:49:29 +0530 Subject: [PATCH 08/11] refactor --- src/CONST.js | 1 - src/components/Modal/BaseModal.js | 6 ++-- src/components/Modal/ModalPropTypes.js | 4 +++ src/components/Modal/index.js | 8 ++--- src/components/Popover/PopoverPropTypes.js | 4 +-- src/components/Popover/index.js | 37 ++++++++++++++------ src/components/PopoverWithMeasuredContent.js | 10 +++--- src/pages/home/report/ReportActionItem.js | 1 + src/styles/getModalStyles.js | 30 ---------------- 9 files changed, 45 insertions(+), 56 deletions(-) diff --git a/src/CONST.js b/src/CONST.js index c31207674f53..44d5b29519ed 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -84,7 +84,6 @@ const CONST = { BOTTOM_DOCKED: 'bottom_docked', POPOVER: 'popover', RIGHT_DOCKED: 'right_docked', - CONTEXT_MENU: 'context_menu', }, ANCHOR_ORIGIN_VERTICAL: { TOP: 'top', diff --git a/src/components/Modal/BaseModal.js b/src/components/Modal/BaseModal.js index e00433959566..6b0caf683376 100644 --- a/src/components/Modal/BaseModal.js +++ b/src/components/Modal/BaseModal.js @@ -58,8 +58,6 @@ class BaseModal extends PureComponent { shouldAddTopSafeAreaPadding, shouldAddBottomSafeAreaPadding, hideBackdrop, - hasBackdrop, - coverScreen, } = getModalStyles( this.props.type, { @@ -95,8 +93,8 @@ class BaseModal extends PureComponent { backdropColor={themeColors.modalBackdrop} backdropOpacity={hideBackdrop ? 0 : 0.5} backdropTransitionOutTiming={0} - hasBackdrop={hasBackdrop} - coverScreen={coverScreen} + hasBackdrop={this.props.fullscreen} + coverScreen={this.props.fullscreen} style={modalStyle} deviceHeight={this.props.windowHeight} deviceWidth={this.props.windowWidth} diff --git a/src/components/Modal/ModalPropTypes.js b/src/components/Modal/ModalPropTypes.js index 2e62af163b6a..b0b554ff4c21 100644 --- a/src/components/Modal/ModalPropTypes.js +++ b/src/components/Modal/ModalPropTypes.js @@ -4,6 +4,9 @@ import CONST from '../../CONST'; import {windowDimensionsPropTypes} from '../withWindowDimensions'; const propTypes = { + /** Decides whether the modal should cover fullscreen. FullScreen modal has backdrop */ + fullscreen: PropTypes.bool, + /** Should we close modal on outside click */ shouldCloseOnOutsideClick: PropTypes.bool, @@ -55,6 +58,7 @@ const propTypes = { }; const defaultProps = { + fullscreen: true, shouldCloseOnOutsideClick: false, shouldSetModalVisibility: true, onSubmit: null, diff --git a/src/components/Modal/index.js b/src/components/Modal/index.js index c3faef65332d..f74fdd6137dc 100644 --- a/src/components/Modal/index.js +++ b/src/components/Modal/index.js @@ -1,10 +1,9 @@ -import React, {PureComponent} from 'react'; +import React, {Component} from 'react'; import withWindowDimensions from '../withWindowDimensions'; import BaseModal from './BaseModal'; import {propTypes, defaultProps} from './ModalPropTypes'; - -class Modal extends PureComponent { +class Modal extends Component { constructor(props) { super(props); this.closeOnOutsideClick = this.closeOnOutsideClick.bind(this); @@ -24,7 +23,8 @@ class Modal extends PureComponent { closeOnOutsideClick(event) { if (this.props.isVisible - && this.baseModalRef && !this.baseModalRef.contains(event.target) + && this.baseModalRef + && !this.baseModalRef.contains(event.target) && this.props.shouldCloseOnOutsideClick) { this.props.onClose(); } diff --git a/src/components/Popover/PopoverPropTypes.js b/src/components/Popover/PopoverPropTypes.js index e6f9c6856cfe..acc030ad80c0 100644 --- a/src/components/Popover/PopoverPropTypes.js +++ b/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, 'popoverAnchorPosition')), + ...(_.omit(modalPropTypes, ['type', 'popoverAnchorPosition'])), /** The anchor position of the popover */ anchorPosition: PropTypes.shape({ @@ -15,7 +15,7 @@ const propTypes = { }; const defaultProps = { - ...(_.omit(defaultModalProps, 'popoverAnchorPosition')), + ...(_.omit(defaultModalProps, ['type', 'popoverAnchorPosition'])), // Anchor position is optional only because it is not relevant on mobile anchorPosition: {}, diff --git a/src/components/Popover/index.js b/src/components/Popover/index.js index 9879d1d79a5f..cc1c7c534ec0 100644 --- a/src/components/Popover/index.js +++ b/src/components/Popover/index.js @@ -1,4 +1,5 @@ import React from 'react'; +import {createPortal} from 'react-dom'; import {propTypes, defaultProps} from './PopoverPropTypes'; import CONST from '../../CONST'; import Modal from '../Modal'; @@ -8,16 +9,32 @@ import withWindowDimensions from '../withWindowDimensions'; * 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 Popover = props => ( - -); +const Popover = (props) => { + if (!props.fullscreen && !props.isSmallScreenWidth) { + return createPortal( + , + document.body, + ); + } + return ( + + ); +}; Popover.propTypes = propTypes; Popover.defaultProps = defaultProps; diff --git a/src/components/PopoverWithMeasuredContent.js b/src/components/PopoverWithMeasuredContent.js index e68bc1a6f649..82e83f3fa86e 100644 --- a/src/components/PopoverWithMeasuredContent.js +++ b/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 ContextMenuPopover from './ContextMenuPopover'; +import Popover from './Popover'; 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, ['type', 'anchorPosition'])), + ...(_.omit(popoverPropTypes, ['anchorPosition'])), /** The horizontal and vertical anchors points for the popover */ anchorPosition: PropTypes.shape({ @@ -34,7 +34,7 @@ const propTypes = { }; const defaultProps = { - ...(_.omit(defaultPopoverProps, ['type'])), + ...(_.omit(defaultPopoverProps)), // Default positioning of the popover anchorOrigin: { @@ -149,13 +149,13 @@ class PopoverWithMeasuredContent extends Component { }; return this.state.isContentMeasured ? ( - {this.props.measureContent()} - + ) : ( /* diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js index 9b8b7d6d0947..305d1b442c24 100644 --- a/src/pages/home/report/ReportActionItem.js +++ b/src/pages/home/report/ReportActionItem.js @@ -279,6 +279,7 @@ class ReportActionItem extends Component { animationOutTiming={1} measureContent={this.measureContent} shouldSetModalVisibility={false} + fullscreen={false} > { let hideBackdrop = false; let shouldAddBottomSafeAreaPadding = false; let shouldAddTopSafeAreaPadding = false; - let coverScreen = true; - let hasBackdrop = true; switch (type) { case CONST.MODAL.MODAL_TYPE.CONFIRM: @@ -133,32 +131,6 @@ 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, @@ -212,7 +184,5 @@ export default (type, windowDimensions, popoverAnchorPosition = {}) => { hideBackdrop, shouldAddBottomSafeAreaPadding, shouldAddTopSafeAreaPadding, - coverScreen, - hasBackdrop, }; }; From 1bce75ba6b57632cc3ac0eb9af16aad2a9ab9a62 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Tue, 15 Jun 2021 03:51:15 +0530 Subject: [PATCH 09/11] removed unnecessary ContextMenuPopover --- src/components/ContextMenuPopover/index.js | 28 ------------------- .../ContextMenuPopover/index.native.js | 23 --------------- 2 files changed, 51 deletions(-) delete mode 100644 src/components/ContextMenuPopover/index.js delete mode 100644 src/components/ContextMenuPopover/index.native.js diff --git a/src/components/ContextMenuPopover/index.js b/src/components/ContextMenuPopover/index.js deleted file mode 100644 index 03d325b0e67e..000000000000 --- a/src/components/ContextMenuPopover/index.js +++ /dev/null @@ -1,28 +0,0 @@ -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( - , - document.body, -) : ( - -)); - -ContextMenuPopover.propTypes = propTypes; -ContextMenuPopover.defaultProps = defaultProps; -ContextMenuPopover.displayName = 'ContextMenuPopover'; - -export default withWindowDimensions(ContextMenuPopover); diff --git a/src/components/ContextMenuPopover/index.native.js b/src/components/ContextMenuPopover/index.native.js deleted file mode 100644 index 6d278e9e321a..000000000000 --- a/src/components/ContextMenuPopover/index.native.js +++ /dev/null @@ -1,23 +0,0 @@ -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 => ( - -); - -ContextMenuPopover.propTypes = propTypes; -ContextMenuPopover.defaultProps = defaultProps; -ContextMenuPopover.displayName = 'ContextMenuPopover'; - -export default withWindowDimensions(ContextMenuPopover); From d818277f5685b2294e110927eef28aee2c298540 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Tue, 15 Jun 2021 03:54:02 +0530 Subject: [PATCH 10/11] extra changes remvoed --- src/components/PopoverWithMeasuredContent.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PopoverWithMeasuredContent.js b/src/components/PopoverWithMeasuredContent.js index 82e83f3fa86e..bf67ba3a3327 100644 --- a/src/components/PopoverWithMeasuredContent.js +++ b/src/components/PopoverWithMeasuredContent.js @@ -34,7 +34,7 @@ const propTypes = { }; const defaultProps = { - ...(_.omit(defaultPopoverProps)), + ...defaultPopoverProps, // Default positioning of the popover anchorOrigin: { From 9998549bba021b9b4ed5735418251ddca34aa3d7 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Tue, 15 Jun 2021 20:22:10 +0530 Subject: [PATCH 11/11] fix: propTypes --- src/components/Modal/BaseModal.js | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/src/components/Modal/BaseModal.js b/src/components/Modal/BaseModal.js index 6b0caf683376..24e576e611a3 100644 --- a/src/components/Modal/BaseModal.js +++ b/src/components/Modal/BaseModal.js @@ -1,15 +1,28 @@ import React, {PureComponent} from 'react'; import {View} from 'react-native'; +import PropTypes from 'prop-types'; import ReactNativeModal from 'react-native-modal'; import {SafeAreaInsetsContext} from 'react-native-safe-area-context'; import KeyboardShortcut from '../../libs/KeyboardShortcut'; import styles, {getModalPaddingStyles, getSafeAreaPadding} from '../../styles/styles'; import themeColors from '../../styles/themes/default'; -import {propTypes, defaultProps} from './ModalPropTypes'; +import {propTypes as modalPropTypes, defaultProps as modalDefaultProps} from './ModalPropTypes'; import getModalStyles from '../../styles/getModalStyles'; import {setModalVisibility} from '../../libs/actions/Modal'; +const propTypes = { + ...modalPropTypes, + + /** The ref to the modal container */ + forwardedRef: PropTypes.func, +}; + +const defaultProps = { + ...modalDefaultProps, + forwardedRef: () => {}, +}; + class BaseModal extends PureComponent { constructor(props) { super(props); @@ -129,7 +142,7 @@ class BaseModal extends PureComponent { ...modalContainerStyle, ...modalPaddingStyles, }} - ref={this.props.forwardRef} + ref={this.props.forwardedRef} > {this.props.children} @@ -146,5 +159,5 @@ BaseModal.defaultProps = defaultProps; BaseModal.displayName = 'BaseModal'; export default React.forwardRef((props, ref) => ( // eslint-disable-next-line react/jsx-props-no-spreading - + ));