dhre-ui-kit 0.0.252 → 0.0.254
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 +15 -17
- package/lib/index.js.map +1 -1
- package/lib/index.mjs +15 -17
- 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,39 +4076,41 @@ 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
|
-
|
|
4092
|
-
|
|
4093
|
-
|
|
4087
|
+
React.useEffect(() => {
|
|
4088
|
+
React__default["default"].useImperativeHandle(ref, () => ({
|
|
4089
|
+
reset
|
|
4090
|
+
}));
|
|
4091
|
+
}, []);
|
|
4094
4092
|
const handleChange = (index, value) => {
|
|
4095
4093
|
const regex = /^\d+$/;
|
|
4096
4094
|
if (value.length === 1 && regex.test(value) && index >= 0 && index < length) {
|
|
4097
4095
|
const newOTP = `${otp}${value}`;
|
|
4098
4096
|
setOTP(newOTP);
|
|
4099
|
-
|
|
4097
|
+
otpRefs.current[index + 1]?.focus();
|
|
4100
4098
|
} else if (value.length === 0 && index > 0) {
|
|
4101
4099
|
const newOTP = otp.slice(0, -1);
|
|
4102
4100
|
setOTP(newOTP);
|
|
4103
|
-
|
|
4101
|
+
otpRefs.current[index - 1]?.focus();
|
|
4104
4102
|
} else if (value?.length === length) {
|
|
4105
4103
|
setOTP(value);
|
|
4106
|
-
|
|
4104
|
+
otpRefs.current[length - 1]?.focus();
|
|
4107
4105
|
} else {
|
|
4108
4106
|
const newOTP = otp.slice(0, -1);
|
|
4109
4107
|
setOTP(newOTP);
|
|
4110
|
-
|
|
4108
|
+
otpRefs.current[index]?.focus();
|
|
4111
4109
|
}
|
|
4112
4110
|
};
|
|
4113
4111
|
const handleKeyPress = (e, index) => {
|
|
4114
4112
|
if (e.nativeEvent.key === "Backspace" && index > 0) {
|
|
4115
|
-
|
|
4113
|
+
otpRefs.current[index - 1]?.focus();
|
|
4116
4114
|
}
|
|
4117
4115
|
};
|
|
4118
4116
|
React.useEffect(() => {
|
|
@@ -4148,7 +4146,7 @@ const OTPInput = React__default["default"].forwardRef(
|
|
|
4148
4146
|
value: otp[index] ? "\u25CF" : "",
|
|
4149
4147
|
placeholder: "",
|
|
4150
4148
|
keyboardType: "numeric",
|
|
4151
|
-
ref: (el) =>
|
|
4149
|
+
ref: (el) => otpRefs.current[index] = el,
|
|
4152
4150
|
returnKeyType: otp.length === length ? "done" : "next",
|
|
4153
4151
|
importantForAutofill: "yes",
|
|
4154
4152
|
textContentType: "oneTimeCode",
|