diff --git a/src/components/ConfirmModal.js b/src/components/ConfirmModal.js index 2f9a5f604839..2e35eddf338d 100755 --- a/src/components/ConfirmModal.js +++ b/src/components/ConfirmModal.js @@ -43,6 +43,12 @@ const propTypes = { /** Whether we should show the cancel button */ shouldShowCancelButton: PropTypes.bool, + /** Callback method fired when the modal is hidden */ + onModalHide: PropTypes.func, + + /** Should we announce the Modal visibility changes? */ + shouldSetModalVisibility: PropTypes.bool, + ...withLocalizePropTypes, ...windowDimensionsPropTypes, @@ -56,6 +62,8 @@ const defaultProps = { danger: false, onCancel: () => {}, shouldShowCancelButton: true, + shouldSetModalVisibility: true, + onModalHide: () => {}, }; const ConfirmModal = props => ( @@ -63,6 +71,8 @@ const ConfirmModal = props => ( onSubmit={props.onConfirm} onClose={props.onCancel} isVisible={props.isVisible} + shouldSetModalVisibility={props.shouldSetModalVisibility} + onModalHide={props.onModalHide} type={props.isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.CONFIRM} diff --git a/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js b/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js index 5c47b86b2eaa..6efecbab0ef8 100644 --- a/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js +++ b/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js @@ -24,6 +24,7 @@ class PopoverReportActionContextMenu extends React.Component { reportActionDraftMessage: '', isPopoverVisible: false, isDeleteCommentConfirmModalVisible: false, + shouldSetModalVisibilityForDeleteConfirmation: true, cursorRelativePosition: { horizontal: 0, vertical: 0, @@ -187,12 +188,8 @@ class PopoverReportActionContextMenu extends React.Component { * After Popover hides, call the registered onPopoverHide & onPopoverHideActionCallback callback and reset it */ runAndResetOnPopoverHide() { - this.onPopoverHide(); - this.onPopoverHideActionCallback(); - - // After we have called the action, reset it. - this.onPopoverHide = () => {}; - this.onPopoverHideActionCallback = () => {}; + this.onPopoverHide = this.runAndResetCallback(this.onPopoverHide); + this.onPopoverHideActionCallback = this.runAndResetCallback(this.onPopoverHideActionCallback); } /** @@ -229,16 +226,29 @@ class PopoverReportActionContextMenu extends React.Component { ); } + /** + * Run the callback and return a noop function to reset it + * @param {Function} callback + * @returns {Function} + */ + runAndResetCallback(callback) { + callback(); + return () => {}; + } + confirmDeleteAndHideModal() { + this.callbackWhenDeleteModalHide = () => this.onComfirmDeleteModal = this.runAndResetCallback(this.onComfirmDeleteModal); Report.deleteReportComment(this.state.reportID, this.state.reportAction); this.setState({isDeleteCommentConfirmModalVisible: false}); } hideDeleteModal() { + this.callbackWhenDeleteModalHide = () => this.onCancelDeleteModal = this.runAndResetCallback(this.onCancelDeleteModal); this.setState({ reportID: 0, reportAction: {}, isDeleteCommentConfirmModalVisible: false, + shouldSetModalVisibilityForDeleteConfirmation: true, }); } @@ -246,9 +256,19 @@ class PopoverReportActionContextMenu extends React.Component { * Opens the Confirm delete action modal * @param {Number} reportID * @param {Object} reportAction + * @param {Boolean} [shouldSetModalVisibility] + * @param {Function} [onConfirm] + * @param {Function} [onCancel] */ - showDeleteModal(reportID, reportAction) { - this.setState({reportID, reportAction, isDeleteCommentConfirmModalVisible: true}); + showDeleteModal(reportID, reportAction, shouldSetModalVisibility = true, onConfirm = () => {}, onCancel = () => {}) { + this.onCancelDeleteModal = onCancel; + this.onComfirmDeleteModal = onConfirm; + this.setState({ + reportID, + reportAction, + shouldSetModalVisibilityForDeleteConfirmation: shouldSetModalVisibility, + isDeleteCommentConfirmModalVisible: true, + }); } render() { @@ -278,8 +298,10 @@ class PopoverReportActionContextMenu extends React.Component { InteractionManager.runAfterInteractions(() => this.textInput.focus()), + ); + return; + } Report.editReportComment(this.props.reportID, this.props.action, trimmedNewDraft); this.deleteDraft(); }