dhre-component-lib 0.7.9 → 0.8.1
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/dist/components/OtpInput/OtpInput.d.ts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.esm.js +11 -10
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +11 -10
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -199,7 +199,7 @@ interface OTPInputProps {
|
|
|
199
199
|
length?: number;
|
|
200
200
|
onChange: (otp: string) => void;
|
|
201
201
|
autoFocus?: boolean;
|
|
202
|
-
onResend: () => void;
|
|
202
|
+
onResend: (_: () => void) => void;
|
|
203
203
|
resendDelay?: number;
|
|
204
204
|
error?: boolean;
|
|
205
205
|
errorText?: React.ReactNode;
|
package/dist/index.esm.js
CHANGED
|
@@ -21594,7 +21594,7 @@ const MapComponent = ({ containerClassName = "map-container", zoom = 18, mapOpti
|
|
|
21594
21594
|
}
|
|
21595
21595
|
};
|
|
21596
21596
|
|
|
21597
|
-
var css$e = ".otpMainContainer {\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin: 10px;\n width: 343px;\n}\n\n.otpInputDiv {\n flex-direction: row;\n gap: 12px;\n display: flex;\n}\n\n.otpInput {\n width: calc(25% - 9px);\n height: 48px;\n text-align: center;\n font-size: 18px;\n font-weight: 400;\n border-radius: 8px;\n}\n@media (max-width: 600px) {\n .otpInput {\n height: 40px;\n }\n}\n\n.resendContainer {\n display: flex;\n flex-direction: row;\n margin-top: 10px;\n justify-content: space-between;\n}\n\n.errorText {\n color: #EB0542;\n font-weight: 400;\n font-size: 14px;\n}\n\n.timerText {\n color: #0569C2;\n font-weight: 400;\n font-size: 14px;\n display: flex;\n align-items: center;\n}\n\n.resendText {\n color: #A7A7A7;\n font-weight: 700;\n font-size: 14px;\n}\n\n.enabledResendText {\n color: #000000;\n font-weight: 700;\n font-size: 14px;\n}";
|
|
21597
|
+
var css$e = ".otpMainContainer {\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin: 10px 0;\n width: 343px;\n}\n\n.otpInputDiv {\n flex-direction: row;\n gap: 12px;\n display: flex;\n}\n\n.otpInput {\n width: calc(25% - 9px);\n height: 48px;\n text-align: center;\n font-size: 18px;\n font-weight: 400;\n border-radius: 8px;\n}\n@media (max-width: 600px) {\n .otpInput {\n height: 40px;\n }\n}\n\n.otpInput::-webkit-inner-spin-button {\n display: none;\n}\n\n.resendContainer {\n display: flex;\n flex-direction: row;\n margin-top: 10px;\n justify-content: space-between;\n}\n\n.errorText {\n color: #EB0542;\n font-weight: 400;\n font-size: 14px;\n}\n\n.timerText {\n color: #0569C2;\n font-weight: 400;\n font-size: 14px;\n display: flex;\n align-items: center;\n}\n\n.resendText {\n color: #A7A7A7;\n font-weight: 700;\n font-size: 14px;\n}\n\n.enabledResendText {\n color: #000000;\n font-weight: 700;\n font-size: 14px;\n}";
|
|
21598
21598
|
n(css$e,{});
|
|
21599
21599
|
|
|
21600
21600
|
const OTPInput = ({ length = 4, onChange, autoFocus = false, onResend, resendDelay = 60, error = false, errorText, resendText, showResendButton = true, className, inputClassName, disableResend, icon, noResendButtonText }) => {
|
|
@@ -21608,7 +21608,7 @@ const OTPInput = ({ length = 4, onChange, autoFocus = false, onResend, resendDel
|
|
|
21608
21608
|
return () => clearInterval(countdown);
|
|
21609
21609
|
}, []);
|
|
21610
21610
|
const handleChange = (value, index) => {
|
|
21611
|
-
if (isNaN(Number(value)))
|
|
21611
|
+
if (isNaN(Number(value)) || Number(value) > 9)
|
|
21612
21612
|
return;
|
|
21613
21613
|
const newOtp = [...otp];
|
|
21614
21614
|
newOtp[index] = value;
|
|
@@ -21629,11 +21629,12 @@ const OTPInput = ({ length = 4, onChange, autoFocus = false, onResend, resendDel
|
|
|
21629
21629
|
}
|
|
21630
21630
|
}
|
|
21631
21631
|
};
|
|
21632
|
-
const handleResendClick = () => {
|
|
21633
|
-
onResend()
|
|
21634
|
-
|
|
21635
|
-
|
|
21636
|
-
|
|
21632
|
+
const handleResendClick = async () => {
|
|
21633
|
+
onResend(() => {
|
|
21634
|
+
setOtp(Array(length).fill(""));
|
|
21635
|
+
setTimer(resendDelay);
|
|
21636
|
+
setIsComplete(false);
|
|
21637
|
+
});
|
|
21637
21638
|
};
|
|
21638
21639
|
useEffect(() => {
|
|
21639
21640
|
setIsComplete(otp.every((digit) => digit !== ""));
|
|
@@ -21653,11 +21654,11 @@ const OTPInput = ({ length = 4, onChange, autoFocus = false, onResend, resendDel
|
|
|
21653
21654
|
return (React__default.createElement("div", { className: `${'otpMainContainer'} ${className ? className : ''}` },
|
|
21654
21655
|
React__default.createElement("div", { className: "otpInputDiv" }, Array(length)
|
|
21655
21656
|
.fill("")
|
|
21656
|
-
.map((_, index) => (React__default.createElement("input", { key: index, type: "number", id: `otp-input-${index}`, value: otp[index], "data-testid": `otp-input-${index}`, onChange: (e) => handleChange(e.target.value, index), onKeyDown: (e) => handleKeyDown(e, index),
|
|
21657
|
+
.map((_, index) => (React__default.createElement("input", { key: index, type: "number", id: `otp-input-${index}`, value: otp[index], "data-testid": `otp-input-${index}`, onChange: (e) => handleChange(e.target.value, index), onKeyDown: (e) => handleKeyDown(e, index), style: { border: `1px solid ${getReadableStatus()}` }, className: `${'otpInput'} ${inputClassName ? inputClassName : ''}`, autoFocus: autoFocus && index === 0 })))),
|
|
21657
21658
|
React__default.createElement("div", { className: "resendContainer" },
|
|
21658
21659
|
error && (React__default.createElement("div", { className: "errorText" }, errorText)),
|
|
21659
21660
|
!showResendButton && !error && React__default.createElement("div", { className: "errorText" }, noResendButtonText),
|
|
21660
|
-
|
|
21661
|
+
showResendButton && (React__default.createElement(React__default.Fragment, null,
|
|
21661
21662
|
React__default.createElement("div", { className: "timerText" },
|
|
21662
21663
|
timer ? icon : "",
|
|
21663
21664
|
timer > 0 ? `00:${timer} secs` : ""),
|
|
@@ -22152,7 +22153,7 @@ const Carousel = ({ items }) => {
|
|
|
22152
22153
|
React__default.createElement("div", { className: "carousel-dots" }, items?.map((_, index) => (React__default.createElement("span", { key: index, "data-testid": `dot-${index}`, className: `dot ${index === currentIndex ? "active" : ""}`, onClick: () => handleDotClick(index) }))))));
|
|
22153
22154
|
};
|
|
22154
22155
|
|
|
22155
|
-
var css = ".stepperCircle {\n width: 1.75rem;\n height: 1.75rem;\n border-radius: 50%;\n border:
|
|
22156
|
+
var css = ".stepperCircle {\n width: 1.75rem;\n height: 1.75rem;\n border-radius: 50%;\n border: 1px solid #000000;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n}\n\n.contentSecondary {\n color: #686868;\n}\n\n.stepperSuccessBorder {\n border: none;\n}\n\n.stepperNotReachedBorder {\n border: 1px solid #a7a7a7;\n}\n\n.stepperAlignment {\n display: flex;\n flex-direction: row;\n width: 100%;\n align-items: baseline;\n justify-content: space-between;\n}\n\n.stepperItem {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-bottom: 1rem;\n}\n\n.marginRight1 {\n margin-right: 1rem;\n}\n\n.stepperVerticalItem {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n justify-content: space-between;\n}\n\n.stepperDivider {\n width: 88%;\n border: 1px dashed #898989;\n height: 0.125rem;\n margin-left: 1rem;\n margin-right: 1rem;\n}\n\n.stepperDisabledDivider {\n width: 88%;\n border: 1px dashed #898989;\n height: 0.125rem;\n margin-left: 1rem;\n margin-right: 1rem;\n}\n\n.stepperPlainDivider {\n width: 88%;\n border: 1px solid #000000;\n height: 0.125rem;\n margin-left: 1rem;\n margin-right: 1rem;\n}\n\n.stepperVerticalDivider {\n border-left: 2px solid #000000;\n min-height: 2rem;\n max-height: 100%;\n margin-left: 1.25rem;\n padding-left: 2rem;\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n\n.stepperVerticalCircle {\n min-width: 2.5rem;\n height: 2.5rem;\n border-radius: 50%;\n border: 2px solid #000000;\n color: #ffffff;\n background: #000000;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n margin-right: 1rem;\n}\n\n.stepperVerticalDisabledDivider {\n width: 1.75rem;\n min-height: 2rem;\n max-height: 100%;\n margin: 0.75rem 0;\n background-image: linear-gradient(#686868 50%, rgba(255, 255, 255, 0) 0%);\n background-position: center;\n background-size: 0.5px 10px;\n background-repeat: repeat-y;\n}\n\n.stepperVerticalPlainDivider {\n width: 2px;\n border-left: 1px solid #00b578;\n min-height: 2rem;\n max-height: 100%;\n margin: 0.75rem 0;\n margin-left: 0.875rem;\n}\n\n.paddingLeft2 {\n padding-left: 2.7rem;\n}\n\n.stepperVerticalAlignment {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n.flex {\n display: flex;\n flex-direction: row;\n}\n\n.warning {\n color: #eb8425;\n}\n\n.error {\n color: #eb0542;\n}\n\n.stepperWarningCircle {\n border: 2px solid #eb8425;\n}\n\n.stepperErrorCircle {\n border: 2px solid #eb0542;\n}\n\n.flexCenter {\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n\n.marginRight {\n margin-right: 1rem;\n margin-top: -0.3rem;\n}\n\n.column {\n display: flex;\n flex-direction: column;\n}\n\n.typoClass {\n color: #686868;\n margin-top: 4px;\n}";
|
|
22156
22157
|
n(css,{});
|
|
22157
22158
|
|
|
22158
22159
|
const Stepper = ({ variant, dividerWidth, submittedDate, component, status, statusIcon, successIcon, currentStep, stepperData, type, alignment, showLabelIndex, displayRightContent, isPaymentPlanFlow, }) => {
|