Use es6 class instead of createClass

src/WebView.windows.tsx

@@ -17,58 +17,62 @@ import {
   requireNativeComponent,
   StyleSheet,
   Image,
+  ImageSourcePropType,
   findNodeHandle,
 } from 'react-native';
 import {
+  createOnShouldStartLoadWithRequest,
+} from './WebViewShared';
+import {
+  NativeWebViewWindows,
+  WindowsWebViewProps,
+  WebViewProgressEvent,
   WebViewNavigationEvent,
+  WebViewErrorEvent,
+  WebViewHttpErrorEvent,
+  WebViewMessageEvent,
   RNCWebViewUIManagerWindows,
+  State,
 } from './WebViewTypes';
 
 const UIManager = NotTypedUIManager as RNCWebViewUIManagerWindows;
-var keyMirror = require('fbjs/lib/keyMirror');
 const { resolveAssetSource } = Image;
-
-const createReactClass = require('create-react-class');
-
-var RCT_WEBVIEW_REF = 'webview';
-
-var WebViewState = keyMirror({
-  IDLE: null,
-  LOADING: null,
-  ERROR: null,
-});
-
-/**
- * Renders a native WebView.
- */
-var WebView = createReactClass({
-  getInitialState: function() {
-    return {
-      viewState: WebViewState.IDLE,
-      lastErrorEvent: null,
-      startInLoadingState: true,
-    };
-  },
-
-  getDefaultProps: function() {
-    return {
-      javaScriptEnabled: true,
-    };
-  },
-
-  componentDidMount: function() {
-    if (this.props.startInLoadingState) {
-      this.setState({viewState: WebViewState.LOADING});
-    }
-  },
-
-  render: function() {
-    var otherView = null;
-
-    if (this.state.viewState === WebViewState.LOADING) {
+const RCTWebView: typeof NativeWebViewWindows = requireNativeComponent(
+  'RCTWebView',
+);
+
+export default class WebView extends React.Component<WindowsWebViewProps, State> {
+
+  static defaultProps = {
+    javaScriptEnabled: true,
+  };
+
+  state: State = {
+    viewState: this.props.startInLoadingState ? 'LOADING' : 'IDLE',
+    lastErrorEvent: null,
+  }
+
+  webViewRef = React.createRef<NativeWebViewWindows>();
+
+  render = () => {
+    const {
+      nativeConfig = {},
+      onMessage,
+      onShouldStartLoadWithRequest: onShouldStartLoadWithRequestProp,
+      originWhitelist,
+      renderError,
+      renderLoading,
+      style,
+      containerStyle,
+      ...otherProps
+    } = this.props;
+
+    let otherView = null;
+
+    if (this.state.viewState === 'LOADING') {
       otherView = this.props.renderLoading && this.props.renderLoading();
-    } else if (this.state.viewState === WebViewState.ERROR) {
-      var errorEvent = this.state.lastErrorEvent;
+    } else if (this.state.viewState === 'ERROR') {
+      const errorEvent = this.state.lastErrorEvent;
       otherView =
         this.props.renderError &&
         this.props.renderError(
@@ -76,48 +80,49 @@ var WebView = createReactClass({
           errorEvent.code,
           errorEvent.description,
         );
-    } else if (this.state.viewState !== WebViewState.IDLE) {
+    } else if (this.state.viewState !== 'IDLE') {
       console.error(
-        'RCTWebView invalid state encountered: ' + this.state.loading,
+        'RCTWebView invalid state encountered: ' + this.state.viewState,
       );
     }
 
-    var webViewStyles = [styles.container, this.props.style];
+    let webViewStyles = [styles.container, this.props.style];
     if (
-      this.state.viewState === WebViewState.LOADING ||
-      this.state.viewState === WebViewState.ERROR
+      this.state.viewState === 'LOADING' ||
+      this.state.viewState === 'ERROR'
     ) {
       // if we're in either LOADING or ERROR states, don't show the webView
       webViewStyles.push(styles.hidden);
     }
 
-    var source = this.props.source || {};
-    if (this.props.html) {
-      source.html = this.props.html;
-    } else if (this.props.url) {
-      source.uri = this.props.url;
-    }
+    const onShouldStartLoadWithRequest = createOnShouldStartLoadWithRequest(
+      this.onShouldStartLoadWithRequestCallback,
+      // casting cause it's in the default props
+      originWhitelist as readonly string[],
+      onShouldStartLoadWithRequestProp,
+    );
+
+    const NativeWebView
+    = (nativeConfig.component as typeof NativeWebViewWindows | undefined)
+    || RCTWebView;
 
-    var webView = (
-      <RCTWebView
-        ref={RCT_WEBVIEW_REF}
+    const webView = (
+      <NativeWebView
+        ref={this.webViewRef}
         key="webViewKey"
-        style={webViewStyles}
-        source={resolveAssetSource(source)}
-        injectedJavaScript={this.props.injectedJavaScript}
-        javaScriptEnabled={this.props.javaScriptEnabled}
-        indexedDbEnabled={this.props.indexedDbEnabled}
-        contentInset={this.props.contentInset}
-        automaticallyAdjustContentInsets={
-          this.props.automaticallyAdjustContentInsets
-        }
-        onLoadingStart={this.onLoadingStart}
-        onLoadingFinish={this.onLoadingFinish}
+        {...otherProps}
+        messagingEnabled={typeof onMessage === 'function'}
         onLoadingError={this.onLoadingError}
-        goBack={this.goBack}
-        goForward={this.goForward}
-        reload={this.reload}
-        testID={this.props.testID}
+        onLoadingFinish={this.onLoadingFinish}
+        onLoadingProgress={this.onLoadingProgress}
+        onLoadingStart={this.onLoadingStart}
+        onHttpError={this.onHttpError}
+        onMessage={this.onMessage}
+        onScroll={this.props.onScroll}
+        onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
+        source={resolveAssetSource(this.props.source as ImageSourcePropType)}
+        style={webViewStyles}
+        {...nativeConfig.props}
       />
     );
 
@@ -127,80 +132,106 @@ var WebView = createReactClass({
         {otherView}
       </View>
     );
-  },
+  }
 
-  goForward: function() {
+  goForward = () => {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
       UIManager.getViewManagerConfig('RCTWebView').Commands.goForward,
       undefined,
     );
-  },
+  }
 
-  goBack: function() {
+  goBack = () => {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
       UIManager.getViewManagerConfig('RCTWebView').Commands.goBack,
       undefined,
     );
-  },
+  }
 
-  reload: function() {
+  reload = () => {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
       UIManager.getViewManagerConfig('RCTWebView').Commands.reload,
       undefined,
     );
-  },
+  }
 
   /**
    * We return an event with a bunch of fields including:
    *  url, title, loading, canGoBack, canGoForward
    */
-  updateNavigationState: function(event: WebViewNavigationEvent) {
+  updateNavigationState = (event: WebViewNavigationEvent) => {
     if (this.props.onNavigationStateChange) {
       this.props.onNavigationStateChange(event.nativeEvent);
     }
-  },
+  }
 
-  getWebViewHandle: function() {
+  getWebViewHandle = () => {
     // eslint-disable-next-line react/no-string-refs
-    return findNodeHandle(this.refs[RCT_WEBVIEW_REF]);
-  },
+    return findNodeHandle(this.webViewRef.current);
+  }
 
-  onLoadingStart: function(event: WebViewNavigationEvent) {
-    var onLoadStart = this.props.onLoadStart;
+  onLoadingStart = (event: WebViewNavigationEvent) => {
+    const { onLoadStart } = this.props;
     onLoadStart && onLoadStart(event);
     this.updateNavigationState(event);
-  },
+  }
 
-  onLoadingError: function(event: WebViewNavigationEvent) {
+  onLoadingProgress = (event: WebViewProgressEvent) => {
+    const { onLoadProgress } = this.props;
+    if (onLoadProgress) {
+      onLoadProgress(event);
+    }
+  };
+
+  onLoadingError = (event: WebViewErrorEvent) => {
     event.persist(); // persist this event because we need to store it
-    var {onError, onLoadEnd} = this.props;
+    const {onError, onLoadEnd} = this.props;
     onError && onError(event);
     onLoadEnd && onLoadEnd(event);
     console.error('Encountered an error loading page', event.nativeEvent);
-    // $FlowFixMe : Not sure what the issue here is, disabling to get flow check turned on
     this.setState({
       lastErrorEvent: event.nativeEvent,
-      viewState: WebViewState.ERROR,
+      viewState: 'ERROR',
     });
-  },
+  }
 
-  onLoadingFinish: function(event: WebViewNavigationEvent) {
-    var {onLoad, onLoadEnd} = this.props;
+  onLoadingFinish =(event: WebViewNavigationEvent) => {
+    const {onLoad, onLoadEnd} = this.props;
     onLoad && onLoad(event);
     onLoadEnd && onLoadEnd(event);
     this.setState({
-      viewState: WebViewState.IDLE,
+      viewState: 'IDLE',
     });
     this.updateNavigationState(event);
-  },
-});
+  }
+
+  onMessage = (event: WebViewMessageEvent) => {
+    const { onMessage } = this.props;
+    if (onMessage) {
+      onMessage(event);
+    }
+  };
+
+  onHttpError = (event: WebViewHttpErrorEvent) => {
+    const { onHttpError } = this.props;
+    if (onHttpError) {
+      onHttpError(event);
+    }
+  }
+
+  onShouldStartLoadWithRequestCallback = (
+    _shouldStart: boolean,
+    _url: string,
+    _lockIdentifier: number,
+  ) => {
+  };
 
-var RCTWebView = requireNativeComponent('RCTWebView');
+}
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   container: {
     flex: 1,
   },

src/WebViewTypes.ts

@@ -74,6 +74,14 @@ declare const NativeWebViewAndroidBase: Constructor<NativeMethodsMixin> &
   typeof NativeWebViewAndroidComponent;
 export class NativeWebViewAndroid extends NativeWebViewAndroidBase {}
 
+// eslint-disable-next-line react/prefer-stateless-function
+declare class NativeWebViewWindowsComponent extends Component<
+  WindowsNativeWebViewProps
+> {}
+declare const NativeWebViewWindowsBase: Constructor<NativeMethodsMixin> &
+  typeof NativeWebViewWindowsComponent;
+export class NativeWebViewWindows extends NativeWebViewWindowsBase {}
+
 export interface ContentInsetProp {
   top?: number;
   left?: number;
@@ -310,6 +318,10 @@ export interface MacOSNativeWebViewProps extends CommonNativeWebViewProps {
   onContentProcessDidTerminate?: (event: WebViewTerminatedEvent) => void;
 }
 
+export interface WindowsNativeWebViewProps extends CommonNativeWebViewProps {
+  testID?:string
+}
+
 export interface IOSWebViewProps extends WebViewSharedProps {
   /**
    * Does not store any data within the lifetime of the WebView.
@@ -754,6 +766,9 @@ export interface AndroidWebViewProps extends WebViewSharedProps {
   allowsFullscreenVideo?: boolean;
 }
 
+export interface WindowsWebViewProps extends WebViewSharedProps{
+}
+
 export interface WebViewSharedProps extends ViewProps {
   /**
    * Loads static html or a uri (with optional headers) in the WebView.