react-native-unit-components 0.1.0

package/lib/module/helpers/BottomSheet.js

@@ -0,0 +1,252 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useEffect, useRef, useState } from 'react';
+import { Animated, BackHandler, Dimensions, Easing, PanResponder, StyleSheet, TouchableOpacity, View } from 'react-native';
+import PropTypes from 'prop-types';
+
+const BottomSheet = props => {
+  const panelHeightValue = useRef(new Animated.Value(props.sliderMaxHeight)).current;
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const [isPanelOpened, setIsPanelOpened] = useState(props.isOpen);
+  const [contentHeight, setContentHeight] = useState(undefined);
+  const [currentHeight, setCurrentHeight] = useState(props.sliderMaxHeight);
+  const [dy, setDy] = useState(0);
+
+  const _parentPanResponder = PanResponder.create({
+    onMoveShouldSetPanResponderCapture: (_, gestureState) => {
+      return Math.abs(gestureState.dy) > 10;
+    },
+
+    onPanResponderMove(_, gestureState) {
+      if (currentHeight + gestureState.dy < 0) return;
+      if (!props.expandToMaxHeightEnabled && currentHeight + gestureState.dy < sliderMaxHeight - contentHeight) return;
+      panelHeightValue.setValue(currentHeight + gestureState.dy);
+      setDy(gestureState.dy);
+    },
+
+    onPanResponderRelease: () => {
+      if (dy > 0) {
+        collapse();
+      } else if (!props.expandToMaxHeightEnabled) {
+        setToContentHeight(contentHeight);
+      } else if (dy < 0) {
+        expand();
+      } else {
+        expand();
+      }
+    }
+  });
+
+  useEffect(() => {
+    if (props.isOpen && !isPanelOpened) {
+      fadeIn();
+    } else if (isPanelOpened) {
+      setContentHeight(0);
+
+      _dismiss();
+    }
+  }, [props.isOpen]);
+  useEffect(() => {
+    BackHandler.addEventListener('hardwareBackPress', _onBackPress);
+    const id = panelHeightValue.addListener(e => setCurrentHeight(e.value));
+    return () => {
+      BackHandler.removeEventListener('hardwareBackPress', _onBackPress);
+      panelHeightValue.removeListener(id);
+    };
+  }, []);
+
+  const fadeIn = () => {
+    Animated.timing(fadeAnim, {
+      toValue: 0.3,
+      duration: 500,
+      useNativeDriver: false
+    }).start(() => {
+      setIsPanelOpened(true);
+    });
+  };
+
+  const fadeOut = () => {
+    Animated.timing(fadeAnim, {
+      toValue: 0,
+      duration: 500,
+      useNativeDriver: false
+    }).start(() => {
+      setIsPanelOpened(false);
+      props.onClose();
+    });
+  };
+
+  const setToContentHeight = contentHeight => {
+    Animated.timing(panelHeightValue, {
+      duration: props.animationDuration,
+      easing: Easing.quad,
+      toValue: sliderMaxHeight - contentHeight,
+      useNativeDriver: false
+    }).start();
+  };
+
+  const expand = () => {
+    const {
+      animationDuration
+    } = props;
+
+    if (currentHeight > sliderMaxHeight - contentHeight) {
+      setToContentHeight(contentHeight);
+      return;
+    }
+
+    Animated.timing(panelHeightValue, {
+      duration: animationDuration,
+      easing: Easing.quad,
+      toValue: 0,
+      useNativeDriver: false
+    }).start();
+  };
+
+  const collapse = () => {
+    if (currentHeight > sliderMaxHeight - contentHeight) {
+      _dismiss();
+
+      return;
+    }
+
+    setToContentHeight(contentHeight); // Animated.timing(panelHeightValue, {
+    //   duration: animationDuration,
+    //   easing: Easing.quad,
+    //   toValue: sliderMaxHeight - contentHeight!,
+    //   useNativeDriver: false,
+    // }).start(() => {
+    //   const isPanelOpenedNewValue = !isPanelOpened
+    //   setIsPanelOpened(isPanelOpenedNewValue)
+    //   if (isPanelOpenedNewValue) {
+    //     // onOpen();
+    //   } else {
+    //     // onClose();
+    //     Keyboard.dismiss();
+    //   }
+    // });
+  };
+
+  const _onBackPress = () => {
+    isPanelOpened && collapse();
+    return isPanelOpened;
+  };
+
+  const _setSize = e => {
+    let newContentHeight = e.nativeEvent.layout.height;
+    if (newContentHeight !== 0) newContentHeight += 42;
+    setContentHeight(newContentHeight);
+    setToContentHeight(newContentHeight);
+  };
+
+  const _dismiss = () => {
+    const {
+      animationDuration
+    } = props;
+    Animated.timing(panelHeightValue, {
+      duration: animationDuration,
+      easing: Easing.quad,
+      toValue: sliderMaxHeight,
+      useNativeDriver: false
+    }).start(() => {});
+    fadeOut();
+  };
+
+  const {
+    sliderMaxHeight,
+    children
+  } = props;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: {
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      right: 0,
+      left: 0
+    },
+    activeOpacity: 1,
+    onPress: _dismiss
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: {
+      backgroundColor: 'black',
+      flex: 1,
+      opacity: fadeAnim
+    }
+  })), /*#__PURE__*/React.createElement(Animated.View, _extends({}, _parentPanResponder.panHandlers, {
+    style: { ...styles.container,
+      height: sliderMaxHeight,
+      transform: [{
+        translateY: panelHeightValue
+      }]
+    }
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles.outerContent
+  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+    activeOpacity: 1
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.lineContainer
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.line
+  }))), /*#__PURE__*/React.createElement(View, {
+    onLayout: _setSize,
+    style: [styles.innerContent]
+  }, children))));
+};
+
+BottomSheet.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.node]),
+  isOpen: PropTypes.bool,
+  sliderMaxHeight: PropTypes.number,
+  animation: PropTypes.func,
+  animationDuration: PropTypes.number,
+  onOpen: PropTypes.func,
+  onClose: PropTypes.func,
+  expandToMaxHeightEnabled: PropTypes.bool
+};
+BottomSheet.defaultProps = {
+  children: /*#__PURE__*/React.createElement(View, null),
+  isOpen: true,
+  sliderMaxHeight: Dimensions.get('window').height * 0.95,
+  animationDuration: 200,
+  onOpen: () => null,
+  onClose: () => null,
+  expandToMaxHeightEnabled: false
+};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 60,
+    paddingHorizontal: 12,
+    shadowColor: '#000000',
+    shadowOffset: {
+      width: 0,
+      height: 6
+    },
+    shadowOpacity: 0.37,
+    shadowRadius: 7.49,
+    elevation: 12,
+    borderTopLeftRadius: 15,
+    borderTopRightRadius: 15,
+    backgroundColor: '#ffffff'
+  },
+  lineContainer: {
+    borderTopLeftRadius: 30,
+    borderTopRightRadius: 30,
+    alignItems: 'center'
+  },
+  line: {
+    width: 35,
+    height: 4,
+    borderRadius: 2,
+    marginTop: 18,
+    backgroundColor: '#D5DDE0'
+  },
+  outerContent: {
+    flex: -1
+  },
+  innerContent: {
+    flex: -1
+  }
+});
+export default BottomSheet;
+//# sourceMappingURL=BottomSheet.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useRef","useState","Animated","BackHandler","Dimensions","Easing","PanResponder","StyleSheet","TouchableOpacity","View","PropTypes","BottomSheet","props","panelHeightValue","Value","sliderMaxHeight","current","fadeAnim","isPanelOpened","setIsPanelOpened","isOpen","contentHeight","setContentHeight","undefined","currentHeight","setCurrentHeight","dy","setDy","_parentPanResponder","create","onMoveShouldSetPanResponderCapture","_","gestureState","Math","abs","onPanResponderMove","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","position","top","bottom","right","left","backgroundColor","flex","opacity","panHandlers","styles","container","transform","translateY","outerContent","lineContainer","line","innerContent","propTypes","oneOfType","node","bool","number","animation","func","onOpen","defaultProps","get","marginTop","paddingHorizontal","shadowColor","shadowOffset","width","shadowOpacity","shadowRadius","elevation","borderTopLeftRadius","borderTopRightRadius","alignItems","borderRadius"],"sources":["BottomSheet.tsx"],"sourcesContent":["import React, { ReactNode, useEffect, useRef, useState } from 'react';\nimport {\n  Animated,\n  BackHandler,\n  Dimensions,\n  Easing,\n  // Keyboard,\n  LayoutChangeEvent,\n  PanResponder,\n  StyleSheet,\n  TouchableOpacity,\n  View,\n} from 'react-native';\nimport PropTypes from 'prop-types';\n\nexport interface BottomSheetProps {\n  isOpen: boolean\n  children: ReactNode\n  sliderMaxHeight: number\n  onOpen: () => void\n  onClose: () => void\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\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 Math.abs(gestureState.dy) > 10\n    },\n    onPanResponderMove(_, gestureState) {\n      if (currentHeight + gestureState.dy < 0) return\n      if (!props.expandToMaxHeightEnabled && 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        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 (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 (currentHeight > (sliderMaxHeight - contentHeight!)) {\n      _dismiss()\n      return\n    }\n\n    setToContentHeight(contentHeight!)\n\n    // Animated.timing(panelHeightValue, {\n    //   duration: animationDuration,\n    //   easing: Easing.quad,\n    //   toValue: sliderMaxHeight - contentHeight!,\n    //   useNativeDriver: false,\n    // }).start(() => {\n    //   const isPanelOpenedNewValue = !isPanelOpened\n    //   setIsPanelOpened(isPanelOpenedNewValue)\n    //   if (isPanelOpenedNewValue) {\n    //     // onOpen();\n    //   } else {\n    //     // onClose();\n    //     Keyboard.dismiss();\n    //   }\n    // });\n  };\n\n  const _onBackPress = () => {\n    isPanelOpened && collapse();\n    return isPanelOpened;\n  };\n\n  const _setSize = (e: LayoutChangeEvent) => {\n    let newContentHeight = e.nativeEvent.layout.height\n    if (newContentHeight !== 0) newContentHeight += 42;\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    })\n    fadeOut()\n  }\n\n  const {\n    sliderMaxHeight,\n    children,\n  } = props;\n\n  return (\n    <>\n      <TouchableOpacity\n        style={{ position: 'absolute', top: 0, bottom: 0, right: 0, left: 0 }} activeOpacity={1}\n        onPress={_dismiss}\n      >\n        <Animated.View\n          style={{ backgroundColor: 'black', flex: 1, opacity: fadeAnim }}\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 activeOpacity={1}>\n            <View style={styles.lineContainer}>\n              <View style={styles.line} />\n            </View>\n          </TouchableOpacity>\n          <View\n            onLayout={_setSize}\n            style={[styles.innerContent]}\n          >\n            {children}\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 * 0.95,\n  animationDuration: 200,\n  onOpen: () => null,\n  onClose: () => null,\n  expandToMaxHeightEnabled: false\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    marginTop: 60,\n    paddingHorizontal: 12,\n    shadowColor: '#000000',\n    shadowOffset: {\n      width: 0,\n      height: 6,\n    },\n    shadowOpacity: 0.37,\n    shadowRadius: 7.49,\n    elevation: 12,\n    borderTopLeftRadius: 15,\n    borderTopRightRadius: 15,\n    backgroundColor: '#ffffff',\n  },\n  lineContainer: {\n    borderTopLeftRadius: 30,\n    borderTopRightRadius: 30,\n    alignItems: 'center'\n  },\n  line: {\n    width: 35,\n    height: 4,\n    borderRadius: 2,\n    marginTop: 18,\n    backgroundColor: '#D5DDE0',\n  },\n  outerContent: {\n    flex: -1,\n  },\n  innerContent: {\n    flex: -1,\n  },\n});\n\nexport default BottomSheet;\n"],"mappings":"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"}

package/lib/module/helpers/EventBus.js

@@ -0,0 +1,69 @@
+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; }
+
+export let BusEvent;
+
+(function (BusEvent) {
+  BusEvent["REQUEST_RENDERING"] = "unitRequestRendering";
+  BusEvent["CARD_STATUS_CHANGED"] = "cardStatusChanged";
+  BusEvent["REQUEST_REFRESH"] = "requestRefresh";
+})(BusEvent || (BusEvent = {}));
+
+export default class EventBus {
+  constructor() {
+    _defineProperty(this, "eventListeners", {});
+
+    this.eventListeners = {};
+  }
+
+  static get Instance() {
+    return this._instance || (this._instance = new this());
+  }
+
+  event(event, data) {
+    let listeners = this.eventListeners[event.valueOf()];
+
+    if (Array.isArray(listeners)) {
+      listeners.map(listener => {
+        if (typeof listener === 'function') {
+          listener(data);
+        }
+      });
+    }
+  }
+
+  addListener(event, listener) {
+    let listeners = this.eventListeners[event.valueOf()];
+
+    if (Array.isArray(listeners)) {
+      listeners.push(listener);
+    } else {
+      this.eventListeners[event.valueOf()] = [listener];
+    }
+  }
+
+  removeListener(listener) {
+    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];
+        }
+      }
+    });
+  }
+
+  _remove(array, item) {
+    if (!array) return;
+
+    for (let i = 0, l = array.length; i < l; i++) {
+      if (item === array[i]) array.splice(i, 1);
+    }
+  }
+
+}
+
+_defineProperty(EventBus, "_instance", void 0);
+//# sourceMappingURL=EventBus.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["BusEvent","EventBus","constructor","eventListeners","Instance","_instance","event","data","listeners","valueOf","Array","isArray","map","listener","addListener","push","removeListener","Object","keys","eventName","_remove","length","array","item","i","l","splice"],"sources":["EventBus.ts"],"sourcesContent":["export enum BusEvent {\n  REQUEST_RENDERING = 'unitRequestRendering',\n  CARD_STATUS_CHANGED = 'cardStatusChanged',\n  REQUEST_REFRESH = 'requestRefresh'\n}\n\nexport default class EventBus {\n  private static _instance: EventBus;\n\n  private eventListeners: { [name: string]: Array<(data: any) => void> } = {}\n\n  private constructor() {\n    this.eventListeners = {};\n  }\n\n  public static get Instance() {\n    return this._instance || (this._instance = new this());\n  }\n\n  public event(event: BusEvent, data: any) {\n    let listeners = this.eventListeners[event.valueOf()];\n    if (Array.isArray(listeners)) {\n      listeners.map(listener => {\n        if (typeof listener === 'function') {\n          listener(data);\n        }\n      })\n    }\n  }\n\n  public addListener(event: BusEvent, listener: (data: any) => void) {\n    let listeners = this.eventListeners[event.valueOf()];\n    if (Array.isArray(listeners)) {\n      listeners.push(listener);\n    } else {\n      this.eventListeners[event.valueOf()] = [listener];\n    }\n  }\n\n  public removeListener(listener: (data: any) => void) {\n    Object.keys(this.eventListeners).map(eventName => {\n      let listeners = this.eventListeners[eventName];\n      if (listeners) {\n        this._remove(listeners, listener);\n        if (listeners.length === 0) {\n          delete this.eventListeners[eventName];\n        }\n      }\n    })\n  }\n\n  private _remove(array: Array<(data: any) => void>, item: (data: string) => void) {\n    if (!array) return;\n    for (let i = 0, l = array.length; i < l; i++) {\n      if (item === array[i]) array.splice(i, 1);\n    }\n  }\n}\n"],"mappings":";;AAAA,WAAYA,QAAZ;;WAAYA,Q;EAAAA,Q;EAAAA,Q;EAAAA,Q;GAAAA,Q,KAAAA,Q;;AAMZ,eAAe,MAAMC,QAAN,CAAe;EAKpBC,WAAW,GAAG;IAAA,wCAFmD,EAEnD;;IACpB,KAAKC,cAAL,GAAsB,EAAtB;EACD;;EAEyB,WAARC,QAAQ,GAAG;IAC3B,OAAO,KAAKC,SAAL,KAAmB,KAAKA,SAAL,GAAiB,IAAI,IAAJ,EAApC,CAAP;EACD;;EAEMC,KAAK,CAACA,KAAD,EAAkBC,IAAlB,EAA6B;IACvC,IAAIC,SAAS,GAAG,KAAKL,cAAL,CAAoBG,KAAK,CAACG,OAAN,EAApB,CAAhB;;IACA,IAAIC,KAAK,CAACC,OAAN,CAAcH,SAAd,CAAJ,EAA8B;MAC5BA,SAAS,CAACI,GAAV,CAAcC,QAAQ,IAAI;QACxB,IAAI,OAAOA,QAAP,KAAoB,UAAxB,EAAoC;UAClCA,QAAQ,CAACN,IAAD,CAAR;QACD;MACF,CAJD;IAKD;EACF;;EAEMO,WAAW,CAACR,KAAD,EAAkBO,QAAlB,EAAiD;IACjE,IAAIL,SAAS,GAAG,KAAKL,cAAL,CAAoBG,KAAK,CAACG,OAAN,EAApB,CAAhB;;IACA,IAAIC,KAAK,CAACC,OAAN,CAAcH,SAAd,CAAJ,EAA8B;MAC5BA,SAAS,CAACO,IAAV,CAAeF,QAAf;IACD,CAFD,MAEO;MACL,KAAKV,cAAL,CAAoBG,KAAK,CAACG,OAAN,EAApB,IAAuC,CAACI,QAAD,CAAvC;IACD;EACF;;EAEMG,cAAc,CAACH,QAAD,EAAgC;IACnDI,MAAM,CAACC,IAAP,CAAY,KAAKf,cAAjB,EAAiCS,GAAjC,CAAqCO,SAAS,IAAI;MAChD,IAAIX,SAAS,GAAG,KAAKL,cAAL,CAAoBgB,SAApB,CAAhB;;MACA,IAAIX,SAAJ,EAAe;QACb,KAAKY,OAAL,CAAaZ,SAAb,EAAwBK,QAAxB;;QACA,IAAIL,SAAS,CAACa,MAAV,KAAqB,CAAzB,EAA4B;UAC1B,OAAO,KAAKlB,cAAL,CAAoBgB,SAApB,CAAP;QACD;MACF;IACF,CARD;EASD;;EAEOC,OAAO,CAACE,KAAD,EAAoCC,IAApC,EAAkE;IAC/E,IAAI,CAACD,KAAL,EAAY;;IACZ,KAAK,IAAIE,CAAC,GAAG,CAAR,EAAWC,CAAC,GAAGH,KAAK,CAACD,MAA1B,EAAkCG,CAAC,GAAGC,CAAtC,EAAyCD,CAAC,EAA1C,EAA8C;MAC5C,IAAID,IAAI,KAAKD,KAAK,CAACE,CAAD,CAAlB,EAAuBF,KAAK,CAACI,MAAN,CAAaF,CAAb,EAAgB,CAAhB;IACxB;EACF;;AAlD2B;;gBAATvB,Q"}

package/lib/module/index.js

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.tsx"],"sourcesContent":["export * from './components'\n"],"mappings":"AAAA,cAAc,cAAd"}

package/lib/module/nativeComponenet/NativeComponentExample.js

@@ -0,0 +1,10 @@
+import { requireNativeComponent, UIManager, Platform } 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';
+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

@@ -0,0 +1 @@
+{"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 'unit-react-native-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,GAChB,uFAAD,GACAD,QAAQ,CAACE,MAAT,CAAgB;EAAEC,GAAG,EAAE,gCAAP;EAAyCC,OAAO,EAAE;AAAlD,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/module/webComponent/WebComponent.js

@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from 'react';
+import { Dimensions } from 'react-native';
+import { WebView } from 'react-native-webview';
+import EventBus, { BusEvent } from '../helpers/EventBus';
+import html from './html';
+import { UnitMessage } from './webMessages/unitMessages';
+export let WebComponentType;
+
+(function (WebComponentType) {
+  WebComponentType["card"] = "unit-elements-card";
+  WebComponentType["slot"] = "unit-elements-sdk-slot";
+})(WebComponentType || (WebComponentType = {}));
+
+export const WebComponent = /*#__PURE__*/React.forwardRef((props, webRef) => {
+  const [sourceHtml, setSourceHtml] = useState(null);
+  const windowWidth = Dimensions.get('window').width;
+  useEffect(() => {
+    const component = 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 => {
+    const message = JSON.parse(e.nativeEvent.data);
+
+    if (message.type == UnitMessage.UNIT_REQUEST_REFRESH && message.details) {
+      EventBus.Instance.event(BusEvent.REQUEST_REFRESH, message.details);
+    } else {
+      props.onMessage(message);
+    }
+  };
+
+  if (!sourceHtml) return null;
+  return /*#__PURE__*/React.createElement(WebView, {
+    ref: webRef,
+    cacheEnabled: false,
+    scrollEnabled: false,
+    overScrollMode: "never",
+    style: {
+      width: windowWidth
+    },
+    source: {
+      html: sourceHtml
+    },
+    onMessage: onMessage
+  });
+});
+//# sourceMappingURL=WebComponent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useState","Dimensions","WebView","EventBus","BusEvent","html","UnitMessage","WebComponentType","WebComponent","forwardRef","props","webRef","sourceHtml","setSourceHtml","windowWidth","get","width","component","type","valueOf","newHtml","replace","params","script","onMessage","e","message","JSON","parse","nativeEvent","data","UNIT_REQUEST_REFRESH","details","Instance","event","REQUEST_REFRESH"],"sources":["WebComponent.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Dimensions } from 'react-native';\nimport {\n  WebView,\n  WebViewMessageEvent\n} from 'react-native-webview'\nimport EventBus, { BusEvent } from '../helpers/EventBus';\n\nimport html from './html';\nimport type { CardEvent, CardMessage } from './webMessages/cardMessage';\nimport type { PageEvent, PageMessage } from './webMessages/pageMessage';\nimport { RequestRefreshEvent, UnitEvent, UnitMessage } from './webMessages/unitMessages';\n\nexport type WebViewMessageType =\n  | PageMessage\n  | CardMessage\n  | UnitMessage\n\ntype WebViewEvent =\n  | PageEvent\n  | UnitEvent\n  | CardEvent\n\nexport interface WebViewMessage {\n  type: WebViewMessageType,\n  details?: WebViewEvent\n}\n\nexport interface WebComponentProps {\n  type: WebComponentType;\n  params?: string;\n  onMessage: (message: WebViewMessage) => void;\n  script?: string;\n}\n\nexport enum WebComponentType {\n  card = 'unit-elements-card',\n  slot = 'unit-elements-sdk-slot'\n}\n\nexport const WebComponent = React.forwardRef<WebView, WebComponentProps>((props, webRef) => {\n  const [sourceHtml, setSourceHtml] = useState<string | null>(null)\n\n  const windowWidth = Dimensions.get('window').width;\n\n  useEffect(() => {\n    const component: string = props.type.valueOf()\n    let newHtml = html.replace('<COMPONENT>', `<${component} ${props.params || ''}> </${component}>`)\n    newHtml = newHtml.replace('<SCRIPT_FROM_NATIVE>', props.script || '')\n    setSourceHtml(newHtml)\n  }, [props.params])\n\n  const onMessage = (e: WebViewMessageEvent) => {\n    const message = JSON.parse(e.nativeEvent.data) as WebViewMessage\n\n    if (message.type == UnitMessage.UNIT_REQUEST_REFRESH && message.details) {\n      EventBus.Instance.event(BusEvent.REQUEST_REFRESH, message.details as RequestRefreshEvent)\n    } else {\n      props.onMessage(message)\n    }\n  }\n\n  if (!sourceHtml) return null\n\n  return (\n    <WebView\n      ref={webRef}\n      cacheEnabled={false}\n      scrollEnabled={false}\n      overScrollMode=\"never\"\n      style={{ width: windowWidth }}\n      source={{ html: sourceHtml }}\n      onMessage={onMessage} />\n  )\n})\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,QAA3B,QAA2C,OAA3C;AACA,SAASC,UAAT,QAA2B,cAA3B;AACA,SACEC,OADF,QAGO,sBAHP;AAIA,OAAOC,QAAP,IAAmBC,QAAnB,QAAmC,qBAAnC;AAEA,OAAOC,IAAP,MAAiB,QAAjB;AAGA,SAAyCC,WAAzC,QAA4D,4BAA5D;AAwBA,WAAYC,gBAAZ;;WAAYA,gB;EAAAA,gB;EAAAA,gB;GAAAA,gB,KAAAA,gB;;AAKZ,OAAO,MAAMC,YAAY,gBAAGV,KAAK,CAACW,UAAN,CAA6C,CAACC,KAAD,EAAQC,MAAR,KAAmB;EAC1F,MAAM,CAACC,UAAD,EAAaC,aAAb,IAA8Bb,QAAQ,CAAgB,IAAhB,CAA5C;EAEA,MAAMc,WAAW,GAAGb,UAAU,CAACc,GAAX,CAAe,QAAf,EAAyBC,KAA7C;EAEAjB,SAAS,CAAC,MAAM;IACd,MAAMkB,SAAiB,GAAGP,KAAK,CAACQ,IAAN,CAAWC,OAAX,EAA1B;IACA,IAAIC,OAAO,GAAGf,IAAI,CAACgB,OAAL,CAAa,aAAb,EAA6B,IAAGJ,SAAU,IAAGP,KAAK,CAACY,MAAN,IAAgB,EAAG,OAAML,SAAU,GAAhF,CAAd;IACAG,OAAO,GAAGA,OAAO,CAACC,OAAR,CAAgB,sBAAhB,EAAwCX,KAAK,CAACa,MAAN,IAAgB,EAAxD,CAAV;IACAV,aAAa,CAACO,OAAD,CAAb;EACD,CALQ,EAKN,CAACV,KAAK,CAACY,MAAP,CALM,CAAT;;EAOA,MAAME,SAAS,GAAIC,CAAD,IAA4B;IAC5C,MAAMC,OAAO,GAAGC,IAAI,CAACC,KAAL,CAAWH,CAAC,CAACI,WAAF,CAAcC,IAAzB,CAAhB;;IAEA,IAAIJ,OAAO,CAACR,IAAR,IAAgBZ,WAAW,CAACyB,oBAA5B,IAAoDL,OAAO,CAACM,OAAhE,EAAyE;MACvE7B,QAAQ,CAAC8B,QAAT,CAAkBC,KAAlB,CAAwB9B,QAAQ,CAAC+B,eAAjC,EAAkDT,OAAO,CAACM,OAA1D;IACD,CAFD,MAEO;MACLtB,KAAK,CAACc,SAAN,CAAgBE,OAAhB;IACD;EACF,CARD;;EAUA,IAAI,CAACd,UAAL,EAAiB,OAAO,IAAP;EAEjB,oBACE,oBAAC,OAAD;IACE,GAAG,EAAED,MADP;IAEE,YAAY,EAAE,KAFhB;IAGE,aAAa,EAAE,KAHjB;IAIE,cAAc,EAAC,OAJjB;IAKE,KAAK,EAAE;MAAEK,KAAK,EAAEF;IAAT,CALT;IAME,MAAM,EAAE;MAAET,IAAI,EAAEO;IAAR,CANV;IAOE,SAAS,EAAEY;EAPb,EADF;AAUD,CAlC2B,CAArB"}

package/lib/module/webComponent/html.js

@@ -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;
+//# sourceMappingURL=html.js.map

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

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

package/lib/module/webComponent/webMessages/cardMessage.js

@@ -0,0 +1,6 @@
+export let CardMessage;
+
+(function (CardMessage) {
+  CardMessage["CARD_STATUS_CHANGE"] = "cardStatusChanged";
+})(CardMessage || (CardMessage = {}));
+//# sourceMappingURL=cardMessage.js.map

package/lib/module/webComponent/webMessages/cardMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["CardMessage"],"sources":["cardMessage.ts"],"sourcesContent":["export enum CardMessage {\n  CARD_STATUS_CHANGE = 'cardStatusChanged'\n}\n\nexport interface CardStatusChangedEvent {\n  card: any;\n}\n\nexport type CardEvent =\n  | CardStatusChangedEvent\n"],"mappings":"AAAA,WAAYA,WAAZ;;WAAYA,W;EAAAA,W;GAAAA,W,KAAAA,W"}

package/lib/module/webComponent/webMessages/pageMessage.js

@@ -0,0 +1,7 @@
+export let PageMessage;
+
+(function (PageMessage) {
+  PageMessage["PAGE_LOADED"] = "pageLoaded";
+  PageMessage["PAGE_HEIGHT"] = "pageHeight";
+})(PageMessage || (PageMessage = {}));
+//# sourceMappingURL=pageMessage.js.map

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

@@ -0,0 +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"}

package/lib/module/webComponent/webMessages/unitMessages.js

@@ -0,0 +1,10 @@
+export let UnitMessage;
+
+(function (UnitMessage) {
+  UnitMessage["UNIT_REQUEST_RENDERING"] = "unitRequestRendering";
+  UnitMessage["UNIT_REQUEST_REFRESH"] = "unitRequestRefresh";
+  UnitMessage["UNIT_REQUEST_CLOSE_FLOW"] = "unitRequestCloseFlow";
+  UnitMessage["UNIT_REQUEST_OPEN_LINK"] = "unitRequestOpenLink";
+  UnitMessage["UNIT_ON_LOAD"] = "unitOnLoad";
+})(UnitMessage || (UnitMessage = {}));
+//# sourceMappingURL=unitMessages.js.map

package/lib/module/webComponent/webMessages/unitMessages.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["UnitMessage"],"sources":["unitMessages.ts"],"sourcesContent":["export enum UnitMessage {\n  UNIT_REQUEST_RENDERING = 'unitRequestRendering',\n  UNIT_REQUEST_REFRESH = 'unitRequestRefresh',\n  UNIT_REQUEST_CLOSE_FLOW = 'unitRequestCloseFlow',\n  UNIT_REQUEST_OPEN_LINK = 'unitRequestOpenLink',\n  UNIT_ON_LOAD = 'unitOnLoad'\n}\n\nexport interface RequestRenderingData {\n  nativePlace: string;\n  nativeComponent: string;\n}\nexport interface RequestRenderingEvent {\n  data: string;\n}\n\nexport interface RequestRefreshEvent {\n  refEvent: string;\n  dependencies: string[];\n  resourceId: string;\n}\n\nexport interface RequestOpenLinkEvent {\n  href: string;\n  target: string\n}\n\nexport type UnitEvent =\n  | RequestRenderingEvent\n  | RequestRefreshEvent\n  | RequestOpenLinkEvent\n"],"mappings":"AAAA,WAAYA,WAAZ;;WAAYA,W;EAAAA,W;EAAAA,W;EAAAA,W;EAAAA,W;EAAAA,W;GAAAA,W,KAAAA,W"}

package/lib/typescript/components/BottomSheet/BottomSheetComponent.d.ts

@@ -0,0 +1 @@
+export declare const UNBottomSheetComponent: () => JSX.Element;

package/lib/typescript/components/Card/CardComponent.d.ts

@@ -0,0 +1,6 @@
+export interface UNCardComponentProps {
+    cardId: string;
+    customerToken: string;
+    onStatusChanged?: (card: any) => void;
+}
+export declare const UNCardComponent: (props: UNCardComponentProps) => JSX.Element;

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

@@ -0,0 +1,2 @@
+export * from './Card/CardComponent';
+export * from './BottomSheet/BottomSheetComponent';

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

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import PropTypes from 'prop-types';
+export interface BottomSheetProps {
+    isOpen: boolean;
+    children: ReactNode;
+    sliderMaxHeight: number;
+    onOpen: () => void;
+    onClose: () => void;
+    animationDuration: number;
+    expandToMaxHeightEnabled: boolean;
+}
+declare const BottomSheet: {
+    (props: BottomSheetProps): JSX.Element;
+    propTypes: {
+        children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+        isOpen: PropTypes.Requireable<boolean>;
+        sliderMaxHeight: PropTypes.Requireable<number>;
+        animation: PropTypes.Requireable<(...args: any[]) => any>;
+        animationDuration: PropTypes.Requireable<number>;
+        onOpen: PropTypes.Requireable<(...args: any[]) => any>;
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        expandToMaxHeightEnabled: PropTypes.Requireable<boolean>;
+    };
+    defaultProps: {
+        children: JSX.Element;
+        isOpen: boolean;
+        sliderMaxHeight: number;
+        animationDuration: number;
+        onOpen: () => null;
+        onClose: () => null;
+        expandToMaxHeightEnabled: boolean;
+    };
+};
+export default BottomSheet;

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

@@ -0,0 +1,15 @@
+export declare enum BusEvent {
+    REQUEST_RENDERING = "unitRequestRendering",
+    CARD_STATUS_CHANGED = "cardStatusChanged",
+    REQUEST_REFRESH = "requestRefresh"
+}
+export default class EventBus {
+    private static _instance;
+    private eventListeners;
+    private constructor();
+    static get Instance(): EventBus;
+    event(event: BusEvent, data: any): void;
+    addListener(event: BusEvent, listener: (data: any) => void): void;
+    removeListener(listener: (data: any) => void): void;
+    private _remove;
+}

package/lib/typescript/index.d.ts

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

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

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