react-native-webview-bootpay 11.26.20 → 13.6.1

package/src/WebView.windows.tsx

@@ -0,0 +1,156 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * Portions copyright for react-native-windows:
+ *
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
+import {
+  View,
+  Image,
+  ImageSourcePropType,
+  NativeModules,
+} from 'react-native';
+import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
+import invariant from 'invariant';
+import {RCTWebView, RCTWebView2} from "./WebViewNativeComponent.windows";
+import { useWebViewLogic, defaultOriginWhitelist, defaultRenderError, defaultRenderLoading, } from './WebViewShared';
+import {
+  NativeWebViewWindows,
+  WindowsWebViewProps,
+} from './WebViewTypes';
+
+import styles from './WebView.styles';
+
+const Commands = codegenNativeCommands({
+  supportedCommands: ['goBack', 'goForward', 'reload', 'stopLoading', 'injectJavaScript', 'requestFocus', 'postMessage', 'loadUrl'],
+});
+const { resolveAssetSource } = Image;
+
+const WebViewComponent = forwardRef<{}, WindowsWebViewProps>(({
+  cacheEnabled = true,
+  originWhitelist = defaultOriginWhitelist,
+  startInLoadingState,
+  onNavigationStateChange,
+  onLoadStart,
+  onError,
+  onLoad,
+  onLoadEnd,
+  onLoadProgress,
+  onHttpError: onHttpErrorProp,
+  onMessage: onMessageProp,
+  renderLoading,
+  renderError,
+  style,
+  containerStyle,
+  source,
+  nativeConfig,
+  onShouldStartLoadWithRequest: onShouldStartLoadWithRequestProp,
+  useWebView2,
+  ...otherProps
+}, ref) => {
+  const webViewRef = useRef<NativeWebViewWindows | null>(null);
+
+  const RCTWebViewString = useWebView2 ? 'RCTWebView2' : 'RCTWebView';
+
+  const onShouldStartLoadWithRequestCallback = useCallback((shouldStart: boolean, url: string, lockIdentifier?: number) => {
+    if (lockIdentifier) {
+      if (RCTWebViewString === 'RCTWebView'){
+        NativeModules.RCTWebView.onShouldStartLoadWithRequestCallback(shouldStart, lockIdentifier);
+      }else{
+        NativeModules.RCTWebView2.onShouldStartLoadWithRequestCallback(shouldStart, lockIdentifier);
+      }
+    } else if (shouldStart) {
+      Commands.loadUrl(webViewRef, url);
+    }
+  }, [RCTWebViewString]);
+
+  const { onLoadingStart, onShouldStartLoadWithRequest, onMessage, viewState, setViewState, lastErrorEvent, onHttpError, onLoadingError, onLoadingFinish, onLoadingProgress } = useWebViewLogic({
+    onNavigationStateChange,
+    onLoad,
+    onError,
+    onHttpErrorProp,
+    onLoadEnd,
+    onLoadProgress,
+    onLoadStart,
+    onMessageProp,
+    startInLoadingState,
+    originWhitelist,
+    onShouldStartLoadWithRequestProp,
+    onShouldStartLoadWithRequestCallback,
+  })
+
+  useImperativeHandle(ref, () => ({
+    goForward: () => Commands.goForward(webViewRef.current),
+    goBack: () => Commands.goBack(webViewRef.current),
+    reload: () => {
+      setViewState(
+        'LOADING',
+      ); Commands.reload(webViewRef.current)
+    },
+    stopLoading: () => Commands.stopLoading(webViewRef.current),
+    postMessage: (data: string) => Commands.postMessage(webViewRef.current, data),
+    injectJavaScript: (data: string) => Commands.injectJavaScript(webViewRef.current, data),
+    requestFocus: () => Commands.requestFocus(webViewRef.current),
+  }), [setViewState, webViewRef]);
+
+  let otherView = null;
+  if (viewState === 'LOADING') {
+    otherView = (renderLoading || defaultRenderLoading)();
+  } else if (viewState === 'ERROR') {
+    invariant(lastErrorEvent != null, 'lastErrorEvent expected to be non-null');
+    otherView = (renderError || defaultRenderError)(
+      lastErrorEvent.domain,
+      lastErrorEvent.code,
+      lastErrorEvent.description,
+    );
+  } else if (viewState !== 'IDLE') {
+    console.error(`BPCWebView invalid state encountered: ${viewState}`);
+  }
+
+  const webViewStyles = [styles.container, styles.webView, style];
+  const webViewContainerStyle = [styles.container, containerStyle];
+
+  const NativeWebView
+  = useWebView2? RCTWebView2 : RCTWebView;
+
+  const webView = <NativeWebView
+    key="webViewKey"
+    {...otherProps}
+    messagingEnabled={typeof onMessageProp === 'function'}
+    onLoadingError={onLoadingError}
+    onLoadingFinish={onLoadingFinish}
+    onLoadingProgress={onLoadingProgress}
+    onLoadingStart={onLoadingStart}
+    onHttpError={onHttpError}
+    onMessage={onMessage}
+    onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
+    ref={webViewRef}
+    // TODO: find a better way to type this.
+    source={resolveAssetSource(source as ImageSourcePropType)}
+    style={webViewStyles}
+    cacheEnabled={cacheEnabled}
+    {...nativeConfig?.props}
+  />
+
+  return (
+    <View style={webViewContainerStyle}>
+      {webView}
+      {otherView}
+    </View>
+  );
+});
+
+// native implementation should return "true" only for Android 5+
+const isFileUploadSupported: () => Promise<boolean>
+= async () => false;
+
+const WebView = Object.assign(WebViewComponent, {isFileUploadSupported});
+
+export default WebView;

package/src/WebViewNativeComponent.macos.ts

@@ -0,0 +1,8 @@
+import { requireNativeComponent } from "react-native";
+import type { NativeWebViewMacOS } from "./WebViewTypes";
+
+const BPCWebView: typeof NativeWebViewMacOS = requireNativeComponent(
+  'BPCWebView',
+);
+
+export default BPCWebView;

package/src/WebViewNativeComponent.windows.ts

@@ -0,0 +1,10 @@
+import { requireNativeComponent } from "react-native";
+import type { NativeWebViewWindows } from "./WebViewTypes";
+
+export const RCTWebView: typeof NativeWebViewWindows = requireNativeComponent(
+  'RCTWebView',
+);
+
+export const RCTWebView2: typeof NativeWebViewWindows = requireNativeComponent(
+  'RCTWebView2',
+);

package/src/WebViewShared.tsx

@@ -0,0 +1,235 @@
+import escapeStringRegexp from 'escape-string-regexp';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { Linking, View, ActivityIndicator, Text, Platform } from 'react-native';
+import {
+  OnShouldStartLoadWithRequest,
+  ShouldStartLoadRequestEvent,
+  WebViewError,
+  WebViewErrorEvent,
+  WebViewHttpErrorEvent,
+  WebViewMessageEvent,
+  WebViewNavigation,
+  WebViewNavigationEvent,
+  WebViewOpenWindowEvent,
+  WebViewProgressEvent,
+  WebViewRenderProcessGoneEvent,
+  WebViewTerminatedEvent,
+} from './WebViewTypes';
+import styles from './WebView.styles';
+
+const defaultOriginWhitelist = ['http://*', 'https://*'] as const;
+
+const extractOrigin = (url: string): string => {
+  const result = /^[A-Za-z][A-Za-z0-9+\-.]+:(\/\/)?[^/]*/.exec(url);
+  return result === null ? '' : result[0];
+};
+
+const originWhitelistToRegex = (originWhitelist: string): string =>
+  `^${escapeStringRegexp(originWhitelist).replace(/\\\*/g, '.*')}`;
+
+const passesWhitelist = (
+  compiledWhitelist: readonly string[],
+  url: string,
+) => {
+  const origin = extractOrigin(url);
+  return compiledWhitelist.some(x => new RegExp(x).test(origin));
+};
+
+const compileWhitelist = (
+  originWhitelist: readonly string[],
+): readonly string[] =>
+  ['about:blank', ...(originWhitelist || [])].map(originWhitelistToRegex);
+
+const createOnShouldStartLoadWithRequest = (
+  loadRequest: (
+    shouldStart: boolean,
+    url: string,
+    lockIdentifier: number,
+  ) => void,
+  originWhitelist: readonly string[],
+  onShouldStartLoadWithRequest?: OnShouldStartLoadWithRequest,
+) => {
+  return ({ nativeEvent }: ShouldStartLoadRequestEvent) => {
+    let shouldStart = true;
+    const { url, lockIdentifier } = nativeEvent;
+
+    if (!passesWhitelist(compileWhitelist(originWhitelist), url)) {
+      Linking.canOpenURL(url).then((supported) => {
+        if (supported) {
+          return Linking.openURL(url);
+        }
+        console.warn(`Can't open url: ${url}`);
+        return undefined;
+      }).catch(e => {
+        console.warn('Error opening URL: ', e);
+      });
+      shouldStart = false;
+    } else if (onShouldStartLoadWithRequest) {
+      shouldStart = onShouldStartLoadWithRequest(nativeEvent);
+    }
+
+    loadRequest(shouldStart, url, lockIdentifier);
+  };
+};
+
+const defaultRenderLoading = () => (
+  <View style={styles.loadingOrErrorView}>
+    <ActivityIndicator />
+  </View>
+);
+const defaultRenderError = (
+  errorDomain: string | undefined,
+  errorCode: number,
+  errorDesc: string,
+) => (
+  <View style={styles.loadingOrErrorView}>
+    <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>
+);
+
+export {
+  defaultOriginWhitelist,
+  createOnShouldStartLoadWithRequest,
+  defaultRenderLoading,
+  defaultRenderError,
+};
+
+export const useWebViewLogic = ({
+  startInLoadingState,
+  onNavigationStateChange,
+  onLoadStart,
+  onLoad,
+  onLoadProgress,
+  onLoadEnd,
+  onError,
+  onHttpErrorProp,
+  onMessageProp,
+  onOpenWindowProp,
+  onRenderProcessGoneProp,
+  onContentProcessDidTerminateProp,
+  originWhitelist,
+  onShouldStartLoadWithRequestProp,
+  onShouldStartLoadWithRequestCallback,
+}: {
+  startInLoadingState?: boolean
+  onNavigationStateChange?: (event: WebViewNavigation) => void;
+  onLoadStart?: (event: WebViewNavigationEvent) => void;
+  onLoad?: (event: WebViewNavigationEvent) => void;
+  onLoadProgress?: (event: WebViewProgressEvent) => void;
+  onLoadEnd?: (event: WebViewNavigationEvent | WebViewErrorEvent) => void;
+  onError?: (event: WebViewErrorEvent) => void;
+  onHttpErrorProp?: (event: WebViewHttpErrorEvent) => void;
+  onMessageProp?: (event: WebViewMessageEvent) => void;
+  onOpenWindowProp?: (event: WebViewOpenWindowEvent) => void;
+  onRenderProcessGoneProp?: (event: WebViewRenderProcessGoneEvent) => void;
+  onContentProcessDidTerminateProp?: (event: WebViewTerminatedEvent) => void;
+  originWhitelist: readonly string[];
+  onShouldStartLoadWithRequestProp?: OnShouldStartLoadWithRequest;
+  onShouldStartLoadWithRequestCallback: (shouldStart: boolean, url: string, lockIdentifier?: number | undefined) => void;
+}) => {
+
+  const [viewState, setViewState] = useState<'IDLE' | 'LOADING' | 'ERROR'>(startInLoadingState ? "LOADING" : "IDLE");
+  const [lastErrorEvent, setLastErrorEvent] = useState<WebViewError | null>(null);
+  const startUrl = useRef<string | null>(null)
+
+
+  const updateNavigationState = useCallback((event: WebViewNavigationEvent) => {
+    onNavigationStateChange?.(event.nativeEvent);
+  }, [onNavigationStateChange]);
+
+  const onLoadingStart = useCallback((event: WebViewNavigationEvent) => {
+    // Needed for android
+    startUrl.current = event.nativeEvent.url;
+    // !Needed for android
+
+    onLoadStart?.(event);
+    updateNavigationState(event);
+  }, [onLoadStart, updateNavigationState]);
+
+  const onLoadingError = useCallback((event: WebViewErrorEvent) => {
+    event.persist();
+    if (onError) {
+      onError(event);
+    } else {
+      console.warn('Encountered an error loading page', event.nativeEvent);
+    }
+    onLoadEnd?.(event);
+    if (event.isDefaultPrevented()) { return };
+    setViewState('ERROR');
+    setLastErrorEvent(event.nativeEvent);
+  }, [onError, onLoadEnd]);
+
+  const onHttpError = useCallback((event: WebViewHttpErrorEvent) => {
+    onHttpErrorProp?.(event);
+  }, [onHttpErrorProp]);
+
+  // Android Only
+  const onRenderProcessGone = useCallback((event: WebViewRenderProcessGoneEvent) => {
+    onRenderProcessGoneProp?.(event);
+  }, [onRenderProcessGoneProp]);
+  // !Android Only
+
+  // iOS Only
+  const onContentProcessDidTerminate = useCallback((event: WebViewTerminatedEvent) => {
+      onContentProcessDidTerminateProp?.(event);
+  }, [onContentProcessDidTerminateProp]);
+  // !iOS Only
+
+  const onLoadingFinish = useCallback((event: WebViewNavigationEvent) => {
+    onLoad?.(event);
+    onLoadEnd?.(event);
+    const { nativeEvent: { url } } = event;
+    // on Android, only if url === startUrl
+    if (Platform.OS !== "android" || url === startUrl.current) {
+      setViewState('IDLE');
+    }
+    // !on Android, only if url === startUrl
+    updateNavigationState(event);
+  }, [onLoad, onLoadEnd, updateNavigationState]);
+
+  const onMessage = useCallback((event: WebViewMessageEvent) => {
+    onMessageProp?.(event);
+  }, [onMessageProp]);
+
+  const onLoadingProgress = useCallback((event: WebViewProgressEvent) => {
+    const { nativeEvent: { progress } } = event;
+    // patch for Android only
+    if (Platform.OS === "android" && progress === 1) {
+      setViewState(prevViewState => prevViewState === 'LOADING' ? 'IDLE' : prevViewState);
+    }
+    // !patch for Android only
+    onLoadProgress?.(event);
+  }, [onLoadProgress]);
+
+  const onShouldStartLoadWithRequest = useMemo(() =>  createOnShouldStartLoadWithRequest(
+      onShouldStartLoadWithRequestCallback,
+      originWhitelist,
+      onShouldStartLoadWithRequestProp,
+    )
+  , [originWhitelist, onShouldStartLoadWithRequestProp, onShouldStartLoadWithRequestCallback])
+
+  // Android and iOS Only
+  const onOpenWindow = useCallback((event: WebViewOpenWindowEvent) => {
+    onOpenWindowProp?.(event);
+  }, [onOpenWindowProp]);
+  // !Android and iOS Only
+
+  return {
+    onShouldStartLoadWithRequest,
+    onLoadingStart,
+    onLoadingProgress,
+    onLoadingError,
+    onLoadingFinish,
+    onHttpError,
+    onRenderProcessGone,
+    onContentProcessDidTerminate,
+    onMessage,
+    onOpenWindow,
+    viewState,
+    setViewState,
+    lastErrorEvent,
+  }
+};