dhre-ui-kit 0.0.221 → 0.0.223

package/lib/index.mjs

@@ -1,8 +1,9 @@
-import React, { createContext, useContext, useState, useEffect, useRef, memo, useCallback } from 'react';
+import React, { createContext, useContext, useRef, useEffect, useState, memo, useCallback } from 'react';
 import { useSelector } from 'react-redux';
-import { Dimensions, StyleSheet, Text, Pressable, View, Modal, KeyboardAvoidingView, Platform, ActivityIndicator, TextInput, ScrollView, Animated, FlatList, TouchableOpacity, Alert, Linking, PanResponder } from 'react-native';
+import { Dimensions, StyleSheet, Text, Pressable, View, Modal, KeyboardAvoidingView, Platform, Animated, Easing, TextInput, ScrollView, FlatList, TouchableOpacity, Alert, Linking, PanResponder } from 'react-native';
 import { PanGestureHandler, GestureHandlerRootView, Swipeable } from 'react-native-gesture-handler';
 import { BlurView } from '@react-native-community/blur';
+import Svg, { Defs, LinearGradient, Stop, Circle } from 'react-native-svg';
 import Tooltip from 'react-native-walkthrough-tooltip';
 import Pdf from 'react-native-pdf';
 import * as Progress from 'react-native-progress';
@@ -335,13 +336,13 @@ const CustomTypography = ({
     Text,
     {
       testID,
-      style: [textStyle, styles$C.container, style],
+      style: [textStyle, styles$B.container, style],
       ...props
     },
     text
   );
 };
-const styles$C = StyleSheet.create({
+const styles$B = StyleSheet.create({
   container: { writingDirection: "auto", alignSelf: "flex-start" }
 });
 
@@ -553,7 +554,7 @@ const DHRE_COLORS_TEXT = {
   DH_SURFACE_SECONDARY: "#212121"
 };
 
-const styles$B = StyleSheet.create({
+const styles$A = StyleSheet.create({
   badge: {
     backgroundColor: DHRE_COLORS_ALERT.DH_SUCCESS_GREEN,
     borderRadius: 15,
@@ -580,16 +581,16 @@ const Badge = ({
   return /* @__PURE__ */ React.createElement(
     Pressable,
     {
-      style: [styles$B.badge, commonStyles.centerRow, style],
+      style: [styles$A.badge, commonStyles.centerRow, style],
       testID: "BADGE",
       onPress: handleIconPress
     },
-    iconName && /* @__PURE__ */ React.createElement(View, { style: [styles$B.icon, iconStyle] }, React.cloneElement(iconName)),
+    iconName && /* @__PURE__ */ React.createElement(View, { style: [styles$A.icon, iconStyle] }, React.cloneElement(iconName)),
     text && /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         variant: "B3semiBold",
-        style: [styles$B.text, textStyle],
+        style: [styles$A.text, textStyle],
         text
       }
     )
@@ -597,7 +598,7 @@ const Badge = ({
 };
 var Badge$1 = withThemeProvider(Badge);
 
-const styles$A = StyleSheet.create({
+const styles$z = StyleSheet.create({
   mainContainer: {
     flex: 1,
     justifyContent: "flex-end"
@@ -677,51 +678,130 @@ const BottomDrawer = ({
         behavior: Platform.OS === "ios" ? "padding" : "height",
         style: { flex: 1 }
       },
-      /* @__PURE__ */ React.createElement(View, { style: [styles$A.mainContainer, style], testID }, showBlurView ? /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement(View, { style: [styles$z.mainContainer, style], testID }, showBlurView ? /* @__PURE__ */ React.createElement(
         BlurView,
         {
-          style: [styles$A.blurView, blurViewStyle],
+          style: [styles$z.blurView, blurViewStyle],
           blurType,
           blurAmount
         }
-      ) : null, /* @__PURE__ */ React.createElement(View, { style: [styles$A.modalContainer, modalContainerStyle] }, showHeader && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, { style: styles$A.separator }), /* @__PURE__ */ React.createElement(View, { style: styles$A.headerContainer }, showLeftIcon && leftIcon ? React.cloneElement(leftIcon, {
+      ) : null, /* @__PURE__ */ React.createElement(View, { style: [styles$z.modalContainer, modalContainerStyle] }, showHeader && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, { style: styles$z.separator }), /* @__PURE__ */ React.createElement(View, { style: styles$z.headerContainer }, showLeftIcon && leftIcon ? React.cloneElement(leftIcon, {
         width: moderateScale(24),
         height: moderateScale(24),
-        style: styles$A.leftIconStyle,
+        style: styles$z.leftIconStyle,
         onPress: onLeftIconPress
       }) : null, /* @__PURE__ */ React.createElement(
         CustomTypography,
         {
           variant: titleVariant,
           text: title,
-          style: { ...styles$A.title, ...titleStyle }
+          style: { ...styles$z.title, ...titleStyle }
         }
       ), showRightIcon && rightIcon ? React.cloneElement(rightIcon, {
         width: moderateScale(24),
         height: moderateScale(24),
-        style: styles$A.rightIconStyle,
+        style: styles$z.rightIconStyle,
         onPress: toggleModal
       }) : null)), children))
     ))
   );
 };
 
-const styles$z = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    backgroundColor: "transparent",
-    position: "absolute",
-    width: "100%",
-    height: "100%",
-    zIndex: 1e3
-  }
-});
+const createStyles$3 = (theme) => {
+  return 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 = useRef(new Animated.Value(0)).current;
+  const { theme, mode } = useTheme();
+  const styles = createStyles$3(theme);
+  useEffect(() => {
+    if (loading) {
+      Animated.loop(
+        Animated.parallel([
+          Animated.timing(rotateAnim, {
+            toValue: 1,
+            duration: 1500,
+            easing: Easing.linear,
+            useNativeDriver: true
+          })
+        ])
+      ).start();
+    }
+  }, [loading]);
   if (!loading) return null;
-  return /* @__PURE__ */ React.createElement(View, { style: styles$z.container }, /* @__PURE__ */ React.createElement(ActivityIndicator, { size: "large", color: "#686868" }));
+  const spin = rotateAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0deg", "360deg"]
+  });
+  return /* @__PURE__ */ React.createElement(Modal, { transparent: true, visible: loading, animationType: "fade" }, /* @__PURE__ */ React.createElement(View, { style: styles.backdrop }, /* @__PURE__ */ React.createElement(View, { style: styles.box }, /* @__PURE__ */ React.createElement(Animated.View, { style: [styles.loader, { transform: [{ rotate: spin }] }] }, /* @__PURE__ */ React.createElement(Svg, { width: "100", height: "100", viewBox: "0 0 100 100" }, /* @__PURE__ */ React.createElement(Defs, null, /* @__PURE__ */ React.createElement(LinearGradient, { id: "grad", x1: "0%", y1: "0%", x2: "100%", y2: "100%" }, /* @__PURE__ */ React.createElement(Stop, { offset: "0%", stopColor: "#000000", stopOpacity: "2" }), /* @__PURE__ */ React.createElement(
+    Stop,
+    {
+      offset: "40%",
+      stopColor: mode === "dark" ? "#5A5A5A00" : "#686868",
+      stopOpacity: "5"
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Stop,
+    {
+      offset: "100%",
+      stopColor: mode === "dark" ? "#FFFFFF" : "#AAAAAA",
+      stopOpacity: ".9"
+    }
+  ))), /* @__PURE__ */ React.createElement(
+    Circle,
+    {
+      cx: "50",
+      cy: "50",
+      r: "40",
+      stroke: "url(#grad)",
+      strokeWidth: "8",
+      fill: "none",
+      strokeDasharray: "250",
+      strokeLinecap: "round"
+    }
+  ))), /* @__PURE__ */ React.createElement(
+    CustomText$1,
+    {
+      text: "Loading...",
+      style: styles.text,
+      variant: FontStyle.B4_REGULAR,
+      textColor: "#000000"
+    }
+  ))));
 };
 
 const CustomButton = ({
@@ -3421,7 +3501,8 @@ const CustomDropdown = (props) => {
     menuContainerStyle,
     activeColor,
     keepPlaceholderOnFocus = false,
-    selectedItemTextStyle
+    selectedItemTextStyle,
+    disable
   } = props;
   const [value, setValue] = useState(defaultValue);
   const [isFocus, setIsFocus] = useState(false);
@@ -3493,7 +3574,8 @@ const CustomDropdown = (props) => {
       itemTextStyle,
       containerStyle: menuContainerStyle,
       activeColor,
-      itemContainerStyle: [styles$8.itemListStyle, itemContainerStyle]
+      itemContainerStyle: [styles$8.itemListStyle, itemContainerStyle],
+      disable
     }
   ));
 };