react-native-webview-bootpay 13.8.41 → 13.13.4-4.alpha.1

package/src/WebView.windows.tsx

@@ -10,147 +10,201 @@
  * Licensed under the MIT License.
  */
 
-import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
-import {
-  View,
-  Image,
-  ImageSourcePropType,
-  NativeModules,
-} from 'react-native';
+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 { RCTWebView, RCTWebView2 } from './WebViewNativeComponent.windows';
 import {
-  NativeWebViewWindows,
-  WindowsWebViewProps,
-} from './WebViewTypes';
+  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'],
+  supportedCommands: [
+    'goBack',
+    'goForward',
+    'reload',
+    'stopLoading',
+    'injectJavaScript',
+    'requestFocus',
+    'clearCache',
+    '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)
+const WebViewComponent = forwardRef<{}, WindowsWebViewProps>(
+  (
+    {
+      cacheEnabled = true,
+      originWhitelist = defaultOriginWhitelist,
+      startInLoadingState,
+      onNavigationStateChange,
+      onLoadStart,
+      onError,
+      onLoad,
+      onLoadEnd,
+      onLoadProgress,
+      onOpenWindow: onOpenWindowProp,
+      onSourceChanged,
+      onHttpError: onHttpErrorProp,
+      onMessage: onMessageProp,
+      renderLoading,
+      renderError,
+      style,
+      containerStyle,
+      source,
+      nativeConfig,
+      onShouldStartLoadWithRequest: onShouldStartLoadWithRequestProp,
+      useWebView2,
+      ...otherProps
     },
-    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,
+    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]
     );
-  } 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>
-  );
-});
+    const {
+      onLoadingStart,
+      onShouldStartLoadWithRequest,
+      onMessage,
+      viewState,
+      setViewState,
+      lastErrorEvent,
+      onHttpError,
+      onLoadingError,
+      onLoadingFinish,
+      onLoadingProgress,
+      onOpenWindow,
+    } = useWebViewLogic({
+      onNavigationStateChange,
+      onLoad,
+      onError,
+      onHttpErrorProp,
+      onLoadEnd,
+      onLoadProgress,
+      onLoadStart,
+      onMessageProp,
+      startInLoadingState,
+      originWhitelist,
+      onShouldStartLoadWithRequestProp,
+      onShouldStartLoadWithRequestCallback,
+      onOpenWindowProp,
+    });
+
+    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),
+        clearCache: () => Commands.clearCache(webViewRef.current),
+        loadUrl: (url: string) => Commands.loadUrl(webViewRef.current, url),
+      }),
+      [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'}
+        linkHandlingEnabled={typeof onOpenWindowProp === 'function'}
+        onLoadingError={onLoadingError}
+        onLoadingFinish={onLoadingFinish}
+        onLoadingProgress={onLoadingProgress}
+        onLoadingStart={onLoadingStart}
+        onHttpError={onHttpError}
+        onMessage={onMessage}
+        onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
+        onOpenWindow={onOpenWindow}
+        onSourceChanged={onSourceChanged}
+        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 isFileUploadSupported: () => Promise<boolean> = async () => false;
 
-const WebView = Object.assign(WebViewComponent, {isFileUploadSupported});
+const WebView = Object.assign(WebViewComponent, { isFileUploadSupported });
 
 export default WebView;

package/src/WebViewNativeComponent.macos.ts

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

package/src/WebViewNativeComponent.windows.ts

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

package/src/WebViewShared.tsx

@@ -27,16 +27,13 @@ const extractOrigin = (url: string): string => {
 const originWhitelistToRegex = (originWhitelist: string): string =>
   `^${escapeStringRegexp(originWhitelist).replace(/\\\*/g, '.*')}`;
 
-const passesWhitelist = (
-  compiledWhitelist: readonly string[],
-  url: string,
-) => {
+const passesWhitelist = (compiledWhitelist: readonly string[], url: string) => {
   const origin = extractOrigin(url);
-  return compiledWhitelist.some(x => new RegExp(x).test(origin));
+  return compiledWhitelist.some((x) => new RegExp(x).test(origin));
 };
 
 const compileWhitelist = (
-  originWhitelist: readonly string[],
+  originWhitelist: readonly string[]
 ): readonly string[] =>
   ['about:blank', ...(originWhitelist || [])].map(originWhitelistToRegex);
 
@@ -44,25 +41,27 @@ const createOnShouldStartLoadWithRequest = (
   loadRequest: (
     shouldStart: boolean,
     url: string,
-    lockIdentifier: number,
+    lockIdentifier: number
   ) => void,
   originWhitelist: readonly string[],
-  onShouldStartLoadWithRequest?: OnShouldStartLoadWithRequest,
+  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);
-      });
+      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);
@@ -80,7 +79,7 @@ const defaultRenderLoading = () => (
 const defaultRenderError = (
   errorDomain: string | undefined,
   errorCode: number,
-  errorDesc: string,
+  errorDesc: string
 ) => (
   <View style={styles.loadingOrErrorView}>
     <Text style={styles.errorTextTitle}>Error loading page</Text>
@@ -114,7 +113,7 @@ export const useWebViewLogic = ({
   onShouldStartLoadWithRequestProp,
   onShouldStartLoadWithRequestCallback,
 }: {
-  startInLoadingState?: boolean
+  startInLoadingState?: boolean;
   onNavigationStateChange?: (event: WebViewNavigation) => void;
   onLoadStart?: (event: WebViewNavigationEvent) => void;
   onLoad?: (event: WebViewNavigationEvent) => void;
@@ -128,94 +127,143 @@ export const useWebViewLogic = ({
   onContentProcessDidTerminateProp?: (event: WebViewTerminatedEvent) => void;
   originWhitelist: readonly string[];
   onShouldStartLoadWithRequestProp?: OnShouldStartLoadWithRequest;
-  onShouldStartLoadWithRequestCallback: (shouldStart: boolean, url: string, lockIdentifier?: number | undefined) => void;
+  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 [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
 
-  const updateNavigationState = useCallback((event: WebViewNavigationEvent) => {
-    onNavigationStateChange?.(event.nativeEvent);
-  }, [onNavigationStateChange]);
+      onLoadStart?.(event);
+      updateNavigationState(event);
+    },
+    [onLoadStart, updateNavigationState]
+  );
 
-  const onLoadingStart = useCallback((event: WebViewNavigationEvent) => {
-    // Needed for android
-    startUrl.current = event.nativeEvent.url;
-    // !Needed for android
+  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]
+  );
 
-    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]);
+  const onHttpError = useCallback(
+    (event: WebViewHttpErrorEvent) => {
+      onHttpErrorProp?.(event);
+    },
+    [onHttpErrorProp]
+  );
 
   // Android Only
-  const onRenderProcessGone = useCallback((event: WebViewRenderProcessGoneEvent) => {
-    onRenderProcessGoneProp?.(event);
-  }, [onRenderProcessGoneProp]);
+  const onRenderProcessGone = useCallback(
+    (event: WebViewRenderProcessGoneEvent) => {
+      onRenderProcessGoneProp?.(event);
+    },
+    [onRenderProcessGoneProp]
+  );
   // !Android Only
 
   // iOS Only
-  const onContentProcessDidTerminate = useCallback((event: WebViewTerminatedEvent) => {
+  const onContentProcessDidTerminate = useCallback(
+    (event: WebViewTerminatedEvent) => {
       onContentProcessDidTerminateProp?.(event);
-  }, [onContentProcessDidTerminateProp]);
+    },
+    [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 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 onShouldStartLoadWithRequest = useMemo(() =>  createOnShouldStartLoadWithRequest(
-      onShouldStartLoadWithRequestCallback,
+  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,
-    )
-  , [originWhitelist, onShouldStartLoadWithRequestProp, onShouldStartLoadWithRequestCallback])
+      onShouldStartLoadWithRequestCallback,
+    ]
+  );
 
-  // Android and iOS Only
-  const onOpenWindow = useCallback((event: WebViewOpenWindowEvent) => {
-    onOpenWindowProp?.(event);
-  }, [onOpenWindowProp]);
-  // !Android and iOS Only
+  const onOpenWindow = useCallback(
+    (event: WebViewOpenWindowEvent) => {
+      onOpenWindowProp?.(event);
+    },
+    [onOpenWindowProp]
+  );
 
   return {
     onShouldStartLoadWithRequest,
@@ -231,5 +279,5 @@ export const useWebViewLogic = ({
     viewState,
     setViewState,
     lastErrorEvent,
-  }
-};
+  };
+};