dhre-ui-kit 0.0.246 → 0.0.248

package/lib/index.mjs

@@ -1,9 +1,9 @@
-import React, { createContext, useContext, useRef, useEffect, useState, memo, useCallback } from 'react';
+import React, { createContext, useContext, useState, useEffect, useRef, memo, useCallback } from 'react';
 import { useSelector } from 'react-redux';
-import { Dimensions, StyleSheet, Text, Pressable, View, Modal, KeyboardAvoidingView, Platform, Animated, Easing, TextInput, ScrollView, FlatList, TouchableOpacity, Alert, Linking, PanResponder } from 'react-native';
+import { Dimensions, StyleSheet, Text, Pressable, View, Modal, KeyboardAvoidingView, Platform, TextInput, ScrollView, Animated, 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 LottieView from 'lottie-react-native';
 import Tooltip from 'react-native-walkthrough-tooltip';
 import Pdf from 'react-native-pdf';
 import * as Progress from 'react-native-progress';
@@ -15,6 +15,7 @@ import { Dropdown } from 'react-native-element-dropdown';
 import DocumentPicker from 'react-native-document-picker';
 import RNFS from 'react-native-fs';
 import OTPVerify, { removeListener, startOtpListener } from 'react-native-otp-verify';
+import { verticalScale as verticalScale$1, moderateScale as moderateScale$1 } from 'src/utils/stylehelper';
 import Clipboard from '@react-native-clipboard/clipboard';
 
 var ShapeType = /* @__PURE__ */ ((ShapeType2) => {
@@ -710,6 +711,13 @@ const BottomDrawer = ({
 
 const createStyles$3 = (theme) => {
   return StyleSheet.create({
+    container: {
+      position: "absolute",
+      left: 0,
+      right: 0,
+      bottom: 0,
+      top: 0
+    },
     backdrop: {
       flex: 1,
       justifyContent: "center",
@@ -746,67 +754,20 @@ const createStyles$3 = (theme) => {
 };
 
 const CustomLoader = ({ loading, loadingText = "Loading..." }) => {
-  const rotateAnim = useRef(new Animated.Value(0)).current;
   const { theme, mode } = useTheme();
   const styles = createStyles$3(theme);
-  useEffect(() => {
-    if (loading) {
-      Animated.loop(
-        Animated.timing(rotateAnim, {
-          toValue: 1,
-          duration: 1500,
-          easing: Easing.linear,
-          useNativeDriver: true
-        })
-      ).start();
-    } else {
-      rotateAnim.stopAnimation();
-      rotateAnim.setValue(0);
-    }
-    return () => {
-      rotateAnim.stopAnimation();
-    };
-  }, [loading, rotateAnim]);
   if (!loading) return null;
-  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: loadingText,
-      style: styles.text,
-      variant: FontStyle.B4_REGULAR,
-      textColor: "#000000"
-    }
-  ))));
+  else {
+    return /* @__PURE__ */ React.createElement(View, { style: styles.container }, /* @__PURE__ */ React.createElement(View, { style: styles.backdrop }, /* @__PURE__ */ React.createElement(View, { style: styles.box }, /* @__PURE__ */ React.createElement(View, { style: styles.loader }, /* @__PURE__ */ React.createElement(LottieView, { style: styles.loader, source: require("../../assets/json/Loading.json"), autoPlay: true, loop: true })), /* @__PURE__ */ React.createElement(
+      CustomText$1,
+      {
+        text: loadingText,
+        style: styles.text,
+        variant: FontStyle.B4_REGULAR,
+        textColor: "#000000"
+      }
+    ))));
+  }
 };
 var CustomLoader$1 = withThemeProvider(CustomLoader);
 
@@ -3974,15 +3935,18 @@ const styles$5 = StyleSheet.create({
     textDecorationLine: "underline"
   },
   resendOTPStyle: {
-    alignSelf: "flex-end",
-    marginTop: verticalScale(8)
+    alignSelf: "flex-end"
   },
   timerContainer: {
     flexDirection: "row",
     justifyContent: "space-between",
     marginTop: verticalScale(8)
   },
-  timerIconContainer: { flexDirection: "row", gap: horizontalScale(8) }
+  timerIconContainer: {
+    flexDirection: "row",
+    gap: horizontalScale(8),
+    alignItems: "center"
+  }
 });
 
 const OTPInput = React.forwardRef(
@@ -4158,12 +4122,12 @@ const OTPInput = React.forwardRef(
         autoComplete: "sms-otp",
         selectionColor: theme$1.CONTENT_PRIMARY
       }
-    ))), !errorMessageMaxReachCount && /* @__PURE__ */ React.createElement(View, { style: styles$5.timerContainer }, timeLeft !== 0 && /* @__PURE__ */ React.createElement(View, { style: styles$5.timerIconContainer }, timerIcon, /* @__PURE__ */ React.createElement(
+    ))), !errorMessageMaxReachCount && /* @__PURE__ */ React.createElement(View, { style: styles$5.timerContainer }, (disableResendButton() || !isResendOtpEnable) && /* @__PURE__ */ React.createElement(View, { style: styles$5.timerIconContainer }, timerIcon, /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
-        text: `${timeLeft} sec`,
-        variant: FontStyle.L2_REGULAR,
-        style: { color: theme$1.CONTENT_PRIMARY }
+        text: `00:${timeLeft} secs`,
+        variant: FontStyle.L1_REGULAR,
+        style: { color: theme$1.INFO }
       }
     )), /* @__PURE__ */ React.createElement(
       Pressable,
@@ -4378,8 +4342,8 @@ const styles$3 = StyleSheet.create({
     alignItems: "center"
   },
   sliderContainer: {
-    height: verticalScale(48),
-    borderRadius: moderateScale(25),
+    height: verticalScale$1(48),
+    borderRadius: moderateScale$1(25),
     overflow: "hidden",
     justifyContent: "center"
   },
@@ -4390,11 +4354,11 @@ const styles$3 = StyleSheet.create({
     justifyContent: "center"
   },
   button: {
-    height: verticalScale(40),
+    height: verticalScale$1(40),
     justifyContent: "center",
     alignItems: "center",
-    borderRadius: moderateScale(20),
-    margin: moderateScale(4)
+    borderRadius: moderateScale$1(20),
+    margin: 4
   },
   buttonTextContainer: {
     position: "absolute",
@@ -4403,7 +4367,8 @@ const styles$3 = StyleSheet.create({
     bottom: 0,
     top: 0,
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "center",
+    borderRadius: 25
   }
 });
 
@@ -4412,30 +4377,25 @@ const CustomSlideButton = React.forwardRef(
   ({
     label,
     onComplete,
+    onReset,
     icon,
     textStyle,
     containerStyle,
     sliderStyle,
     size = BUTTON_WIDTH,
-    slideButtonTail,
-    slideButtonTailColor = "#fff"
+    sliderBackgroundColor = "#fff",
+    sliderTextColor = "#000",
+    resetTimer = 2e3
   }, ref) => {
     const value = useRef(0);
     const cardRef = useRef(null);
     const [translateX] = useState(new Animated.Value(0));
-    const slideTailCardRef = useRef(null);
-    slideTailCardRef?.current?.setNativeProps({
-      style: { width: 0 }
-    });
+    const sliderConteinerRef = useRef(null);
+    const [color, setColor] = useState(new Animated.Value(0));
+    const [sliderBackgroundColorRef, setSliderBackgroundColorRef] = useState(new Animated.Value(0));
     React.useImperativeHandle(ref, () => ({
       reset() {
-        Animated.spring(translateX, {
-          toValue: 0,
-          useNativeDriver: false
-        }).start();
-        slideTailCardRef?.current?.setNativeProps({
-          style: { width: 0 }
-        });
+        resetAll();
       }
     }));
     const handleLayout = (event) => {
@@ -4446,68 +4406,102 @@ const CustomSlideButton = React.forwardRef(
           // Change the width here
         });
         value.current = width;
+        sliderConteinerRef?.current?.setNativeProps({
+          style: { width }
+        });
       }
     };
+    const resetAll = () => {
+      Animated.timing(translateX, {
+        toValue: 0,
+        useNativeDriver: false
+      }).start();
+      Animated.timing(sliderBackgroundColorRef, {
+        toValue: 0,
+        duration: 0,
+        // no transition time, immediate change
+        useNativeDriver: false
+        // because we're animating the color, not layout
+      }).start();
+      Animated.timing(color, {
+        toValue: 0,
+        delay: 300,
+        // no transition time, immediate change
+        useNativeDriver: false
+        // because we're animating the color, not layout
+      }).start();
+      onReset?.();
+    };
     const panResponder = PanResponder.create({
       onMoveShouldSetPanResponder: (e, gestureState) => {
         return gestureState.dx !== 0;
       },
       onPanResponderMove: (evt, gestureState) => {
-        if (gestureState.dx > 0) {
+        if (gestureState.dx > 0 && gestureState.dx <= value?.current - BUTTON_WIDTH - 8) {
           translateX.setValue(gestureState.dx);
-          slideTailCardRef?.current?.setNativeProps({
-            style: { width: gestureState.dx + BUTTON_WIDTH / 2 }
-          });
+          let colorValue = gestureState.dx > value.current / 3 ? 1 : 0;
+          Animated.timing(color, {
+            toValue: colorValue,
+            duration: 0,
+            // no transition time, immediate change
+            useNativeDriver: false
+            // because we're animating the color, not layout
+          }).start();
         }
       },
       onPanResponderRelease: (e, gestureState) => {
-        if (gestureState.dx >= value.current * 0.7) {
+        if (gestureState.dx >= value.current * 0.8) {
           Animated.timing(translateX, {
-            toValue: value.current - BUTTON_WIDTH - 12,
+            toValue: value?.current - (BUTTON_WIDTH + 8),
             // Slide to the end
             duration: 300,
             useNativeDriver: false
-          }).start(() => {
-            onComplete?.();
-          });
-          slideTailCardRef?.current?.setNativeProps({
-            style: { width: value.current + BUTTON_WIDTH }
-            // Change the width here
-          });
-        } else {
-          Animated.spring(translateX, {
-            toValue: 0,
+          }).start();
+          Animated.timing(sliderBackgroundColorRef, {
+            toValue: 1,
+            duration: 0,
+            // no transition time, immediate change
             useNativeDriver: false
+            // because we're animating the color, not layout
           }).start();
-          slideTailCardRef?.current?.setNativeProps({
-            style: { width: 0 }
-          });
+          onComplete?.();
+          setTimeout(() => {
+            resetAll();
+          }, resetTimer);
+        } else {
+          resetAll();
         }
       }
     });
+    const textColor = color.interpolate({
+      inputRange: [0, 1],
+      outputRange: [sliderTextColor, "transparent"]
+    });
+    const backgroundColor = sliderBackgroundColorRef.interpolate({
+      inputRange: [0, 1],
+      outputRange: [sliderBackgroundColor, "transparent"]
+    });
     const { theme } = useTheme();
     return /* @__PURE__ */ React.createElement(View, { style: {
       ...styles$3.sliderContainer,
       backgroundColor: theme.SURFACE_INVERTED,
       ...containerStyle
-    }, onLayout: handleLayout, ref: cardRef }, slideButtonTail && /* @__PURE__ */ React.createElement(
+    }, onLayout: handleLayout, ref: cardRef }, /* @__PURE__ */ React.createElement(
       Animated.View,
       {
-        ref: slideTailCardRef,
-        style: [{ height: "100%", width: 0, backgroundColor: slideButtonTailColor }]
+        style: [styles$3.buttonTextContainer, { backgroundColor, transform: [{ translateX }] }],
+        ref: sliderConteinerRef
       }
-    ), /* @__PURE__ */ React.createElement(View, { style: styles$3.buttonTextContainer }, /* @__PURE__ */ React.createElement(
-      CustomTypography,
+    ), /* @__PURE__ */ React.createElement(
+      View,
       {
-        text: label,
-        variant: FontStyle.L1_REGULAR,
-        style: {
-          color: theme.CONTENT_INVERTED,
-          alignSelf: "center",
-          ...textStyle
-        }
-      }
-    )), /* @__PURE__ */ React.createElement(
+        style: styles$3.buttonTextContainer
+      },
+      /* @__PURE__ */ React.createElement(Animated.Text, { style: [{
+        alignSelf: "center",
+        ...textStyle
+      }, { color: textColor }] }, label)
+    ), /* @__PURE__ */ React.createElement(
       Animated.View,
       {
         style: [styles$3.slider, { transform: [{ translateX }] }],