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