mirror of
https://github.com/status-im/react-native.git
synced 2025-01-28 02:04:55 +00:00
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:
parent
0ca3136371
commit
414d975370
@ -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',
|
||||||
|
@ -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;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user