dhre-ui-kit 0.0.252 → 0.0.253
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/index.js +10 -14
- package/lib/index.js.map +1 -1
- package/lib/index.mjs +10 -14
- package/lib/index.mjs.map +1 -1
- package/package.json +1 -1
package/lib/index.mjs
CHANGED
|
@@ -3995,7 +3995,7 @@ const OTPInput = React.forwardRef(
|
|
|
3995
3995
|
}
|
|
3996
3996
|
return () => clearInterval(timer);
|
|
3997
3997
|
}, [timeLeft, isResendOtpEnable]);
|
|
3998
|
-
const
|
|
3998
|
+
const otpRefs = useRef(Array(length).fill(null));
|
|
3999
3999
|
useEffect(() => {
|
|
4000
4000
|
enableResendOtp();
|
|
4001
4001
|
}, []);
|
|
@@ -4014,11 +4014,7 @@ const OTPInput = React.forwardRef(
|
|
|
4014
4014
|
}
|
|
4015
4015
|
};
|
|
4016
4016
|
const disableResendButton = () => {
|
|
4017
|
-
|
|
4018
|
-
return true;
|
|
4019
|
-
} else {
|
|
4020
|
-
return false;
|
|
4021
|
-
}
|
|
4017
|
+
return disabled || resendOTPCount >= maxResendCount;
|
|
4022
4018
|
};
|
|
4023
4019
|
const enableResendOtp = () => {
|
|
4024
4020
|
setTimeout(() => {
|
|
@@ -4044,13 +4040,13 @@ const OTPInput = React.forwardRef(
|
|
|
4044
4040
|
const otp2 = otpRegex.exec(message)?.[1];
|
|
4045
4041
|
setOTP(otp2 ?? "");
|
|
4046
4042
|
if (otp2) {
|
|
4047
|
-
|
|
4043
|
+
otpRefs.current[otp2?.length - 1]?.focus();
|
|
4048
4044
|
}
|
|
4049
4045
|
});
|
|
4050
4046
|
};
|
|
4051
4047
|
const reset = () => {
|
|
4052
4048
|
setOTP("");
|
|
4053
|
-
|
|
4049
|
+
otpRefs.current[0]?.focus();
|
|
4054
4050
|
};
|
|
4055
4051
|
React.useImperativeHandle(ref, () => ({
|
|
4056
4052
|
reset
|
|
@@ -4060,23 +4056,23 @@ const OTPInput = React.forwardRef(
|
|
|
4060
4056
|
if (value.length === 1 && regex.test(value) && index >= 0 && index < length) {
|
|
4061
4057
|
const newOTP = `${otp}${value}`;
|
|
4062
4058
|
setOTP(newOTP);
|
|
4063
|
-
|
|
4059
|
+
otpRefs.current[index + 1]?.focus();
|
|
4064
4060
|
} else if (value.length === 0 && index > 0) {
|
|
4065
4061
|
const newOTP = otp.slice(0, -1);
|
|
4066
4062
|
setOTP(newOTP);
|
|
4067
|
-
|
|
4063
|
+
otpRefs.current[index - 1]?.focus();
|
|
4068
4064
|
} else if (value?.length === length) {
|
|
4069
4065
|
setOTP(value);
|
|
4070
|
-
|
|
4066
|
+
otpRefs.current[length - 1]?.focus();
|
|
4071
4067
|
} else {
|
|
4072
4068
|
const newOTP = otp.slice(0, -1);
|
|
4073
4069
|
setOTP(newOTP);
|
|
4074
|
-
|
|
4070
|
+
otpRefs.current[index]?.focus();
|
|
4075
4071
|
}
|
|
4076
4072
|
};
|
|
4077
4073
|
const handleKeyPress = (e, index) => {
|
|
4078
4074
|
if (e.nativeEvent.key === "Backspace" && index > 0) {
|
|
4079
|
-
|
|
4075
|
+
otpRefs.current[index - 1]?.focus();
|
|
4080
4076
|
}
|
|
4081
4077
|
};
|
|
4082
4078
|
useEffect(() => {
|
|
@@ -4112,7 +4108,7 @@ const OTPInput = React.forwardRef(
|
|
|
4112
4108
|
value: otp[index] ? "\u25CF" : "",
|
|
4113
4109
|
placeholder: "",
|
|
4114
4110
|
keyboardType: "numeric",
|
|
4115
|
-
ref: (el) =>
|
|
4111
|
+
ref: (el) => otpRefs.current[index] = el,
|
|
4116
4112
|
returnKeyType: otp.length === length ? "done" : "next",
|
|
4117
4113
|
importantForAutofill: "yes",
|
|
4118
4114
|
textContentType: "oneTimeCode",
|