diff --git a/src/pages/home/report/ReportActionCompose/index.js b/src/pages/home/report/ReportActionCompose/index.js
index 741bf50d1056..a27ad728205b 100644
--- a/src/pages/home/report/ReportActionCompose/index.js
+++ b/src/pages/home/report/ReportActionCompose/index.js
@@ -52,6 +52,7 @@ import withKeyboardState, {keyboardStatePropTypes} from '../../../../components/
import ArrowKeyFocusManager from '../../../../components/ArrowKeyFocusManager';
import KeyboardShortcut from '../../../../libs/KeyboardShortcut';
import KeyDownAction from './keyDownAction';
+import OfflineWithFeedback from '../../../../components/OfflineWithFeedback';
const propTypes = {
/** Beta features list */
@@ -114,6 +115,9 @@ const propTypes = {
keywords: PropTypes.arrayOf(PropTypes.string),
})),
+ /** The type of action that's pending */
+ pendingAction: PropTypes.oneOf(['add', 'update', 'delete']),
+
...windowDimensionsPropTypes,
...withLocalizePropTypes,
...withCurrentUserPersonalDetailsPropTypes,
@@ -132,6 +136,7 @@ const defaultProps = {
preferredSkinTone: CONST.EMOJI_DEFAULT_SKIN_TONE,
frequentlyUsedEmojis: [],
isComposerFullSize: false,
+ pendingAction: null,
...withCurrentUserPersonalDetailsDefaultProps,
};
@@ -741,214 +746,220 @@ class ReportActionCompose extends React.Component {
this.props.isComposerFullSize && styles.chatItemFullComposeRow,
]}
>
- {shouldShowReportRecipientLocalTime && }
-
- }
+
- {({displayFileInModal}) => (
- <>
-
- {({openPicker}) => (
- <>
-
- {this.props.isComposerFullSize && (
-
- {
- e.preventDefault();
- this.setShouldShowSuggestionMenuToFalse();
- Report.setIsComposerFullSize(this.props.reportID, false);
- }}
-
- // Keep focus on the composer when Collapse button is clicked.
- onMouseDown={e => e.preventDefault()}
- style={styles.composerSizeButton}
- disabled={isBlockedFromConcierge || this.props.disabled}
- >
-
-
-
-
- )}
- {(!this.props.isComposerFullSize && this.state.isFullComposerAvailable) && (
-
- {
- e.preventDefault();
- this.setShouldShowSuggestionMenuToFalse();
- Report.setIsComposerFullSize(this.props.reportID, true);
- }}
-
- // Keep focus on the composer when Expand button is clicked.
- onMouseDown={e => e.preventDefault()}
- style={styles.composerSizeButton}
- disabled={isBlockedFromConcierge || this.props.disabled}
- >
-
-
+
+ {({displayFileInModal}) => (
+ <>
+
+ {({openPicker}) => (
+ <>
+
+ {this.props.isComposerFullSize && (
+
+ {
+ e.preventDefault();
+ this.setShouldShowSuggestionMenuToFalse();
+ Report.setIsComposerFullSize(this.props.reportID, false);
+ }}
+
+ // Keep focus on the composer when Collapse button is clicked.
+ onMouseDown={e => e.preventDefault()}
+ style={styles.composerSizeButton}
+ disabled={isBlockedFromConcierge || this.props.disabled}
+ >
+
+
+
+
+ )}
+ {(!this.props.isComposerFullSize && this.state.isFullComposerAvailable) && (
+
+ {
+ e.preventDefault();
+ this.setShouldShowSuggestionMenuToFalse();
+ Report.setIsComposerFullSize(this.props.reportID, true);
+ }}
+
+ // Keep focus on the composer when Expand button is clicked.
+ onMouseDown={e => e.preventDefault()}
+ style={styles.composerSizeButton}
+ disabled={isBlockedFromConcierge || this.props.disabled}
+ >
+
+
+
+ )}
+
+
+ this.actionButton = el}
+ onPress={(e) => {
+ e.preventDefault();
+
+ // Drop focus to avoid blue focus ring.
+ this.actionButton.blur();
+ this.setMenuVisibility(true);
+ }}
+ style={styles.composerSizeButton}
+ disabled={isBlockedFromConcierge || this.props.disabled}
+ >
+
+
+
- )}
-
-
- this.actionButton = el}
- onPress={(e) => {
- e.preventDefault();
-
- // Drop focus to avoid blue focus ring.
- this.actionButton.blur();
- this.setMenuVisibility(true);
- }}
- style={styles.composerSizeButton}
- disabled={isBlockedFromConcierge || this.props.disabled}
- >
-
-
-
-
-
- this.setMenuVisibility(false)}
- onItemSelected={() => this.setMenuVisibility(false)}
- anchorPosition={styles.createMenuPositionReportActionCompose}
- menuItems={[...this.getMoneyRequestOptions(reportParticipants),
- {
- icon: Expensicons.Paperclip,
- text: this.props.translate('reportActionCompose.addAttachment'),
- onSelected: () => {
- openPicker({
- onPicked: displayFileInModal,
- });
+
+ this.setMenuVisibility(false)}
+ onItemSelected={() => this.setMenuVisibility(false)}
+ anchorPosition={styles.createMenuPositionReportActionCompose}
+ menuItems={[...this.getMoneyRequestOptions(reportParticipants),
+ {
+ icon: Expensicons.Paperclip,
+ text: this.props.translate('reportActionCompose.addAttachment'),
+ onSelected: () => {
+ openPicker({
+ onPicked: displayFileInModal,
+ });
+ },
},
- },
- ]}
- />
-
- )}
-
-
- {
- this.setState({isDraggingOver: true});
- }}
- onDragLeave={() => {
- this.setState({isDraggingOver: false});
- }}
- onDrop={(e) => {
- e.preventDefault();
-
- const file = lodashGet(e, ['dataTransfer', 'files', 0]);
-
- displayFileInModal(file);
-
- this.setState({isDraggingOver: false});
- }}
- disabled={this.props.disabled}
- >
- this.updateComment(comment, true)}
- onKeyPress={this.triggerHotkeyActions}
- style={[styles.textInputCompose, this.props.isComposerFullSize ? styles.textInputFullCompose : styles.flex4]}
- maxLines={this.state.maxLines}
- onFocus={() => this.setIsFocused(true)}
- onBlur={() => {
- this.setIsFocused(false);
- this.resetSuggestedEmojis();
+ ]}
+ />
+
+ )}
+
+
+ {
+ this.setState({isDraggingOver: true});
}}
- onPasteFile={displayFileInModal}
- shouldClear={this.state.textInputShouldClear}
- onClear={() => this.setTextInputShouldClear(false)}
- isDisabled={isComposeDisabled || isBlockedFromConcierge || this.props.disabled}
- selection={this.state.selection}
- onSelectionChange={this.onSelectionChange}
- isFullComposerAvailable={this.state.isFullComposerAvailable}
- setIsFullComposerAvailable={this.setIsFullComposerAvailable}
- isComposerFullSize={this.props.isComposerFullSize}
- value={this.state.value}
- numberOfLines={this.props.numberOfLines}
- onNumberOfLinesChange={this.updateNumberOfLines}
- onLayout={(e) => {
- const composerHeight = e.nativeEvent.layout.height;
- if (this.state.composerHeight === composerHeight) {
- return;
- }
- this.setState({composerHeight});
+ onDragLeave={() => {
+ this.setState({isDraggingOver: false});
}}
- onScroll={() => this.setShouldShowSuggestionMenuToFalse()}
- />
-
-
-
- )}
-
- {DeviceCapabilities.canUseTouchScreen() && this.props.isMediumScreenWidth ? null : (
- {
- this.focus(true);
- this.setState({isEmojiPickerVisible: false});
- }}
- onEmojiSelected={this.addEmojiToTextBox}
- onWillShow={() => this.setState({isEmojiPickerVisible: true})}
- />
- )}
- {
+ e.preventDefault();
- // Keep focus on the composer when Send message is clicked.
- onMouseDown={e => e.preventDefault()}
- >
-
-
+ this.updateComment(comment, true)}
+ onKeyPress={this.triggerHotkeyActions}
+ style={[styles.textInputCompose, this.props.isComposerFullSize ? styles.textInputFullCompose : styles.flex4]}
+ maxLines={this.state.maxLines}
+ onFocus={() => this.setIsFocused(true)}
+ onBlur={() => {
+ this.setIsFocused(false);
+ this.resetSuggestedEmojis();
+ }}
+ onPasteFile={displayFileInModal}
+ shouldClear={this.state.textInputShouldClear}
+ onClear={() => this.setTextInputShouldClear(false)}
+ isDisabled={isComposeDisabled || isBlockedFromConcierge || this.props.disabled}
+ selection={this.state.selection}
+ onSelectionChange={this.onSelectionChange}
+ isFullComposerAvailable={this.state.isFullComposerAvailable}
+ setIsFullComposerAvailable={this.setIsFullComposerAvailable}
+ isComposerFullSize={this.props.isComposerFullSize}
+ value={this.state.value}
+ numberOfLines={this.props.numberOfLines}
+ onNumberOfLinesChange={this.updateNumberOfLines}
+ onLayout={(e) => {
+ const composerHeight = e.nativeEvent.layout.height;
+ if (this.state.composerHeight === composerHeight) {
+ return;
+ }
+ this.setState({composerHeight});
+ }}
+ onScroll={() => this.setShouldShowSuggestionMenuToFalse()}
+ />
+
+
+
+ )}
+
+ {DeviceCapabilities.canUseTouchScreen() && this.props.isMediumScreenWidth ? null : (
+ {
+ this.focus(true);
+ this.setState({isEmojiPickerVisible: false});
}}
- >
-
-
-
+ onEmojiSelected={this.addEmojiToTextBox}
+ onWillShow={() => this.setState({isEmojiPickerVisible: true})}
+ />
+ )}
+ e.preventDefault()}
+ >
+
+
+
+
+
+
-
-
- {!this.props.isSmallScreenWidth && }
-
-
-
+
+ {!this.props.isSmallScreenWidth && }
+
+
+
+
{this.state.isDraggingOver && }
{!_.isEmpty(this.state.suggestedEmojis) && this.state.shouldShowSuggestionMenu && (
-
-
-
+ isComposerFullSize={this.props.isComposerFullSize}
+ disabled={this.props.shouldDisableCompose}
+ />
)}