make renderError and renderLoading props optional for WebView

Summary:
@vjeux Making the renderError and renderLoading props optional for WebView by setting the default to be what's shown for the WebView example in UIExplorer. issue #349
Closes https://github.com/facebook/react-native/pull/512
Github Author: Don Yu <donyu8@gmail.com>

Test Plan: Imported from GitHub, without a `Test Plan:` line.
This commit is contained in:
Don Yu 2015-03-31 18:46:14 -07:00
parent 0ca3136371
commit 414d975370
2 changed files with 57 additions and 59 deletions

View File

@ -18,7 +18,6 @@
var React = require('react-native'); var React = require('react-native');
var StyleSheet = require('StyleSheet'); var StyleSheet = require('StyleSheet');
var { var {
ActivityIndicatorIOS,
StyleSheet, StyleSheet,
Text, Text,
TextInput, TextInput,
@ -95,8 +94,6 @@ var WebViewExample = React.createClass({
automaticallyAdjustContentInsets={false} automaticallyAdjustContentInsets={false}
style={styles.webView} style={styles.webView}
url={this.state.url} url={this.state.url}
renderError={this.renderError}
renderLoading={this.renderLoading}
onNavigationStateChange={this.onNavigationStateChange} onNavigationStateChange={this.onNavigationStateChange}
startInLoadingState={true} startInLoadingState={true}
/> />
@ -129,33 +126,6 @@ var WebViewExample = React.createClass({
}); });
}, },
renderError: function(errorDomain, errorCode, errorDesc) {
return (
<View style={styles.errorContainer}>
<Text style={styles.errorTextTitle}>
Error loading page
</Text>
<Text style={styles.errorText}>
{'Domain: ' + errorDomain}
</Text>
<Text style={styles.errorText}>
{'Error Code: ' + errorCode}
</Text>
<Text style={styles.errorText}>
{'Description: ' + errorDesc}
</Text>
</View>
);
},
renderLoading: function() {
return (
<View style={styles.loadingView}>
<ActivityIndicatorIOS />
</View>
);
},
onSubmitEditing: function(event) { onSubmitEditing: function(event) {
this.pressGoButton(); this.pressGoButton();
}, },
@ -230,28 +200,6 @@ var styles = StyleSheet.create({
borderRadius: 3, borderRadius: 3,
alignSelf: 'stretch', alignSelf: 'stretch',
}, },
loadingView: {
backgroundColor: BGWASH,
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
errorContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: BGWASH,
},
errorTextTitle: {
fontSize: 15,
fontWeight: '500',
marginBottom: 10,
},
errorText: {
fontSize: 14,
textAlign: 'center',
marginBottom: 2,
},
statusBar: { statusBar: {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',

View File

@ -11,10 +11,12 @@
*/ */
'use strict'; 'use strict';
var ActivityIndicatorIOS = require('ActivityIndicatorIOS');
var EdgeInsetsPropType = require('EdgeInsetsPropType'); var EdgeInsetsPropType = require('EdgeInsetsPropType');
var React = require('React'); var React = require('React');
var ReactIOSViewAttributes = require('ReactIOSViewAttributes'); var ReactIOSViewAttributes = require('ReactIOSViewAttributes');
var StyleSheet = require('StyleSheet'); var StyleSheet = require('StyleSheet');
var Text = require('Text');
var View = require('View'); var View = require('View');
var createReactIOSNativeComponentClass = require('createReactIOSNativeComponentClass'); var createReactIOSNativeComponentClass = require('createReactIOSNativeComponentClass');
@ -27,6 +29,7 @@ var RCTWebViewManager = require('NativeModules').WebViewManager;
var invariant = require('invariant'); var invariant = require('invariant');
var BGWASH = 'rgba(255,255,255,0.8)';
var RCT_WEBVIEW_REF = 'webview'; var RCT_WEBVIEW_REF = 'webview';
var WebViewState = keyMirror({ var WebViewState = keyMirror({
@ -52,16 +55,38 @@ type ErrorEvent = {
type Event = Object; type Event = Object;
var defaultRenderLoading = () => (
<View style={styles.loadingView}>
<ActivityIndicatorIOS />
</View>
);
var defaultRenderError = (errorDomain, errorCode, errorDesc) => (
<View style={styles.errorContainer}>
<Text style={styles.errorTextTitle}>
Error loading page
</Text>
<Text style={styles.errorText}>
{'Domain: ' + errorDomain}
</Text>
<Text style={styles.errorText}>
{'Error Code: ' + errorCode}
</Text>
<Text style={styles.errorText}>
{'Description: ' + errorDesc}
</Text>
</View>
);
var WebView = React.createClass({ var WebView = React.createClass({
statics: { statics: {
NavigationType: NavigationType, NavigationType: NavigationType,
}, },
propTypes: { propTypes: {
renderError: PropTypes.func.isRequired, // view to show if there's an error
renderLoading: PropTypes.func.isRequired, // loading indicator to show
url: PropTypes.string, url: PropTypes.string,
html: PropTypes.string, html: PropTypes.string,
renderError: PropTypes.func, // view to show if there's an error
renderLoading: PropTypes.func, // loading indicator to show
automaticallyAdjustContentInsets: PropTypes.bool, automaticallyAdjustContentInsets: PropTypes.bool,
shouldInjectAJAXHandler: PropTypes.bool, shouldInjectAJAXHandler: PropTypes.bool,
contentInset: EdgeInsetsPropType, contentInset: EdgeInsetsPropType,
@ -87,20 +112,23 @@ var WebView = React.createClass({
render: function() { render: function() {
var otherView = null; var otherView = null;
if (this.state.viewState === WebViewState.LOADING) { if (this.state.viewState === WebViewState.LOADING) {
otherView = this.props.renderLoading(); otherView = (this.props.renderLoading || defaultRenderLoading)();
} else if (this.state.viewState === WebViewState.ERROR) { } else if (this.state.viewState === WebViewState.ERROR) {
var errorEvent = this.state.lastErrorEvent; var errorEvent = this.state.lastErrorEvent;
invariant( invariant(
errorEvent != null, errorEvent != null,
'lastErrorEvent expected to be non-null' 'lastErrorEvent expected to be non-null'
); );
otherView = this.props.renderError( otherView = (this.props.renderError || defaultRenderError)(
errorEvent.domain, errorEvent.domain,
errorEvent.code, errorEvent.code,
errorEvent.description); errorEvent.description
);
} else if (this.state.viewState !== WebViewState.IDLE) { } else if (this.state.viewState !== WebViewState.IDLE) {
console.error('RCTWebView invalid state encountered: ' + this.state.loading); console.error(
'RCTWebView invalid state encountered: ' + this.state.loading
);
} }
var webViewStyles = [styles.container, this.props.style]; var webViewStyles = [styles.container, this.props.style];
@ -196,10 +224,32 @@ var styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
}, },
errorContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: BGWASH,
},
errorText: {
fontSize: 14,
textAlign: 'center',
marginBottom: 2,
},
errorTextTitle: {
fontSize: 15,
fontWeight: '500',
marginBottom: 10,
},
hidden: { hidden: {
height: 0, height: 0,
flex: 0, // disable 'flex:1' when hiding a View flex: 0, // disable 'flex:1' when hiding a View
}, },
loadingView: {
backgroundColor: BGWASH,
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
}); });
module.exports = WebView; module.exports = WebView;