dhre-ui-kit 0.0.222 → 0.0.223

package/lib/index.d.ts

@@ -487,7 +487,7 @@ interface CustomLoaderProps {
     loading: boolean;
 }
 
-declare const CustomLoader: ({ loading }: CustomLoaderProps) => React$1.JSX.Element | null;
+declare const CustomLoader: React$1.FC<CustomLoaderProps>;
 
 declare const _default$d: (props: {
     backgroundColor?: string;

package/lib/index.js

@@ -7,6 +7,7 @@ var reactRedux = require('react-redux');
 var reactNative = require('react-native');
 var reactNativeGestureHandler = require('react-native-gesture-handler');
 var blur = require('@react-native-community/blur');
+var Svg = require('react-native-svg');
 var Tooltip = require('react-native-walkthrough-tooltip');
 var Pdf = require('react-native-pdf');
 var Progress = require('react-native-progress');
@@ -41,6 +42,7 @@ function _interopNamespace(e) {
 }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var Svg__default = /*#__PURE__*/_interopDefaultLegacy(Svg);
 var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
 var Pdf__default = /*#__PURE__*/_interopDefaultLegacy(Pdf);
 var Progress__namespace = /*#__PURE__*/_interopNamespace(Progress);
@@ -370,13 +372,13 @@ const CustomTypography = ({
     reactNative.Text,
     {
       testID,
-      style: [textStyle, styles$C.container, style],
+      style: [textStyle, styles$B.container, style],
       ...props
     },
     text
   );
 };
-const styles$C = reactNative.StyleSheet.create({
+const styles$B = reactNative.StyleSheet.create({
   container: { writingDirection: "auto", alignSelf: "flex-start" }
 });
 
@@ -588,7 +590,7 @@ const DHRE_COLORS_TEXT = {
   DH_SURFACE_SECONDARY: "#212121"
 };
 
-const styles$B = reactNative.StyleSheet.create({
+const styles$A = reactNative.StyleSheet.create({
   badge: {
     backgroundColor: DHRE_COLORS_ALERT.DH_SUCCESS_GREEN,
     borderRadius: 15,
@@ -615,16 +617,16 @@ const Badge = ({
   return /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Pressable,
     {
-      style: [styles$B.badge, commonStyles.centerRow, style],
+      style: [styles$A.badge, commonStyles.centerRow, style],
       testID: "BADGE",
       onPress: handleIconPress
     },
-    iconName && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$B.icon, iconStyle] }, React__default["default"].cloneElement(iconName)),
+    iconName && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$A.icon, iconStyle] }, React__default["default"].cloneElement(iconName)),
     text && /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         variant: "B3semiBold",
-        style: [styles$B.text, textStyle],
+        style: [styles$A.text, textStyle],
         text
       }
     )
@@ -632,7 +634,7 @@ const Badge = ({
 };
 var Badge$1 = withThemeProvider(Badge);
 
-const styles$A = reactNative.StyleSheet.create({
+const styles$z = reactNative.StyleSheet.create({
   mainContainer: {
     flex: 1,
     justifyContent: "flex-end"
@@ -712,51 +714,130 @@ const BottomDrawer = ({
         behavior: reactNative.Platform.OS === "ios" ? "padding" : "height",
         style: { flex: 1 }
       },
-      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$A.mainContainer, style], testID }, showBlurView ? /* @__PURE__ */ React__default["default"].createElement(
+      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$z.mainContainer, style], testID }, showBlurView ? /* @__PURE__ */ React__default["default"].createElement(
         blur.BlurView,
         {
-          style: [styles$A.blurView, blurViewStyle],
+          style: [styles$z.blurView, blurViewStyle],
           blurType,
           blurAmount
         }
-      ) : null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$A.modalContainer, modalContainerStyle] }, showHeader && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$A.separator }), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$A.headerContainer }, showLeftIcon && leftIcon ? React__default["default"].cloneElement(leftIcon, {
+      ) : null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$z.modalContainer, modalContainerStyle] }, showHeader && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$z.separator }), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$z.headerContainer }, showLeftIcon && leftIcon ? React__default["default"].cloneElement(leftIcon, {
         width: moderateScale(24),
         height: moderateScale(24),
-        style: styles$A.leftIconStyle,
+        style: styles$z.leftIconStyle,
         onPress: onLeftIconPress
       }) : null, /* @__PURE__ */ React__default["default"].createElement(
         CustomTypography,
         {
           variant: titleVariant,
           text: title,
-          style: { ...styles$A.title, ...titleStyle }
+          style: { ...styles$z.title, ...titleStyle }
         }
       ), showRightIcon && rightIcon ? React__default["default"].cloneElement(rightIcon, {
         width: moderateScale(24),
         height: moderateScale(24),
-        style: styles$A.rightIconStyle,
+        style: styles$z.rightIconStyle,
         onPress: toggleModal
       }) : null)), children))
     ))
   );
 };
 
-const styles$z = reactNative.StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    backgroundColor: "transparent",
-    position: "absolute",
-    width: "100%",
-    height: "100%",
-    zIndex: 1e3
-  }
-});
+const createStyles$3 = (theme) => {
+  return reactNative.StyleSheet.create({
+    backdrop: {
+      flex: 1,
+      justifyContent: "center",
+      alignItems: "center",
+      backgroundColor: "rgba(0, 0, 0, 0.3)"
+    },
+    box: {
+      width: 148,
+      height: 187,
+      backgroundColor: theme.SURFACE_PRIMARY,
+      borderRadius: 16,
+      justifyContent: "center",
+      alignItems: "center",
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.2,
+      shadowRadius: 4,
+      elevation: 5
+    },
+    loader: {
+      width: 80,
+      height: 80,
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    text: {
+      marginTop: 16,
+      textAlign: "center",
+      alignSelf: "center",
+      alignContent: "center",
+      color: theme.CONTENT_PRIMARY
+    }
+  });
+};
 
 const CustomLoader = ({ loading }) => {
+  const rotateAnim = React.useRef(new reactNative.Animated.Value(0)).current;
+  const { theme, mode } = useTheme();
+  const styles = createStyles$3(theme);
+  React.useEffect(() => {
+    if (loading) {
+      reactNative.Animated.loop(
+        reactNative.Animated.parallel([
+          reactNative.Animated.timing(rotateAnim, {
+            toValue: 1,
+            duration: 1500,
+            easing: reactNative.Easing.linear,
+            useNativeDriver: true
+          })
+        ])
+      ).start();
+    }
+  }, [loading]);
   if (!loading) return null;
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$z.container }, /* @__PURE__ */ React__default["default"].createElement(reactNative.ActivityIndicator, { size: "large", color: "#686868" }));
+  const spin = rotateAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0deg", "360deg"]
+  });
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.Modal, { transparent: true, visible: loading, animationType: "fade" }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles.backdrop }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles.box }, /* @__PURE__ */ React__default["default"].createElement(reactNative.Animated.View, { style: [styles.loader, { transform: [{ rotate: spin }] }] }, /* @__PURE__ */ React__default["default"].createElement(Svg__default["default"], { width: "100", height: "100", viewBox: "0 0 100 100" }, /* @__PURE__ */ React__default["default"].createElement(Svg.Defs, null, /* @__PURE__ */ React__default["default"].createElement(Svg.LinearGradient, { id: "grad", x1: "0%", y1: "0%", x2: "100%", y2: "100%" }, /* @__PURE__ */ React__default["default"].createElement(Svg.Stop, { offset: "0%", stopColor: "#000000", stopOpacity: "2" }), /* @__PURE__ */ React__default["default"].createElement(
+    Svg.Stop,
+    {
+      offset: "40%",
+      stopColor: mode === "dark" ? "#5A5A5A00" : "#686868",
+      stopOpacity: "5"
+    }
+  ), /* @__PURE__ */ React__default["default"].createElement(
+    Svg.Stop,
+    {
+      offset: "100%",
+      stopColor: mode === "dark" ? "#FFFFFF" : "#AAAAAA",
+      stopOpacity: ".9"
+    }
+  ))), /* @__PURE__ */ React__default["default"].createElement(
+    Svg.Circle,
+    {
+      cx: "50",
+      cy: "50",
+      r: "40",
+      stroke: "url(#grad)",
+      strokeWidth: "8",
+      fill: "none",
+      strokeDasharray: "250",
+      strokeLinecap: "round"
+    }
+  ))), /* @__PURE__ */ React__default["default"].createElement(
+    CustomText$1,
+    {
+      text: "Loading...",
+      style: styles.text,
+      variant: FontStyle.B4_REGULAR,
+      textColor: "#000000"
+    }
+  ))));
 };
 
 const CustomButton = ({