dhre-ui-kit 0.0.246 → 0.0.248

package/lib/index.d.ts

@@ -743,13 +743,15 @@ declare const _default$3: (props: IProps) => React$1.JSX.Element;
 interface CustomSlideButtonProps {
     label?: string;
     onComplete?: () => void;
+    onReset?: () => void;
     icon: React$1.ReactElement;
     size?: number;
     textStyle?: TextStyle;
     containerStyle?: ViewStyle;
     sliderStyle?: ViewStyle;
-    slideButtonTail?: boolean;
-    slideButtonTailColor?: string;
+    sliderBackgroundColor?: string;
+    sliderTextColor?: string;
+    resetTimer?: number;
 }
 type SlideButtonHandle = {
     reset?: () => void;

package/lib/index.js

@@ -7,7 +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 LottieView = require('lottie-react-native');
 var Tooltip = require('react-native-walkthrough-tooltip');
 var Pdf = require('react-native-pdf');
 var Progress = require('react-native-progress');
@@ -19,6 +19,7 @@ var reactNativeElementDropdown = require('react-native-element-dropdown');
 var DocumentPicker = require('react-native-document-picker');
 var RNFS = require('react-native-fs');
 var OTPVerify = require('react-native-otp-verify');
+var stylehelper = require('src/utils/stylehelper');
 var Clipboard = require('@react-native-clipboard/clipboard');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -42,7 +43,7 @@ function _interopNamespace(e) {
 }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var Svg__default = /*#__PURE__*/_interopDefaultLegacy(Svg);
+var LottieView__default = /*#__PURE__*/_interopDefaultLegacy(LottieView);
 var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
 var Pdf__default = /*#__PURE__*/_interopDefaultLegacy(Pdf);
 var Progress__namespace = /*#__PURE__*/_interopNamespace(Progress);
@@ -746,6 +747,13 @@ const BottomDrawer = ({
 
 const createStyles$3 = (theme) => {
   return reactNative.StyleSheet.create({
+    container: {
+      position: "absolute",
+      left: 0,
+      right: 0,
+      bottom: 0,
+      top: 0
+    },
     backdrop: {
       flex: 1,
       justifyContent: "center",
@@ -782,67 +790,20 @@ const createStyles$3 = (theme) => {
 };
 
 const CustomLoader = ({ loading, loadingText = "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.timing(rotateAnim, {
-          toValue: 1,
-          duration: 1500,
-          easing: reactNative.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__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: loadingText,
-      style: styles.text,
-      variant: FontStyle.B4_REGULAR,
-      textColor: "#000000"
-    }
-  ))));
+  else {
+    return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles.container }, /* @__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.View, { style: styles.loader }, /* @__PURE__ */ React__default["default"].createElement(LottieView__default["default"], { style: styles.loader, source: require("../../assets/json/Loading.json"), autoPlay: true, loop: true })), /* @__PURE__ */ React__default["default"].createElement(
+      CustomText$1,
+      {
+        text: loadingText,
+        style: styles.text,
+        variant: FontStyle.B4_REGULAR,
+        textColor: "#000000"
+      }
+    ))));
+  }
 };
 var CustomLoader$1 = withThemeProvider(CustomLoader);
 
@@ -4010,15 +3971,18 @@ const styles$5 = reactNative.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__default["default"].forwardRef(
@@ -4194,12 +4158,12 @@ const OTPInput = React__default["default"].forwardRef(
         autoComplete: "sms-otp",
         selectionColor: theme$1.CONTENT_PRIMARY
       }
-    ))), !errorMessageMaxReachCount && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$5.timerContainer }, timeLeft !== 0 && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$5.timerIconContainer }, timerIcon, /* @__PURE__ */ React__default["default"].createElement(
+    ))), !errorMessageMaxReachCount && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$5.timerContainer }, (disableResendButton() || !isResendOtpEnable) && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$5.timerIconContainer }, timerIcon, /* @__PURE__ */ React__default["default"].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__default["default"].createElement(
       reactNative.Pressable,
@@ -4414,8 +4378,8 @@ const styles$3 = reactNative.StyleSheet.create({
     alignItems: "center"
   },
   sliderContainer: {
-    height: verticalScale(48),
-    borderRadius: moderateScale(25),
+    height: stylehelper.verticalScale(48),
+    borderRadius: stylehelper.moderateScale(25),
     overflow: "hidden",
     justifyContent: "center"
   },
@@ -4426,11 +4390,11 @@ const styles$3 = reactNative.StyleSheet.create({
     justifyContent: "center"
   },
   button: {
-    height: verticalScale(40),
+    height: stylehelper.verticalScale(40),
     justifyContent: "center",
     alignItems: "center",
-    borderRadius: moderateScale(20),
-    margin: moderateScale(4)
+    borderRadius: stylehelper.moderateScale(20),
+    margin: 4
   },
   buttonTextContainer: {
     position: "absolute",
@@ -4439,7 +4403,8 @@ const styles$3 = reactNative.StyleSheet.create({
     bottom: 0,
     top: 0,
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "center",
+    borderRadius: 25
   }
 });
 
@@ -4448,30 +4413,25 @@ const CustomSlideButton = React__default["default"].forwardRef(
   ({
     label,
     onComplete,
+    onReset,
     icon,
     textStyle,
     containerStyle,
     sliderStyle,
     size = BUTTON_WIDTH,
-    slideButtonTail,
-    slideButtonTailColor = "#fff"
+    sliderBackgroundColor = "#fff",
+    sliderTextColor = "#000",
+    resetTimer = 2e3
   }, ref) => {
     const value = React.useRef(0);
     const cardRef = React.useRef(null);
     const [translateX] = React.useState(new reactNative.Animated.Value(0));
-    const slideTailCardRef = React.useRef(null);
-    slideTailCardRef?.current?.setNativeProps({
-      style: { width: 0 }
-    });
+    const sliderConteinerRef = React.useRef(null);
+    const [color, setColor] = React.useState(new reactNative.Animated.Value(0));
+    const [sliderBackgroundColorRef, setSliderBackgroundColorRef] = React.useState(new reactNative.Animated.Value(0));
     React__default["default"].useImperativeHandle(ref, () => ({
       reset() {
-        reactNative.Animated.spring(translateX, {
-          toValue: 0,
-          useNativeDriver: false
-        }).start();
-        slideTailCardRef?.current?.setNativeProps({
-          style: { width: 0 }
-        });
+        resetAll();
       }
     }));
     const handleLayout = (event) => {
@@ -4482,68 +4442,102 @@ const CustomSlideButton = React__default["default"].forwardRef(
           // Change the width here
         });
         value.current = width;
+        sliderConteinerRef?.current?.setNativeProps({
+          style: { width }
+        });
       }
     };
+    const resetAll = () => {
+      reactNative.Animated.timing(translateX, {
+        toValue: 0,
+        useNativeDriver: false
+      }).start();
+      reactNative.Animated.timing(sliderBackgroundColorRef, {
+        toValue: 0,
+        duration: 0,
+        // no transition time, immediate change
+        useNativeDriver: false
+        // because we're animating the color, not layout
+      }).start();
+      reactNative.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 = reactNative.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;
+          reactNative.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) {
           reactNative.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 {
-          reactNative.Animated.spring(translateX, {
-            toValue: 0,
+          }).start();
+          reactNative.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__default["default"].createElement(reactNative.View, { style: {
       ...styles$3.sliderContainer,
       backgroundColor: theme.SURFACE_INVERTED,
       ...containerStyle
-    }, onLayout: handleLayout, ref: cardRef }, slideButtonTail && /* @__PURE__ */ React__default["default"].createElement(
+    }, onLayout: handleLayout, ref: cardRef }, /* @__PURE__ */ React__default["default"].createElement(
       reactNative.Animated.View,
       {
-        ref: slideTailCardRef,
-        style: [{ height: "100%", width: 0, backgroundColor: slideButtonTailColor }]
+        style: [styles$3.buttonTextContainer, { backgroundColor, transform: [{ translateX }] }],
+        ref: sliderConteinerRef
       }
-    ), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$3.buttonTextContainer }, /* @__PURE__ */ React__default["default"].createElement(
-      CustomTypography,
+    ), /* @__PURE__ */ React__default["default"].createElement(
+      reactNative.View,
       {
-        text: label,
-        variant: FontStyle.L1_REGULAR,
-        style: {
-          color: theme.CONTENT_INVERTED,
-          alignSelf: "center",
-          ...textStyle
-        }
-      }
-    )), /* @__PURE__ */ React__default["default"].createElement(
+        style: styles$3.buttonTextContainer
+      },
+      /* @__PURE__ */ React__default["default"].createElement(reactNative.Animated.Text, { style: [{
+        alignSelf: "center",
+        ...textStyle
+      }, { color: textColor }] }, label)
+    ), /* @__PURE__ */ React__default["default"].createElement(
       reactNative.Animated.View,
       {
         style: [styles$3.slider, { transform: [{ translateX }] }],