dhre-ui-kit 0.0.251 → 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.d.ts +1 -0
- package/lib/index.js +20 -27
- package/lib/index.js.map +1 -1
- package/lib/index.mjs +20 -27
- package/lib/index.mjs.map +1 -1
- package/package.json +1 -1
package/lib/index.mjs
CHANGED
|
@@ -3364,7 +3364,8 @@ const CommonTextInput = (props) => {
|
|
|
3364
3364
|
multiline = false,
|
|
3365
3365
|
// Default multiline to false
|
|
3366
3366
|
rightIcon,
|
|
3367
|
-
onRightIconPress
|
|
3367
|
+
onRightIconPress,
|
|
3368
|
+
onlyErrorBorderLabel
|
|
3368
3369
|
} = props;
|
|
3369
3370
|
return /* @__PURE__ */ React.createElement(Pressable, { onPress: handlePress, style: styles$9.container }, /* @__PURE__ */ React.createElement(
|
|
3370
3371
|
TextInput$1,
|
|
@@ -3376,7 +3377,7 @@ const CommonTextInput = (props) => {
|
|
|
3376
3377
|
autoCorrect: false,
|
|
3377
3378
|
outlineStyle: {
|
|
3378
3379
|
...styles$9.outlineStyle,
|
|
3379
|
-
borderColor: errorMessage?.length ? DHRE_DEFAULT.DH_SEMENTIC_ERROR : value?.length ? activeBorderColor : inactiveBorderColor
|
|
3380
|
+
borderColor: errorMessage?.length || onlyErrorBorderLabel ? DHRE_DEFAULT.DH_SEMENTIC_ERROR : value?.length ? activeBorderColor : inactiveBorderColor
|
|
3380
3381
|
},
|
|
3381
3382
|
label,
|
|
3382
3383
|
value,
|
|
@@ -3386,12 +3387,12 @@ const CommonTextInput = (props) => {
|
|
|
3386
3387
|
theme: {
|
|
3387
3388
|
colors: {
|
|
3388
3389
|
onSurfaceVariant: value?.length ? activeBorderColor : inactiveBorderColor,
|
|
3389
|
-
error: errorMessage?.length ? DHRE_DEFAULT.DH_SEMENTIC_ERROR : DHRE_COLORS_TEXT.DH_BLACK,
|
|
3390
|
+
error: errorMessage?.length || onlyErrorBorderLabel ? DHRE_DEFAULT.DH_SEMENTIC_ERROR : DHRE_COLORS_TEXT.DH_BLACK,
|
|
3390
3391
|
primary: labelColor ? errorMessage?.length ? DHRE_DEFAULT.DH_SEMENTIC_ERROR : labelColor : DHRE_COLORS_TEXT.DH_BLACK
|
|
3391
3392
|
}
|
|
3392
3393
|
},
|
|
3393
3394
|
style: [
|
|
3394
|
-
errorMessage ? styles$9.errorInput : styles$9.input,
|
|
3395
|
+
errorMessage || onlyErrorBorderLabel ? styles$9.errorInput : styles$9.input,
|
|
3395
3396
|
inputStyle,
|
|
3396
3397
|
multiline && styles$9.multilineInput
|
|
3397
3398
|
// Apply multiline style if true
|
|
@@ -3401,7 +3402,7 @@ const CommonTextInput = (props) => {
|
|
|
3401
3402
|
placeholder: placeholderText,
|
|
3402
3403
|
editable,
|
|
3403
3404
|
pointerEvents,
|
|
3404
|
-
error: errorMessage?.length ? true : false,
|
|
3405
|
+
error: errorMessage?.length || onlyErrorBorderLabel ? true : false,
|
|
3405
3406
|
multiline,
|
|
3406
3407
|
numberOfLines: multiline ? 4 : 1,
|
|
3407
3408
|
right: rightIcon ? /* @__PURE__ */ React.createElement(
|
|
@@ -3994,8 +3995,7 @@ const OTPInput = React.forwardRef(
|
|
|
3994
3995
|
}
|
|
3995
3996
|
return () => clearInterval(timer);
|
|
3996
3997
|
}, [timeLeft, isResendOtpEnable]);
|
|
3997
|
-
const
|
|
3998
|
-
refs.current = Array(length).fill(0).map((_, index) => refs.current[index] || null);
|
|
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,42 +4040,39 @@ 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
|
};
|
|
4047
|
+
const reset = () => {
|
|
4048
|
+
setOTP("");
|
|
4049
|
+
otpRefs.current[0]?.focus();
|
|
4050
|
+
};
|
|
4051
4051
|
React.useImperativeHandle(ref, () => ({
|
|
4052
|
-
reset
|
|
4053
|
-
setOTP("");
|
|
4054
|
-
refs.current[0]?.focus();
|
|
4055
|
-
},
|
|
4056
|
-
set(newOtp) {
|
|
4057
|
-
setOTP(newOtp);
|
|
4058
|
-
refs.current[newOtp?.length - 1]?.focus();
|
|
4059
|
-
}
|
|
4052
|
+
reset
|
|
4060
4053
|
}));
|
|
4061
4054
|
const handleChange = (index, value) => {
|
|
4062
4055
|
const regex = /^\d+$/;
|
|
4063
4056
|
if (value.length === 1 && regex.test(value) && index >= 0 && index < length) {
|
|
4064
4057
|
const newOTP = `${otp}${value}`;
|
|
4065
4058
|
setOTP(newOTP);
|
|
4066
|
-
|
|
4059
|
+
otpRefs.current[index + 1]?.focus();
|
|
4067
4060
|
} else if (value.length === 0 && index > 0) {
|
|
4068
4061
|
const newOTP = otp.slice(0, -1);
|
|
4069
4062
|
setOTP(newOTP);
|
|
4070
|
-
|
|
4063
|
+
otpRefs.current[index - 1]?.focus();
|
|
4071
4064
|
} else if (value?.length === length) {
|
|
4072
4065
|
setOTP(value);
|
|
4073
|
-
|
|
4066
|
+
otpRefs.current[length - 1]?.focus();
|
|
4074
4067
|
} else {
|
|
4075
4068
|
const newOTP = otp.slice(0, -1);
|
|
4076
4069
|
setOTP(newOTP);
|
|
4077
|
-
|
|
4070
|
+
otpRefs.current[index]?.focus();
|
|
4078
4071
|
}
|
|
4079
4072
|
};
|
|
4080
4073
|
const handleKeyPress = (e, index) => {
|
|
4081
4074
|
if (e.nativeEvent.key === "Backspace" && index > 0) {
|
|
4082
|
-
|
|
4075
|
+
otpRefs.current[index - 1]?.focus();
|
|
4083
4076
|
}
|
|
4084
4077
|
};
|
|
4085
4078
|
useEffect(() => {
|
|
@@ -4115,7 +4108,7 @@ const OTPInput = React.forwardRef(
|
|
|
4115
4108
|
value: otp[index] ? "\u25CF" : "",
|
|
4116
4109
|
placeholder: "",
|
|
4117
4110
|
keyboardType: "numeric",
|
|
4118
|
-
ref: (el) =>
|
|
4111
|
+
ref: (el) => otpRefs.current[index] = el,
|
|
4119
4112
|
returnKeyType: otp.length === length ? "done" : "next",
|
|
4120
4113
|
importantForAutofill: "yes",
|
|
4121
4114
|
textContentType: "oneTimeCode",
|