next-helios-fe 1.8.149 → 1.8.151
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
|
@@ -58,7 +58,7 @@ export const Chip: React.FC<ChipProps> = ({
|
|
|
58
58
|
>
|
|
59
59
|
<div className="flex items-center gap-1.5">
|
|
60
60
|
{icon && <Icon icon={icon} className="text-lg" />}
|
|
61
|
-
<span className="text-sm">{label}</span>
|
|
61
|
+
<span className="text-sm text-center">{label}</span>
|
|
62
62
|
</div>
|
|
63
63
|
{onRemove && (
|
|
64
64
|
<div
|
|
@@ -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
|
};
|