diff --git a/src/pages/home/report/ReportActionContextMenu.js b/src/pages/home/report/ReportActionContextMenu.js
index e0ec05837cdc..124b4bad6ff5 100755
--- a/src/pages/home/report/ReportActionContextMenu.js
+++ b/src/pages/home/report/ReportActionContextMenu.js
@@ -9,7 +9,7 @@ import {
} from '../../../components/Icon/Expensicons';
import getReportActionContextMenuStyles from '../../../styles/getReportActionContextMenuStyles';
import {
- setNewMarkerPosition, updateLastReadActionID, saveReportActionDraft, deleteReportComment,
+ setNewMarkerPosition, updateLastReadActionID, saveReportActionDraft,
} from '../../../libs/actions/Report';
import ReportActionContextMenuItem from './ReportActionContextMenuItem';
import ReportActionPropTypes from './ReportActionPropTypes';
@@ -17,7 +17,6 @@ import Clipboard from '../../../libs/Clipboard';
import compose from '../../../libs/compose';
import {isReportMessageAttachment, canEditReportAction, canDeleteReportAction} from '../../../libs/reportUtils';
import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
-import ConfirmModal from '../../../components/ConfirmModal';
import ReportActionComposeFocusManager from '../../../libs/ReportActionComposeFocusManager';
const propTypes = {
@@ -44,6 +43,9 @@ const propTypes = {
/** Function to dismiss the popover containing this menu */
hidePopover: PropTypes.func.isRequired,
+ /** Function to show the delete Action confirmation modal */
+ showDeleteConfirmModal: PropTypes.func.isRequired,
+
...withLocalizePropTypes,
};
@@ -58,8 +60,6 @@ class ReportActionContextMenu extends React.Component {
constructor(props) {
super(props);
- this.confirmDeleteAndHideModal = this.confirmDeleteAndHideModal.bind(this);
- this.hideDeleteConfirmModal = this.hideDeleteConfirmModal.bind(this);
this.getActionText = this.getActionText.bind(this);
this.hidePopover = this.hidePopover.bind(this);
@@ -135,15 +135,19 @@ class ReportActionContextMenu extends React.Component {
text: this.props.translate('reportActionContextMenu.deleteComment'),
icon: Trashcan,
shouldShow: () => canDeleteReportAction(this.props.reportAction),
- onPress: () => this.setState({isDeleteCommentConfirmModalVisible: true}),
+ onPress: () => {
+ if (this.props.isMini) {
+ // No popover to hide, call showDeleteConfirmModal immediately
+ this.props.showDeleteConfirmModal();
+ } else {
+ // Hide popover, then call showDeleteConfirmModal
+ this.hidePopover(false, this.props.showDeleteConfirmModal);
+ }
+ },
},
];
this.wrapperStyle = getReportActionContextMenuStyles(this.props.isMini);
-
- this.state = {
- isDeleteCommentConfirmModalVisible: false,
- };
}
/**
@@ -156,17 +160,6 @@ class ReportActionContextMenu extends React.Component {
return lodashGet(message, 'text', '');
}
- confirmDeleteAndHideModal() {
- deleteReportComment(this.props.reportID, this.props.reportAction);
- this.setState({isDeleteCommentConfirmModalVisible: false});
- this.hidePopover();
- }
-
- hideDeleteConfirmModal() {
- this.setState({isDeleteCommentConfirmModalVisible: false});
- this.hidePopover();
- }
-
/**
* Hides the popover menu with an optional delay
*
@@ -196,15 +189,6 @@ class ReportActionContextMenu extends React.Component {
onPress={() => contextAction.onPress(this.props.reportAction)}
/>
))}
-
);
}
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index b1d983ab5cd3..1a48e98dc580 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -20,6 +20,10 @@ import IOUAction from '../../../components/ReportActionItem/IOUAction';
import ReportActionItemMessage from './ReportActionItemMessage';
import UnreadActionIndicator from '../../../components/UnreadActionIndicator';
import ReportActionItemMessageEdit from './ReportActionItemMessageEdit';
+import ConfirmModal from '../../../components/ConfirmModal';
+import compose from '../../../libs/compose';
+import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
+import {deleteReportComment} from '../../../libs/actions/Report';
const propTypes = {
/** The ID of the report this action is on. */
@@ -50,6 +54,8 @@ const propTypes = {
/** Runs when the view enclosing the chat message lays out indicating it has rendered */
onLayout: PropTypes.func.isRequired,
+
+ ...withLocalizePropTypes,
};
const defaultProps = {
@@ -64,6 +70,7 @@ class ReportActionItem extends Component {
this.onPopoverHide = () => {};
this.state = {
isPopoverVisible: false,
+ isDeleteCommentConfirmModalVisible: false,
cursorPosition: {
horizontal: 0,
vertical: 0,
@@ -82,6 +89,9 @@ class ReportActionItem extends Component {
this.measureContent = this.measureContent.bind(this);
this.selection = '';
this.measureContextMenuAnchorPosition = this.measureContextMenuAnchorPosition.bind(this);
+ this.confirmDeleteAndHideModal = this.confirmDeleteAndHideModal.bind(this);
+ this.hideDeleteConfirmModal = this.hideDeleteConfirmModal.bind(this);
+ this.showDeleteConfirmModal = this.showDeleteConfirmModal.bind(this);
}
componentDidMount() {
@@ -91,6 +101,7 @@ class ReportActionItem extends Component {
shouldComponentUpdate(nextProps, nextState) {
return this.state.isPopoverVisible !== nextState.isPopoverVisible
|| this.state.popoverAnchorPosition !== nextState.popoverAnchorPosition
+ || this.state.isDeleteCommentConfirmModalVisible !== nextState.isDeleteCommentConfirmModalVisible
|| this.props.displayAsGroup !== nextProps.displayAsGroup
|| this.props.draftMessage !== nextProps.draftMessage
|| this.props.isMostRecentIOUReportAction !== nextProps.isMostRecentIOUReportAction
@@ -201,10 +212,29 @@ class ReportActionItem extends Component {
reportID={this.props.reportID}
reportAction={this.props.action}
hidePopover={this.hidePopover}
+ showDeleteConfirmModal={this.showDeleteConfirmModal}
/>
);
}
+ confirmDeleteAndHideModal() {
+ deleteReportComment(this.props.reportID, this.props.action);
+ this.setState({isDeleteCommentConfirmModalVisible: false});
+ }
+
+ hideDeleteConfirmModal() {
+ this.setState({isDeleteCommentConfirmModalVisible: false});
+ }
+
+ /**
+ * Opens the Confirm delete action modal
+ *
+ * @memberof ReportActionItem
+ */
+ showDeleteConfirmModal() {
+ this.setState({isDeleteCommentConfirmModalVisible: true});
+ }
+
render() {
let children;
if (this.props.action.actionName === CONST.REPORT.ACTIONS.TYPE.IOU) {
@@ -228,53 +258,56 @@ class ReportActionItem extends Component {
);
}
return (
- this.popoverAnchor = el}
- onSecondaryInteraction={this.showPopover}
- >
-
- {hovered => (
-
- {this.props.shouldDisplayNewIndicator && (
-
- )}
-
+ this.popoverAnchor = el}
+ onSecondaryInteraction={this.showPopover}
+ >
+
+ {hovered => (
+
+ {this.props.shouldDisplayNewIndicator && (
+
)}
- onLayout={this.props.onLayout}
- >
- {!this.props.displayAsGroup
- ? (
-
- {children}
-
- )
- : (
-
- {children}
-
- )}
-
-
-
+ || this.state.isPopoverVisible
+ || this.props.draftMessage,
+ )}
+ onLayout={this.props.onLayout}
+ >
+ {!this.props.displayAsGroup
+ ? (
+
+ {children}
+
+ )
+ : (
+
+ {children}
+
+ )}
+
+
+
+
-
- )}
-
+ )}
+
+
-
+
+
);
}
}
@@ -302,8 +345,14 @@ class ReportActionItem extends Component {
ReportActionItem.propTypes = propTypes;
ReportActionItem.defaultProps = defaultProps;
-export default withOnyx({
- draftMessage: {
- key: ({reportID, action}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${reportID}_${action.reportActionID}`,
- },
-})(ReportActionItem);
+export default compose(
+ withLocalize,
+ withOnyx({
+ draftMessage: {
+ key: ({
+ reportID,
+ action,
+ }) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${reportID}_${action.reportActionID}`,
+ },
+ }),
+)(ReportActionItem);