From 74798c01b87864bbabd91ff3c6f22604cf213e1b Mon Sep 17 00:00:00 2001 From: Mariusz Stanisz Date: Mon, 27 Mar 2023 12:52:33 +0200 Subject: [PATCH] Remove withDrawerState and isDrawerOpen (#3) --- src/components/withDrawerState.js | 42 ------------------- src/pages/home/ReportScreen.js | 9 ++-- src/pages/home/report/ReportActionCompose.js | 14 +------ src/pages/home/report/ReportActionsList.js | 6 +-- src/pages/home/report/ReportActionsView.js | 21 ++-------- src/pages/home/sidebar/SidebarLinks.js | 6 ++- .../SidebarScreen/BaseSidebarScreen.js | 8 +--- .../FloatingActionButtonAndPopover.js | 12 ------ 8 files changed, 14 insertions(+), 104 deletions(-) delete mode 100644 src/components/withDrawerState.js diff --git a/src/components/withDrawerState.js b/src/components/withDrawerState.js deleted file mode 100644 index ffb10f638abc..000000000000 --- a/src/components/withDrawerState.js +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import {useDrawerStatus} from '@react-navigation/drawer'; -import getComponentDisplayName from '../libs/getComponentDisplayName'; - -const withDrawerPropTypes = { - isDrawerOpen: PropTypes.bool.isRequired, -}; - -export default function withDrawerState(WrappedComponent) { - const WithDrawerState = (props) => { - // const drawerStatus = useDrawerStatus(); - - return ( - - ); - }; - - WithDrawerState.displayName = `withDrawerState(${getComponentDisplayName(WrappedComponent)})`; - WithDrawerState.propTypes = { - forwardedRef: PropTypes.oneOfType([ - PropTypes.func, - PropTypes.shape({current: PropTypes.instanceOf(React.Component)}), - ]), - }; - WithDrawerState.defaultProps = { - forwardedRef: undefined, - }; - return React.forwardRef((props, ref) => ( - // eslint-disable-next-line react/jsx-props-no-spreading - - )); -} - -export { - withDrawerPropTypes, -}; diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index ec0cebb3833b..64b88c4765ab 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -25,7 +25,6 @@ import compose from '../../libs/compose'; import networkPropTypes from '../../components/networkPropTypes'; import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions'; import OfflineWithFeedback from '../../components/OfflineWithFeedback'; -import withDrawerState, {withDrawerPropTypes} from '../../components/withDrawerState'; import ReportFooter from './report/ReportFooter'; import Banner from '../../components/Banner'; import withLocalize from '../../components/withLocalize'; @@ -35,6 +34,7 @@ import ReportHeaderSkeletonView from '../../components/ReportHeaderSkeletonView' import withViewportOffsetTop, {viewportOffsetTopPropTypes} from '../../components/withViewportOffsetTop'; import * as ReportActionsUtils from '../../libs/ReportActionsUtils'; import personalDetailsPropType from '../personalDetailsPropType'; +import withNavigationFocus from '../../components/withNavigationFocus'; const propTypes = { /** Navigation route context info provided by react navigation */ @@ -80,7 +80,6 @@ const propTypes = { personalDetails: PropTypes.objectOf(personalDetailsPropType), ...windowDimensionsPropTypes, - ...withDrawerPropTypes, ...viewportOffsetTopPropTypes, }; @@ -216,8 +215,7 @@ class ReportScreen extends React.Component { || (ReportUtils.isUserCreatedPolicyRoom(this.props.report) && !Permissions.canUsePolicyRooms(this.props.betas)); // When the ReportScreen is not open/in the viewport, we want to "freeze" it for performance reasons - const shouldFreeze = this.props.isSmallScreenWidth && this.props.isDrawerOpen; - + const shouldFreeze = this.props.isSmallScreenWidth && !this.props.isFocused; const isLoading = !reportID || !this.props.isSidebarLoaded || _.isEmpty(this.props.personalDetails); // the moment the ReportScreen becomes unfrozen we want to start the animation of the placeholder skeleton content @@ -297,7 +295,6 @@ class ReportScreen extends React.Component { reportActions={this.props.reportActions} report={this.props.report} isComposerFullSize={this.props.isComposerFullSize} - isDrawerOpen={this.props.isDrawerOpen} parentViewHeight={this.state.skeletonViewContainerHeight} /> this.setTextInputShouldClear(false)} - isDisabled={isComposeDisabled || isBlockedFromConcierge || this.props.disabled} + isDisabled={isBlockedFromConcierge || this.props.disabled} selection={this.state.selection} onSelectionChange={this.onSelectionChange} isFullComposerAvailable={this.state.isFullComposerAvailable} @@ -932,7 +921,6 @@ ReportActionCompose.defaultProps = defaultProps; export default compose( withWindowDimensions, - withDrawerState, withNavigationFocus, withLocalize, withNetwork(), diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js index 2e02a794ed03..2c18cba043f7 100644 --- a/src/pages/home/report/ReportActionsList.js +++ b/src/pages/home/report/ReportActionsList.js @@ -3,7 +3,6 @@ import React from 'react'; import {Animated} from 'react-native'; import _ from 'underscore'; import InvertedFlatList from '../../../components/InvertedFlatList'; -import withDrawerState, {withDrawerPropTypes} from '../../../components/withDrawerState'; import compose from '../../../libs/compose'; import * as ReportScrollManager from '../../../libs/ReportScrollManager'; import styles from '../../../styles/styles'; @@ -53,7 +52,6 @@ const propTypes = { /** Information about the network */ network: networkPropTypes.isRequired, - ...withDrawerPropTypes, ...windowDimensionsPropTypes, }; @@ -146,7 +144,6 @@ class ReportActionsList extends React.Component { render() { // Native mobile does not render updates flatlist the changes even though component did update called. // To notify there something changes we can use extraData prop to flatlist - const extraData = (!this.props.isDrawerOpen && this.props.isSmallScreenWidth) ? this.props.newMarkerReportActionID : undefined; const shouldShowReportRecipientLocalTime = ReportUtils.canShowReportRecipientLocalTime(this.props.personalDetails, this.props.report); return ( @@ -196,7 +193,7 @@ class ReportActionsList extends React.Component { this.props.onLayout(event); }} onScroll={this.props.onScroll} - extraData={extraData} + extraData={this.props.newMarkerReportActionID} /> ); @@ -207,7 +204,6 @@ ReportActionsList.propTypes = propTypes; ReportActionsList.defaultProps = defaultProps; export default compose( - withDrawerState, withWindowDimensions, withLocalize, withPersonalDetails(), diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js index 544606abf3ee..bf5df65d12ba 100755 --- a/src/pages/home/report/ReportActionsView.js +++ b/src/pages/home/report/ReportActionsView.js @@ -9,7 +9,6 @@ import Timing from '../../../libs/actions/Timing'; import CONST from '../../../CONST'; import compose from '../../../libs/compose'; import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; -import {withDrawerPropTypes} from '../../../components/withDrawerState'; import * as ReportScrollManager from '../../../libs/ReportScrollManager'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; import Performance from '../../../libs/Performance'; @@ -23,6 +22,7 @@ import EmojiPicker from '../../../components/EmojiPicker/EmojiPicker'; import * as ReportActionsUtils from '../../../libs/ReportActionsUtils'; import * as ReportUtils from '../../../libs/ReportUtils'; import reportPropTypes from '../../reportPropTypes'; +import withNavigationFocus from '../../../components/withNavigationFocus'; const propTypes = { /** The report currently being looked at */ @@ -38,7 +38,6 @@ const propTypes = { network: networkPropTypes.isRequired, ...windowDimensionsPropTypes, - ...withDrawerPropTypes, ...withLocalizePropTypes, }; @@ -154,10 +153,6 @@ class ReportActionsView extends React.Component { return true; } - if (this.props.isDrawerOpen !== nextProps.isDrawerOpen) { - return true; - } - if (lodashGet(this.props.report, 'hasOutstandingIOU') !== lodashGet(nextProps.report, 'hasOutstandingIOU')) { return true; } @@ -186,9 +181,8 @@ class ReportActionsView extends React.Component { // If the report was previously hidden by the side bar, or the view is expanded from mobile to desktop layout // we update the new marker position, mark the report as read, and fetch new report actions - const didSidebarClose = prevProps.isDrawerOpen && !this.props.isDrawerOpen; const didScreenSizeIncrease = prevProps.isSmallScreenWidth && !this.props.isSmallScreenWidth; - const didReportBecomeVisible = isReportFullyVisible && (didSidebarClose || didScreenSizeIncrease); + const didReportBecomeVisible = isReportFullyVisible && didScreenSizeIncrease; if (didReportBecomeVisible) { this.setState({ newMarkerReportActionID: ReportUtils.isUnread(this.props.report) @@ -206,14 +200,6 @@ class ReportActionsView extends React.Component { }); } - // When the user navigates to the LHN the ReportActionsView doesn't unmount and just remains hidden. - // The next time we navigate to the same report (e.g. by swiping or tapping the LHN row) we want the new marker to clear. - const didSidebarOpen = !prevProps.isDrawerOpen && this.props.isDrawerOpen; - const didUserNavigateToSidebarAfterReadingReport = didSidebarOpen && !ReportUtils.isUnread(this.props.report); - if (didUserNavigateToSidebarAfterReadingReport) { - this.setState({newMarkerReportActionID: ''}); - } - // Checks to see if a report comment has been manually "marked as unread". All other times when the lastReadTime // changes it will be because we marked the entire report as read. const didManuallyMarkReportAsUnread = (prevProps.report.lastReadTime !== this.props.report.lastReadTime) @@ -250,7 +236,7 @@ class ReportActionsView extends React.Component { * @returns {Boolean} */ getIsReportFullyVisible() { - const isSidebarCoveringReportView = this.props.isSmallScreenWidth && this.props.isDrawerOpen; + const isSidebarCoveringReportView = this.props.isSmallScreenWidth && !this.props.isFocused; return Visibility.isVisible() && !isSidebarCoveringReportView; } @@ -366,6 +352,7 @@ ReportActionsView.defaultProps = defaultProps; export default compose( Performance.withRenderTrace({id: ' rendering'}), withWindowDimensions, + withNavigationFocus, withLocalize, withNetwork(), )(ReportActionsView); diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index a060cada058b..98cde26e269c 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -31,6 +31,7 @@ import SidebarUtils from '../../../libs/SidebarUtils'; import reportPropTypes from '../../reportPropTypes'; import OfflineWithFeedback from '../../../components/OfflineWithFeedback'; import LHNSkeletonView from '../../../components/LHNSkeletonView'; +import withNavigationFocus from '../../../components/withNavigationFocus'; const propTypes = { /** Toggles the navigation menu open and closed */ @@ -132,14 +133,14 @@ class SidebarLinks extends React.Component { render() { const isLoading = _.isEmpty(this.props.personalDetails) || _.isEmpty(this.props.chatReports); - const shouldFreeze = this.props.isSmallScreenWidth && !this.props.isDrawerOpen && this.isSidebarLoaded; + const shouldFreeze = this.props.isSmallScreenWidth && !this.props.isFocused && this.isSidebarLoaded; const optionListItems = SidebarUtils.getOrderedReportIDs(this.props.reportIDFromRoute); const skeletonPlaceholder = ; return ( @@ -285,6 +286,7 @@ const policySelector = policy => policy && ({ export default compose( withLocalize, withCurrentUserPersonalDetails, + withNavigationFocus, withWindowDimensions, withOnyx({ // Note: It is very important that the keys subscribed to here are the same diff --git a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js index 0e99d72926f5..bbe4806deb76 100644 --- a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js +++ b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js @@ -8,9 +8,7 @@ import ROUTES from '../../../../ROUTES'; import Timing from '../../../../libs/actions/Timing'; import CONST from '../../../../CONST'; import Performance from '../../../../libs/Performance'; -import withDrawerState from '../../../../components/withDrawerState'; import withWindowDimensions, {windowDimensionsPropTypes} from '../../../../components/withWindowDimensions'; -import compose from '../../../../libs/compose'; import sidebarPropTypes from './sidebarPropTypes'; const propTypes = { @@ -60,7 +58,6 @@ class BaseSidebarScreen extends Component { insets={insets} onAvatarClick={this.navigateToSettings} isSmallScreenWidth={this.props.isSmallScreenWidth} - isDrawerOpen={this.props.isDrawerOpen} reportIDFromRoute={this.props.reportIDFromRoute} onLayout={this.props.onLayout} /> @@ -75,7 +72,4 @@ class BaseSidebarScreen extends Component { BaseSidebarScreen.propTypes = propTypes; -export default compose( - withWindowDimensions, - withDrawerState, -)(BaseSidebarScreen); +export default withWindowDimensions(BaseSidebarScreen); diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js index 426a50e68285..b0f18f83dfa7 100644 --- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js +++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js @@ -20,7 +20,6 @@ import ONYXKEYS from '../../../../ONYXKEYS'; import withNavigation from '../../../../components/withNavigation'; import * as Welcome from '../../../../libs/actions/Welcome'; import withNavigationFocus from '../../../../components/withNavigationFocus'; -import withDrawerState from '../../../../components/withDrawerState'; /** * @param {Object} [policy] @@ -98,11 +97,6 @@ class FloatingActionButtonAndPopover extends React.Component { * @return {Boolean} */ didScreenBecomeInactive(prevProps) { - // When the Drawer gets closed and ReportScreen is shown - if (!this.props.isDrawerOpen && prevProps.isDrawerOpen) { - return true; - } - // When any other page is opened over LHN if (!this.props.isFocused && prevProps.isFocused) { return true; @@ -118,11 +112,6 @@ class FloatingActionButtonAndPopover extends React.Component { * @return {Boolean} */ isScreenInactive() { - // When drawer is closed and Report page is open - if (this.props.isSmallScreenWidth && !this.props.isDrawerOpen) { - return true; - } - // When any other page is open if (!this.props.isFocused) { return true; @@ -241,7 +230,6 @@ export default compose( withLocalize, withNavigation, withNavigationFocus, - withDrawerState, withWindowDimensions, withOnyx({ allPolicies: {