diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index c93753efe902..c59da68aeb4d 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -50,6 +50,7 @@ import * as Expensicons from '../../../components/Icon/Expensicons';
import Text from '../../../components/Text';
import DisplayNames from '../../../components/DisplayNames';
import personalDetailsPropType from '../../personalDetailsPropType';
+import ReportActionItemDraft from './ReportActionItemDraft';
const propTypes = {
/** Report for this action */
@@ -239,15 +240,55 @@ class ReportActionItem extends Component {
<>
{children}
{hasReactions && (
-
+
+
+
)}
>
);
}
+ /**
+ * Get ReportActionItem with a proper wrapper
+ * @param {Boolean} hovered whether the ReportActionItem is hovered
+ * @param {Boolean} isWhisper whether the ReportActionItem is a whisper
+ * @returns {Object} report action item
+ */
+ renderReportActionItem(hovered, isWhisper) {
+ const content = this.renderItemContent(hovered || this.state.isContextMenuActive);
+
+ if (this.props.draftMessage) {
+ return (
+
+ {content}
+
+ );
+ }
+
+ if (!this.props.displayAsGroup) {
+ return (
+
+ {content}
+
+ );
+ }
+
+ return (
+
+ {content}
+
+ );
+ }
+
render() {
if (this.props.action.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED) {
return ;
@@ -323,23 +364,7 @@ class ReportActionItem extends Component {
/>
)}
- {!this.props.displayAsGroup
- ? (
-
- {this.renderItemContent(hovered || this.state.isContextMenuActive)}
-
- )
- : (
-
- {this.renderItemContent(hovered || this.state.isContextMenuActive)}
-
- )}
+ {this.renderReportActionItem(hovered, isWhisper)}
(
+
+
+ {props.children}
+
+
+);
+
+ReportActionItemDraft.propTypes = propTypes;
+ReportActionItemDraft.displayName = 'ReportActionItemDraft';
+export default ReportActionItemDraft;
diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
index 946e407d0bad..6100e5a9492e 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.js
+++ b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -1,25 +1,32 @@
/* eslint-disable rulesdir/onyx-props-must-have-default */
import lodashGet from 'lodash/get';
import React from 'react';
-import {InteractionManager, Keyboard, View} from 'react-native';
+import {
+ InteractionManager, Keyboard, Pressable, TouchableOpacity, View,
+} from 'react-native';
import PropTypes from 'prop-types';
import _ from 'underscore';
import ExpensiMark from 'expensify-common/lib/ExpensiMark';
import Str from 'expensify-common/lib/str';
import reportActionPropTypes from './reportActionPropTypes';
import styles from '../../../styles/styles';
+import themeColors from '../../../styles/themes/default';
+import * as StyleUtils from '../../../styles/StyleUtils';
import Composer from '../../../components/Composer';
import * as Report from '../../../libs/actions/Report';
import * as ReportScrollManager from '../../../libs/ReportScrollManager';
import toggleReportActionComposeView from '../../../libs/toggleReportActionComposeView';
import openReportActionComposeViewWhenClosingMessageEdit from '../../../libs/openReportActionComposeViewWhenClosingMessageEdit';
-import Button from '../../../components/Button';
import ReportActionComposeFocusManager from '../../../libs/ReportActionComposeFocusManager';
import compose from '../../../libs/compose';
import EmojiPickerButton from '../../../components/EmojiPicker/EmojiPickerButton';
+import Icon from '../../../components/Icon';
+import * as Expensicons from '../../../components/Icon/Expensicons';
+import Tooltip from '../../../components/Tooltip';
import * as ReportActionContextMenu from './ContextMenu/ReportActionContextMenu';
import * as ReportUtils from '../../../libs/ReportUtils';
import * as EmojiUtils from '../../../libs/EmojiUtils';
+import getButtonState from '../../../libs/getButtonState';
import reportPropTypes from '../../reportPropTypes';
import ExceededCommentLength from '../../../components/ExceededCommentLength';
import CONST from '../../../CONST';
@@ -255,79 +262,103 @@ class ReportActionItemMessageEdit extends React.Component {
render() {
const hasExceededMaxCommentLength = this.state.hasExceededMaxCommentLength;
return (
-
-
- {
- this.textInput = el;
- this.props.forwardedRef(el);
- }}
- nativeID={this.messageEditInput}
- onChangeText={this.updateDraft} // Debounced saveDraftComment
- onKeyPress={this.triggerSaveOrCancel}
- value={this.state.draft}
- maxLines={16} // This is the same that slack has
- style={[styles.textInputCompose, styles.flex4, styles.editInputComposeSpacing]}
- onFocus={() => {
- this.setState({isFocused: true});
- ReportScrollManager.scrollToIndex({animated: true, index: this.props.index}, true);
- toggleReportActionComposeView(false, this.props.isSmallScreenWidth);
- }}
- onBlur={(event) => {
- this.setState({isFocused: false});
- const relatedTargetId = lodashGet(event, 'nativeEvent.relatedTarget.id');
-
- // Return to prevent re-render when save/cancel button is pressed which cancels the onPress event by re-rendering
- if (_.contains([this.saveButtonID, this.cancelButtonID, this.emojiButtonID], relatedTargetId)) {
- return;
- }
-
- if (this.messageEditInput === relatedTargetId) {
- return;
- }
- openReportActionComposeViewWhenClosingMessageEdit(this.props.isSmallScreenWidth);
- }}
- selection={this.state.selection}
- onSelectionChange={this.onSelectionChange}
- />
-
- InteractionManager.runAfterInteractions(() => this.textInput.focus())}
- onEmojiSelected={this.addEmojiToTextBox}
- nativeID={this.emojiButtonID}
- />
+ <>
+
+
+
+ ([styles.chatItemSubmitButton, StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed))])}
+ nativeID={this.cancelButtonID}
+ onPress={this.deleteDraft}
+ hitSlop={{
+ top: 3, right: 3, bottom: 3, left: 3,
+ }}
+ >
+ {({hovered, pressed}) => (
+
+ )}
+
+
+
+
+
+ {
+ this.textInput = el;
+ this.props.forwardedRef(el);
+ }}
+ nativeID={this.messageEditInput}
+ onChangeText={this.updateDraft} // Debounced saveDraftComment
+ onKeyPress={this.triggerSaveOrCancel}
+ value={this.state.draft}
+ maxLines={16} // This is the same that slack has
+ style={[styles.textInputCompose, styles.flex1, styles.bgTransparent]}
+ onFocus={() => {
+ this.setState({isFocused: true});
+ ReportScrollManager.scrollToIndex({animated: true, index: this.props.index}, true);
+ toggleReportActionComposeView(false, this.props.isSmallScreenWidth);
+ }}
+ onBlur={(event) => {
+ this.setState({isFocused: false});
+ const relatedTargetId = lodashGet(event, 'nativeEvent.relatedTarget.id');
+
+ // Return to prevent re-render when save/cancel button is pressed which cancels the onPress event by re-rendering
+ if (_.contains([this.saveButtonID, this.cancelButtonID, this.emojiButtonID], relatedTargetId)) {
+ return;
+ }
+
+ if (this.messageEditInput === relatedTargetId) {
+ return;
+ }
+ openReportActionComposeViewWhenClosingMessageEdit(this.props.isSmallScreenWidth);
+ }}
+ selection={this.state.selection}
+ onSelectionChange={this.onSelectionChange}
+ />
+
+
+ InteractionManager.runAfterInteractions(() => this.textInput.focus())}
+ onEmojiSelected={this.addEmojiToTextBox}
+ nativeID={this.emojiButtonID}
+ />
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
+
+ >
);
}
}
diff --git a/src/styles/styles.js b/src/styles/styles.js
index fd9551b5b73c..81517fbebfd0 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1498,6 +1498,19 @@ const styles = {
flex: 1,
},
+ chatItemDraft: {
+ display: 'flex',
+ flexDirection: 'row',
+ paddingTop: 8,
+ paddingBottom: 8,
+ paddingLeft: 20,
+ paddingRight: 20,
+ },
+
+ chatItemReactionsDraftRight: {
+ marginLeft: 52,
+ },
+
// Be extremely careful when editing the compose styles, as it is easy to introduce regressions.
// Make sure you run the following tests against any changes: #12669
textInputCompose: addOutlineWidth({
@@ -1530,7 +1543,7 @@ const styles = {
editInputComposeSpacing: {
backgroundColor: themeColors.transparent,
- marginVertical: 6,
+ marginVertical: 8,
},
// composer padding should not be modified unless thoroughly tested against the cases in this PR: #12669