From c1f2def175f35870944d327cf41270fb7e0dbfb1 Mon Sep 17 00:00:00 2001 From: someone-here Date: Thu, 13 Apr 2023 22:57:58 +0530 Subject: [PATCH 1/3] Emoji suggestions offline opacity fix --- .../home/report/ReportActionCompose/index.js | 405 +++++++++--------- src/pages/home/report/ReportFooter.js | 22 +- 2 files changed, 214 insertions(+), 213 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/index.js b/src/pages/home/report/ReportActionCompose/index.js index 741bf50d1056..8d9d2902c406 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 */ @@ -741,214 +742,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} + /> )} From 7e2466f24b659ddded6c2d6a0f06715dd4aba551 Mon Sep 17 00:00:00 2001 From: someone-here Date: Thu, 13 Apr 2023 23:09:47 +0530 Subject: [PATCH 2/3] double quote -> single quote [style fix] --- src/pages/home/report/ReportActionCompose/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionCompose/index.js b/src/pages/home/report/ReportActionCompose/index.js index 8d9d2902c406..92aa8807ea04 100644 --- a/src/pages/home/report/ReportActionCompose/index.js +++ b/src/pages/home/report/ReportActionCompose/index.js @@ -52,7 +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"; +import OfflineWithFeedback from '../../../../components/OfflineWithFeedback'; const propTypes = { /** Beta features list */ From 865a2e1298ee71ad69a618ba17ed84c708a9ef73 Mon Sep 17 00:00:00 2001 From: someone-here Date: Sat, 15 Apr 2023 00:42:51 +0530 Subject: [PATCH 3/3] Added pendingAction to props --- src/pages/home/report/ReportActionCompose/index.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/pages/home/report/ReportActionCompose/index.js b/src/pages/home/report/ReportActionCompose/index.js index 92aa8807ea04..a27ad728205b 100644 --- a/src/pages/home/report/ReportActionCompose/index.js +++ b/src/pages/home/report/ReportActionCompose/index.js @@ -115,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, @@ -133,6 +136,7 @@ const defaultProps = { preferredSkinTone: CONST.EMOJI_DEFAULT_SKIN_TONE, frequentlyUsedEmojis: [], isComposerFullSize: false, + pendingAction: null, ...withCurrentUserPersonalDetailsDefaultProps, };