react-native-unit-components 1.0.0 → 1.0.2

package/lib/module/helpers/BottomSheet/BottomSheet.js

@@ -17,13 +17,15 @@ const BottomSheet = props => {
   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);
@@ -171,8 +173,7 @@ const BottomSheet = props => {
   }, /*#__PURE__*/React.createElement(Image, {
     source: CloseIcon
   })), /*#__PURE__*/React.createElement(View, {
-    onLayout: _setSize,
-    style: [styles.innerContent]
+    onLayout: _setSize
   }, /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
     behavior: "padding",
     style: {

package/lib/module/helpers/BottomSheet/BottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useRef","useState","Animated","BackHandler","Dimensions","Easing","Image","KeyboardAvoidingView","PanResponder","TouchableOpacity","View","PropTypes","CloseIcon","BOTTOM_SHEET_MAX_PRECANTAGE_SIZE","getStylesObject","BottomSheet","props","panelHeightValue","Value","sliderMaxHeight","current","fadeAnim","styles","isPanelOpened","setIsPanelOpened","isOpen","contentHeight","setContentHeight","undefined","currentHeight","setCurrentHeight","dy","setDy","_parentPanResponder","create","onMoveShouldSetPanResponderCapture","_","onPanResponderMove","gestureState","expandToMaxHeightEnabled","setValue","onPanResponderRelease","collapse","setToContentHeight","expand","fadeIn","_dismiss","addEventListener","_onBackPress","id","addListener","e","value","removeEventListener","removeListener","timing","toValue","duration","useNativeDriver","start","fadeOut","onClose","animationDuration","easing","quad","_setSize","newContentHeight","nativeEvent","layout","height","children","outsideContainer","animation","panHandlers","container","transform","translateY","outerContent","closeButton","innerContent","propTypes","oneOfType","node","bool","number","func","onOpen","defaultProps","get"],"sources":["BottomSheet.tsx"],"sourcesContent":["import React, { ReactNode, useEffect, useRef, useState } from 'react';\nimport {\n  Animated,\n  BackHandler,\n  Dimensions,\n  Easing,\n  Image,\n  KeyboardAvoidingView,\n  LayoutChangeEvent,\n  PanResponder,\n  TouchableOpacity,\n  View,\n} from 'react-native';\nimport PropTypes from 'prop-types';\nimport { CloseIcon } from '../../assets/images';\nimport { BOTTOM_SHEET_MAX_PRECANTAGE_SIZE } from '../../components/UNBottomSheetComponent/UNBottomSheetComponent.constants';\nimport { getStylesObject } from './BottomSheet.styles';\n\nexport interface BottomSheetProps {\n  isOpen: boolean\n  children: ReactNode\n  sliderMaxHeight: number\n  onOpen: () => void\n  onClose: () => void\n  height: number,\n  animationDuration: number,\n  expandToMaxHeightEnabled: boolean\n}\n\nconst BottomSheet = (props: BottomSheetProps) => {\n  const panelHeightValue = useRef(new Animated.Value(props.sliderMaxHeight)).current;\n  const fadeAnim = useRef(new Animated.Value(0)).current;\n  const styles = getStylesObject(fadeAnim);\n  const [isPanelOpened, setIsPanelOpened] = useState(props.isOpen);\n  const [contentHeight, setContentHeight] = useState<number | undefined>(undefined);\n\n  const [currentHeight, setCurrentHeight] = useState<number>(props.sliderMaxHeight);\n\n  const [dy, setDy] = useState(0);\n\n  const _parentPanResponder = PanResponder.create({\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    onMoveShouldSetPanResponderCapture: (_,) => { //gestureState) => {\n      return false;\n      // return Math.abs(gestureState.dy) > 10\n    },\n    onPanResponderMove(_, gestureState) {\n      if (currentHeight + gestureState.dy < 0) return;\n      if (!props.expandToMaxHeightEnabled && contentHeight && currentHeight + gestureState.dy < sliderMaxHeight - contentHeight) return;\n      panelHeightValue.setValue(currentHeight + gestureState.dy);\n      setDy(gestureState.dy);\n    },\n    onPanResponderRelease: () => {\n      if (dy > 0) {\n        collapse();\n      } else if (!props.expandToMaxHeightEnabled) {\n        contentHeight && setToContentHeight(contentHeight);\n      } else if (dy < 0) {\n        expand();\n      } else {\n        expand();\n      }\n    }\n  });\n\n  useEffect(() => {\n    if (props.isOpen && !isPanelOpened) {\n      fadeIn();\n    } else if (isPanelOpened) {\n      setContentHeight(0);\n      _dismiss();\n    }\n  }, [props.isOpen]);\n\n  useEffect(() => {\n    BackHandler.addEventListener('hardwareBackPress', _onBackPress);\n    const id = panelHeightValue.addListener(e => setCurrentHeight(e.value));\n\n    return (() => {\n      BackHandler.removeEventListener('hardwareBackPress', _onBackPress);\n      panelHeightValue.removeListener(id);\n    });\n  }, []);\n\n  const fadeIn = () => {\n    Animated.timing(fadeAnim, {\n      toValue: 0.3,\n      duration: 500,\n      useNativeDriver: false\n    }).start(() => { setIsPanelOpened(true); });\n  };\n\n  const fadeOut = () => {\n    Animated.timing(fadeAnim, {\n      toValue: 0,\n      duration: 500,\n      useNativeDriver: false\n    }).start(() => {\n      setIsPanelOpened(false);\n      props.onClose();\n    });\n  };\n\n  const setToContentHeight = (contentHeight: number) => {\n    Animated.timing(panelHeightValue, {\n      duration: props.animationDuration,\n      easing: Easing.quad,\n      toValue: sliderMaxHeight - contentHeight,\n      useNativeDriver: false,\n    }).start();\n  };\n\n  const expand = () => {\n    const { animationDuration } = props;\n\n    if (contentHeight && currentHeight > (sliderMaxHeight - contentHeight)) {\n      setToContentHeight(contentHeight);\n      return;\n    }\n\n    Animated.timing(panelHeightValue, {\n      duration: animationDuration,\n      easing: Easing.quad,\n      toValue: 0,\n      useNativeDriver: false,\n    }).start();\n  };\n\n  const collapse = () => {\n    if (contentHeight && currentHeight > (sliderMaxHeight - contentHeight)) {\n      _dismiss();\n      return;\n    }\n\n    contentHeight && setToContentHeight(contentHeight);\n  };\n\n  const _onBackPress = () => {\n    isPanelOpened && collapse();\n    return isPanelOpened;\n  };\n\n  const _setSize = (e: LayoutChangeEvent) => {\n    const newContentHeight = e.nativeEvent.layout.height;\n\n    setContentHeight(newContentHeight);\n    setToContentHeight(newContentHeight);\n  };\n\n  const _dismiss = () => {\n    const { animationDuration } = props;\n    Animated.timing(panelHeightValue, {\n      duration: animationDuration,\n      easing: Easing.quad,\n      toValue: sliderMaxHeight,\n      useNativeDriver: false,\n    }).start(() => {\n      null;\n    });\n    fadeOut();\n  };\n\n  const {\n    sliderMaxHeight,\n    children,\n  } = props;\n\n  return (\n    <>\n      <TouchableOpacity\n        style={styles.outsideContainer} activeOpacity={1}\n        onPress={_dismiss}\n      >\n        <Animated.View\n          style={styles.animation}\n        >\n        </Animated.View>\n      </TouchableOpacity>\n      <Animated.View\n        {..._parentPanResponder.panHandlers}\n        style={{\n          ...styles.container,\n          height: sliderMaxHeight,\n          transform: [\n            { translateY: panelHeightValue },\n          ],\n        }}\n      >\n        <View\n          style={styles.outerContent}\n        >\n          <TouchableOpacity\n            activeOpacity={1}\n            style={styles.closeButton}\n            onPress={_dismiss}\n          >\n            <Image source={CloseIcon} />\n          </TouchableOpacity>\n\n          <View\n            onLayout={_setSize}\n            style={[styles.innerContent]}\n          >\n            <KeyboardAvoidingView\n              behavior=\"padding\"\n              style={{ height: props.height }}\n              keyboardVerticalOffset={props.height * (1 - BOTTOM_SHEET_MAX_PRECANTAGE_SIZE)}\n            >\n              {children}\n            </KeyboardAvoidingView>\n          </View>\n        </View>\n      </Animated.View>\n    </>\n  );\n};\n\nBottomSheet.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.node]),\n  isOpen: PropTypes.bool,\n  sliderMaxHeight: PropTypes.number,\n  animation: PropTypes.func,\n  animationDuration: PropTypes.number,\n  onOpen: PropTypes.func,\n  onClose: PropTypes.func,\n  expandToMaxHeightEnabled: PropTypes.bool\n};\n\nBottomSheet.defaultProps = {\n  children: <View />,\n  isOpen: true,\n  sliderMaxHeight: Dimensions.get('window').height * BOTTOM_SHEET_MAX_PRECANTAGE_SIZE,\n  animationDuration: 200,\n  onOpen: () => null,\n  onClose: () => null,\n  expandToMaxHeightEnabled: false\n};\n\nexport default BottomSheet;\n"],"mappings":"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"}
+{"version":3,"names":["React","useEffect","useRef","useState","Animated","BackHandler","Dimensions","Easing","Image","KeyboardAvoidingView","PanResponder","TouchableOpacity","View","PropTypes","CloseIcon","BOTTOM_SHEET_MAX_PRECANTAGE_SIZE","getStylesObject","BottomSheet","props","panelHeightValue","Value","sliderMaxHeight","current","fadeAnim","styles","isPanelOpened","setIsPanelOpened","isOpen","contentHeight","setContentHeight","undefined","currentHeight","setCurrentHeight","dy","setDy","_parentPanResponder","create","onMoveShouldSetPanResponderCapture","_","gestureState","shouldEnableBottomSheetScroll","Math","abs","onPanResponderMove","handleWebViewScroll","expandToMaxHeightEnabled","setValue","onPanResponderRelease","collapse","setToContentHeight","expand","fadeIn","_dismiss","addEventListener","_onBackPress","id","addListener","e","value","removeEventListener","removeListener","timing","toValue","duration","useNativeDriver","start","fadeOut","onClose","animationDuration","easing","quad","_setSize","newContentHeight","nativeEvent","layout","height","children","outsideContainer","animation","panHandlers","container","transform","translateY","outerContent","closeButton","propTypes","oneOfType","node","bool","number","func","onOpen","defaultProps","get"],"sources":["BottomSheet.tsx"],"sourcesContent":["import React, { ReactNode, useEffect, useRef, useState } from 'react';\nimport {\n  Animated,\n  BackHandler,\n  Dimensions,\n  Easing,\n  Image,\n  KeyboardAvoidingView,\n  LayoutChangeEvent,\n  PanResponder,\n  TouchableOpacity,\n  View,\n} from 'react-native';\nimport PropTypes from 'prop-types';\nimport { CloseIcon } from '../../assets/images';\nimport { BOTTOM_SHEET_MAX_PRECANTAGE_SIZE } from '../../components/UNBottomSheetComponent/UNBottomSheetComponent.constants';\nimport { getStylesObject } from './BottomSheet.styles';\n\nexport interface BottomSheetProps {\n  isOpen: boolean\n  children: ReactNode\n  sliderMaxHeight: number\n  onOpen: () => void\n  onClose: () => void\n  height: number,\n  animationDuration: number,\n  expandToMaxHeightEnabled: boolean\n  handleWebViewScroll: () => void\n  shouldEnableBottomSheetScroll: boolean\n}\n\nconst BottomSheet = (props: BottomSheetProps) => {\n  const panelHeightValue = useRef(new Animated.Value(props.sliderMaxHeight)).current;\n  const fadeAnim = useRef(new Animated.Value(0)).current;\n  const styles = getStylesObject(fadeAnim);\n  const [isPanelOpened, setIsPanelOpened] = useState(props.isOpen);\n  const [contentHeight, setContentHeight] = useState<number | undefined>(undefined);\n\n  const [currentHeight, setCurrentHeight] = useState<number>(props.sliderMaxHeight);\n\n  const [dy, setDy] = useState(0);\n\n  const _parentPanResponder = PanResponder.create({\n    onMoveShouldSetPanResponderCapture: (_, gestureState) => {\n      return props.shouldEnableBottomSheetScroll && Math.abs(gestureState.dy) > 10;\n    },\n    onPanResponderMove(_, gestureState) {\n      if (props.shouldEnableBottomSheetScroll && gestureState.dy < 5) {\n        props.handleWebViewScroll();\n      }\n      if (currentHeight + gestureState.dy < 0) return;\n      if (!props.expandToMaxHeightEnabled && contentHeight && currentHeight + gestureState.dy < sliderMaxHeight - contentHeight) return;\n      panelHeightValue.setValue(currentHeight + gestureState.dy);\n      setDy(gestureState.dy);\n    },\n    onPanResponderRelease: () => {\n      if (dy > 0) {\n        collapse();\n      } else if (!props.expandToMaxHeightEnabled) {\n        contentHeight && setToContentHeight(contentHeight);\n      } else if (dy < 0) {\n        expand();\n      } else {\n        expand();\n      }\n    }\n  });\n\n  useEffect(() => {\n    if (props.isOpen && !isPanelOpened) {\n      fadeIn();\n    } else if (isPanelOpened) {\n      setContentHeight(0);\n      _dismiss();\n    }\n  }, [props.isOpen]);\n\n  useEffect(() => {\n    BackHandler.addEventListener('hardwareBackPress', _onBackPress);\n    const id = panelHeightValue.addListener(e => setCurrentHeight(e.value));\n\n    return (() => {\n      BackHandler.removeEventListener('hardwareBackPress', _onBackPress);\n      panelHeightValue.removeListener(id);\n    });\n  }, []);\n\n  const fadeIn = () => {\n    Animated.timing(fadeAnim, {\n      toValue: 0.3,\n      duration: 500,\n      useNativeDriver: false\n    }).start(() => { setIsPanelOpened(true); });\n  };\n\n  const fadeOut = () => {\n    Animated.timing(fadeAnim, {\n      toValue: 0,\n      duration: 500,\n      useNativeDriver: false\n    }).start(() => {\n      setIsPanelOpened(false);\n      props.onClose();\n    });\n  };\n\n  const setToContentHeight = (contentHeight: number) => {\n    Animated.timing(panelHeightValue, {\n      duration: props.animationDuration,\n      easing: Easing.quad,\n      toValue: sliderMaxHeight - contentHeight,\n      useNativeDriver: false,\n    }).start();\n  };\n\n  const expand = () => {\n    const { animationDuration } = props;\n\n    if (contentHeight && currentHeight > (sliderMaxHeight - contentHeight)) {\n      setToContentHeight(contentHeight);\n      return;\n    }\n\n    Animated.timing(panelHeightValue, {\n      duration: animationDuration,\n      easing: Easing.quad,\n      toValue: 0,\n      useNativeDriver: false,\n    }).start();\n  };\n\n  const collapse = () => {\n    if (contentHeight && currentHeight > (sliderMaxHeight - contentHeight)) {\n      _dismiss();\n      return;\n    }\n\n    contentHeight && setToContentHeight(contentHeight);\n  };\n\n  const _onBackPress = () => {\n    isPanelOpened && collapse();\n    return isPanelOpened;\n  };\n\n  const _setSize = (e: LayoutChangeEvent) => {\n    const newContentHeight = e.nativeEvent.layout.height;\n\n    setContentHeight(newContentHeight);\n    setToContentHeight(newContentHeight);\n  };\n\n  const _dismiss = () => {\n    const { animationDuration } = props;\n    Animated.timing(panelHeightValue, {\n      duration: animationDuration,\n      easing: Easing.quad,\n      toValue: sliderMaxHeight,\n      useNativeDriver: false,\n    }).start(() => {\n      null;\n    });\n    fadeOut();\n  };\n\n  const {\n    sliderMaxHeight,\n    children,\n  } = props;\n\n  return (\n    <>\n      <TouchableOpacity\n        style={styles.outsideContainer} activeOpacity={1}\n        onPress={_dismiss}\n      >\n        <Animated.View\n          style={styles.animation}\n        >\n        </Animated.View>\n      </TouchableOpacity>\n      <Animated.View\n        {..._parentPanResponder.panHandlers}\n        style={{\n          ...styles.container,\n          height: sliderMaxHeight,\n          transform: [\n            { translateY: panelHeightValue },\n          ],\n        }}\n      >\n        <View\n          style={styles.outerContent}\n        >\n          <TouchableOpacity\n            activeOpacity={1}\n            style={styles.closeButton}\n            onPress={_dismiss}\n          >\n            <Image source={CloseIcon} />\n          </TouchableOpacity>\n\n          <View\n            onLayout={_setSize}\n          >\n            <KeyboardAvoidingView\n              behavior=\"padding\"\n              style={{ height: props.height }}\n              keyboardVerticalOffset={props.height * (1 - BOTTOM_SHEET_MAX_PRECANTAGE_SIZE)}\n            >\n              {children}\n            </KeyboardAvoidingView>\n          </View>\n        </View>\n      </Animated.View>\n    </>\n  );\n};\n\nBottomSheet.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.node]),\n  isOpen: PropTypes.bool,\n  sliderMaxHeight: PropTypes.number,\n  animation: PropTypes.func,\n  animationDuration: PropTypes.number,\n  onOpen: PropTypes.func,\n  onClose: PropTypes.func,\n  expandToMaxHeightEnabled: PropTypes.bool\n};\n\nBottomSheet.defaultProps = {\n  children: <View />,\n  isOpen: true,\n  sliderMaxHeight: Dimensions.get('window').height * BOTTOM_SHEET_MAX_PRECANTAGE_SIZE,\n  animationDuration: 200,\n  onOpen: () => null,\n  onClose: () => null,\n  expandToMaxHeightEnabled: false\n};\n\nexport default BottomSheet;\n"],"mappings":"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"}

package/lib/module/messages/nativeMessages/index.js

@@ -2,5 +2,6 @@ export let NativeMessage;
 
 (function (NativeMessage) {
   NativeMessage["IS_SCRIPT_FETCHED"] = "isScriptFetched";
+  NativeMessage["IS_SDK_INITIALIZED"] = "isSdkInitialized";
 })(NativeMessage || (NativeMessage = {}));
 //# sourceMappingURL=index.js.map

package/lib/module/messages/nativeMessages/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["NativeMessage"],"sources":["index.ts"],"sourcesContent":["export enum NativeMessage {\n  IS_SCRIPT_FETCHED = 'isScriptFetched'\n}\n"],"mappings":"AAAA,WAAYA,aAAZ;;WAAYA,a;EAAAA,a;GAAAA,a,KAAAA,a"}
+{"version":3,"names":["NativeMessage"],"sources":["index.ts"],"sourcesContent":["export enum NativeMessage {\n  IS_SCRIPT_FETCHED = 'isScriptFetched',\n  IS_SDK_INITIALIZED = 'isSdkInitialized'\n}\n"],"mappings":"AAAA,WAAYA,aAAZ;;WAAYA,a;EAAAA,a;EAAAA,a;GAAAA,a,KAAAA,a"}

package/lib/module/messages/webMessages/pageMessage.js.map

@@ -1 +1 @@
-{"version":3,"names":["PageMessage"],"sources":["pageMessage.ts"],"sourcesContent":["export enum PageMessage {\n  PAGE_LOADED = 'pageLoaded',\n  PAGE_HEIGHT = 'pageHeight'\n}\n\nexport interface HeightEvent {\n  height: number;\n}\n\nexport type PageEvent =\n  | HeightEvent\n"],"mappings":"AAAA,WAAYA,WAAZ;;WAAYA,W;EAAAA,W;EAAAA,W;GAAAA,W,KAAAA,W"}
+{"version":3,"names":["PageMessage"],"sources":["pageMessage.ts"],"sourcesContent":["export enum PageMessage {\n  PAGE_LOADED = 'pageLoaded',\n  PAGE_HEIGHT = 'pageHeight',\n}\n\nexport interface HeightEvent {\n  height: number;\n}\n\nexport type PageEvent =\n  | HeightEvent\n"],"mappings":"AAAA,WAAYA,WAAZ;;WAAYA,W;EAAAA,W;EAAAA,W;GAAAA,W,KAAAA,W"}

package/lib/module/nativeComponent/UNNativeAddToWalletButton.js

@@ -0,0 +1,4 @@
+import { requireNativeComponent } from 'react-native';
+const UnitAddToWalletButtonView = requireNativeComponent('UnitAddToWalletButtonView');
+export default UnitAddToWalletButtonView;
+//# sourceMappingURL=UNNativeAddToWalletButton.js.map

package/lib/module/nativeComponent/UNNativeAddToWalletButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["requireNativeComponent","UnitAddToWalletButtonView"],"sources":["UNNativeAddToWalletButton.tsx"],"sourcesContent":["import {\n  requireNativeComponent,\n} from 'react-native';\n\ntype UnitAddToWalletButtonViewProps = {\n  style: object;\n  onAddToWalletClicked: () => void;\n};\n\nconst UnitAddToWalletButtonView = requireNativeComponent<UnitAddToWalletButtonViewProps>('UnitAddToWalletButtonView');\n\nexport default UnitAddToWalletButtonView;\n"],"mappings":"AAAA,SACEA,sBADF,QAEO,cAFP;AASA,MAAMC,yBAAyB,GAAGD,sBAAsB,CAAiC,2BAAjC,CAAxD;AAEA,eAAeC,yBAAf"}

package/lib/module/scripts/html/bodyHtml.js

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

package/lib/module/scripts/html/bodyHtml.js.map

@@ -1 +1 @@
-{"version":3,"names":["webViewId","PresentationMode","getHtmlBody","unitComponent","unitComponentProps","presentationMode","currentComponent","CoverInjectedHeight","getCoverInjectedHeightBodyScript","Inherit","getInheritParentSizeScript","currentUnitScript"],"sources":["bodyHtml.ts"],"sourcesContent":["export const webViewId = 'webViewContainer';\n\nexport enum PresentationMode {\n  /*\n    CoverInjectedHeight - give id (<webViewId> param) to enable style injection to the root. Then cover the injected height.\n\n    Inherit -  inherit the parent size by style of 100 view height\n\n    Default - return the unit component script\n  */\n\n  CoverInjectedHeight = 'coverInjectedHeight',\n  Inherit = 'inherit',\n  Default = 'deafult'\n}\n\nexport const getHtmlBody = (unitComponent: string, unitComponentProps?: string, presentationMode?: PresentationMode) => {\n  const currentComponent = `<${unitComponent} ${unitComponentProps || ''}> </${unitComponent}>`;\n\n  switch (presentationMode) {\n    case PresentationMode.CoverInjectedHeight:\n      return getCoverInjectedHeightBodyScript(currentComponent);\n    case PresentationMode.Inherit:\n      return getInheritParentSizeScript(currentComponent);\n    default:\n      return currentComponent;\n  }\n};\n\nconst getCoverInjectedHeightBodyScript = (currentUnitScript: string) => {\n  return `\n    <div id=${webViewId}>\n      <div style=\"height: 100%; display: block; padding: 1px;\">\n        ${currentUnitScript}\n      </div>\n    </div>\n  `;\n};\n\nconst getInheritParentSizeScript = (currentUnitScript: string) => {\n  return `\n    <div style=\"height: 100vh\">\n      ${currentUnitScript}\n    </div>\n  `;\n};\n"],"mappings":"AAAA,OAAO,MAAMA,SAAS,GAAG,kBAAlB;AAEP,WAAYC,gBAAZ;;WAAYA,gB;EAAAA,gB;EAAAA,gB;EAAAA,gB;GAAAA,gB,KAAAA,gB;;AAcZ,OAAO,MAAMC,WAAW,GAAG,CAACC,aAAD,EAAwBC,kBAAxB,EAAqDC,gBAArD,KAA6F;EACtH,MAAMC,gBAAgB,GAAI,IAAGH,aAAc,IAAGC,kBAAkB,IAAI,EAAG,OAAMD,aAAc,GAA3F;;EAEA,QAAQE,gBAAR;IACE,KAAKJ,gBAAgB,CAACM,mBAAtB;MACE,OAAOC,gCAAgC,CAACF,gBAAD,CAAvC;;IACF,KAAKL,gBAAgB,CAACQ,OAAtB;MACE,OAAOC,0BAA0B,CAACJ,gBAAD,CAAjC;;IACF;MACE,OAAOA,gBAAP;EANJ;AAQD,CAXM;;AAaP,MAAME,gCAAgC,GAAIG,iBAAD,IAA+B;EACtE,OAAQ;AACV,cAAcX,SAAU;AACxB;AACA,UAAUW,iBAAkB;AAC5B;AACA;AACA,GANE;AAOD,CARD;;AAUA,MAAMD,0BAA0B,GAAIC,iBAAD,IAA+B;EAChE,OAAQ;AACV;AACA,QAAQA,iBAAkB;AAC1B;AACA,GAJE;AAKD,CAND"}
+{"version":3,"names":["webViewId","PresentationMode","getHtmlBody","unitComponent","unitComponentProps","presentationMode","currentComponent","CoverInjectedHeight","getCoverInjectedHeightBodyScript","Inherit","getInheritParentSizeScript","currentUnitScript"],"sources":["bodyHtml.ts"],"sourcesContent":["export const webViewId = 'webViewContainer';\n\nexport enum PresentationMode {\n  /*\n    CoverInjectedHeight - give id (<webViewId> param) to enable style injection to the root. Then cover the injected height.\n\n    Inherit -  inherit the parent size by style of 100 view height\n\n    Default - return the unit component script\n  */\n\n  CoverInjectedHeight = 'coverInjectedHeight',\n  Inherit = 'inherit',\n  Default = 'deafult'\n}\n\nexport const getHtmlBody = (unitComponent: string, unitComponentProps?: string, presentationMode?: PresentationMode) => {\n  const currentComponent = `<${unitComponent} ${unitComponentProps || ''} }> </${unitComponent}>`;\n\n  switch (presentationMode) {\n    case PresentationMode.CoverInjectedHeight:\n      return getCoverInjectedHeightBodyScript(currentComponent);\n    case PresentationMode.Inherit:\n      return getInheritParentSizeScript(currentComponent);\n    default:\n      return currentComponent;\n  }\n};\n\nconst getCoverInjectedHeightBodyScript = (currentUnitScript: string) => {\n  return `\n    <div id=${webViewId}>\n      <div style=\"height: 100%; display: block; padding: 1px;\">\n        ${currentUnitScript}\n      </div>\n    </div>\n  `;\n};\n\nconst getInheritParentSizeScript = (currentUnitScript: string) => {\n  return `\n    <div style=\"height: 100vh\">\n      ${currentUnitScript}\n    </div>\n  `;\n};\n"],"mappings":"AAAA,OAAO,MAAMA,SAAS,GAAG,kBAAlB;AAEP,WAAYC,gBAAZ;;WAAYA,gB;EAAAA,gB;EAAAA,gB;EAAAA,gB;GAAAA,gB,KAAAA,gB;;AAcZ,OAAO,MAAMC,WAAW,GAAG,CAACC,aAAD,EAAwBC,kBAAxB,EAAqDC,gBAArD,KAA6F;EACtH,MAAMC,gBAAgB,GAAI,IAAGH,aAAc,IAAGC,kBAAkB,IAAI,EAAG,SAAQD,aAAc,GAA7F;;EAEA,QAAQE,gBAAR;IACE,KAAKJ,gBAAgB,CAACM,mBAAtB;MACE,OAAOC,gCAAgC,CAACF,gBAAD,CAAvC;;IACF,KAAKL,gBAAgB,CAACQ,OAAtB;MACE,OAAOC,0BAA0B,CAACJ,gBAAD,CAAjC;;IACF;MACE,OAAOA,gBAAP;EANJ;AAQD,CAXM;;AAaP,MAAME,gCAAgC,GAAIG,iBAAD,IAA+B;EACtE,OAAQ;AACV,cAAcX,SAAU;AACxB;AACA,UAAUW,iBAAkB;AAC5B;AACA;AACA,GANE;AAOD,CARD;;AAUA,MAAMD,0BAA0B,GAAIC,iBAAD,IAA+B;EAChE,OAAQ;AACV;AACA,QAAQA,iBAAkB;AAC1B;AACA,GAJE;AAKD,CAND"}

package/lib/module/unitSdkManager/UnitSdkManager.js

@@ -1,5 +1,7 @@
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+import EventBus from '../helpers/EventBus';
+import { NativeMessage } from '../messages/nativeMessages';
 import { fetchUnitScript } from './UnitSdk.api';
 export let UNEnvironment;
 
@@ -23,6 +25,7 @@ _defineProperty(UnitSDK, "init", async (env, theme) => {
     UnitSDK.env = env;
     UnitSDK.theme = theme;
     await fetchUnitScript();
+    EventBus.Instance.event(NativeMessage.IS_SDK_INITIALIZED, {});
   } catch (e) {
     console.log(e);
   }

package/lib/module/unitSdkManager/UnitSdkManager.js.map

@@ -1 +1 @@
-{"version":3,"names":["fetchUnitScript","UNEnvironment","UNIT_SCRIPT_URL","sandbox","production","UnitSDK","env","theme","e","console","log"],"sources":["UnitSdkManager.ts"],"sourcesContent":["import { fetchUnitScript } from './UnitSdk.api';\n\nexport enum UNEnvironment {\n  sandbox = 'sandbox',\n  production = 'production'\n}\n\nexport const UNIT_SCRIPT_URL = {\n  [UNEnvironment.sandbox]: 'https://ui.s.unit.sh/components.js',\n  [UNEnvironment.production]: 'https://ui.unit.co/components.js'\n};\nexport class UnitSDK {\n  protected static env?: UNEnvironment;\n  protected static theme?: string;\n\n  public static init = async (env: UNEnvironment, theme: string) => {\n    try {\n      this.env = env;\n      this.theme = theme;\n      await fetchUnitScript();\n    } catch (e) {\n      console.log(e);\n    }\n  };\n\n  public static getEnv = () => {\n    return this.env;\n  };\n\n  public static getTheme = () => {\n    return this.theme;\n  };\n}\n"],"mappings":";;AAAA,SAASA,eAAT,QAAgC,eAAhC;AAEA,WAAYC,aAAZ;;WAAYA,a;EAAAA,a;EAAAA,a;GAAAA,a,KAAAA,a;;AAKZ,OAAO,MAAMC,eAAe,GAAG;EAC7B,CAACD,aAAa,CAACE,OAAf,GAAyB,oCADI;EAE7B,CAACF,aAAa,CAACG,UAAf,GAA4B;AAFC,CAAxB;AAIP,OAAO,MAAMC,OAAN,CAAc;;gBAARA,O;;gBAAAA,O;;gBAAAA,O,UAIU,OAAOC,GAAP,EAA2BC,KAA3B,KAA6C;EAChE,IAAI;IALKF,OAMP,CAAKC,GAAL,GAAWA,GAAX;IANOD,OAOP,CAAKE,KAAL,GAAaA,KAAb;IACA,MAAMP,eAAe,EAArB;EACD,CAJD,CAIE,OAAOQ,CAAP,EAAU;IACVC,OAAO,CAACC,GAAR,CAAYF,CAAZ;EACD;AACF,C;;gBAZUH,O,YAcY,MAAM;EAC3B,OAfSA,OAeF,CAAKC,GAAZ;AACD,C;;gBAhBUD,O,cAkBc,MAAM;EAC7B,OAnBSA,OAmBF,CAAKE,KAAZ;AACD,C"}
+{"version":3,"names":["EventBus","NativeMessage","fetchUnitScript","UNEnvironment","UNIT_SCRIPT_URL","sandbox","production","UnitSDK","env","theme","Instance","event","IS_SDK_INITIALIZED","e","console","log"],"sources":["UnitSdkManager.ts"],"sourcesContent":["import EventBus from '../helpers/EventBus';\nimport { NativeMessage } from '../messages/nativeMessages';\nimport { fetchUnitScript } from './UnitSdk.api';\n\nexport enum UNEnvironment {\n  sandbox = 'sandbox',\n  production = 'production'\n}\n\nexport const UNIT_SCRIPT_URL = {\n  [UNEnvironment.sandbox]: 'https://ui.s.unit.sh/components.js',\n  [UNEnvironment.production]: 'https://ui.unit.co/components.js'\n};\nexport class UnitSDK {\n  protected static env?: UNEnvironment;\n  protected static theme?: string;\n\n  public static init = async (env: UNEnvironment, theme?: string) => {\n    try {\n      this.env = env;\n      this.theme = theme;\n      await fetchUnitScript();\n      EventBus.Instance.event(NativeMessage.IS_SDK_INITIALIZED, {  });\n    } catch (e) {\n      console.log(e);\n    }\n  };\n\n  public static getEnv = () => {\n    return this.env;\n  };\n\n  public static getTheme = () => {\n    return this.theme;\n  };\n}\n"],"mappings":";;AAAA,OAAOA,QAAP,MAAqB,qBAArB;AACA,SAASC,aAAT,QAA8B,4BAA9B;AACA,SAASC,eAAT,QAAgC,eAAhC;AAEA,WAAYC,aAAZ;;WAAYA,a;EAAAA,a;EAAAA,a;GAAAA,a,KAAAA,a;;AAKZ,OAAO,MAAMC,eAAe,GAAG;EAC7B,CAACD,aAAa,CAACE,OAAf,GAAyB,oCADI;EAE7B,CAACF,aAAa,CAACG,UAAf,GAA4B;AAFC,CAAxB;AAIP,OAAO,MAAMC,OAAN,CAAc;;gBAARA,O;;gBAAAA,O;;gBAAAA,O,UAIU,OAAOC,GAAP,EAA2BC,KAA3B,KAA8C;EACjE,IAAI;IALKF,OAMP,CAAKC,GAAL,GAAWA,GAAX;IANOD,OAOP,CAAKE,KAAL,GAAaA,KAAb;IACA,MAAMP,eAAe,EAArB;IACAF,QAAQ,CAACU,QAAT,CAAkBC,KAAlB,CAAwBV,aAAa,CAACW,kBAAtC,EAA0D,EAA1D;EACD,CALD,CAKE,OAAOC,CAAP,EAAU;IACVC,OAAO,CAACC,GAAR,CAAYF,CAAZ;EACD;AACF,C;;gBAbUN,O,YAeY,MAAM;EAC3B,OAhBSA,OAgBF,CAAKC,GAAZ;AACD,C;;gBAjBUD,O,cAmBc,MAAM;EAC7B,OApBSA,OAoBF,CAAKE,KAAZ;AACD,C"}

package/lib/module/webComponent/WebComponent.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { useEffect, useState } from 'react';
 import { WebView } from 'react-native-webview';
 import EventBus from '../helpers/EventBus';
@@ -7,6 +8,7 @@ import { useListenerToBus } from '../hooks/listenerToBus';
 import { getHtmlBody } from '../scripts/html/bodyHtml';
 import { fetchUnitScript, globalUnitScript } from '../unitSdkManager/UnitSdk.api';
 import { NativeMessage } from '../messages/nativeMessages';
+import { UnitSDK } from '../unitSdkManager/UnitSdkManager';
 export let WebComponentType;
 
 (function (WebComponentType) {
@@ -19,14 +21,23 @@ export let WebComponentType;
 export const WebComponent = /*#__PURE__*/React.forwardRef(function WebComponent(props, webRef) {
   const [unitScript, setUnitScript] = useState(globalUnitScript);
   const [sourceHtml, setSourceHtml] = useState(null);
+  const [componentCurrentTheme, setComponentCurrentTheme] = useState(props.theme ?? UnitSDK.getTheme());
+  const width = props.width ?? '100%';
 
-  const listenerAction = data => {
+  const updateUnitScript = data => {
     setUnitScript(data.unitScript);
   };
 
+  const updateInitializedParams = () => {
+    setComponentCurrentTheme(props.theme ?? UnitSDK.getTheme());
+  };
+
   useListenerToBus([{
     busEventKey: NativeMessage.IS_SCRIPT_FETCHED,
-    action: listenerAction
+    action: updateUnitScript
+  }, {
+    busEventKey: NativeMessage.IS_SDK_INITIALIZED,
+    action: updateInitializedParams
   }]);
   useEffect(() => {
     if (!unitScript) {
@@ -34,10 +45,11 @@ export const WebComponent = /*#__PURE__*/React.forwardRef(function WebComponent(
       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 => {
     const message = JSON.parse(e.nativeEvent.data);
@@ -50,14 +62,25 @@ export const WebComponent = /*#__PURE__*/React.forwardRef(function WebComponent(
   };
 
   if (!sourceHtml) return null;
+
+  const _onScroll = event => {
+    if (props.handleScroll) {
+      props.handleScroll(event);
+    }
+
+    return null;
+  };
+
   return /*#__PURE__*/React.createElement(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%',
+      width: width,
       flex: 1
     },
     source: {

package/lib/module/webComponent/WebComponent.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useState","WebView","EventBus","html","HTML_PLACEHOLDER","UnitMessage","useListenerToBus","getHtmlBody","fetchUnitScript","globalUnitScript","NativeMessage","WebComponentType","WebComponent","forwardRef","props","webRef","unitScript","setUnitScript","sourceHtml","setSourceHtml","listenerAction","data","busEventKey","IS_SCRIPT_FETCHED","action","newHtml","replace","BODY","type","valueOf","params","presentationMode","SCRIPT_FROM_NATIVE","script","onMessage","e","message","JSON","parse","nativeEvent","UNIT_REQUEST_REFRESH","details","Instance","event","shouldEnableWebViewScroll","width","flex"],"sources":["WebComponent.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { WebView, WebViewMessageEvent } from 'react-native-webview';\nimport EventBus from '../helpers/EventBus';\nimport html, { HTML_PLACEHOLDER } from './html';\nimport { RequestRefreshEvent, UnitMessage } from '../messages/webMessages/unitMessages';\nimport { useListenerToBus } from '../hooks/listenerToBus';\nimport type { WebViewMessage } from '../messages/webMessages';\nimport { getHtmlBody, PresentationMode } from '../scripts/html/bodyHtml';\nimport { fetchUnitScript, globalUnitScript } from '../unitSdkManager/UnitSdk.api';\nimport { NativeMessage } from '../messages/nativeMessages';\n\nexport interface WebComponentProps {\n  type: WebComponentType;\n  presentationMode?: PresentationMode,\n  params?: string;\n  onMessage?: (message: WebViewMessage) => void;\n  script?: string;\n  width?: number;\n  shouldEnableWebViewScroll?: boolean;\n}\n\nexport enum WebComponentType {\n  card = 'unit-elements-card',\n  bookPayment = 'unit-elements-book-payment',\n  activity = 'unit-elements-activity',\n  slot = 'unit-elements-sdk-slot'\n}\n\nexport const WebComponent = React.forwardRef<WebView, WebComponentProps>(function WebComponent(props, webRef) {\n  const [unitScript, setUnitScript] = useState<string | undefined>(globalUnitScript);\n  const [sourceHtml, setSourceHtml] = useState<string | null>(null);\n\n  const listenerAction = (data: { unitScript?: string }) => {\n    setUnitScript(data.unitScript);\n  };\n\n  useListenerToBus([{ busEventKey: NativeMessage.IS_SCRIPT_FETCHED, action: listenerAction }]);\n\n  useEffect(() => {\n    if (!unitScript) {\n      fetchUnitScript();\n      return;\n    }\n\n    let newHtml = html.replace(HTML_PLACEHOLDER.BODY, getHtmlBody(props.type.valueOf(), props.params, props.presentationMode));\n    newHtml = newHtml.replace(HTML_PLACEHOLDER.SCRIPT_FROM_NATIVE, props.script || '');\n    setSourceHtml(newHtml);\n\n  }, [props.params, unitScript]);\n\n  const onMessage = (e: WebViewMessageEvent) => {\n    const message = JSON.parse(e.nativeEvent.data) as WebViewMessage;\n    if (message.type == UnitMessage.UNIT_REQUEST_REFRESH && message.details) {\n      EventBus.Instance.event(UnitMessage.UNIT_REQUEST_REFRESH, message.details as RequestRefreshEvent);\n    } else {\n      props.onMessage && props.onMessage(message);\n    }\n  };\n\n  if (!sourceHtml) return null;\n\n  return (\n    <WebView\n      ref={webRef}\n      cacheEnabled={false}\n      scrollEnabled={props.shouldEnableWebViewScroll}\n      overScrollMode=\"never\"\n      injectedJavaScript={unitScript}\n      style={{ width: props.width ?? '100%', flex: 1 }}\n      source={{ html: sourceHtml }}\n      onMessage={onMessage} />\n  );\n});\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,QAA3B,QAA2C,OAA3C;AACA,SAASC,OAAT,QAA6C,sBAA7C;AACA,OAAOC,QAAP,MAAqB,qBAArB;AACA,OAAOC,IAAP,IAAeC,gBAAf,QAAuC,QAAvC;AACA,SAA8BC,WAA9B,QAAiD,sCAAjD;AACA,SAASC,gBAAT,QAAiC,wBAAjC;AAEA,SAASC,WAAT,QAA8C,0BAA9C;AACA,SAASC,eAAT,EAA0BC,gBAA1B,QAAkD,+BAAlD;AACA,SAASC,aAAT,QAA8B,4BAA9B;AAYA,WAAYC,gBAAZ;;WAAYA,gB;EAAAA,gB;EAAAA,gB;EAAAA,gB;EAAAA,gB;GAAAA,gB,KAAAA,gB;;AAOZ,OAAO,MAAMC,YAAY,gBAAGd,KAAK,CAACe,UAAN,CAA6C,SAASD,YAAT,CAAsBE,KAAtB,EAA6BC,MAA7B,EAAqC;EAC5G,MAAM,CAACC,UAAD,EAAaC,aAAb,IAA8BjB,QAAQ,CAAqBS,gBAArB,CAA5C;EACA,MAAM,CAACS,UAAD,EAAaC,aAAb,IAA8BnB,QAAQ,CAAgB,IAAhB,CAA5C;;EAEA,MAAMoB,cAAc,GAAIC,IAAD,IAAmC;IACxDJ,aAAa,CAACI,IAAI,CAACL,UAAN,CAAb;EACD,CAFD;;EAIAV,gBAAgB,CAAC,CAAC;IAAEgB,WAAW,EAAEZ,aAAa,CAACa,iBAA7B;IAAgDC,MAAM,EAAEJ;EAAxD,CAAD,CAAD,CAAhB;EAEArB,SAAS,CAAC,MAAM;IACd,IAAI,CAACiB,UAAL,EAAiB;MACfR,eAAe;MACf;IACD;;IAED,IAAIiB,OAAO,GAAGtB,IAAI,CAACuB,OAAL,CAAatB,gBAAgB,CAACuB,IAA9B,EAAoCpB,WAAW,CAACO,KAAK,CAACc,IAAN,CAAWC,OAAX,EAAD,EAAuBf,KAAK,CAACgB,MAA7B,EAAqChB,KAAK,CAACiB,gBAA3C,CAA/C,CAAd;IACAN,OAAO,GAAGA,OAAO,CAACC,OAAR,CAAgBtB,gBAAgB,CAAC4B,kBAAjC,EAAqDlB,KAAK,CAACmB,MAAN,IAAgB,EAArE,CAAV;IACAd,aAAa,CAACM,OAAD,CAAb;EAED,CAVQ,EAUN,CAACX,KAAK,CAACgB,MAAP,EAAed,UAAf,CAVM,CAAT;;EAYA,MAAMkB,SAAS,GAAIC,CAAD,IAA4B;IAC5C,MAAMC,OAAO,GAAGC,IAAI,CAACC,KAAL,CAAWH,CAAC,CAACI,WAAF,CAAclB,IAAzB,CAAhB;;IACA,IAAIe,OAAO,CAACR,IAAR,IAAgBvB,WAAW,CAACmC,oBAA5B,IAAoDJ,OAAO,CAACK,OAAhE,EAAyE;MACvEvC,QAAQ,CAACwC,QAAT,CAAkBC,KAAlB,CAAwBtC,WAAW,CAACmC,oBAApC,EAA0DJ,OAAO,CAACK,OAAlE;IACD,CAFD,MAEO;MACL3B,KAAK,CAACoB,SAAN,IAAmBpB,KAAK,CAACoB,SAAN,CAAgBE,OAAhB,CAAnB;IACD;EACF,CAPD;;EASA,IAAI,CAAClB,UAAL,EAAiB,OAAO,IAAP;EAEjB,oBACE,oBAAC,OAAD;IACE,GAAG,EAAEH,MADP;IAEE,YAAY,EAAE,KAFhB;IAGE,aAAa,EAAED,KAAK,CAAC8B,yBAHvB;IAIE,cAAc,EAAC,OAJjB;IAKE,kBAAkB,EAAE5B,UALtB;IAME,KAAK,EAAE;MAAE6B,KAAK,EAAE/B,KAAK,CAAC+B,KAAN,IAAe,MAAxB;MAAgCC,IAAI,EAAE;IAAtC,CANT;IAOE,MAAM,EAAE;MAAE3C,IAAI,EAAEe;IAAR,CAPV;IAQE,SAAS,EAAEgB;EARb,EADF;AAWD,CA5C2B,CAArB"}
+{"version":3,"names":["React","useEffect","useState","WebView","EventBus","html","HTML_PLACEHOLDER","UnitMessage","useListenerToBus","getHtmlBody","fetchUnitScript","globalUnitScript","NativeMessage","UnitSDK","WebComponentType","WebComponent","forwardRef","props","webRef","unitScript","setUnitScript","sourceHtml","setSourceHtml","componentCurrentTheme","setComponentCurrentTheme","theme","getTheme","width","updateUnitScript","data","updateInitializedParams","busEventKey","IS_SCRIPT_FETCHED","action","IS_SDK_INITIALIZED","componentParams","params","newHtml","replace","BODY","type","valueOf","presentationMode","SCRIPT_FROM_NATIVE","script","onMessage","e","message","JSON","parse","nativeEvent","UNIT_REQUEST_REFRESH","details","Instance","event","_onScroll","handleScroll","isScrollable","nestedScrollEnabled","flex"],"sources":["WebComponent.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React, { useEffect, useState } from 'react';\nimport { WebView, WebViewMessageEvent } from 'react-native-webview';\nimport EventBus from '../helpers/EventBus';\nimport html, { HTML_PLACEHOLDER } from './html';\nimport { RequestRefreshEvent, UnitMessage } from '../messages/webMessages/unitMessages';\nimport { useListenerToBus } from '../hooks/listenerToBus';\nimport { getHtmlBody, PresentationMode } from '../scripts/html/bodyHtml';\nimport { fetchUnitScript, globalUnitScript } from '../unitSdkManager/UnitSdk.api';\nimport { NativeMessage } from '../messages/nativeMessages';\nimport { UnitSDK } from '../unitSdkManager/UnitSdkManager';\nimport type { WebViewMessage } from '../messages/webMessages';\n\nexport interface WebComponentProps {\n  type: WebComponentType;\n  presentationMode?: PresentationMode,\n  params?: string;\n  theme?: string;\n  onMessage?: (message: WebViewMessage) => void;\n  script?: string;\n  isScrollable?: boolean,\n  nestedScrollEnabled?: boolean,\n  handleScroll?: (event: any) => void,\n  width?: number;\n}\n\nexport enum WebComponentType {\n  card = 'unit-elements-card',\n  bookPayment = 'unit-elements-book-payment',\n  activity = 'unit-elements-activity',\n  slot = 'unit-elements-sdk-slot'\n}\n\nexport const WebComponent = React.forwardRef<WebView, WebComponentProps>(function WebComponent(props, webRef) {\n  const [unitScript, setUnitScript] = useState<string | undefined>(globalUnitScript);\n  const [sourceHtml, setSourceHtml] = useState<string | null>(null);\n  const [componentCurrentTheme, setComponentCurrentTheme] = useState<string | undefined>(props.theme ?? UnitSDK.getTheme());\n  const width = props.width ?? '100%';\n\n  const updateUnitScript = (data: { unitScript?: string }) => {\n    setUnitScript(data.unitScript);\n  };\n\n  const updateInitializedParams = () => {\n    setComponentCurrentTheme(props.theme ?? UnitSDK.getTheme());\n  };\n\n  useListenerToBus([\n    { busEventKey: NativeMessage.IS_SCRIPT_FETCHED, action: updateUnitScript },\n    { busEventKey: NativeMessage.IS_SDK_INITIALIZED, action: updateInitializedParams },\n  ]);\n\n  useEffect(() => {\n    if (!unitScript) {\n      fetchUnitScript();\n      return;\n    }\n\n    const componentParams = (props.params || '') + (componentCurrentTheme ? ` theme=\"${componentCurrentTheme}\"` : '');\n    let newHtml = html.replace(HTML_PLACEHOLDER.BODY, getHtmlBody(props.type.valueOf(), componentParams, props.presentationMode));\n    newHtml = newHtml.replace(HTML_PLACEHOLDER.SCRIPT_FROM_NATIVE, props.script || '');\n    setSourceHtml(newHtml);\n  }, [props.params, unitScript, props.presentationMode, componentCurrentTheme]);\n\n  const onMessage = (e: WebViewMessageEvent) => {\n    const message = JSON.parse(e.nativeEvent.data) as WebViewMessage;\n    if (message.type == UnitMessage.UNIT_REQUEST_REFRESH && message.details) {\n      EventBus.Instance.event(UnitMessage.UNIT_REQUEST_REFRESH, message.details as RequestRefreshEvent);\n    } else {\n      props.onMessage && props.onMessage(message);\n    }\n  };\n\n  if (!sourceHtml) return null;\n\n  const _onScroll = (event: any) => {\n    if (props.handleScroll) {\n      props.handleScroll(event);\n    }\n\n    return null;\n  };\n\n  return (\n    <WebView\n      ref={webRef}\n      cacheEnabled={false}\n      scrollEnabled={props.isScrollable}\n      nestedScrollEnabled={props.nestedScrollEnabled}\n      onScroll={_onScroll}\n      overScrollMode=\"never\"\n      injectedJavaScript={unitScript}\n      style={{ width: width, flex: 1 }}\n      source={{ html: sourceHtml }}\n      onMessage={onMessage} />\n  );\n});\n"],"mappings":"AAAA;AACA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,QAA3B,QAA2C,OAA3C;AACA,SAASC,OAAT,QAA6C,sBAA7C;AACA,OAAOC,QAAP,MAAqB,qBAArB;AACA,OAAOC,IAAP,IAAeC,gBAAf,QAAuC,QAAvC;AACA,SAA8BC,WAA9B,QAAiD,sCAAjD;AACA,SAASC,gBAAT,QAAiC,wBAAjC;AACA,SAASC,WAAT,QAA8C,0BAA9C;AACA,SAASC,eAAT,EAA0BC,gBAA1B,QAAkD,+BAAlD;AACA,SAASC,aAAT,QAA8B,4BAA9B;AACA,SAASC,OAAT,QAAwB,kCAAxB;AAgBA,WAAYC,gBAAZ;;WAAYA,gB;EAAAA,gB;EAAAA,gB;EAAAA,gB;EAAAA,gB;GAAAA,gB,KAAAA,gB;;AAOZ,OAAO,MAAMC,YAAY,gBAAGf,KAAK,CAACgB,UAAN,CAA6C,SAASD,YAAT,CAAsBE,KAAtB,EAA6BC,MAA7B,EAAqC;EAC5G,MAAM,CAACC,UAAD,EAAaC,aAAb,IAA8BlB,QAAQ,CAAqBS,gBAArB,CAA5C;EACA,MAAM,CAACU,UAAD,EAAaC,aAAb,IAA8BpB,QAAQ,CAAgB,IAAhB,CAA5C;EACA,MAAM,CAACqB,qBAAD,EAAwBC,wBAAxB,IAAoDtB,QAAQ,CAAqBe,KAAK,CAACQ,KAAN,IAAeZ,OAAO,CAACa,QAAR,EAApC,CAAlE;EACA,MAAMC,KAAK,GAAGV,KAAK,CAACU,KAAN,IAAe,MAA7B;;EAEA,MAAMC,gBAAgB,GAAIC,IAAD,IAAmC;IAC1DT,aAAa,CAACS,IAAI,CAACV,UAAN,CAAb;EACD,CAFD;;EAIA,MAAMW,uBAAuB,GAAG,MAAM;IACpCN,wBAAwB,CAACP,KAAK,CAACQ,KAAN,IAAeZ,OAAO,CAACa,QAAR,EAAhB,CAAxB;EACD,CAFD;;EAIAlB,gBAAgB,CAAC,CACf;IAAEuB,WAAW,EAAEnB,aAAa,CAACoB,iBAA7B;IAAgDC,MAAM,EAAEL;EAAxD,CADe,EAEf;IAAEG,WAAW,EAAEnB,aAAa,CAACsB,kBAA7B;IAAiDD,MAAM,EAAEH;EAAzD,CAFe,CAAD,CAAhB;EAKA7B,SAAS,CAAC,MAAM;IACd,IAAI,CAACkB,UAAL,EAAiB;MACfT,eAAe;MACf;IACD;;IAED,MAAMyB,eAAe,GAAG,CAAClB,KAAK,CAACmB,MAAN,IAAgB,EAAjB,KAAwBb,qBAAqB,GAAI,WAAUA,qBAAsB,GAApC,GAAyC,EAAtF,CAAxB;IACA,IAAIc,OAAO,GAAGhC,IAAI,CAACiC,OAAL,CAAahC,gBAAgB,CAACiC,IAA9B,EAAoC9B,WAAW,CAACQ,KAAK,CAACuB,IAAN,CAAWC,OAAX,EAAD,EAAuBN,eAAvB,EAAwClB,KAAK,CAACyB,gBAA9C,CAA/C,CAAd;IACAL,OAAO,GAAGA,OAAO,CAACC,OAAR,CAAgBhC,gBAAgB,CAACqC,kBAAjC,EAAqD1B,KAAK,CAAC2B,MAAN,IAAgB,EAArE,CAAV;IACAtB,aAAa,CAACe,OAAD,CAAb;EACD,CAVQ,EAUN,CAACpB,KAAK,CAACmB,MAAP,EAAejB,UAAf,EAA2BF,KAAK,CAACyB,gBAAjC,EAAmDnB,qBAAnD,CAVM,CAAT;;EAYA,MAAMsB,SAAS,GAAIC,CAAD,IAA4B;IAC5C,MAAMC,OAAO,GAAGC,IAAI,CAACC,KAAL,CAAWH,CAAC,CAACI,WAAF,CAAcrB,IAAzB,CAAhB;;IACA,IAAIkB,OAAO,CAACP,IAAR,IAAgBjC,WAAW,CAAC4C,oBAA5B,IAAoDJ,OAAO,CAACK,OAAhE,EAAyE;MACvEhD,QAAQ,CAACiD,QAAT,CAAkBC,KAAlB,CAAwB/C,WAAW,CAAC4C,oBAApC,EAA0DJ,OAAO,CAACK,OAAlE;IACD,CAFD,MAEO;MACLnC,KAAK,CAAC4B,SAAN,IAAmB5B,KAAK,CAAC4B,SAAN,CAAgBE,OAAhB,CAAnB;IACD;EACF,CAPD;;EASA,IAAI,CAAC1B,UAAL,EAAiB,OAAO,IAAP;;EAEjB,MAAMkC,SAAS,GAAID,KAAD,IAAgB;IAChC,IAAIrC,KAAK,CAACuC,YAAV,EAAwB;MACtBvC,KAAK,CAACuC,YAAN,CAAmBF,KAAnB;IACD;;IAED,OAAO,IAAP;EACD,CAND;;EAQA,oBACE,oBAAC,OAAD;IACE,GAAG,EAAEpC,MADP;IAEE,YAAY,EAAE,KAFhB;IAGE,aAAa,EAAED,KAAK,CAACwC,YAHvB;IAIE,mBAAmB,EAAExC,KAAK,CAACyC,mBAJ7B;IAKE,QAAQ,EAAEH,SALZ;IAME,cAAc,EAAC,OANjB;IAOE,kBAAkB,EAAEpC,UAPtB;IAQE,KAAK,EAAE;MAAEQ,KAAK,EAAEA,KAAT;MAAgBgC,IAAI,EAAE;IAAtB,CART;IASE,MAAM,EAAE;MAAEtD,IAAI,EAAEgB;IAAR,CATV;IAUE,SAAS,EAAEwB;EAVb,EADF;AAaD,CA/D2B,CAArB"}

package/lib/typescript/components/UNBottomSheetComponent/UNBottomSheetComponent.d.ts

@@ -1 +1,7 @@
+export declare enum ScrollState {
+    onTop = "onTop",
+    onlyWebView = "webViewScroll",
+    onlyBottomSheet = "onlyBottomSheet",
+    unScrollable = "unScrollable"
+}
 export declare const UNBottomSheetComponent: () => JSX.Element;

package/lib/typescript/helpers/BottomSheet/BottomSheet.d.ts

@@ -9,6 +9,8 @@ export interface BottomSheetProps {
     height: number;
     animationDuration: number;
     expandToMaxHeightEnabled: boolean;
+    handleWebViewScroll: () => void;
+    shouldEnableBottomSheetScroll: boolean;
 }
 declare const BottomSheet: {
     (props: BottomSheetProps): JSX.Element;

package/lib/typescript/messages/nativeMessages/index.d.ts

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

package/lib/typescript/nativeComponent/UNNativeAddToWalletButton.d.ts

@@ -0,0 +1,6 @@
+declare type UnitAddToWalletButtonViewProps = {
+    style: object;
+    onAddToWalletClicked: () => void;
+};
+declare const UnitAddToWalletButtonView: import("react-native").HostComponent<UnitAddToWalletButtonViewProps>;
+export default UnitAddToWalletButtonView;

package/lib/typescript/unitSdkManager/UnitSdkManager.d.ts

@@ -9,7 +9,7 @@ export declare const UNIT_SCRIPT_URL: {
 export declare class UnitSDK {
     protected static env?: UNEnvironment;
     protected static theme?: string;
-    static init: (env: UNEnvironment, theme: string) => Promise<void>;
+    static init: (env: UNEnvironment, theme?: string) => Promise<void>;
     static getEnv: () => UNEnvironment | undefined;
     static getTheme: () => string | undefined;
 }

package/lib/typescript/webComponent/WebComponent.d.ts

@@ -1,15 +1,18 @@
 import React from 'react';
 import { WebView } from 'react-native-webview';
-import type { WebViewMessage } from '../messages/webMessages';
 import { PresentationMode } from '../scripts/html/bodyHtml';
+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 declare enum WebComponentType {
     card = "unit-elements-card",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unit-components",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Unit React Native components",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/UNActivityComponent/UNActivityComponent.tsx

@@ -1,8 +1,12 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { Dimensions, View } from 'react-native';
+import type { WebViewMessage } from '../../messages/webMessages';
+import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import { PresentationMode } from '../../scripts/html/bodyHtml';
 import { WebComponent, WebComponentType } from '../../webComponent/WebComponent';
 import { getActivityParams } from './UNActivityComponent.utils';
 
+const DEFAULT_HEIGHT = Dimensions.get('window').height * 0.5;
 export interface UNActivityComponentProps {
   accountId: string;
   customerToken: string;
@@ -10,12 +14,34 @@ export interface UNActivityComponentProps {
 }
 
 export const UNActivityComponent = (props: UNActivityComponentProps) => {
+  const [defaultHeight, setDefaultHeight] = useState<number>();
+  const handleWebViewMessage = (message: WebViewMessage) => {
+    if (message.type === PageMessage.PAGE_HEIGHT) {
+      const currentHeight = (message.details as HeightEvent).height;
+      currentHeight === 0 && setDefaultHeight(DEFAULT_HEIGHT);
+    }
+  };
+
+  const renderActivityWebView = () => {
+    return (
+      <WebComponent
+        type={WebComponentType.activity}
+        presentationMode={PresentationMode.Inherit}
+        params={getActivityParams(props)}
+        onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
+        nestedScrollEnabled={true}
+        theme={props.theme}
+      />
+    );
+  };
+
+  if (!defaultHeight) {
+    return renderActivityWebView();
+  }
+
   return (
-    <WebComponent
-      type={WebComponentType.activity}
-      presentationMode={PresentationMode.Inherit}
-      params={getActivityParams(props)}
-      shouldEnableWebViewScroll={false}
-    />
+    <View style={{ height: defaultHeight }}>
+      {renderActivityWebView()}
+    </View>
   );
 };

package/src/components/UNActivityComponent/UNActivityComponent.utils.ts

@@ -1,11 +1,9 @@
-import { UnitSDK } from '../../unitSdkManager/UnitSdkManager';
 import type { UNActivityComponentProps } from './UNActivityComponent';
 
 export const getActivityParams = (props: UNActivityComponentProps) => {
   return `
     account-id="${props.accountId}"
     customer-token="${props.customerToken}"
-    theme="${props.theme ?? UnitSDK.getTheme()}"
     style="height: 100%"
   `;
 };

package/src/components/UNBookPaymentComponent/UNBookPaymentComponent.tsx

@@ -1,10 +1,12 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { WebComponent, WebComponentType } from '../../webComponent/WebComponent';
 import { PresentationMode } from '../../scripts/html/bodyHtml';
 import { getBookPaymentParams, getBookPaymentScript } from './UNBookPaymentComponent.utils';
 import type { WebViewMessage } from '../../messages/webMessages';
 import { BookPaymentEvent, BookPaymentMessage } from '../../messages/webMessages/bookPaymentMessage';
 import type { UNBookPaymentData } from '../../sharedTypes';
+import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
+import { View } from 'react-native';
 
 export interface UNBookPaymentComponentProps {
   accountId: string;
@@ -17,21 +19,45 @@ export interface UNBookPaymentComponentProps {
 }
 
 export const UNBookPaymentComponent = (props: UNBookPaymentComponentProps) => {
+  const [height, setHeight] = useState<number>(0);
+  const [presentationMode, setPresentationMode] = useState<PresentationMode>(PresentationMode.Inherit);
+
   const handleWebViewMessage = (message: WebViewMessage) => {
     if (message.type === BookPaymentMessage.PAYMENT_CREATED && props.onPaymentCreated) {
       const response = message.details as BookPaymentEvent;
       props.onPaymentCreated(response.data);
     }
+
+    if (message.type === PageMessage.PAGE_HEIGHT) {
+      const currentHeight = (message.details as HeightEvent).height;
+      setHeight(currentHeight);
+      if (presentationMode === PresentationMode.Inherit && currentHeight === 0) {
+        setPresentationMode(PresentationMode.Default);
+      }
+    }
   };
 
+  const renderBookPaymentWebView = () => {
+    return (
+      <WebComponent
+        type={WebComponentType.bookPayment}
+        presentationMode={presentationMode}
+        params={getBookPaymentParams(props)}
+        script={getBookPaymentScript()}
+        onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
+        isScrollable={false}
+        theme={props.theme}
+      />
+    );
+  };
+
+  if (presentationMode === PresentationMode.Inherit) {
+    return renderBookPaymentWebView();
+  }
+
   return (
-    <WebComponent
-      type={WebComponentType.bookPayment}
-      presentationMode={PresentationMode.Inherit}
-      params={getBookPaymentParams(props)}
-      script={getBookPaymentScript()}
-      onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
-      shouldEnableWebViewScroll={false}
-    />
+    <View style={{ height: height }}>
+      {renderBookPaymentWebView()}
+    </View>
   );
 };

package/src/components/UNBookPaymentComponent/UNBookPaymentComponent.utils.ts

@@ -1,7 +1,6 @@
 import type { UNBookPaymentComponentProps } from './UNBookPaymentComponent';
 
 import { BookPaymentMessage } from '../../messages/webMessages/bookPaymentMessage';
-import { UnitSDK } from '../../unitSdkManager/UnitSdkManager';
 
 export const getBookPaymentParams = (props: UNBookPaymentComponentProps) => {
   return `
@@ -10,7 +9,6 @@ export const getBookPaymentParams = (props: UNBookPaymentComponentProps) => {
     is-same-customer="${props.isSameCustomer}"
     counterparty-account-id="${props.counterPartyAccountId}"
     counterparty-name="${props.counterPartyName}"
-    theme="${props.theme ?? UnitSDK.getTheme()}"
     style="height: 100%"
   `;
 };

package/src/components/UNBottomSheetComponent/UNBottomSheetComponent.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { useEffect, useRef, useState } from 'react';
 import type WebView from 'react-native-webview';
 import { WebComponent, WebComponentType } from '../../webComponent/WebComponent';
@@ -14,12 +15,19 @@ import { getStylesObject } from './UNBottomSheetComponent.styles';
 import { PresentationMode } from '../../scripts/html/bodyHtml';
 import { useAppStateListener } from '../../hooks/useAppStateListener';
 
+export enum ScrollState {
+  onTop = 'onTop',
+  onlyWebView = 'webViewScroll',
+  onlyBottomSheet = 'onlyBottomSheet',
+  unScrollable = 'unScrollable'
+}
+
 export const UNBottomSheetComponent = () => {
   const [isBottomSheetActive, setIsBottomSheetActive] = useState(false);
   const [height, setHeight] = useState(0);
 
   const [renderingRequest, setRenderingRequest] = useState<string | null>(null);
-  const [shouldEnableWebViewScroll, setShouldEnableWebViewScroll] = useState(false);
+  const [scrollState, setScrollState] = useState<ScrollState>(ScrollState.onTop);
 
   const [waitForLoadingNewComponent, setWaitForLoadingNewComponent] = useState(false);
   const [newHeightMessage, setNewHeightMessage] = useState<WebViewMessage | null>(null);
@@ -53,6 +61,7 @@ export const UNBottomSheetComponent = () => {
       webRef.current && resetHtml(webRef.current);
       setHeight(0);
       setRenderingRequest(null);
+      setScrollState(ScrollState.onTop);
     }
   }, [isBottomSheetActive]);
 
@@ -71,10 +80,10 @@ export const UNBottomSheetComponent = () => {
       if (nativePlace == 'overFullScreen') {
         const bottomSheetNewHeight = handleHtmlFullHeight(webRef.current, Dimensions.get('window').height);
         setHeight(bottomSheetNewHeight);
-        setShouldEnableWebViewScroll(true);
+        setScrollState(ScrollState.onTop);
       } else {
         setHeight((message.details as HeightEvent).height);
-        setShouldEnableWebViewScroll(false);
+        setScrollState(ScrollState.unScrollable);
       }
     }
   };
@@ -108,6 +117,25 @@ export const UNBottomSheetComponent = () => {
     }
   };
 
+  const onScrollWebView = (event: any) => {
+    if (scrollState === ScrollState.unScrollable) return;
+
+    const currY = event.nativeEvent.contentOffset.y;
+
+    if (ScrollState.onTop && currY < 5) {
+      setScrollState(ScrollState.onlyBottomSheet);
+    }
+
+    if ( scrollState !== ScrollState.onlyWebView && scrollState === ScrollState.onTop && currY > 5) {
+      setScrollState(ScrollState.onlyWebView);
+    }
+  };
+
+  const handleWebViewScroll = () => {
+    if (scrollState === ScrollState.unScrollable) return;
+    setScrollState(ScrollState.onlyWebView);
+  };
+
   return (
     <>
       <View
@@ -119,6 +147,8 @@ export const UNBottomSheetComponent = () => {
           height={height}
           onClose={() => setIsBottomSheetActive(false)}
           onOpen={() => setIsBottomSheetActive(true)}
+          handleWebViewScroll={() =>  handleWebViewScroll()}
+          shouldEnableBottomSheetScroll={scrollState !== ScrollState.onlyWebView}
         >
           { isAppActive && (
             <WebComponent
@@ -127,7 +157,8 @@ export const UNBottomSheetComponent = () => {
               presentationMode={PresentationMode.CoverInjectedHeight}
               script={getBottomSheetScript()}
               onMessage={onWebMessage}
-              shouldEnableWebViewScroll={shouldEnableWebViewScroll}
+              isScrollable={scrollState === ScrollState.onlyWebView || scrollState === ScrollState.onTop}
+              handleScroll={onScrollWebView}
             />)}
         </BottomSheet>
       </View>