From e5761f210ecd463d36b329874c522bb46ad57673 Mon Sep 17 00:00:00 2001 From: Ali Najafizadeh Date: Tue, 7 Jul 2015 13:56:15 -0400 Subject: [PATCH] prepration for test with new way of extending component --- example/WebViewBridgeExample/package.json | 2 +- jsx/old-webview-bridge.js | 266 ++++++++++++++++++++ jsx/webview-bridge.js | 287 +++------------------- 3 files changed, 303 insertions(+), 252 deletions(-) create mode 100644 jsx/old-webview-bridge.js diff --git a/example/WebViewBridgeExample/package.json b/example/WebViewBridgeExample/package.json index 046882a..524be94 100644 --- a/example/WebViewBridgeExample/package.json +++ b/example/WebViewBridgeExample/package.json @@ -6,7 +6,7 @@ "start": "node_modules/react-native/packager/packager.sh" }, "dependencies": { - "react-native": "^0.5.0", + "react-native": "^0.6.0", "react-native-webview-bridge": "0.1.0" } } diff --git a/jsx/old-webview-bridge.js b/jsx/old-webview-bridge.js new file mode 100644 index 0000000..084ce54 --- /dev/null +++ b/jsx/old-webview-bridge.js @@ -0,0 +1,266 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * Modified by Ali Najafizadeh (github.com/alinz) + * + * @flow + */ +'use strict'; + +var ActivityIndicatorIOS = require('ActivityIndicatorIOS'); +var EdgeInsetsPropType = require('EdgeInsetsPropType'); +var React = require('React'); +var StyleSheet = require('StyleSheet'); +var Text = require('Text'); +var View = require('View'); + +var invariant = require('invariant'); +var keyMirror = require('keyMirror'); +var requireNativeComponent = require('requireNativeComponent'); + +var PropTypes = React.PropTypes; +var WebViewExManager = require('NativeModules').WebViewExManager; + +var BGWASH = 'rgba(255,255,255,0.8)'; +var RCT_WEBVIEW_REF = 'webviewex'; + +var WebViewState = keyMirror({ + IDLE: null, + LOADING: null, + ERROR: null, +}); + +var NavigationType = { + click: WebViewExManager.NavigationType.LinkClicked, + formsubmit: WebViewExManager.NavigationType.FormSubmitted, + backforward: WebViewExManager.NavigationType.BackForward, + reload: WebViewExManager.NavigationType.Reload, + formresubmit: WebViewExManager.NavigationType.FormResubmitted, + other: WebViewExManager.NavigationType.Other, +}; + +type ErrorEvent = { + domain: any; + code: any; + description: any; +} + +type Event = Object; + +var defaultRenderLoading = () => ( + + + +); +var defaultRenderError = (errorDomain, errorCode, errorDesc) => ( + + + Error loading page + + + {'Domain: ' + errorDomain} + + + {'Error Code: ' + errorCode} + + + {'Description: ' + errorDesc} + + +); + +var WebView = React.createClass({ + statics: { + NavigationType: NavigationType, + }, + + propTypes: { + url: PropTypes.string, + html: PropTypes.string, + renderError: PropTypes.func, // view to show if there's an error + renderLoading: PropTypes.func, // loading indicator to show + bounces: PropTypes.bool, + scrollEnabled: PropTypes.bool, + automaticallyAdjustContentInsets: PropTypes.bool, + shouldInjectAJAXHandler: PropTypes.bool, + contentInset: EdgeInsetsPropType, + onNavigationStateChange: PropTypes.func, + startInLoadingState: PropTypes.bool, // force WebViewEx to show loadingView on first load + style: View.propTypes.style, + /** + * Used for android only, JS is enabled by default for WebViewEx on iOS + */ + javaScriptEnabledAndroid: PropTypes.bool, + }, + + getInitialState: function() { + return { + viewState: WebViewState.IDLE, + lastErrorEvent: (null: ?ErrorEvent), + startInLoadingState: true, + }; + }, + + componentWillMount: function() { + if (this.props.startInLoadingState) { + this.setState({viewState: WebViewState.LOADING}); + } + }, + + render: function() { + var otherView = null; + + if (this.state.viewState === WebViewState.LOADING) { + otherView = (this.props.renderLoading || defaultRenderLoading)(); + } else if (this.state.viewState === WebViewState.ERROR) { + var errorEvent = this.state.lastErrorEvent; + invariant( + errorEvent != null, + 'lastErrorEvent expected to be non-null' + ); + otherView = (this.props.renderError || defaultRenderError)( + errorEvent.domain, + errorEvent.code, + errorEvent.description + ); + } else if (this.state.viewState !== WebViewState.IDLE) { + console.error( + 'WebViewEx invalid state encountered: ' + this.state.loading + ); + } + + var webViewStyles = [styles.container, styles.webView, this.props.style]; + if (this.state.viewState === WebViewState.LOADING || + this.state.viewState === WebViewState.ERROR) { + // if we're in either LOADING or ERROR states, don't show the webView + webViewStyles.push(styles.hidden); + } + + var webView = + ; + + return ( + + {webView} + {otherView} + + ); + }, + + goForward: function() { + WebViewExManager.goForward(this.getWebWiewHandle()); + }, + + goBack: function() { + WebViewExManager.goBack(this.getWebWiewHandle()); + }, + + reload: function() { + WebViewExManager.reload(this.getWebWiewHandle()); + }, + + onMessage: function (cb) { + WebViewExManager.onMessage(this.getWebWiewHandle(), cb); + }, + + eval: function (value) { + WebViewExManager.eval(this.getWebWiewHandle(), value); + }, + + send: function (message) { + WebViewExManager.send(this.getWebWiewHandle(), message); + }, + + /** + * We return an event with a bunch of fields including: + * url, title, loading, canGoBack, canGoForward + */ + updateNavigationState: function(event: Event) { + if (this.props.onNavigationStateChange) { + this.props.onNavigationStateChange(event.nativeEvent); + } + }, + + getWebWiewHandle: function(): any { + return React.findNodeHandle(this.refs[RCT_WEBVIEW_REF]); + }, + + onLoadingStart: function(event: Event) { + this.updateNavigationState(event); + }, + + onLoadingError: function(event: Event) { + event.persist(); // persist this event because we need to store it + console.error('Encountered an error loading page', event.nativeEvent); + + this.setState({ + lastErrorEvent: event.nativeEvent, + viewState: WebViewState.ERROR + }); + }, + + onLoadingFinish: function(event: Event) { + this.setState({ + viewState: WebViewState.IDLE, + }); + this.updateNavigationState(event); + }, +}); + +var WebViewEx = requireNativeComponent('WebViewEx', WebView); + +var styles = StyleSheet.create({ + container: { + 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: { + height: 0, + flex: 0, // disable 'flex:1' when hiding a View + }, + loadingView: { + backgroundColor: BGWASH, + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, + webView: { + backgroundColor: '#ffffff', + } +}); + +module.exports = WebView; diff --git a/jsx/webview-bridge.js b/jsx/webview-bridge.js index 084ce54..04e61f1 100644 --- a/jsx/webview-bridge.js +++ b/jsx/webview-bridge.js @@ -1,41 +1,45 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - * - * Modified by Ali Najafizadeh (github.com/alinz) - * - * @flow - */ 'use strict'; -var ActivityIndicatorIOS = require('ActivityIndicatorIOS'); -var EdgeInsetsPropType = require('EdgeInsetsPropType'); -var React = require('React'); -var StyleSheet = require('StyleSheet'); -var Text = require('Text'); -var View = require('View'); +var React = require('react-native'); -var invariant = require('invariant'); -var keyMirror = require('keyMirror'); -var requireNativeComponent = require('requireNativeComponent'); +var { + WebView, + NativeModules: { + WebViewExManager + } +} = React; -var PropTypes = React.PropTypes; -var WebViewExManager = require('NativeModules').WebViewExManager; +class WebViewBridge extends WebView { + constructor(props) { + super(props); + } -var BGWASH = 'rgba(255,255,255,0.8)'; -var RCT_WEBVIEW_REF = 'webviewex'; + goForward() { + WebViewExManager.goForward(this.getWebWiewHandle()); + } -var WebViewState = keyMirror({ - IDLE: null, - LOADING: null, - ERROR: null, -}); + goBack() { + WebViewExManager.goBack(this.getWebWiewHandle()); + } -var NavigationType = { + reload() { + WebViewExManager.reload(this.getWebWiewHandle()); + } + + onMessage(cb) { + WebViewExManager.onMessage(this.getWebWiewHandle(), cb); + } + + eval(value) { + WebViewExManager.eval(this.getWebWiewHandle(), value); + } + + send(message) { + WebViewExManager.send(this.getWebWiewHandle(), message); + } +} + +WebViewBridge.NavigationType = { click: WebViewExManager.NavigationType.LinkClicked, formsubmit: WebViewExManager.NavigationType.FormSubmitted, backforward: WebViewExManager.NavigationType.BackForward, @@ -44,223 +48,4 @@ var NavigationType = { other: WebViewExManager.NavigationType.Other, }; -type ErrorEvent = { - domain: any; - code: any; - description: any; -} - -type Event = Object; - -var defaultRenderLoading = () => ( - - - -); -var defaultRenderError = (errorDomain, errorCode, errorDesc) => ( - - - Error loading page - - - {'Domain: ' + errorDomain} - - - {'Error Code: ' + errorCode} - - - {'Description: ' + errorDesc} - - -); - -var WebView = React.createClass({ - statics: { - NavigationType: NavigationType, - }, - - propTypes: { - url: PropTypes.string, - html: PropTypes.string, - renderError: PropTypes.func, // view to show if there's an error - renderLoading: PropTypes.func, // loading indicator to show - bounces: PropTypes.bool, - scrollEnabled: PropTypes.bool, - automaticallyAdjustContentInsets: PropTypes.bool, - shouldInjectAJAXHandler: PropTypes.bool, - contentInset: EdgeInsetsPropType, - onNavigationStateChange: PropTypes.func, - startInLoadingState: PropTypes.bool, // force WebViewEx to show loadingView on first load - style: View.propTypes.style, - /** - * Used for android only, JS is enabled by default for WebViewEx on iOS - */ - javaScriptEnabledAndroid: PropTypes.bool, - }, - - getInitialState: function() { - return { - viewState: WebViewState.IDLE, - lastErrorEvent: (null: ?ErrorEvent), - startInLoadingState: true, - }; - }, - - componentWillMount: function() { - if (this.props.startInLoadingState) { - this.setState({viewState: WebViewState.LOADING}); - } - }, - - render: function() { - var otherView = null; - - if (this.state.viewState === WebViewState.LOADING) { - otherView = (this.props.renderLoading || defaultRenderLoading)(); - } else if (this.state.viewState === WebViewState.ERROR) { - var errorEvent = this.state.lastErrorEvent; - invariant( - errorEvent != null, - 'lastErrorEvent expected to be non-null' - ); - otherView = (this.props.renderError || defaultRenderError)( - errorEvent.domain, - errorEvent.code, - errorEvent.description - ); - } else if (this.state.viewState !== WebViewState.IDLE) { - console.error( - 'WebViewEx invalid state encountered: ' + this.state.loading - ); - } - - var webViewStyles = [styles.container, styles.webView, this.props.style]; - if (this.state.viewState === WebViewState.LOADING || - this.state.viewState === WebViewState.ERROR) { - // if we're in either LOADING or ERROR states, don't show the webView - webViewStyles.push(styles.hidden); - } - - var webView = - ; - - return ( - - {webView} - {otherView} - - ); - }, - - goForward: function() { - WebViewExManager.goForward(this.getWebWiewHandle()); - }, - - goBack: function() { - WebViewExManager.goBack(this.getWebWiewHandle()); - }, - - reload: function() { - WebViewExManager.reload(this.getWebWiewHandle()); - }, - - onMessage: function (cb) { - WebViewExManager.onMessage(this.getWebWiewHandle(), cb); - }, - - eval: function (value) { - WebViewExManager.eval(this.getWebWiewHandle(), value); - }, - - send: function (message) { - WebViewExManager.send(this.getWebWiewHandle(), message); - }, - - /** - * We return an event with a bunch of fields including: - * url, title, loading, canGoBack, canGoForward - */ - updateNavigationState: function(event: Event) { - if (this.props.onNavigationStateChange) { - this.props.onNavigationStateChange(event.nativeEvent); - } - }, - - getWebWiewHandle: function(): any { - return React.findNodeHandle(this.refs[RCT_WEBVIEW_REF]); - }, - - onLoadingStart: function(event: Event) { - this.updateNavigationState(event); - }, - - onLoadingError: function(event: Event) { - event.persist(); // persist this event because we need to store it - console.error('Encountered an error loading page', event.nativeEvent); - - this.setState({ - lastErrorEvent: event.nativeEvent, - viewState: WebViewState.ERROR - }); - }, - - onLoadingFinish: function(event: Event) { - this.setState({ - viewState: WebViewState.IDLE, - }); - this.updateNavigationState(event); - }, -}); - -var WebViewEx = requireNativeComponent('WebViewEx', WebView); - -var styles = StyleSheet.create({ - container: { - 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: { - height: 0, - flex: 0, // disable 'flex:1' when hiding a View - }, - loadingView: { - backgroundColor: BGWASH, - flex: 1, - justifyContent: 'center', - alignItems: 'center', - }, - webView: { - backgroundColor: '#ffffff', - } -}); - -module.exports = WebView; +module.exports = WebViewBridge;