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.js
CHANGED
|
@@ -4031,7 +4031,7 @@ const OTPInput = React__default["default"].forwardRef(
|
|
|
4031
4031
|
}
|
|
4032
4032
|
return () => clearInterval(timer);
|
|
4033
4033
|
}, [timeLeft, isResendOtpEnable]);
|
|
4034
|
-
const
|
|
4034
|
+
const otpRefs = React.useRef(Array(length).fill(null));
|
|
4035
4035
|
React.useEffect(() => {
|
|
4036
4036
|
enableResendOtp();
|
|
4037
4037
|
}, []);
|
|
@@ -4050,11 +4050,7 @@ const OTPInput = React__default["default"].forwardRef(
|
|
|
4050
4050
|
}
|
|
4051
4051
|
};
|
|
4052
4052
|
const disableResendButton = () => {
|
|
4053
|
-
|
|
4054
|
-
return true;
|
|
4055
|
-
} else {
|
|
4056
|
-
return false;
|
|
4057
|
-
}
|
|
4053
|
+
return disabled || resendOTPCount >= maxResendCount;
|
|
4058
4054
|
};
|
|
4059
4055
|
const enableResendOtp = () => {
|
|
4060
4056
|
setTimeout(() => {
|
|
@@ -4080,13 +4076,13 @@ const OTPInput = React__default["default"].forwardRef(
|
|
|
4080
4076
|
const otp2 = otpRegex.exec(message)?.[1];
|
|
4081
4077
|
setOTP(otp2 ?? "");
|
|
4082
4078
|
if (otp2) {
|
|
4083
|
-
|
|
4079
|
+
otpRefs.current[otp2?.length - 1]?.focus();
|
|
4084
4080
|
}
|
|
4085
4081
|
});
|
|
4086
4082
|
};
|
|
4087
4083
|
const reset = () => {
|
|
4088
4084
|
setOTP("");
|
|
4089
|
-
|
|
4085
|
+
otpRefs.current[0]?.focus();
|
|
4090
4086
|
};
|
|
4091
4087
|
React__default["default"].useImperativeHandle(ref, () => ({
|
|
4092
4088
|
reset
|
|
@@ -4096,23 +4092,23 @@ const OTPInput = React__default["default"].forwardRef(
|
|
|
4096
4092
|
if (value.length === 1 && regex.test(value) && index >= 0 && index < length) {
|
|
4097
4093
|
const newOTP = `${otp}${value}`;
|
|
4098
4094
|
setOTP(newOTP);
|
|
4099
|
-
|
|
4095
|
+
otpRefs.current[index + 1]?.focus();
|
|
4100
4096
|
} else if (value.length === 0 && index > 0) {
|
|
4101
4097
|
const newOTP = otp.slice(0, -1);
|
|
4102
4098
|
setOTP(newOTP);
|
|
4103
|
-
|
|
4099
|
+
otpRefs.current[index - 1]?.focus();
|
|
4104
4100
|
} else if (value?.length === length) {
|
|
4105
4101
|
setOTP(value);
|
|
4106
|
-
|
|
4102
|
+
otpRefs.current[length - 1]?.focus();
|
|
4107
4103
|
} else {
|
|
4108
4104
|
const newOTP = otp.slice(0, -1);
|
|
4109
4105
|
setOTP(newOTP);
|
|
4110
|
-
|
|
4106
|
+
otpRefs.current[index]?.focus();
|
|
4111
4107
|
}
|
|
4112
4108
|
};
|
|
4113
4109
|
const handleKeyPress = (e, index) => {
|
|
4114
4110
|
if (e.nativeEvent.key === "Backspace" && index > 0) {
|
|
4115
|
-
|
|
4111
|
+
otpRefs.current[index - 1]?.focus();
|
|
4116
4112
|
}
|
|
4117
4113
|
};
|
|
4118
4114
|
React.useEffect(() => {
|
|
@@ -4148,7 +4144,7 @@ const OTPInput = React__default["default"].forwardRef(
|
|
|
4148
4144
|
value: otp[index] ? "\u25CF" : "",
|
|
4149
4145
|
placeholder: "",
|
|
4150
4146
|
keyboardType: "numeric",
|
|
4151
|
-
ref: (el) =>
|
|
4147
|
+
ref: (el) => otpRefs.current[index] = el,
|
|
4152
4148
|
returnKeyType: otp.length === length ? "done" : "next",
|
|
4153
4149
|
importantForAutofill: "yes",
|
|
4154
4150
|
textContentType: "oneTimeCode",
|