react-native-unit-components 1.0.0 → 1.0.2

package/src/components/UNCardComponent/UNCardComponent.tsx

@@ -63,10 +63,11 @@ export const UNCardComponent = (props: UNCardComponentProps) => {
         type={WebComponentType.card}
         presentationMode={PresentationMode.Default}
         params={getCardParams(props)}
+        theme={props.theme}
         script={getCardScript()}
         onMessage={message => handleMessage(message)}
         width={windowWidth}
-        shouldEnableWebViewScroll={false}
+        isScrollable={false}
       />
     </View>
   );

package/src/components/UNCardComponent/UNCardComponent.utils.ts

@@ -2,13 +2,11 @@ import type WebView from 'react-native-webview';
 import type { UNCardComponentProps } from './UNCardComponent';
 import { WebComponentType } from '../../webComponent/WebComponent';
 import { RequestRefreshEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
-import { UnitSDK } from '../../unitSdkManager/UnitSdkManager';
 
 export const getCardParams = (props: UNCardComponentProps) => {
   return `
     card-id="${props.cardId}"
     customer-token="${props.customerToken}"
-    theme="${props.theme ?? UnitSDK.getTheme()}"
   `;
 };
 

package/src/helpers/BottomSheet/BottomSheet.tsx

@@ -25,6 +25,8 @@ export interface BottomSheetProps {
   height: number,
   animationDuration: number,
   expandToMaxHeightEnabled: boolean
+  handleWebViewScroll: () => void
+  shouldEnableBottomSheetScroll: boolean
 }
 
 const BottomSheet = (props: BottomSheetProps) => {
@@ -39,12 +41,13 @@ const BottomSheet = (props: BottomSheetProps) => {
   const [dy, setDy] = useState(0);
 
   const _parentPanResponder = PanResponder.create({
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onMoveShouldSetPanResponderCapture: (_,) => { //gestureState) => {
-      return false;
-      // return Math.abs(gestureState.dy) > 10
+    onMoveShouldSetPanResponderCapture: (_, gestureState) => {
+      return props.shouldEnableBottomSheetScroll && Math.abs(gestureState.dy) > 10;
     },
     onPanResponderMove(_, gestureState) {
+      if (props.shouldEnableBottomSheetScroll && gestureState.dy < 5) {
+        props.handleWebViewScroll();
+      }
       if (currentHeight + gestureState.dy < 0) return;
       if (!props.expandToMaxHeightEnabled && contentHeight && currentHeight + gestureState.dy < sliderMaxHeight - contentHeight) return;
       panelHeightValue.setValue(currentHeight + gestureState.dy);
@@ -199,7 +202,6 @@ const BottomSheet = (props: BottomSheetProps) => {
 
           <View
             onLayout={_setSize}
-            style={[styles.innerContent]}
           >
             <KeyboardAvoidingView
               behavior="padding"

package/src/messages/nativeMessages/index.ts

@@ -1,3 +1,4 @@
 export enum NativeMessage {
-  IS_SCRIPT_FETCHED = 'isScriptFetched'
+  IS_SCRIPT_FETCHED = 'isScriptFetched',
+  IS_SDK_INITIALIZED = 'isSdkInitialized'
 }

package/src/messages/webMessages/pageMessage.ts

@@ -1,6 +1,6 @@
 export enum PageMessage {
   PAGE_LOADED = 'pageLoaded',
-  PAGE_HEIGHT = 'pageHeight'
+  PAGE_HEIGHT = 'pageHeight',
 }
 
 export interface HeightEvent {

package/src/nativeComponent/UNNativeAddToWalletButton.tsx

@@ -0,0 +1,12 @@
+import {
+  requireNativeComponent,
+} from 'react-native';
+
+type UnitAddToWalletButtonViewProps = {
+  style: object;
+  onAddToWalletClicked: () => void;
+};
+
+const UnitAddToWalletButtonView = requireNativeComponent<UnitAddToWalletButtonViewProps>('UnitAddToWalletButtonView');
+
+export default UnitAddToWalletButtonView;

package/src/scripts/html/bodyHtml.ts

@@ -15,7 +15,7 @@ export enum PresentationMode {
 }
 
 export const getHtmlBody = (unitComponent: string, unitComponentProps?: string, presentationMode?: PresentationMode) => {
-  const currentComponent = `<${unitComponent} ${unitComponentProps || ''}> </${unitComponent}>`;
+  const currentComponent = `<${unitComponent} ${unitComponentProps || ''} }> </${unitComponent}>`;
 
   switch (presentationMode) {
     case PresentationMode.CoverInjectedHeight:

package/src/unitSdkManager/UnitSdkManager.ts

@@ -1,3 +1,5 @@
+import EventBus from '../helpers/EventBus';
+import { NativeMessage } from '../messages/nativeMessages';
 import { fetchUnitScript } from './UnitSdk.api';
 
 export enum UNEnvironment {
@@ -13,11 +15,12 @@ export class UnitSDK {
   protected static env?: UNEnvironment;
   protected static theme?: string;
 
-  public static init = async (env: UNEnvironment, theme: string) => {
+  public static init = async (env: UNEnvironment, theme?: string) => {
     try {
       this.env = env;
       this.theme = theme;
       await fetchUnitScript();
+      EventBus.Instance.event(NativeMessage.IS_SDK_INITIALIZED, {  });
     } catch (e) {
       console.log(e);
     }

package/src/webComponent/WebComponent.tsx

@@ -1,22 +1,27 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { useEffect, useState } from 'react';
 import { WebView, WebViewMessageEvent } from 'react-native-webview';
 import EventBus from '../helpers/EventBus';
 import html, { HTML_PLACEHOLDER } from './html';
 import { RequestRefreshEvent, UnitMessage } from '../messages/webMessages/unitMessages';
 import { useListenerToBus } from '../hooks/listenerToBus';
-import type { WebViewMessage } from '../messages/webMessages';
 import { getHtmlBody, PresentationMode } from '../scripts/html/bodyHtml';
 import { fetchUnitScript, globalUnitScript } from '../unitSdkManager/UnitSdk.api';
 import { NativeMessage } from '../messages/nativeMessages';
+import { UnitSDK } from '../unitSdkManager/UnitSdkManager';
+import type { WebViewMessage } from '../messages/webMessages';
 
 export interface WebComponentProps {
   type: WebComponentType;
   presentationMode?: PresentationMode,
   params?: string;
+  theme?: string;
   onMessage?: (message: WebViewMessage) => void;
   script?: string;
+  isScrollable?: boolean,
+  nestedScrollEnabled?: boolean,
+  handleScroll?: (event: any) => void,
   width?: number;
-  shouldEnableWebViewScroll?: boolean;
 }
 
 export enum WebComponentType {
@@ -29,12 +34,21 @@ export enum WebComponentType {
 export const WebComponent = React.forwardRef<WebView, WebComponentProps>(function WebComponent(props, webRef) {
   const [unitScript, setUnitScript] = useState<string | undefined>(globalUnitScript);
   const [sourceHtml, setSourceHtml] = useState<string | null>(null);
+  const [componentCurrentTheme, setComponentCurrentTheme] = useState<string | undefined>(props.theme ?? UnitSDK.getTheme());
+  const width = props.width ?? '100%';
 
-  const listenerAction = (data: { unitScript?: string }) => {
+  const updateUnitScript = (data: { unitScript?: string }) => {
     setUnitScript(data.unitScript);
   };
 
-  useListenerToBus([{ busEventKey: NativeMessage.IS_SCRIPT_FETCHED, action: listenerAction }]);
+  const updateInitializedParams = () => {
+    setComponentCurrentTheme(props.theme ?? UnitSDK.getTheme());
+  };
+
+  useListenerToBus([
+    { busEventKey: NativeMessage.IS_SCRIPT_FETCHED, action: updateUnitScript },
+    { busEventKey: NativeMessage.IS_SDK_INITIALIZED, action: updateInitializedParams },
+  ]);
 
   useEffect(() => {
     if (!unitScript) {
@@ -42,11 +56,11 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
       return;
     }
 
-    let newHtml = html.replace(HTML_PLACEHOLDER.BODY, getHtmlBody(props.type.valueOf(), props.params, props.presentationMode));
+    const componentParams = (props.params || '') + (componentCurrentTheme ? ` theme="${componentCurrentTheme}"` : '');
+    let newHtml = html.replace(HTML_PLACEHOLDER.BODY, getHtmlBody(props.type.valueOf(), componentParams, props.presentationMode));
     newHtml = newHtml.replace(HTML_PLACEHOLDER.SCRIPT_FROM_NATIVE, props.script || '');
     setSourceHtml(newHtml);
-
-  }, [props.params, unitScript]);
+  }, [props.params, unitScript, props.presentationMode, componentCurrentTheme]);
 
   const onMessage = (e: WebViewMessageEvent) => {
     const message = JSON.parse(e.nativeEvent.data) as WebViewMessage;
@@ -59,14 +73,24 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
 
   if (!sourceHtml) return null;
 
+  const _onScroll = (event: any) => {
+    if (props.handleScroll) {
+      props.handleScroll(event);
+    }
+
+    return null;
+  };
+
   return (
     <WebView
       ref={webRef}
       cacheEnabled={false}
-      scrollEnabled={props.shouldEnableWebViewScroll}
+      scrollEnabled={props.isScrollable}
+      nestedScrollEnabled={props.nestedScrollEnabled}
+      onScroll={_onScroll}
       overScrollMode="never"
       injectedJavaScript={unitScript}
-      style={{ width: props.width ?? '100%', flex: 1 }}
+      style={{ width: width, flex: 1 }}
       source={{ html: sourceHtml }}
       onMessage={onMessage} />
   );

package/android/src/main/java/com/unitreactnativecomponents/UnitReactNativeComponentsViewManager.kt

@@ -1,19 +0,0 @@
-package com.unitreactnativecomponents
-import android.graphics.Color
-import android.view.View
-import com.facebook.react.uimanager.SimpleViewManager
-import com.facebook.react.uimanager.ThemedReactContext
-import com.facebook.react.uimanager.annotations.ReactProp
-
-class UnitReactNativeComponentsViewManager : SimpleViewManager<View>() {
-  override fun getName() = "UnitReactNativeComponentsView"
-
-  override fun createViewInstance(reactContext: ThemedReactContext): View {
-    return View(reactContext)
-  }
-
-  @ReactProp(name = "color")
-  fun setColor(view: View, color: String) {
-    view.setBackgroundColor(Color.parseColor(color))
-  }
-}

package/lib/commonjs/nativeComponenet/NativeComponentExample.js

@@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.UnitReactNativeComponentsView = void 0;
-
-var _reactNative = require("react-native");
-
-const LINKING_ERROR = 'The package \'react-native-unit-components\' doesn\'t seem to be linked. Make sure: \n\n' + _reactNative.Platform.select({
-  ios: '- You have run \'pod install\'\n',
-  default: ''
-}) + '- You rebuilt the app after installing the package\n' + '- You are not using Expo managed workflow\n';
-const ComponentName = 'UnitReactNativeComponentsView';
-const UnitReactNativeComponentsView = _reactNative.UIManager.getViewManagerConfig(ComponentName) != null ? (0, _reactNative.requireNativeComponent)(ComponentName) : () => {
-  throw new Error(LINKING_ERROR);
-};
-exports.UnitReactNativeComponentsView = UnitReactNativeComponentsView;
-//# sourceMappingURL=NativeComponentExample.js.map

package/lib/commonjs/nativeComponenet/NativeComponentExample.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["LINKING_ERROR","Platform","select","ios","default","ComponentName","UnitReactNativeComponentsView","UIManager","getViewManagerConfig","requireNativeComponent","Error"],"sources":["NativeComponentExample.tsx"],"sourcesContent":["import {\n  requireNativeComponent,\n  UIManager,\n  Platform,\n  ViewStyle,\n} from 'react-native';\n\nconst LINKING_ERROR =\n  'The package \\'react-native-unit-components\\' doesn\\'t seem to be linked. Make sure: \\n\\n' +\n  Platform.select({ ios: '- You have run \\'pod install\\'\\n', default: '' }) +\n  '- You rebuilt the app after installing the package\\n' +\n  '- You are not using Expo managed workflow\\n';\n\ntype UnitReactNativeComponentsProps = {\n  color: string;\n  style: ViewStyle;\n};\n\nconst ComponentName = 'UnitReactNativeComponentsView';\n\nexport const UnitReactNativeComponentsView =\n  UIManager.getViewManagerConfig(ComponentName) != null\n    ? requireNativeComponent<UnitReactNativeComponentsProps>(ComponentName)\n    : () => {\n      throw new Error(LINKING_ERROR);\n    };\n"],"mappings":";;;;;;;AAAA;;AAOA,MAAMA,aAAa,GACjB,6FACAC,qBAAA,CAASC,MAAT,CAAgB;EAAEC,GAAG,EAAE,kCAAP;EAA2CC,OAAO,EAAE;AAApD,CAAhB,CADA,GAEA,sDAFA,GAGA,6CAJF;AAWA,MAAMC,aAAa,GAAG,+BAAtB;AAEO,MAAMC,6BAA6B,GACxCC,sBAAA,CAAUC,oBAAV,CAA+BH,aAA/B,KAAiD,IAAjD,GACI,IAAAI,mCAAA,EAAuDJ,aAAvD,CADJ,GAEI,MAAM;EACN,MAAM,IAAIK,KAAJ,CAAUV,aAAV,CAAN;AACD,CALE"}

package/lib/module/nativeComponenet/NativeComponentExample.js

@@ -1,10 +0,0 @@
-import { requireNativeComponent, UIManager, Platform } from 'react-native';
-const LINKING_ERROR = 'The package \'react-native-unit-components\' doesn\'t seem to be linked. Make sure: \n\n' + Platform.select({
-  ios: '- You have run \'pod install\'\n',
-  default: ''
-}) + '- You rebuilt the app after installing the package\n' + '- You are not using Expo managed workflow\n';
-const ComponentName = 'UnitReactNativeComponentsView';
-export const UnitReactNativeComponentsView = UIManager.getViewManagerConfig(ComponentName) != null ? requireNativeComponent(ComponentName) : () => {
-  throw new Error(LINKING_ERROR);
-};
-//# sourceMappingURL=NativeComponentExample.js.map

package/lib/module/nativeComponenet/NativeComponentExample.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["requireNativeComponent","UIManager","Platform","LINKING_ERROR","select","ios","default","ComponentName","UnitReactNativeComponentsView","getViewManagerConfig","Error"],"sources":["NativeComponentExample.tsx"],"sourcesContent":["import {\n  requireNativeComponent,\n  UIManager,\n  Platform,\n  ViewStyle,\n} from 'react-native';\n\nconst LINKING_ERROR =\n  'The package \\'react-native-unit-components\\' doesn\\'t seem to be linked. Make sure: \\n\\n' +\n  Platform.select({ ios: '- You have run \\'pod install\\'\\n', default: '' }) +\n  '- You rebuilt the app after installing the package\\n' +\n  '- You are not using Expo managed workflow\\n';\n\ntype UnitReactNativeComponentsProps = {\n  color: string;\n  style: ViewStyle;\n};\n\nconst ComponentName = 'UnitReactNativeComponentsView';\n\nexport const UnitReactNativeComponentsView =\n  UIManager.getViewManagerConfig(ComponentName) != null\n    ? requireNativeComponent<UnitReactNativeComponentsProps>(ComponentName)\n    : () => {\n      throw new Error(LINKING_ERROR);\n    };\n"],"mappings":"AAAA,SACEA,sBADF,EAEEC,SAFF,EAGEC,QAHF,QAKO,cALP;AAOA,MAAMC,aAAa,GACjB,6FACAD,QAAQ,CAACE,MAAT,CAAgB;EAAEC,GAAG,EAAE,kCAAP;EAA2CC,OAAO,EAAE;AAApD,CAAhB,CADA,GAEA,sDAFA,GAGA,6CAJF;AAWA,MAAMC,aAAa,GAAG,+BAAtB;AAEA,OAAO,MAAMC,6BAA6B,GACxCP,SAAS,CAACQ,oBAAV,CAA+BF,aAA/B,KAAiD,IAAjD,GACIP,sBAAsB,CAAiCO,aAAjC,CAD1B,GAEI,MAAM;EACN,MAAM,IAAIG,KAAJ,CAAUP,aAAV,CAAN;AACD,CALE"}

package/lib/typescript/nativeComponenet/NativeComponentExample.d.ts

@@ -1,7 +0,0 @@
-import { ViewStyle } from 'react-native';
-declare type UnitReactNativeComponentsProps = {
-    color: string;
-    style: ViewStyle;
-};
-export declare const UnitReactNativeComponentsView: import("react-native").HostComponent<UnitReactNativeComponentsProps> | (() => never);
-export {};

package/src/nativeComponenet/NativeComponentExample.tsx

@@ -1,26 +0,0 @@
-import {
-  requireNativeComponent,
-  UIManager,
-  Platform,
-  ViewStyle,
-} from 'react-native';
-
-const LINKING_ERROR =
-  'The package \'react-native-unit-components\' doesn\'t seem to be linked. Make sure: \n\n' +
-  Platform.select({ ios: '- You have run \'pod install\'\n', default: '' }) +
-  '- You rebuilt the app after installing the package\n' +
-  '- You are not using Expo managed workflow\n';
-
-type UnitReactNativeComponentsProps = {
-  color: string;
-  style: ViewStyle;
-};
-
-const ComponentName = 'UnitReactNativeComponentsView';
-
-export const UnitReactNativeComponentsView =
-  UIManager.getViewManagerConfig(ComponentName) != null
-    ? requireNativeComponent<UnitReactNativeComponentsProps>(ComponentName)
-    : () => {
-      throw new Error(LINKING_ERROR);
-    };