dhre-ui-kit 0.0.258 → 0.0.260

package/lib/index.mjs

@@ -3950,214 +3950,229 @@ const styles$5 = StyleSheet.create({
   }
 });
 
-const OTPInputComponent = ({
-  length = 4,
-  onComplete,
-  resendOTP,
-  errorMessage,
-  testId = "",
-  otpContainerStyle,
-  otpHeaderTextStyle,
-  textInputStyle,
-  resendTextStyle,
-  resendOtpColor,
-  label = "OTP",
-  resendText = "Resend OTP",
-  mode,
-  disabled,
-  maxResendCount = 2,
-  timerToResend = 6e4,
-  timerIcon
-}, ref) => {
-  const [otp, setOTP] = useState("");
-  const [isResendOtpEnable, setIsResendOtpEnable] = useState(false);
-  const [activeInput, setActiveInput] = useState(null);
-  const [resendOTPCount, setResendOTPCount] = useState(0);
-  const [errorMessageMaxReachCount, setErrorMessageMaxReachCount] = useState("");
-  const filteredTheme = mode ? theme[mode] : theme;
-  const { theme: theme$1 } = useTheme() || { theme: filteredTheme };
-  const [timeLeft, setTimeLeft] = useState(60);
-  useEffect(() => {
-    let timer;
-    if (!isResendOtpEnable && timeLeft > 0) {
-      timer = setInterval(() => {
-        setTimeLeft((prevTime) => prevTime - 1);
-      }, 1e3);
-    } else if (timeLeft === 0) {
-      clearInterval(timer);
-    }
-    return () => clearInterval(timer);
-  }, [timeLeft, isResendOtpEnable]);
-  const otpRefs = useRef(Array(length).fill(null));
-  useEffect(() => {
-    enableResendOtp();
-  }, []);
-  const onClickResendOTP = () => {
-    if (resendOTPCount > maxResendCount - 1) {
-      setErrorMessageMaxReachCount(
-        "You have exceeded the maximum number of attempts."
-      );
-    }
-    if (resendOTPCount < maxResendCount) {
-      setIsResendOtpEnable(false);
-      setResendOTPCount(resendOTPCount + 1);
+const OTPInput = React.forwardRef(
+  ({
+    length = 4,
+    onComplete,
+    resendOTP,
+    errorMessage,
+    testId = "",
+    otpContainerStyle,
+    otpHeaderTextStyle,
+    textInputStyle,
+    resendTextStyle,
+    resendOtpColor,
+    label = "OTP",
+    resendText = "Resend OTP",
+    mode,
+    disabled,
+    maxResendCount = 2,
+    timerToResend = 6e4,
+    timerIcon
+  }, ref) => {
+    const [otp, setOTP] = useState("");
+    const [isResendOtpEnable, setIsResendOtpEnable] = useState(false);
+    const [activeInput, setActiveInput] = useState(null);
+    const [resendOTPCount, setResendOTPCount] = useState(0);
+    const [errorMessageMaxReachCount, setErrorMessageMaxReachCount] = useState("");
+    const filteredTheme = Object?.keys(theme)?.reduce(
+      (acc, key) => {
+        acc[key] = theme[key][mode];
+        return acc;
+      },
+      {}
+    );
+    const { theme: theme$1 } = mode ? { theme: filteredTheme } : useTheme();
+    const [timeLeft, setTimeLeft] = useState(60);
+    useEffect(() => {
+      let timer;
+      if (!isResendOtpEnable && timeLeft > 0) {
+        timer = setInterval(() => {
+          setTimeLeft((prevTime) => prevTime - 1);
+        }, 1e3);
+      } else if (timeLeft === 0) {
+        clearInterval(timer);
+      }
+      return () => clearInterval(timer);
+    }, [timeLeft, isResendOtpEnable]);
+    const refs = useRef([]);
+    refs.current = Array(length).fill(0).map((_, index) => refs.current[index] || null);
+    useEffect(() => {
       enableResendOtp();
-      resendOTP?.();
-      setOTP("");
-    }
-  };
-  const disableResendButton = () => {
-    return disabled || resendOTPCount >= maxResendCount;
-  };
-  const enableResendOtp = () => {
-    setTimeout(() => {
-      setIsResendOtpEnable(true);
-      setTimeLeft(timerToResend / 1e3);
-    }, timerToResend);
-  };
-  useEffect(() => {
-    if (Platform.OS === "android") {
-      onStartListeningOtp();
-    }
-    return () => {
+    }, []);
+    const onClickResendOTP = () => {
+      if (resendOTPCount > maxResendCount - 1) {
+        setErrorMessageMaxReachCount(
+          "You have exceeded the maximum number of attempts."
+        );
+      }
+      if (resendOTPCount < maxResendCount) {
+        setIsResendOtpEnable(false);
+        setResendOTPCount(resendOTPCount + 1);
+        enableResendOtp();
+        resendOTP?.();
+        setOTP("");
+      }
+    };
+    const disableResendButton = () => {
+      if (disabled === true && resendOTPCount >= maxResendCount) {
+        return true;
+      } else {
+        return false;
+      }
+    };
+    const enableResendOtp = () => {
+      setTimeout(() => {
+        setIsResendOtpEnable(true);
+        setTimeLeft(timerToResend / 1e3);
+      }, timerToResend);
+    };
+    useEffect(() => {
       if (Platform.OS === "android") {
-        OTPVerify.removeListener();
-        removeListener();
+        onStartListeningOtp();
       }
+      return () => {
+        if (Platform.OS === "android") {
+          OTPVerify.removeListener();
+          removeListener();
+        }
+      };
+    }, []);
+    const onStartListeningOtp = async () => {
+      await OTPVerify.getOtp();
+      startOtpListener((message) => {
+        const otpRegex = new RegExp(`(\\d{${length}})`, "g");
+        const otp2 = otpRegex.exec(message)?.[1];
+        setOTP(otp2 ?? "");
+        if (otp2) {
+          refs.current[otp2?.length - 1]?.focus();
+        }
+      });
     };
-  }, []);
-  const onStartListeningOtp = async () => {
-    await OTPVerify.getOtp();
-    startOtpListener((message) => {
-      const otpRegex = new RegExp(`(\\d{${length}})`, "g");
-      const otp2 = otpRegex.exec(message)?.[1];
-      setOTP(otp2 ?? "");
-      if (otp2) {
-        otpRefs.current[otp2?.length - 1]?.focus();
+    React.useImperativeHandle(ref, () => ({
+      reset() {
+        setOTP("");
+        refs.current[0]?.focus();
+      },
+      set(newOtp) {
+        setOTP(newOtp);
+        refs.current[newOtp?.length - 1]?.focus();
       }
-    });
-  };
-  const reset = () => {
-    setOTP("");
-    otpRefs.current[0]?.focus();
-  };
-  React.useImperativeHandle(ref, () => ({
-    reset
-  }));
-  const handleChange = (index, value) => {
-    const regex = /^\d+$/;
-    if (value.length === 1 && regex.test(value) && index >= 0 && index < length) {
-      const newOTP = `${otp}${value}`;
-      setOTP(newOTP);
-      otpRefs.current[index + 1]?.focus();
-    } else if (value.length === 0 && index > 0) {
-      const newOTP = otp.slice(0, -1);
-      setOTP(newOTP);
-      otpRefs.current[index - 1]?.focus();
-    } else if (value?.length === length) {
-      setOTP(value);
-      otpRefs.current[length - 1]?.focus();
-    } else {
-      const newOTP = otp.slice(0, -1);
-      setOTP(newOTP);
-      otpRefs.current[index]?.focus();
-    }
-  };
-  const handleKeyPress = (e, index) => {
-    if (e.nativeEvent.key === "Backspace" && index > 0) {
-      otpRefs.current[index - 1]?.focus();
-    }
-  };
-  useEffect(() => {
-    if (otp.length === length) {
-      onComplete?.(otp);
-    }
-  }, [otp]);
-  return /* @__PURE__ */ React.createElement(View, { style: { ...otpContainerStyle }, "data-testid": testId }, /* @__PURE__ */ React.createElement(
-    CustomTypography,
-    {
-      text: label,
-      variant: FontStyle.B4_REGULAR,
-      style: {
-        color: otp?.length ? theme$1.CONTENT_PRIMARY : theme$1.CONTENT_SECONDRY,
-        textAlign: "left",
-        ...otpHeaderTextStyle
+    }));
+    const handleChange = (index, value) => {
+      const regex = /^\d+$/;
+      if (value.length === 1 && regex.test(value) && index >= 0 && index < length) {
+        const newOTP = `${otp}${value}`;
+        setOTP(newOTP);
+        refs.current[index + 1]?.focus();
+      } else if (value.length === 0 && index > 0) {
+        const newOTP = otp.slice(0, -1);
+        setOTP(newOTP);
+        refs.current[index - 1]?.focus();
+      } else if (value?.length === length) {
+        setOTP(value);
+        refs.current[length - 1]?.focus();
+      } else {
+        const newOTP = otp.slice(0, -1);
+        setOTP(newOTP);
+        refs.current[index]?.focus();
       }
-    }
-  ), /* @__PURE__ */ React.createElement(View, { style: { ...styles$5.textInputContainer } }, Array.from({ length }).map((_, index) => /* @__PURE__ */ React.createElement(
-    TextInput,
-    {
-      key: index?.toString(),
-      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,
-        ...textInputStyle
+    };
+    const handleKeyPress = (e, index) => {
+      if (e.nativeEvent.key === "Backspace" && index > 0) {
+        refs.current[index - 1]?.focus();
+      }
+    };
+    useEffect(() => {
+      if (otp.length === length) {
+        onComplete?.(otp);
+      }
+    }, [otp]);
+    return /* @__PURE__ */ React.createElement(ThemeProvider, null, /* @__PURE__ */ React.createElement(View, { style: { ...otpContainerStyle }, "data-testid": testId }, /* @__PURE__ */ React.createElement(
+      CustomTypography,
+      {
+        text: label,
+        variant: FontStyle.B4_REGULAR,
+        style: {
+          color: otp?.length ? theme$1.CONTENT_PRIMARY : theme$1.CONTENT_SECONDRY,
+          textAlign: "left",
+          ...otpHeaderTextStyle
+        }
+      }
+    ), /* @__PURE__ */ React.createElement(View, { style: { ...styles$5.textInputContainer } }, Array.from({ length }).map((_, index) => /* @__PURE__ */ React.createElement(
+      TextInput,
+      {
+        key: index?.toString(),
+        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,
+          ...textInputStyle
+        },
+        onFocus: () => setActiveInput(index),
+        onBlur: () => setActiveInput(null),
+        onKeyPress: (e) => handleKeyPress(e, index),
+        onChangeText: (text) => handleChange(index, text),
+        value: otp[index] ? "\u25CF" : "",
+        placeholder: "",
+        keyboardType: "numeric",
+        ref: (el) => refs.current[index] = el,
+        returnKeyType: otp.length === length ? "done" : "next",
+        importantForAutofill: "yes",
+        textContentType: "oneTimeCode",
+        autoComplete: "sms-otp",
+        selectionColor: theme$1.CONTENT_PRIMARY
+      }
+    ))), !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: `00:${timeLeft} secs`,
+        variant: FontStyle.L1_REGULAR,
+        style: { color: theme$1.INFO }
+      }
+    )), /* @__PURE__ */ React.createElement(
+      Pressable,
+      {
+        onPress: onClickResendOTP,
+        style: styles$5.resendOTPStyle,
+        disabled: disableResendButton() || !isResendOtpEnable
       },
-      onFocus: () => setActiveInput(index),
-      onBlur: () => setActiveInput(null),
-      onKeyPress: (e) => handleKeyPress(e, index),
-      onChangeText: (text) => handleChange(index, text),
-      value: otp[index] ? "\u25CF" : "",
-      placeholder: "",
-      keyboardType: "numeric",
-      ref: (el) => otpRefs.current[index] = el,
-      returnKeyType: otp.length === length ? "done" : "next",
-      importantForAutofill: "yes",
-      textContentType: "oneTimeCode",
-      autoComplete: "sms-otp",
-      selectionColor: theme$1.CONTENT_PRIMARY
-    }
-  ))), !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: `00:${timeLeft} secs`,
-      variant: FontStyle.L1_REGULAR,
-      style: { color: theme$1.INFO }
-    }
-  )), /* @__PURE__ */ React.createElement(
-    Pressable,
-    {
-      onPress: onClickResendOTP,
-      style: styles$5.resendOTPStyle,
-      disabled: disableResendButton() || !isResendOtpEnable
-    },
-    /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement(
+        CustomTypography,
+        {
+          text: resendText,
+          variant: FontStyle.L2_REGULAR,
+          style: {
+            textDecorationLine: "underline",
+            color: isResendOtpEnable ? resendOtpColor ?? theme$1.CONTENT_PRIMARY : theme$1.CONTENT_DISABLE,
+            ...resendTextStyle
+          }
+        }
+      )
+    )), errorMessage ? /* @__PURE__ */ React.createElement(View, { style: styles$5.resendOtpContainer }, /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
-        text: resendText,
+        text: errorMessage,
         variant: FontStyle.L2_REGULAR,
         style: {
-          textDecorationLine: "underline",
-          color: isResendOtpEnable ? resendOtpColor ?? theme$1.CONTENT_PRIMARY : theme$1.CONTENT_DISABLE,
-          ...resendTextStyle
+          alignSelf: "flex-start",
+          color: theme$1.ERROR
         }
       }
-    )
-  )), errorMessage ? /* @__PURE__ */ React.createElement(View, { style: styles$5.resendOtpContainer }, /* @__PURE__ */ React.createElement(
-    CustomTypography,
-    {
-      text: errorMessage,
-      variant: FontStyle.L2_REGULAR,
-      style: {
-        alignSelf: "flex-start",
-        color: theme$1.ERROR
-      }
-    }
-  )) : null, errorMessageMaxReachCount ? /* @__PURE__ */ React.createElement(View, { style: styles$5.resendOtpContainer }, /* @__PURE__ */ React.createElement(
-    CustomTypography,
-    {
-      text: errorMessageMaxReachCount,
-      variant: FontStyle.L2_REGULAR,
-      style: {
-        alignSelf: "flex-start",
-        color: theme$1.ERROR
+    )) : null, errorMessageMaxReachCount ? /* @__PURE__ */ React.createElement(View, { style: styles$5.resendOtpContainer }, /* @__PURE__ */ React.createElement(
+      CustomTypography,
+      {
+        text: errorMessageMaxReachCount,
+        variant: FontStyle.L2_REGULAR,
+        style: {
+          alignSelf: "flex-start",
+          color: theme$1.ERROR
+        }
       }
-    }
-  )) : null);
-};
-const OTPInput = withThemeProvider(OTPInputComponent);
-var index$4 = React.forwardRef(OTPInput);
+    )) : null));
+  }
+);
+OTPInput.displayName = "OTPInput";
 
 const styles$4 = StyleSheet.create({
   stepperContainer: {
@@ -4897,5 +4912,5 @@ const RadioButtonGroup = ({ data, onSelect, containerStyle, labelStyle, optionCo
   )));
 };
 
-export { Accordion$1 as Accordion, index$1 as AppointmentCard, Badge$1 as Badge, BottomDrawer, CustomButton$1 as Button, Cards, category as Category, Checkbox as CheckBox, ContactModel, CountryDropDown as CountryPicker, CustomDocumentPicker$1 as CustomDocumentPicker, CustomDropdown$1 as CustomDropdown, CustomHeader$1 as CustomHeader, CustomIcon, CustomLoader$1 as CustomLoader, CustomProgressBar, CustomSearchBar, index$2 as CustomSlideButton, CustomSwitchBtn, CustomText$1 as CustomText, CustomTextInput, CustomTooltip, CustomTypography, DHRE_COLORS_ALERT, DHRE_COLORS_BG, DHRE_COLORS_PRIMARY, DHRE_COLORS_SECONDARY, DHRE_COLORS_TEXT, DHRE_DEFAULT, DateRangePicker$1 as DateRangePicker, CustomDropdown as DropDown, FONT_STYLES, feedback as FeedbackForm, FileUpload, FontStyle, Line, NotificationBandge, index$4 as OTPInput, OurOffices as OurOfficesButton, PdfView, PopUp, index as PropertyDetails, RadioButtonGroup, ShapeType, TagSingleSelection as SingleSelectionTags, Star as StarRating, index$3 as Stepper, SwipableList$1 as SwipableList, Tabs$1 as Tabs, Tags, TextDirectType, CommonTextInput as TextInput, Theme, Toast, CustomSwitch as ToggleButton, ToggleButtonType, ToggleTextType, Topic$1 as Topic, copyToClipboard, theme as default, height, horizontalScale, moderateScale, toastService, verticalScale, width };
+export { Accordion$1 as Accordion, index$1 as AppointmentCard, Badge$1 as Badge, BottomDrawer, CustomButton$1 as Button, Cards, category as Category, Checkbox as CheckBox, ContactModel, CountryDropDown as CountryPicker, CustomDocumentPicker$1 as CustomDocumentPicker, CustomDropdown$1 as CustomDropdown, CustomHeader$1 as CustomHeader, CustomIcon, CustomLoader$1 as CustomLoader, CustomProgressBar, CustomSearchBar, index$2 as CustomSlideButton, CustomSwitchBtn, CustomText$1 as CustomText, CustomTextInput, CustomTooltip, CustomTypography, DHRE_COLORS_ALERT, DHRE_COLORS_BG, DHRE_COLORS_PRIMARY, DHRE_COLORS_SECONDARY, DHRE_COLORS_TEXT, DHRE_DEFAULT, DateRangePicker$1 as DateRangePicker, CustomDropdown as DropDown, FONT_STYLES, feedback as FeedbackForm, FileUpload, FontStyle, Line, NotificationBandge, OTPInput, OurOffices as OurOfficesButton, PdfView, PopUp, index as PropertyDetails, RadioButtonGroup, ShapeType, TagSingleSelection as SingleSelectionTags, Star as StarRating, index$3 as Stepper, SwipableList$1 as SwipableList, Tabs$1 as Tabs, Tags, TextDirectType, CommonTextInput as TextInput, Theme, Toast, CustomSwitch as ToggleButton, ToggleButtonType, ToggleTextType, Topic$1 as Topic, copyToClipboard, theme as default, height, horizontalScale, moderateScale, toastService, verticalScale, width };
 //# sourceMappingURL=index.mjs.map