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.

Sign up for GitHub

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

Fixed delete action on context menu #3803

Merged
merged 3 commits into from
Jul 1, 2021
Merged

Fixed delete action on context menu #3803

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ca70a5e
fix: delete action on context menu
parasharrajat Jun 29, 2021
4853183
Merge branch 'main' of github.com:Expensify/Expensify.cash into menu-…
parasharrajat Jun 30, 2021
168d697
refactor
parasharrajat Jul 1, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 13 additions & 29 deletions src/pages/home/report/ReportActionContextMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,14 @@ 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';
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 = {
Expand All @@ -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,
};

Expand All @@ -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);

Expand Down Expand Up @@ -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,
};
}

/**
Expand All @@ -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
*
Expand Down Expand Up @@ -196,15 +189,6 @@ class ReportActionContextMenu extends React.Component {
onPress={() => contextAction.onPress(this.props.reportAction)}
/>
))}
<ConfirmModal
title={this.props.translate('reportActionContextMenu.deleteComment')}
isVisible={this.state.isDeleteCommentConfirmModalVisible}
onConfirm={this.confirmDeleteAndHideModal}
onCancel={this.hideDeleteConfirmModal}
prompt={this.props.translate('reportActionContextMenu.deleteConfirmation')}
confirmText={this.props.translate('common.delete')}
cancelText={this.props.translate('common.cancel')}
/>
</View>
);
}
Expand Down
149 changes: 99 additions & 50 deletions src/pages/home/report/ReportActionItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. */
Expand Down Expand Up @@ -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 = {
Expand All @@ -64,6 +70,7 @@ class ReportActionItem extends Component {
this.onPopoverHide = () => {};
this.state = {
isPopoverVisible: false,
isDeleteCommentConfirmModalVisible: false,
cursorPosition: {
horizontal: 0,
vertical: 0,
Expand All @@ -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() {
Expand All @@ -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
Expand Down Expand Up @@ -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) {
Expand All @@ -228,53 +258,56 @@ class ReportActionItem extends Component {
);
}
return (
<PressableWithSecondaryInteraction
ref={el => this.popoverAnchor = el}
onSecondaryInteraction={this.showPopover}
>
<Hoverable resetsOnClickOutside={false}>
{hovered => (
<View>
{this.props.shouldDisplayNewIndicator && (
<UnreadActionIndicator />
)}
<View
style={getReportActionItemStyle(
hovered
|| this.state.isPopoverVisible
|| this.props.draftMessage,
<>
<PressableWithSecondaryInteraction
ref={el => this.popoverAnchor = el}
onSecondaryInteraction={this.showPopover}
>
<Hoverable resetsOnClickOutside={false}>
{hovered => (
<View>
{this.props.shouldDisplayNewIndicator && (
<UnreadActionIndicator />
)}
onLayout={this.props.onLayout}
>
{!this.props.displayAsGroup
? (
<ReportActionItemSingle action={this.props.action}>
{children}
</ReportActionItemSingle>
)
: (
<ReportActionItemGrouped>
{children}
</ReportActionItemGrouped>
)}
</View>
<View style={getMiniReportActionContextMenuWrapperStyle(this.props.displayAsGroup)}>
<ReportActionContextMenu
reportID={this.props.reportID}
reportAction={this.props.action}
isVisible={
<View
style={getReportActionItemStyle(
hovered
&& !this.state.isPopoverVisible
&& !this.props.draftMessage
}
draftMessage={this.props.draftMessage}
hidePopover={this.hidePopover}
isMini
/>
|| this.state.isPopoverVisible
|| this.props.draftMessage,
)}
onLayout={this.props.onLayout}
>
{!this.props.displayAsGroup
? (
<ReportActionItemSingle action={this.props.action}>
{children}
</ReportActionItemSingle>
)
: (
<ReportActionItemGrouped>
{children}
</ReportActionItemGrouped>
)}
</View>
<View style={getMiniReportActionContextMenuWrapperStyle(this.props.displayAsGroup)}>
<ReportActionContextMenu
reportID={this.props.reportID}
reportAction={this.props.action}
isVisible={
hovered
&& !this.state.isPopoverVisible
&& !this.props.draftMessage
}
draftMessage={this.props.draftMessage}
hidePopover={this.hidePopover}
isMini
showDeleteConfirmModal={this.showDeleteConfirmModal}
/>
</View>
</View>
</View>
)}
</Hoverable>
)}
</Hoverable>
</PressableWithSecondaryInteraction>
<PopoverWithMeasuredContent
isVisible={this.state.isPopoverVisible}
onClose={this.hidePopover}
Expand All @@ -292,18 +325,34 @@ class ReportActionItem extends Component {
reportAction={this.props.action}
draftMessage={this.props.draftMessage}
hidePopover={this.hidePopover}
showDeleteConfirmModal={this.showDeleteConfirmModal}
/>
</PopoverWithMeasuredContent>
</PressableWithSecondaryInteraction>
<ConfirmModal
title={this.props.translate('reportActionContextMenu.deleteComment')}
isVisible={this.state.isDeleteCommentConfirmModalVisible}
onConfirm={this.confirmDeleteAndHideModal}
onCancel={this.hideDeleteConfirmModal}
prompt={this.props.translate('reportActionContextMenu.deleteConfirmation')}
confirmText={this.props.translate('common.delete')}
cancelText={this.props.translate('common.cancel')}
/>
</>
);
}
}

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);