From a0c5a6b67cebb6ae264563c3872faec74fce218c Mon Sep 17 00:00:00 2001 From: miroslav Date: Mon, 12 Dec 2022 17:57:05 +0100 Subject: [PATCH 1/3] fix composer hidden while loading messages --- src/components/DragAndDrop/index.js | 17 +++++++++++++++++ src/pages/home/ReportScreen.js | 12 ++++++++---- src/pages/home/report/ReportActionCompose.js | 18 +++++++++++------- src/pages/home/report/ReportFooter.js | 16 ++++++++++++---- 4 files changed, 48 insertions(+), 15 deletions(-) diff --git a/src/components/DragAndDrop/index.js b/src/components/DragAndDrop/index.js index b35c43126c98..48ec86732064 100644 --- a/src/components/DragAndDrop/index.js +++ b/src/components/DragAndDrop/index.js @@ -17,6 +17,9 @@ const propTypes = { /** Guard for accepting drops in drop zone. Drag event is passed to this function as first parameter. This prop is necessary to be inlined to satisfy the linter */ shouldAcceptDrop: PropTypes.func, + /** Whether drag & drop should be disabled */ + disabled: PropTypes.bool, + /** Rendered child component */ children: PropTypes.node.isRequired, }; @@ -33,12 +36,18 @@ const defaultProps = { } return false; }, + disabled: false, }; export default class DragAndDrop extends React.Component { constructor(props) { super(props); + if (props.disabled) { + this.isDisabled = true; + return; + } + this.throttledDragOverHandler = _.throttle(this.dragOverHandler.bind(this), 100); this.throttledDragNDropWindowResizeListener = _.throttle(this.dragNDropWindowResizeListener.bind(this), 100); this.dropZoneDragHandler = this.dropZoneDragHandler.bind(this); @@ -52,6 +61,10 @@ export default class DragAndDrop extends React.Component { } componentDidMount() { + if (this.isDisabled) { + return; + } + this.dropZone = document.getElementById(this.props.dropZoneId); this.dropZoneRect = this.calculateDropZoneClientReact(); document.addEventListener('dragover', this.dropZoneDragListener); @@ -62,6 +75,10 @@ export default class DragAndDrop extends React.Component { } componentWillUnmount() { + if (this.isDisabled) { + return; + } + document.removeEventListener('dragover', this.dropZoneDragListener); document.removeEventListener('dragenter', this.dropZoneDragListener); document.removeEventListener('dragleave', this.dropZoneDragListener); diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index eb55a8996e08..5b665c525b38 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -236,7 +236,10 @@ class ReportScreen extends React.Component { placeholder={( <> - + + + + )} > @@ -312,9 +315,10 @@ class ReportScreen extends React.Component { {/* Note: The report should be allowed to mount even if the initial report actions are not loaded. If we prevent rendering the report while they are loading then we'll unnecessarily unmount the ReportActionsView which will clear the new marker lines initial state. */} {(!this.isReportReadyForDisplay() || isLoadingInitialReportActions) && ( - + <> + + + )} diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 7811d1c25ee1..9fdae9d5bd1f 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -88,7 +88,10 @@ const propTypes = { isFocused: PropTypes.bool.isRequired, /** Is the composer full size */ - isComposerFullSize: PropTypes.bool.isRequired, + isComposerFullSize: PropTypes.bool, + + /** Whether user interactions should be disabled */ + disabled: PropTypes.bool, // The NVP describing a user's block status blockedFromConcierge: PropTypes.shape({ @@ -572,7 +575,7 @@ class ReportActionCompose extends React.Component { onMouseDown={e => e.preventDefault()} style={styles.composerSizeButton} underlayColor={themeColors.componentBG} - disabled={isBlockedFromConcierge} + disabled={isBlockedFromConcierge || this.props.disabled} > @@ -591,7 +594,7 @@ class ReportActionCompose extends React.Component { onMouseDown={e => e.preventDefault()} style={styles.composerSizeButton} underlayColor={themeColors.componentBG} - disabled={isBlockedFromConcierge} + disabled={isBlockedFromConcierge || this.props.disabled} > @@ -609,7 +612,7 @@ class ReportActionCompose extends React.Component { }} style={styles.chatItemAttachButton} underlayColor={themeColors.componentBG} - disabled={isBlockedFromConcierge} + disabled={isBlockedFromConcierge || this.props.disabled} > @@ -655,6 +658,7 @@ class ReportActionCompose extends React.Component { this.setState({isDraggingOver: false}); }} + disabled={this.props.disabled} > this.setTextInputShouldClear(false)} - isDisabled={isComposeDisabled || isBlockedFromConcierge} + isDisabled={isComposeDisabled || isBlockedFromConcierge || this.props.disabled} selection={this.state.selection} onSelectionChange={this.onSelectionChange} isFullComposerAvailable={this.state.isFullComposerAvailable} @@ -687,7 +691,7 @@ class ReportActionCompose extends React.Component { {canUseTouchScreen() && this.props.isMediumScreenWidth ? null : ( this.focus(true)} onEmojiSelected={this.addEmojiToTextBox} /> @@ -704,7 +708,7 @@ class ReportActionCompose extends React.Component { // Keep focus on the composer when Send message is clicked. // eslint-disable-next-line react/jsx-props-no-multi-spaces onMouseDown={e => e.preventDefault()} - disabled={this.state.isCommentEmpty || isBlockedFromConcierge || hasExceededMaxCommentLength} + disabled={this.state.isCommentEmpty || isBlockedFromConcierge || this.props.disabled || hasExceededMaxCommentLength} hitSlop={{ top: 3, right: 3, bottom: 3, left: 3, }} diff --git a/src/pages/home/report/ReportFooter.js b/src/pages/home/report/ReportFooter.js index 7c3a4191b390..3aa2feff5f80 100644 --- a/src/pages/home/report/ReportFooter.js +++ b/src/pages/home/report/ReportFooter.js @@ -21,16 +21,16 @@ import reportPropTypes from '../../reportPropTypes'; const propTypes = { /** Report object for the current report */ - report: reportPropTypes.isRequired, + report: reportPropTypes, /** Report actions for the current report */ - reportActions: PropTypes.objectOf(PropTypes.shape(reportActionPropTypes)).isRequired, + reportActions: PropTypes.objectOf(PropTypes.shape(reportActionPropTypes)), /** Offline status */ isOffline: PropTypes.bool.isRequired, /** Callback fired when the comment is submitted */ - onSubmitComment: PropTypes.func.isRequired, + onSubmitComment: PropTypes.func, /** Any errors associated with an attempt to create a chat */ // eslint-disable-next-line react/forbid-prop-types @@ -42,13 +42,20 @@ const propTypes = { /** Whether the composer input should be shown */ shouldShowComposeInput: PropTypes.bool, + /** Whether user interactions should be disabled */ + shouldDisableCompose: PropTypes.bool, + ...windowDimensionsPropTypes, }; const defaultProps = { - shouldShowComposeInput: true, + report: {reportID: '0'}, + reportActions: {}, + onSubmitComment: () => {}, errors: {}, pendingAction: null, + shouldShowComposeInput: true, + shouldDisableCompose: false, }; class ReportFooter extends React.Component { @@ -99,6 +106,7 @@ class ReportFooter extends React.Component { reportActions={this.props.reportActions} report={this.props.report} isComposerFullSize={this.props.isComposerFullSize} + disabled={this.props.shouldDisableCompose} /> From 4edc9e475fda88f3bbc6375b7330b1900001f116 Mon Sep 17 00:00:00 2001 From: miroslav Date: Wed, 21 Dec 2022 17:44:46 +0100 Subject: [PATCH 2/3] remove composer focused border when disabled --- src/pages/home/report/ReportActionCompose.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index fec72e84b783..82f376dfad1c 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -542,7 +542,7 @@ class ReportActionCompose extends React.Component { {shouldShowReportRecipientLocalTime && } Date: Wed, 21 Dec 2022 17:55:28 +0100 Subject: [PATCH 3/3] update disabled logic in DragAndDrop --- src/components/DragAndDrop/index.js | 35 ++++++++++++++++++++--------- 1 file changed, 24 insertions(+), 11 deletions(-) diff --git a/src/components/DragAndDrop/index.js b/src/components/DragAndDrop/index.js index 48ec86732064..09ce3c07dd1d 100644 --- a/src/components/DragAndDrop/index.js +++ b/src/components/DragAndDrop/index.js @@ -43,11 +43,6 @@ export default class DragAndDrop extends React.Component { constructor(props) { super(props); - if (props.disabled) { - this.isDisabled = true; - return; - } - this.throttledDragOverHandler = _.throttle(this.dragOverHandler.bind(this), 100); this.throttledDragNDropWindowResizeListener = _.throttle(this.dragNDropWindowResizeListener.bind(this), 100); this.dropZoneDragHandler = this.dropZoneDragHandler.bind(this); @@ -61,10 +56,32 @@ export default class DragAndDrop extends React.Component { } componentDidMount() { - if (this.isDisabled) { + if (this.props.disabled) { + return; + } + this.addEventListeners(); + } + + componentDidUpdate(prevProps) { + const isDisabled = this.props.disabled; + if (isDisabled === prevProps.disabled) { return; } + if (isDisabled) { + this.removeEventListeners(); + } else { + this.addEventListeners(); + } + } + componentWillUnmount() { + if (this.props.disabled) { + return; + } + this.removeEventListeners(); + } + + addEventListeners() { this.dropZone = document.getElementById(this.props.dropZoneId); this.dropZoneRect = this.calculateDropZoneClientReact(); document.addEventListener('dragover', this.dropZoneDragListener); @@ -74,11 +91,7 @@ export default class DragAndDrop extends React.Component { window.addEventListener('resize', this.throttledDragNDropWindowResizeListener); } - componentWillUnmount() { - if (this.isDisabled) { - return; - } - + removeEventListeners() { document.removeEventListener('dragover', this.dropZoneDragListener); document.removeEventListener('dragenter', this.dropZoneDragListener); document.removeEventListener('dragleave', this.dropZoneDragListener);