-
Notifications
You must be signed in to change notification settings - Fork 2.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2221 from kidroca/kidroca/report-view-loading-state
Added transition handling between the side drawer and chats
- Loading branch information
Showing
9 changed files
with
186 additions
and
113 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import {ActivityIndicator, StyleSheet, View} from 'react-native'; | ||
| import styles from '../styles/styles'; | ||
| import themeColors from '../styles/themes/default'; | ||
|
|
||
| const propTypes = { | ||
| /* Controls whether the loader is mounted and displayed */ | ||
| visible: PropTypes.bool.isRequired, | ||
| }; | ||
|
|
||
| /** | ||
| * Loading indication component intended to cover the whole page, while the page prepares for initial render | ||
| * | ||
| * @returns {JSX.Element} | ||
| */ | ||
| const FullScreenLoadingIndicator = ({visible}) => visible && ( | ||
| <View style={[StyleSheet.absoluteFillObject, styles.fullScreenLoading]}> | ||
| <ActivityIndicator color={themeColors.spinner} size="large" /> | ||
| </View> | ||
| ); | ||
|
|
||
| FullScreenLoadingIndicator.propTypes = propTypes; | ||
|
|
||
| export default FullScreenLoadingIndicator; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import {useIsDrawerOpen} from '@react-navigation/drawer'; | ||
| import getComponentDisplayName from '../libs/getComponentDisplayName'; | ||
|
|
||
| export const withDrawerPropTypes = { | ||
| isDrawerOpen: PropTypes.bool.isRequired, | ||
| }; | ||
|
|
||
| export default function withDrawerState(WrappedComponent) { | ||
| const HOC_Wrapper = (props) => { | ||
| const isDrawerOpen = useIsDrawerOpen(); | ||
|
|
||
| return ( | ||
| <WrappedComponent | ||
| // eslint-disable-next-line react/jsx-props-no-spreading | ||
| {...props} | ||
| isDrawerOpen={isDrawerOpen} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| HOC_Wrapper.displayName = `withDrawerState(${getComponentDisplayName(WrappedComponent)})`; | ||
| return HOC_Wrapper; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,54 +1,93 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import {withOnyx} from 'react-native-onyx'; | ||
| import {View} from 'react-native'; | ||
| import styles from '../../styles/styles'; | ||
| import ReportView from './report/ReportView'; | ||
| import ScreenWrapper from '../../components/ScreenWrapper'; | ||
| import HeaderView from './HeaderView'; | ||
| import Navigation from '../../libs/Navigation/Navigation'; | ||
| import ROUTES from '../../ROUTES'; | ||
| import ONYXKEYS from '../../ONYXKEYS'; | ||
| import FullScreenLoadingIndicator from '../../components/FullscreenLoadingIndicator'; | ||
|
|
||
| const propTypes = { | ||
| // id of the most recently viewed report | ||
| currentlyViewedReportID: PropTypes.string, | ||
| /* Navigation route context info provided by react navigation */ | ||
| route: PropTypes.shape({ | ||
| /* Route specific parameters used on this screen */ | ||
| params: PropTypes.shape({ | ||
| /* The ID of the report this screen should display */ | ||
| reportID: PropTypes.string, | ||
| }).isRequired, | ||
| }).isRequired, | ||
| }; | ||
|
|
||
| const defaultProps = { | ||
| currentlyViewedReportID: '0', | ||
| }; | ||
| class ReportScreen extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
|
|
||
| const ReportScreen = (props) => { | ||
| const activeReportID = parseInt(props.currentlyViewedReportID, 10); | ||
| if (!activeReportID) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <ScreenWrapper | ||
| style={[ | ||
| styles.appContent, | ||
| styles.flex1, | ||
| styles.flexColumn, | ||
| ]} | ||
| > | ||
| <HeaderView | ||
| reportID={activeReportID} | ||
| onNavigationMenuButtonClicked={() => Navigation.navigate(ROUTES.HOME)} | ||
| /> | ||
| <View style={[styles.dFlex, styles.flex1]}> | ||
| <ReportView reportID={activeReportID} /> | ||
| </View> | ||
| </ScreenWrapper> | ||
| ); | ||
| }; | ||
| this.state = { | ||
| isLoading: true, | ||
| }; | ||
| } | ||
|
|
||
| componentDidMount() { | ||
| this.prepareTransition(); | ||
| } | ||
|
|
||
| componentDidUpdate(prevProps) { | ||
| const reportChanged = this.props.route.params.reportID !== prevProps.route.params.reportID; | ||
|
|
||
| if (reportChanged) { | ||
| this.prepareTransition(); | ||
| } | ||
| } | ||
|
|
||
| componentWillUnmount() { | ||
| clearTimeout(this.loadingTimerId); | ||
| } | ||
|
|
||
| /** | ||
| * Get the currently viewed report ID as number | ||
| * | ||
| * @returns {Number} | ||
| */ | ||
| getReportID() { | ||
| const params = this.props.route.params; | ||
| return Number.parseInt(params.reportID, 10); | ||
| } | ||
|
|
||
| /** | ||
| * When reports change there's a brief time content is not ready to be displayed | ||
| * | ||
| * @returns {Boolean} | ||
| */ | ||
| shouldShowLoader() { | ||
| return this.state.isLoading || !this.getReportID(); | ||
| } | ||
|
|
||
| /** | ||
| * Configures a small loading transition of fixed time and proceeds with rendering available data | ||
| */ | ||
| prepareTransition() { | ||
| this.setState({isLoading: true}); | ||
|
|
||
| clearTimeout(this.loadingTimerId); | ||
| this.loadingTimerId = setTimeout(() => this.setState({isLoading: false}), 300); | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <ScreenWrapper style={[styles.appContent, styles.flex1]}> | ||
| <HeaderView | ||
| reportID={this.getReportID()} | ||
| onNavigationMenuButtonClicked={() => Navigation.navigate(ROUTES.HOME)} | ||
| /> | ||
|
|
||
| <FullScreenLoadingIndicator visible={this.shouldShowLoader()} /> | ||
|
|
||
| <ReportView reportID={this.getReportID()} /> | ||
| </ScreenWrapper> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| ReportScreen.displayName = 'ReportScreen'; | ||
| ReportScreen.propTypes = propTypes; | ||
| ReportScreen.defaultProps = defaultProps; | ||
| export default withOnyx({ | ||
| currentlyViewedReportID: { | ||
| key: ONYXKEYS.CURRENTLY_VIEWED_REPORTID, | ||
| }, | ||
| })(ReportScreen); | ||
| export default ReportScreen; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.