Skip to content

Commit 74798c0

Browse files
staszekscpadamgrzybowski
staszekscp
authored and
adamgrzybowski
committed
Remove withDrawerState and isDrawerOpen (#3)
1 parent f432729 commit 74798c0

8 files changed

+14
-104
lines changed

‎src/components/withDrawerState.js

-42
This file was deleted.

‎src/pages/home/ReportScreen.js

+3-6
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ import compose from '../../libs/compose';
2525
import networkPropTypes from '../../components/networkPropTypes';
2626
import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions';
2727
import OfflineWithFeedback from '../../components/OfflineWithFeedback';
28-
import withDrawerState, {withDrawerPropTypes} from '../../components/withDrawerState';
2928
import ReportFooter from './report/ReportFooter';
3029
import Banner from '../../components/Banner';
3130
import withLocalize from '../../components/withLocalize';
@@ -35,6 +34,7 @@ import ReportHeaderSkeletonView from '../../components/ReportHeaderSkeletonView'
3534
import withViewportOffsetTop, {viewportOffsetTopPropTypes} from '../../components/withViewportOffsetTop';
3635
import * as ReportActionsUtils from '../../libs/ReportActionsUtils';
3736
import personalDetailsPropType from '../personalDetailsPropType';
37+
import withNavigationFocus from '../../components/withNavigationFocus';
3838

3939
const propTypes = {
4040
/** Navigation route context info provided by react navigation */
@@ -80,7 +80,6 @@ const propTypes = {
8080
personalDetails: PropTypes.objectOf(personalDetailsPropType),
8181

8282
...windowDimensionsPropTypes,
83-
...withDrawerPropTypes,
8483
...viewportOffsetTopPropTypes,
8584
};
8685

@@ -216,8 +215,7 @@ class ReportScreen extends React.Component {
216215
|| (ReportUtils.isUserCreatedPolicyRoom(this.props.report) && !Permissions.canUsePolicyRooms(this.props.betas));
217216

218217
// When the ReportScreen is not open/in the viewport, we want to "freeze" it for performance reasons
219-
const shouldFreeze = this.props.isSmallScreenWidth && this.props.isDrawerOpen;
220-
218+
const shouldFreeze = this.props.isSmallScreenWidth && !this.props.isFocused;
221219
const isLoading = !reportID || !this.props.isSidebarLoaded || _.isEmpty(this.props.personalDetails);
222220

223221
// 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 {
297295
reportActions={this.props.reportActions}
298296
report={this.props.report}
299297
isComposerFullSize={this.props.isComposerFullSize}
300-
isDrawerOpen={this.props.isDrawerOpen}
301298
parentViewHeight={this.state.skeletonViewContainerHeight}
302299
/>
303300
<ReportFooter
@@ -336,7 +333,7 @@ export default compose(
336333
withViewportOffsetTop,
337334
withLocalize,
338335
withWindowDimensions,
339-
withDrawerState,
336+
withNavigationFocus,
340337
withNetwork(),
341338
withOnyx({
342339
isSidebarLoaded: {

‎src/pages/home/report/ReportActionCompose.js

+1-13
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ import AttachmentModal from '../../../components/AttachmentModal';
2222
import compose from '../../../libs/compose';
2323
import PopoverMenu from '../../../components/PopoverMenu';
2424
import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
25-
import withDrawerState from '../../../components/withDrawerState';
2625
import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
2726
import willBlurTextInputOnTapOutside from '../../../libs/willBlurTextInputOnTapOutside';
2827
import CONST from '../../../CONST';
@@ -39,7 +38,6 @@ import * as User from '../../../libs/actions/User';
3938
import Tooltip from '../../../components/Tooltip';
4039
import EmojiPickerButton from '../../../components/EmojiPicker/EmojiPickerButton';
4140
import * as DeviceCapabilities from '../../../libs/DeviceCapabilities';
42-
import toggleReportActionComposeView from '../../../libs/toggleReportActionComposeView';
4341
import OfflineIndicator from '../../../components/OfflineIndicator';
4442
import ExceededCommentLength from '../../../components/ExceededCommentLength';
4543
import withNavigationFocus from '../../../components/withNavigationFocus';
@@ -83,9 +81,6 @@ const propTypes = {
8381
/** Array of report actions for this report */
8482
reportActions: PropTypes.arrayOf(PropTypes.shape(reportActionPropTypes)),
8583

86-
/** Is the report view covered by the drawer */
87-
isDrawerOpen: PropTypes.bool.isRequired,
88-
8984
/** Is the window width narrow, like on a mobile device */
9085
isSmallScreenWidth: PropTypes.bool.isRequired,
9186

@@ -224,11 +219,6 @@ class ReportActionCompose extends React.Component {
224219
}
225220

226221
componentDidUpdate(prevProps) {
227-
const sidebarOpened = !prevProps.isDrawerOpen && this.props.isDrawerOpen;
228-
if (sidebarOpened) {
229-
toggleReportActionComposeView(true);
230-
}
231-
232222
// We want to focus or refocus the input when a modal has been closed and the underlying screen is focused.
233223
// We avoid doing this on native platforms since the software keyboard popping
234224
// open creates a jarring and broken UX.
@@ -681,7 +671,6 @@ class ReportActionCompose extends React.Component {
681671
&& !this.props.isComposerFullSize;
682672

683673
// Prevents focusing and showing the keyboard while the drawer is covering the chat.
684-
const isComposeDisabled = this.props.isDrawerOpen && this.props.isSmallScreenWidth;
685674
const isBlockedFromConcierge = ReportUtils.chatIncludesConcierge(this.props.report) && User.isBlockedFromConcierge(this.props.blockedFromConcierge);
686675
const inputPlaceholder = this.getInputPlaceholder();
687676
const shouldUseFocusedColor = !isBlockedFromConcierge && !this.props.disabled && (this.state.isFocused || this.state.isDraggingOver);
@@ -835,7 +824,7 @@ class ReportActionCompose extends React.Component {
835824
onPasteFile={displayFileInModal}
836825
shouldClear={this.state.textInputShouldClear}
837826
onClear={() => this.setTextInputShouldClear(false)}
838-
isDisabled={isComposeDisabled || isBlockedFromConcierge || this.props.disabled}
827+
isDisabled={isBlockedFromConcierge || this.props.disabled}
839828
selection={this.state.selection}
840829
onSelectionChange={this.onSelectionChange}
841830
isFullComposerAvailable={this.state.isFullComposerAvailable}
@@ -932,7 +921,6 @@ ReportActionCompose.defaultProps = defaultProps;
932921

933922
export default compose(
934923
withWindowDimensions,
935-
withDrawerState,
936924
withNavigationFocus,
937925
withLocalize,
938926
withNetwork(),

‎src/pages/home/report/ReportActionsList.js

+1-5
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import React from 'react';
33
import {Animated} from 'react-native';
44
import _ from 'underscore';
55
import InvertedFlatList from '../../../components/InvertedFlatList';
6-
import withDrawerState, {withDrawerPropTypes} from '../../../components/withDrawerState';
76
import compose from '../../../libs/compose';
87
import * as ReportScrollManager from '../../../libs/ReportScrollManager';
98
import styles from '../../../styles/styles';
@@ -53,7 +52,6 @@ const propTypes = {
5352
/** Information about the network */
5453
network: networkPropTypes.isRequired,
5554

56-
...withDrawerPropTypes,
5755
...windowDimensionsPropTypes,
5856
};
5957

@@ -146,7 +144,6 @@ class ReportActionsList extends React.Component {
146144
render() {
147145
// Native mobile does not render updates flatlist the changes even though component did update called.
148146
// To notify there something changes we can use extraData prop to flatlist
149-
const extraData = (!this.props.isDrawerOpen && this.props.isSmallScreenWidth) ? this.props.newMarkerReportActionID : undefined;
150147
const shouldShowReportRecipientLocalTime = ReportUtils.canShowReportRecipientLocalTime(this.props.personalDetails, this.props.report);
151148
return (
152149
<Animated.View style={[StyleUtils.fade(this.state.fadeInAnimation), styles.flex1]}>
@@ -196,7 +193,7 @@ class ReportActionsList extends React.Component {
196193
this.props.onLayout(event);
197194
}}
198195
onScroll={this.props.onScroll}
199-
extraData={extraData}
196+
extraData={this.props.newMarkerReportActionID}
200197
/>
201198
</Animated.View>
202199
);
@@ -207,7 +204,6 @@ ReportActionsList.propTypes = propTypes;
207204
ReportActionsList.defaultProps = defaultProps;
208205

209206
export default compose(
210-
withDrawerState,
211207
withWindowDimensions,
212208
withLocalize,
213209
withPersonalDetails(),

‎src/pages/home/report/ReportActionsView.js

+4-17
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import Timing from '../../../libs/actions/Timing';
99
import CONST from '../../../CONST';
1010
import compose from '../../../libs/compose';
1111
import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
12-
import {withDrawerPropTypes} from '../../../components/withDrawerState';
1312
import * as ReportScrollManager from '../../../libs/ReportScrollManager';
1413
import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
1514
import Performance from '../../../libs/Performance';
@@ -23,6 +22,7 @@ import EmojiPicker from '../../../components/EmojiPicker/EmojiPicker';
2322
import * as ReportActionsUtils from '../../../libs/ReportActionsUtils';
2423
import * as ReportUtils from '../../../libs/ReportUtils';
2524
import reportPropTypes from '../../reportPropTypes';
25+
import withNavigationFocus from '../../../components/withNavigationFocus';
2626

2727
const propTypes = {
2828
/** The report currently being looked at */
@@ -38,7 +38,6 @@ const propTypes = {
3838
network: networkPropTypes.isRequired,
3939

4040
...windowDimensionsPropTypes,
41-
...withDrawerPropTypes,
4241
...withLocalizePropTypes,
4342
};
4443

@@ -154,10 +153,6 @@ class ReportActionsView extends React.Component {
154153
return true;
155154
}
156155

157-
if (this.props.isDrawerOpen !== nextProps.isDrawerOpen) {
158-
return true;
159-
}
160-
161156
if (lodashGet(this.props.report, 'hasOutstandingIOU') !== lodashGet(nextProps.report, 'hasOutstandingIOU')) {
162157
return true;
163158
}
@@ -186,9 +181,8 @@ class ReportActionsView extends React.Component {
186181

187182
// If the report was previously hidden by the side bar, or the view is expanded from mobile to desktop layout
188183
// we update the new marker position, mark the report as read, and fetch new report actions
189-
const didSidebarClose = prevProps.isDrawerOpen && !this.props.isDrawerOpen;
190184
const didScreenSizeIncrease = prevProps.isSmallScreenWidth && !this.props.isSmallScreenWidth;
191-
const didReportBecomeVisible = isReportFullyVisible && (didSidebarClose || didScreenSizeIncrease);
185+
const didReportBecomeVisible = isReportFullyVisible && didScreenSizeIncrease;
192186
if (didReportBecomeVisible) {
193187
this.setState({
194188
newMarkerReportActionID: ReportUtils.isUnread(this.props.report)
@@ -206,14 +200,6 @@ class ReportActionsView extends React.Component {
206200
});
207201
}
208202

209-
// When the user navigates to the LHN the ReportActionsView doesn't unmount and just remains hidden.
210-
// 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.
211-
const didSidebarOpen = !prevProps.isDrawerOpen && this.props.isDrawerOpen;
212-
const didUserNavigateToSidebarAfterReadingReport = didSidebarOpen && !ReportUtils.isUnread(this.props.report);
213-
if (didUserNavigateToSidebarAfterReadingReport) {
214-
this.setState({newMarkerReportActionID: ''});
215-
}
216-
217203
// Checks to see if a report comment has been manually "marked as unread". All other times when the lastReadTime
218204
// changes it will be because we marked the entire report as read.
219205
const didManuallyMarkReportAsUnread = (prevProps.report.lastReadTime !== this.props.report.lastReadTime)
@@ -250,7 +236,7 @@ class ReportActionsView extends React.Component {
250236
* @returns {Boolean}
251237
*/
252238
getIsReportFullyVisible() {
253-
const isSidebarCoveringReportView = this.props.isSmallScreenWidth && this.props.isDrawerOpen;
239+
const isSidebarCoveringReportView = this.props.isSmallScreenWidth && !this.props.isFocused;
254240
return Visibility.isVisible() && !isSidebarCoveringReportView;
255241
}
256242

@@ -366,6 +352,7 @@ ReportActionsView.defaultProps = defaultProps;
366352
export default compose(
367353
Performance.withRenderTrace({id: '<ReportActionsView> rendering'}),
368354
withWindowDimensions,
355+
withNavigationFocus,
369356
withLocalize,
370357
withNetwork(),
371358
)(ReportActionsView);

‎src/pages/home/sidebar/SidebarLinks.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import SidebarUtils from '../../../libs/SidebarUtils';
3131
import reportPropTypes from '../../reportPropTypes';
3232
import OfflineWithFeedback from '../../../components/OfflineWithFeedback';
3333
import LHNSkeletonView from '../../../components/LHNSkeletonView';
34+
import withNavigationFocus from '../../../components/withNavigationFocus';
3435

3536
const propTypes = {
3637
/** Toggles the navigation menu open and closed */
@@ -132,14 +133,14 @@ class SidebarLinks extends React.Component {
132133

133134
render() {
134135
const isLoading = _.isEmpty(this.props.personalDetails) || _.isEmpty(this.props.chatReports);
135-
const shouldFreeze = this.props.isSmallScreenWidth && !this.props.isDrawerOpen && this.isSidebarLoaded;
136+
const shouldFreeze = this.props.isSmallScreenWidth && !this.props.isFocused && this.isSidebarLoaded;
136137
const optionListItems = SidebarUtils.getOrderedReportIDs(this.props.reportIDFromRoute);
137138

138139
const skeletonPlaceholder = <LHNSkeletonView shouldAnimate={!shouldFreeze} />;
139140

140141
return (
141142
<View
142-
accessibilityElementsHidden={this.props.isSmallScreenWidth && !this.props.isDrawerOpen}
143+
accessibilityElementsHidden={this.props.isSmallScreenWidth && !this.props.isFocused}
143144
accessibilityLabel={this.props.translate('sidebarScreen.listOfChats')}
144145
style={[styles.flex1, styles.h100]}
145146
>
@@ -285,6 +286,7 @@ const policySelector = policy => policy && ({
285286
export default compose(
286287
withLocalize,
287288
withCurrentUserPersonalDetails,
289+
withNavigationFocus,
288290
withWindowDimensions,
289291
withOnyx({
290292
// Note: It is very important that the keys subscribed to here are the same

‎src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js

+1-7
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,7 @@ import ROUTES from '../../../../ROUTES';
88
import Timing from '../../../../libs/actions/Timing';
99
import CONST from '../../../../CONST';
1010
import Performance from '../../../../libs/Performance';
11-
import withDrawerState from '../../../../components/withDrawerState';
1211
import withWindowDimensions, {windowDimensionsPropTypes} from '../../../../components/withWindowDimensions';
13-
import compose from '../../../../libs/compose';
1412
import sidebarPropTypes from './sidebarPropTypes';
1513

1614
const propTypes = {
@@ -60,7 +58,6 @@ class BaseSidebarScreen extends Component {
6058
insets={insets}
6159
onAvatarClick={this.navigateToSettings}
6260
isSmallScreenWidth={this.props.isSmallScreenWidth}
63-
isDrawerOpen={this.props.isDrawerOpen}
6461
reportIDFromRoute={this.props.reportIDFromRoute}
6562
onLayout={this.props.onLayout}
6663
/>
@@ -75,7 +72,4 @@ class BaseSidebarScreen extends Component {
7572

7673
BaseSidebarScreen.propTypes = propTypes;
7774

78-
export default compose(
79-
withWindowDimensions,
80-
withDrawerState,
81-
)(BaseSidebarScreen);
75+
export default withWindowDimensions(BaseSidebarScreen);

‎src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js

-12
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ import ONYXKEYS from '../../../../ONYXKEYS';
2020
import withNavigation from '../../../../components/withNavigation';
2121
import * as Welcome from '../../../../libs/actions/Welcome';
2222
import withNavigationFocus from '../../../../components/withNavigationFocus';
23-
import withDrawerState from '../../../../components/withDrawerState';
2423

2524
/**
2625
* @param {Object} [policy]
@@ -98,11 +97,6 @@ class FloatingActionButtonAndPopover extends React.Component {
9897
* @return {Boolean}
9998
*/
10099
didScreenBecomeInactive(prevProps) {
101-
// When the Drawer gets closed and ReportScreen is shown
102-
if (!this.props.isDrawerOpen && prevProps.isDrawerOpen) {
103-
return true;
104-
}
105-
106100
// When any other page is opened over LHN
107101
if (!this.props.isFocused && prevProps.isFocused) {
108102
return true;
@@ -118,11 +112,6 @@ class FloatingActionButtonAndPopover extends React.Component {
118112
* @return {Boolean}
119113
*/
120114
isScreenInactive() {
121-
// When drawer is closed and Report page is open
122-
if (this.props.isSmallScreenWidth && !this.props.isDrawerOpen) {
123-
return true;
124-
}
125-
126115
// When any other page is open
127116
if (!this.props.isFocused) {
128117
return true;
@@ -241,7 +230,6 @@ export default compose(
241230
withLocalize,
242231
withNavigation,
243232
withNavigationFocus,
244-
withDrawerState,
245233
withWindowDimensions,
246234
withOnyx({
247235
allPolicies: {

0 commit comments

Comments
 (0)