diff --git a/index.android.js b/index.android.js index 7a5e09a..7ea5834 100644 --- a/index.android.js +++ b/index.android.js @@ -1,10 +1,10 @@ 'use strict'; -import React, { PropTypes } from 'react'; +import React from 'react'; +import PropTypes from 'prop-types'; import ReactNative, { requireNativeComponent, View } from 'react-native'; - +var createReactClass = require('create-react-class'); var { - addons: { PureRenderMixin }, NativeModules: { UIManager, CrosswalkWebViewManager: { JSNavigationScheme } } } = ReactNative; @@ -12,34 +12,17 @@ var resolveAssetSource = require('react-native/Libraries/Image/resolveAssetSourc var WEBVIEW_REF = 'crosswalkWebView'; -var CrosswalkWebView = React.createClass({ - mixins: [PureRenderMixin], - statics: { JSNavigationScheme }, - propTypes: { - injectedJavaScript: PropTypes.string, - localhost: PropTypes.bool.isRequired, - onError: PropTypes.func, - onMessage: PropTypes.func, - onNavigationStateChange: PropTypes.func, - onProgress: PropTypes.func, - source: PropTypes.oneOfType([ - PropTypes.shape({ - uri: PropTypes.string, // URI to load in WebView - }), - PropTypes.shape({ - html: PropTypes.string, // static HTML to load in WebView - }), - PropTypes.number, // used internally by React packager - ]), - url: PropTypes.string, - ...View.propTypes - }, - getDefaultProps () { - return { - localhost: false - }; - }, - render () { +class CrosswalkWebView extends React.PureComponent { + constructor(props) { + super(props); + this.statics = JSNavigationScheme; + this.onProgress = this.onProgress.bind(this); + this.onNavigationStateChange = this.onNavigationStateChange.bind(this); + this.onProgress = this.onProgress.bind(this); + this.onError = this.onError.bind(this); + this.onMessage = this.onMessage.bind(this); + } + render() { var source = this.props.source || {}; if (this.props.url) { source.uri = this.props.url; @@ -53,65 +36,89 @@ var CrosswalkWebView = React.createClass({ return ( ); - }, - getWebViewHandle () { + } + getWebViewHandle() { return ReactNative.findNodeHandle(this.refs[WEBVIEW_REF]); - }, - onNavigationStateChange (event) { + } + onNavigationStateChange(event) { var { onNavigationStateChange } = this.props; if (onNavigationStateChange) { onNavigationStateChange(event.nativeEvent); } - }, - onError (event) { + } + onError(event) { var { onError } = this.props; if (onError) { onError(event.nativeEvent); } - }, - onProgress (event) { + } + onProgress(event) { var { onProgress } = this.props; if (onProgress) { onProgress(event.nativeEvent.progress / 100); } - }, - goBack () { + } + goBack() { UIManager.dispatchViewManagerCommand( this.getWebViewHandle(), UIManager.CrosswalkWebView.Commands.goBack, null ); - }, - goForward () { + } + goForward() { UIManager.dispatchViewManagerCommand( this.getWebViewHandle(), UIManager.CrosswalkWebView.Commands.goForward, null ); - }, - reload () { + } + reload() { UIManager.dispatchViewManagerCommand( this.getWebViewHandle(), UIManager.CrosswalkWebView.Commands.reload, null ); - }, - postMessage (data) { + } + postMessage(data) { UIManager.dispatchViewManagerCommand( this.getWebViewHandle(), UIManager.CrosswalkWebView.Commands.postMessage, [String(data)] ); - }, - onMessage (event) { - var {onMessage} = this.props; + } + onMessage(event) { + var { onMessage } = this.props; onMessage && onMessage(event); } -}); +}; + +CrosswalkWebView.propTypes = { + injectedJavaScript: PropTypes.string, + localhost: PropTypes.bool.isRequired, + onError: PropTypes.func, + onMessage: PropTypes.func, + onNavigationStateChange: PropTypes.func, + onProgress: PropTypes.func, + source: PropTypes.oneOfType([ + PropTypes.shape({ + uri: PropTypes.string, // URI to load in WebView + }), + PropTypes.shape({ + html: PropTypes.string, // static HTML to load in WebView + }), + PropTypes.number, // used internally by React packager + ]), + url: PropTypes.string, + ...View.propTypes +} + +CrosswalkWebView.defaultProps = { + localhost: false +} var NativeCrosswalkWebView = requireNativeComponent('CrosswalkWebView', CrosswalkWebView, { nativeOnly: { @@ -119,4 +126,5 @@ var NativeCrosswalkWebView = requireNativeComponent('CrosswalkWebView', Crosswal }, }); + export default CrosswalkWebView; diff --git a/package.json b/package.json index 8212a82..6b26887 100644 --- a/package.json +++ b/package.json @@ -38,8 +38,8 @@ }, "homepage": "https://github.com/jordansexton/react-native-webview-crosswalk", "peerDependencies": { - "react": ">=15.3.0", - "react-native": ">=0.32.0" + "react": ">=15.6.1", + "react-native": ">=0.46.1" }, "dependencies": { "node-wget": "0.4.2"