[RN] NetworkActivityIndicator

The basic indicator is extracted into a LoadingIndicator component,
which then NetworkActivityIndicator displays (or not) based on network
activity.
This commit is contained in:
Saúl Ibarra Corretgé 2017-09-13 14:17:14 +02:00 committed by Lyubo Marinov
parent 21d419e517
commit 35da39becf
7 changed files with 90 additions and 19 deletions

View File

@ -10,7 +10,6 @@ import '../../mobile/audio-mode';
import '../../mobile/background';
import '../../mobile/external-api';
import '../../mobile/full-screen';
import '../../mobile/network-activity';
import '../../mobile/permissions';
import '../../mobile/proximity';
import '../../mobile/wake-lock';

View File

@ -0,0 +1,24 @@
/* @flow */
import React, { Component } from 'react';
import { ActivityIndicator } from 'react-native';
/**
* Simple wrapper around React Native's {@code ActivityIndicator}, which
* displays an animated (large) loading indicator.
*/
export default class LoadingIndicator extends Component {
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
return (
<ActivityIndicator
animating = { true }
size = { 'large' } />
);
}
}

View File

@ -1,3 +1,4 @@
export { default as Container } from './Container';
export { default as Link } from './Link';
export { default as LoadingIndicator } from './LoadingIndicator';
export { default as Text } from './Text';

View File

@ -0,0 +1,58 @@
/* @flow */
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { LoadingIndicator } from '../../../base/react';
/**
* The React <tt>Component</tt> which renders a progress indicator when there
* are ongoing network requests.
*/
class NetworkActivityIndicator extends Component {
/**
* <tt>NetworkActivityIndicator</tt> React <tt>Component</tt>'s prop types.
*
* @static
*/
static propTypes = {
/**
* Indicates whether there is network activity i.e. ongoing network
* requests.
*
* @private
*/
_networkActivity: PropTypes.bool
};
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
return this.props._networkActivity ? <LoadingIndicator /> : null;
}
}
/**
* Maps (parts of) the redux state to the React <tt>Component</tt> props of
* <tt>NetworkActivityIndicator</tt>.
*
* @param {Object} state - The redux state.
* @private
* @returns {{
* _networkActivity: boolean
* }}
*/
function _mapStateToProps(state) {
const { requests } = state['features/network-activity'];
return {
_networkActivity: Boolean(requests && requests.size)
};
}
export default connect(_mapStateToProps)(NetworkActivityIndicator);

View File

@ -0,0 +1,3 @@
export {
default as NetworkActivityIndicator
} from './NetworkActivityIndicator';

View File

@ -1,2 +1,4 @@
export * from './components';
import './middleware';
import './reducer';

View File

@ -2,10 +2,10 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { ActivityIndicator } from 'react-native';
import { connect } from 'react-redux';
import { destroyLocalTracks } from '../../base/tracks';
import { NetworkActivityIndicator } from '../../mobile/network-activity';
import { isWelcomePageAppEnabled } from '../functions';
import LocalVideoTrackUnderlay from './LocalVideoTrackUnderlay';
@ -23,14 +23,6 @@ class BlankPage extends Component {
* @static
*/
static propTypes = {
/**
* Indicates whether there is network activity i.e. ongoing network
* requests.
*
* @private
*/
_networkActivity: PropTypes.bool,
/**
* The indicator which determines whether <tt>WelcomePage</tt> is (to
* be) rendered.
@ -58,15 +50,12 @@ class BlankPage extends Component {
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @override
* @returns {ReactElement}
*/
render() {
return (
<LocalVideoTrackUnderlay style = { styles.blankPage }>
<ActivityIndicator
animating = { this.props._networkActivity }
size = { 'large' } />
<NetworkActivityIndicator />
</LocalVideoTrackUnderlay>
);
}
@ -79,16 +68,11 @@ class BlankPage extends Component {
* @param {Object} state - The redux state.
* @private
* @returns {{
* _networkActivity: boolean,
* _welcomePageEnabled: boolean
* }}
*/
function _mapStateToProps(state) {
const { requests } = state['features/network-activity'];
return {
_networkActivity:
Boolean(requests && (requests.length || requests.size)),
_welcomePageEnabled: isWelcomePageAppEnabled(state)
};
}