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} + /> + + + + + + + + + - -