Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Context Menu rendering #3515

Merged
merged 13 commits into from
Jun 16, 2021
23 changes: 21 additions & 2 deletions src/components/Modal/BaseModal.js
Original file line number Diff line number Diff line change
@@ -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);
Expand Down Expand Up @@ -94,6 +107,8 @@ class BaseModal extends PureComponent {
backdropColor={themeColors.modalBackdrop}
backdropOpacity={hideBackdrop ? 0 : 0.5}
backdropTransitionOutTiming={0}
hasBackdrop={this.props.fullscreen}
coverScreen={this.props.fullscreen}
style={modalStyle}
deviceHeight={this.props.windowHeight}
deviceWidth={this.props.windowWidth}
Expand Down Expand Up @@ -128,6 +143,7 @@ class BaseModal extends PureComponent {
...modalContainerStyle,
...modalPaddingStyles,
}}
ref={this.props.forwardedRef}
>
{this.props.children}
</View>
Expand All @@ -142,4 +158,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} forwardedRef={ref} />
));
8 changes: 8 additions & 0 deletions src/components/Modal/ModalPropTypes.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,12 @@ 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,

/** Should we announce the Modal visibility changes? */
shouldSetModalVisibility: PropTypes.bool,

Expand Down Expand Up @@ -52,6 +58,8 @@ const propTypes = {
};

const defaultProps = {
fullscreen: true,
shouldCloseOnOutsideClick: false,
shouldSetModalVisibility: true,
onSubmit: null,
type: '',
Expand Down
47 changes: 40 additions & 7 deletions src/components/Modal/index.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,47 @@
import React from 'react';
import React, {Component} 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 Component {
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;
Expand Down
4 changes: 2 additions & 2 deletions src/components/Popover/PopoverPropTypes.js
Original file line number Diff line number Diff line change
Expand Up @@ -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, ['type', 'popoverAnchorPosition'])),

/** The anchor position of the popover */
anchorPosition: PropTypes.shape({
Expand All @@ -15,7 +15,7 @@ const propTypes = {
};

const defaultProps = {
...(_.omit(defaultModalProps, 'type', 'popoverAnchorPosition')),
...(_.omit(defaultModalProps, ['type', 'popoverAnchorPosition'])),

// Anchor position is optional only because it is not relevant on mobile
anchorPosition: {},
Expand Down
37 changes: 27 additions & 10 deletions src/components/Popover/index.js
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 => (
<Modal
type={props.isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.POPOVER}
popoverAnchorPosition={props.isSmallScreenWidth ? undefined : props.anchorPosition}
// eslint-disable-next-line react/jsx-props-no-spreading
{...props}
animationIn={props.isSmallScreenWidth ? undefined : props.animationIn}
animationOut={props.isSmallScreenWidth ? undefined : props.animationOut}
/>
);
const Popover = (props) => {
if (!props.fullscreen && !props.isSmallScreenWidth) {
return createPortal(
<Modal
type={CONST.MODAL.MODAL_TYPE.POPOVER}
popoverAnchorPosition={props.anchorPosition}
Beamanator marked this conversation as resolved.
Show resolved Hide resolved
// eslint-disable-next-line react/jsx-props-no-spreading
{...props}
animationIn={props.isSmallScreenWidth ? undefined : props.animationIn}
animationOut={props.isSmallScreenWidth ? undefined : props.animationOut}
shouldCloseOnOutsideClick
/>,
document.body,
);
}
return (
<Modal
type={props.isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.POPOVER}
popoverAnchorPosition={props.isSmallScreenWidth ? undefined : props.anchorPosition}
// eslint-disable-next-line react/jsx-props-no-spreading
{...props}
animationIn={props.isSmallScreenWidth ? undefined : props.animationIn}
animationOut={props.isSmallScreenWidth ? undefined : props.animationOut}
/>
);
};

Popover.propTypes = propTypes;
Popover.defaultProps = defaultProps;
Expand Down
1 change: 1 addition & 0 deletions src/pages/home/report/ReportActionItem.js
Original file line number Diff line number Diff line change
Expand Up @@ -279,6 +279,7 @@ class ReportActionItem extends Component {
animationOutTiming={1}
measureContent={this.measureContent}
shouldSetModalVisibility={false}
fullscreen={false}
>
<ReportActionContextMenu
isVisible
Expand Down