react-native-unit-components 0.1.0

package/src/helpers/EventBus.ts

@@ -0,0 +1,58 @@
+export enum BusEvent {
+  REQUEST_RENDERING = 'unitRequestRendering',
+  CARD_STATUS_CHANGED = 'cardStatusChanged',
+  REQUEST_REFRESH = 'requestRefresh'
+}
+
+export default class EventBus {
+  private static _instance: EventBus;
+
+  private eventListeners: { [name: string]: Array<(data: any) => void> } = {}
+
+  private constructor() {
+    this.eventListeners = {};
+  }
+
+  public static get Instance() {
+    return this._instance || (this._instance = new this());
+  }
+
+  public event(event: BusEvent, data: any) {
+    let listeners = this.eventListeners[event.valueOf()];
+    if (Array.isArray(listeners)) {
+      listeners.map(listener => {
+        if (typeof listener === 'function') {
+          listener(data);
+        }
+      })
+    }
+  }
+
+  public addListener(event: BusEvent, listener: (data: any) => void) {
+    let listeners = this.eventListeners[event.valueOf()];
+    if (Array.isArray(listeners)) {
+      listeners.push(listener);
+    } else {
+      this.eventListeners[event.valueOf()] = [listener];
+    }
+  }
+
+  public removeListener(listener: (data: any) => void) {
+    Object.keys(this.eventListeners).map(eventName => {
+      let listeners = this.eventListeners[eventName];
+      if (listeners) {
+        this._remove(listeners, listener);
+        if (listeners.length === 0) {
+          delete this.eventListeners[eventName];
+        }
+      }
+    })
+  }
+
+  private _remove(array: Array<(data: any) => void>, item: (data: string) => void) {
+    if (!array) return;
+    for (let i = 0, l = array.length; i < l; i++) {
+      if (item === array[i]) array.splice(i, 1);
+    }
+  }
+}

package/src/index.tsx

@@ -0,0 +1 @@
+export * from './components'

package/src/nativeComponenet/NativeComponentExample.tsx

@@ -0,0 +1,26 @@
+import {
+  requireNativeComponent,
+  UIManager,
+  Platform,
+  ViewStyle,
+} from 'react-native';
+
+const LINKING_ERROR =
+  `The package 'unit-react-native-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);
+    };

package/src/webComponent/WebComponent.tsx

@@ -0,0 +1,75 @@
+import React, { useEffect, useState } from 'react';
+import { Dimensions } from 'react-native';
+import {
+  WebView,
+  WebViewMessageEvent
+} from 'react-native-webview'
+import EventBus, { BusEvent } from '../helpers/EventBus';
+
+import html from './html';
+import type { CardEvent, CardMessage } from './webMessages/cardMessage';
+import type { PageEvent, PageMessage } from './webMessages/pageMessage';
+import { RequestRefreshEvent, UnitEvent, UnitMessage } from './webMessages/unitMessages';
+
+export type WebViewMessageType =
+  | PageMessage
+  | CardMessage
+  | UnitMessage
+
+type WebViewEvent =
+  | PageEvent
+  | UnitEvent
+  | CardEvent
+
+export interface WebViewMessage {
+  type: WebViewMessageType,
+  details?: WebViewEvent
+}
+
+export interface WebComponentProps {
+  type: WebComponentType;
+  params?: string;
+  onMessage: (message: WebViewMessage) => void;
+  script?: string;
+}
+
+export enum WebComponentType {
+  card = 'unit-elements-card',
+  slot = 'unit-elements-sdk-slot'
+}
+
+export const WebComponent = React.forwardRef<WebView, WebComponentProps>((props, webRef) => {
+  const [sourceHtml, setSourceHtml] = useState<string | null>(null)
+
+  const windowWidth = Dimensions.get('window').width;
+
+  useEffect(() => {
+    const component: string = props.type.valueOf()
+    let newHtml = html.replace('<COMPONENT>', `<${component} ${props.params || ''}> </${component}>`)
+    newHtml = newHtml.replace('<SCRIPT_FROM_NATIVE>', props.script || '')
+    setSourceHtml(newHtml)
+  }, [props.params])
+
+  const onMessage = (e: WebViewMessageEvent) => {
+    const message = JSON.parse(e.nativeEvent.data) as WebViewMessage
+
+    if (message.type == UnitMessage.UNIT_REQUEST_REFRESH && message.details) {
+      EventBus.Instance.event(BusEvent.REQUEST_REFRESH, message.details as RequestRefreshEvent)
+    } else {
+      props.onMessage(message)
+    }
+  }
+
+  if (!sourceHtml) return null
+
+  return (
+    <WebView
+      ref={webRef}
+      cacheEnabled={false}
+      scrollEnabled={false}
+      overScrollMode="never"
+      style={{ width: windowWidth }}
+      source={{ html: sourceHtml }}
+      onMessage={onMessage} />
+  )
+})

package/src/webComponent/html.ts

@@ -0,0 +1,72 @@
+const htmlText = `
+  <!DOCTYPE html>
+  <html lang="en">
+
+  <head lang="en">
+    <title>Unit Web SDK Demo</title>
+    <script>
+      window.UnitMobileSDK = true
+    </script>
+    <script src="https://unit-white-labeled-banking.netlify.app/client-events.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
+  </html>
+
+  <body style="margin: 0">
+    <COMPONENT>
+
+    <script>
+      const postMessageToSDK = (message) => {
+        if ('ReactNativeWebView' in window) {
+          const messageString = JSON.stringify(message)
+          window['ReactNativeWebView'].postMessage(messageString)
+        }
+      }
+
+      const postHeight = () => {
+        setTimeout(() => {
+          const height = window.document.documentElement.getBoundingClientRect().height + 36
+          postMessageToSDK({ type: "pageHeight", details: { height } })
+        })
+      }
+
+      window.addEventListener('DOMContentLoaded', e => {
+        postMessageToSDK({ type: "pageLoaded" })
+      });
+
+      window.addEventListener("unitRequestRendering", (e) => {
+        postMessageToSDK({ type: "unitRequestRendering", details: { data: JSON.stringify(e.detail) }})
+      });
+
+      window.addEventListener("unitOnLoad", (e) => {
+        postHeight()
+        postMessageToSDK({ type: "unitOnLoad" })
+      });
+
+      window.addEventListener("unitRequestCloseFlow", (e) => {
+        postMessageToSDK({ type: "unitRequestCloseFlow" })
+      });
+
+      window.addEventListener("unitRequestOpenLink", (e) => {
+        postMessageToSDK({ type: "unitRequestOpenLink", details: e.detail })
+      });
+
+      window.addEventListener("unitCardStatusChanged", (e) => {
+        const response = e.detail
+        response.then((data) => {
+          postMessageToSDK({ type: "cardStatusChanged", details:  { card: JSON.stringify(data.data) }})
+        }).catch((e) => {
+          console.log(e)
+        })
+      });
+
+      const dispatchRenderingEvent = (details) => {
+        const event = new CustomEvent("unitRequestRendering",{ detail: JSON.parse(details) })
+        window.dispatchEvent(event)
+      }
+
+      <SCRIPT_FROM_NATIVE>
+    </script>
+  </body>
+`
+
+export default htmlText

package/src/webComponent/webMessages/cardMessage.ts

@@ -0,0 +1,10 @@
+export enum CardMessage {
+  CARD_STATUS_CHANGE = 'cardStatusChanged'
+}
+
+export interface CardStatusChangedEvent {
+  card: any;
+}
+
+export type CardEvent =
+  | CardStatusChangedEvent

package/src/webComponent/webMessages/pageMessage.ts

@@ -0,0 +1,11 @@
+export enum PageMessage {
+  PAGE_LOADED = 'pageLoaded',
+  PAGE_HEIGHT = 'pageHeight'
+}
+
+export interface HeightEvent {
+  height: number;
+}
+
+export type PageEvent =
+  | HeightEvent

package/src/webComponent/webMessages/unitMessages.ts

@@ -0,0 +1,31 @@
+export enum UnitMessage {
+  UNIT_REQUEST_RENDERING = 'unitRequestRendering',
+  UNIT_REQUEST_REFRESH = 'unitRequestRefresh',
+  UNIT_REQUEST_CLOSE_FLOW = 'unitRequestCloseFlow',
+  UNIT_REQUEST_OPEN_LINK = 'unitRequestOpenLink',
+  UNIT_ON_LOAD = 'unitOnLoad'
+}
+
+export interface RequestRenderingData {
+  nativePlace: string;
+  nativeComponent: string;
+}
+export interface RequestRenderingEvent {
+  data: string;
+}
+
+export interface RequestRefreshEvent {
+  refEvent: string;
+  dependencies: string[];
+  resourceId: string;
+}
+
+export interface RequestOpenLinkEvent {
+  href: string;
+  target: string
+}
+
+export type UnitEvent =
+  | RequestRenderingEvent
+  | RequestRefreshEvent
+  | RequestOpenLinkEvent

package/unit-react-native-components.podspec

@@ -0,0 +1,35 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
+
+Pod::Spec.new do |s|
+  s.name         = "unit-react-native-components"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => "10.0" }
+  s.source       = { :git => "https://github.com/github_account/unit-react-native-components.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,swift}"
+
+  s.dependency "React-Core"
+
+  # Don't install the dependencies when we run `pod install` in the old architecture.
+  if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then
+    s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
+    s.pod_target_xcconfig    = {
+        "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
+        "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
+    }
+
+    s.dependency "React-Codegen"
+    s.dependency "RCT-Folly"
+    s.dependency "RCTRequired"
+    s.dependency "RCTTypeSafety"
+    s.dependency "ReactCommon/turbomodule/core"
+  end
+end