next-helios-fe 1.8.148 → 1.8.150
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/package.json
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import React, { useEffect } from "react";
|
|
2
|
+
import React, { useState, useEffect } from "react";
|
|
3
|
+
import ReactDom from "react-dom";
|
|
3
4
|
import { Icon } from "@iconify/react";
|
|
4
5
|
|
|
5
6
|
interface DialogProps {
|
|
@@ -28,6 +29,7 @@ export const Dialog: React.FC<DialogProps> = ({
|
|
|
28
29
|
loading,
|
|
29
30
|
onClose,
|
|
30
31
|
}) => {
|
|
32
|
+
const [isRendered, setIsRendered] = useState(false);
|
|
31
33
|
const actionVariant =
|
|
32
34
|
action.variant === "secondary"
|
|
33
35
|
? "text-secondary hover:text-secondary-dark hover:underline"
|
|
@@ -49,6 +51,10 @@ export const Dialog: React.FC<DialogProps> = ({
|
|
|
49
51
|
? `animate-shrink-10000`
|
|
50
52
|
: "";
|
|
51
53
|
|
|
54
|
+
useEffect(() => {
|
|
55
|
+
setIsRendered(true);
|
|
56
|
+
}, []);
|
|
57
|
+
|
|
52
58
|
useEffect(() => {
|
|
53
59
|
if (options?.timeout) {
|
|
54
60
|
const timeout = setTimeout(() => {
|
|
@@ -59,65 +65,70 @@ export const Dialog: React.FC<DialogProps> = ({
|
|
|
59
65
|
}, [open]);
|
|
60
66
|
|
|
61
67
|
return (
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
/>
|
|
80
|
-
)}
|
|
81
|
-
{title}
|
|
82
|
-
</h1>
|
|
83
|
-
<p className="flex-1 h-full">{message}</p>
|
|
84
|
-
<div className="flex justify-end gap-4">
|
|
85
|
-
<button
|
|
86
|
-
type="button"
|
|
87
|
-
className={`flex gap-1 items-center disabled:text-disabled disabled:pointer-events-none ${actionVariant}`}
|
|
88
|
-
disabled={loading}
|
|
89
|
-
onClick={() => {
|
|
90
|
-
action.onClick && action.onClick();
|
|
91
|
-
}}
|
|
92
|
-
>
|
|
93
|
-
{loading ? (
|
|
68
|
+
isRendered &&
|
|
69
|
+
open &&
|
|
70
|
+
ReactDom.createPortal(
|
|
71
|
+
<div
|
|
72
|
+
className={`absolute top-0 left-0 w-dvw h-dvh z-50 ${
|
|
73
|
+
options?.timeout ? "pointer-events-none" : "bg-black/30"
|
|
74
|
+
}`}
|
|
75
|
+
>
|
|
76
|
+
<div className="flex justify-center mt-4">
|
|
77
|
+
<div
|
|
78
|
+
className={`flex flex-col gap-2 w-full sm:w-4/5 md:w-3/5 lg:w-2/5 xl:w-4/12 min-h-24 border rounded-md bg-secondary-bg text-sm overflow-hidden pointer-events-auto ${
|
|
79
|
+
options?.timeout ? "pt-4" : "py-4"
|
|
80
|
+
}`}
|
|
81
|
+
>
|
|
82
|
+
<div className="flex flex-col gap-4 px-4">
|
|
83
|
+
<h1 className="flex items-center gap-2 text-base font-medium">
|
|
84
|
+
{options?.showAlertIcon !== false && (
|
|
94
85
|
<Icon
|
|
95
|
-
icon="mingcute:
|
|
96
|
-
className=
|
|
86
|
+
icon="mingcute:warning-line"
|
|
87
|
+
className={`text-2xl ${actionVariant}`}
|
|
97
88
|
/>
|
|
98
|
-
) : (
|
|
99
|
-
action.label
|
|
100
89
|
)}
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
90
|
+
{title}
|
|
91
|
+
</h1>
|
|
92
|
+
<p className="flex-1 h-full">{message}</p>
|
|
93
|
+
<div className="flex justify-end gap-4">
|
|
94
|
+
<button
|
|
95
|
+
type="button"
|
|
96
|
+
className={`flex gap-1 items-center disabled:text-disabled disabled:pointer-events-none ${actionVariant}`}
|
|
97
|
+
disabled={loading}
|
|
98
|
+
onClick={() => {
|
|
99
|
+
action.onClick && action.onClick();
|
|
100
|
+
}}
|
|
101
|
+
>
|
|
102
|
+
{loading ? (
|
|
103
|
+
<Icon
|
|
104
|
+
icon="mingcute:loading-fill"
|
|
105
|
+
className="animate-spin text-lg"
|
|
106
|
+
/>
|
|
107
|
+
) : (
|
|
108
|
+
action.label
|
|
109
|
+
)}
|
|
110
|
+
</button>
|
|
111
|
+
<button
|
|
112
|
+
type="button"
|
|
113
|
+
className="text-secondary hover:text-secondary-dark hover:underline disabled:text-disabled disabled:pointer-events-none"
|
|
114
|
+
disabled={loading}
|
|
115
|
+
onClick={() => {
|
|
116
|
+
onClose && onClose();
|
|
117
|
+
}}
|
|
118
|
+
>
|
|
119
|
+
Close
|
|
120
|
+
</button>
|
|
121
|
+
</div>
|
|
112
122
|
</div>
|
|
123
|
+
{options?.timeout && (
|
|
124
|
+
<div className="w-full h-1.5 bg-primary-transparent">
|
|
125
|
+
<div className={`h-full bg-primary ${shrinkAnimation}`}></div>
|
|
126
|
+
</div>
|
|
127
|
+
)}
|
|
113
128
|
</div>
|
|
114
|
-
{options?.timeout && (
|
|
115
|
-
<div className="w-full h-1.5 bg-primary-transparent">
|
|
116
|
-
<div className={`h-full bg-primary ${shrinkAnimation}`}></div>
|
|
117
|
-
</div>
|
|
118
|
-
)}
|
|
119
129
|
</div>
|
|
120
|
-
</div
|
|
121
|
-
|
|
130
|
+
</div>,
|
|
131
|
+
document.body
|
|
132
|
+
)
|
|
122
133
|
);
|
|
123
134
|
};
|
|
@@ -1590,6 +1590,8 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
|
|
|
1590
1590
|
type="text"
|
|
1591
1591
|
className={`w-full ps-16 pe-4 border-default border rounded-md bg-secondary-bg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
|
|
1592
1592
|
placeholder="Phone number"
|
|
1593
|
+
minLength={9}
|
|
1594
|
+
maxLength={18}
|
|
1593
1595
|
required={rest.required}
|
|
1594
1596
|
disabled={rest.disabled}
|
|
1595
1597
|
value={tempValue || ""}
|