dhre-ui-kit 0.0.232 → 0.0.233

package/lib/index.d.ts

@@ -711,6 +711,7 @@ interface IProps$1 {
     label?: string;
     resendText?: string;
     mode?: 'light' | 'dark';
+    disabled?: boolean;
 }
 type OTPInputHandle = {
     reset?: () => void;

package/lib/index.js

@@ -4024,11 +4024,14 @@ const OTPInput = React__default["default"].forwardRef(
     resendOtpColor,
     label = "OTP",
     resendText = "Resend OTP",
-    mode
+    mode,
+    disabled
   }, ref) => {
     const [otp, setOTP] = React.useState("");
     const [isResendOtpEnable, setIsResendOtpEnable] = React.useState(false);
     const [activeInput, setActiveInput] = React.useState(null);
+    const [resendOTPCount, setResendOTPCount] = React.useState(0);
+    const [errorMessageMaxReachCount, setErrorMessageMaxReachCount] = React.useState("");
     const filteredTheme = Object?.keys(theme)?.reduce(
       (acc, key) => {
         acc[key] = theme[key][mode];
@@ -4043,15 +4046,23 @@ const OTPInput = React__default["default"].forwardRef(
       enableResendOtp();
     }, []);
     const onClickResendOTP = () => {
-      setIsResendOtpEnable(false);
-      enableResendOtp();
-      resendOTP?.();
-      setOTP("");
+      if (resendOTPCount >= 3) {
+        setErrorMessageMaxReachCount("You have exceeded the maximum number of attempts.");
+        return;
+      }
+      if (resendOTPCount < 3) {
+        setResendOTPCount(resendOTPCount + 1);
+        enableResendOtp();
+        resendOTP?.();
+        setOTP("");
+      }
     };
     const enableResendOtp = () => {
-      setTimeout(() => {
-        setIsResendOtpEnable(true);
-      }, 5e3);
+      if (!disabled && resendOTPCount <= 3) {
+        setTimeout(() => {
+          setIsResendOtpEnable(true);
+        }, 6e4);
+      }
     };
     React.useEffect(() => {
       if (reactNative.Platform.OS === "android") {
@@ -4132,7 +4143,7 @@ const OTPInput = React__default["default"].forwardRef(
         style: {
           ...styles$5.textInputStyle,
           color: theme$1.CONTENT_PRIMARY,
-          borderColor: errorMessage ? theme$1.ERROR : otp.length === length ? theme$1.SUCCESS : activeInput === index ? theme$1.BORDER_INVERTED : theme$1.BORDER_PRIMARY,
+          borderColor: errorMessage || errorMessageMaxReachCount ? theme$1.ERROR : otp.length === length ? theme$1.SUCCESS : activeInput === index ? theme$1.BORDER_INVERTED : theme$1.BORDER_PRIMARY,
           ...textInputStyle
         },
         onFocus: () => setActiveInput(index),
@@ -4154,7 +4165,7 @@ const OTPInput = React__default["default"].forwardRef(
       {
         onPress: onClickResendOTP,
         style: styles$5.resendOTPStyle,
-        disabled: !isResendOtpEnable
+        disabled: !isResendOtpEnable || resendOTPCount >= 3
       },
       /* @__PURE__ */ React__default["default"].createElement(
         CustomTypography,
@@ -4168,7 +4179,7 @@ const OTPInput = React__default["default"].forwardRef(
           }
         }
       )
-    ), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$5.resendOtpContainer }, errorMessage ? /* @__PURE__ */ React__default["default"].createElement(
+    ), errorMessage ? /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$5.resendOtpContainer }, /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         text: errorMessage,
@@ -4178,7 +4189,17 @@ const OTPInput = React__default["default"].forwardRef(
           color: theme$1.ERROR
         }
       }
-    ) : /* @__PURE__ */ React__default["default"].createElement(reactNative.View, null)));
+    )) : null, errorMessageMaxReachCount ? /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$5.resendOtpContainer }, /* @__PURE__ */ React__default["default"].createElement(
+      CustomTypography,
+      {
+        text: errorMessageMaxReachCount,
+        variant: FontStyle.L2_REGULAR,
+        style: {
+          alignSelf: "flex-start",
+          color: theme$1.ERROR
+        }
+      }
+    )) : null);
   }
 );
 var index$4 = withThemeProvider(OTPInput);