react-native-unit-components 1.0.1 → 1.0.2

package/src/webComponent/WebComponent.tsx

@@ -8,15 +8,18 @@ import { useListenerToBus } from '../hooks/listenerToBus';
 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;
 }
@@ -31,13 +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) {
@@ -45,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;
@@ -75,6 +86,7 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
       ref={webRef}
       cacheEnabled={false}
       scrollEnabled={props.isScrollable}
+      nestedScrollEnabled={props.nestedScrollEnabled}
       onScroll={_onScroll}
       overScrollMode="never"
       injectedJavaScript={unitScript}