@situaction/traq-ui-ste 1.1.41 → 1.2.0
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.
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
|
|
3
|
+
import * as PhosphorIcons from "@phosphor-icons/react";
|
|
4
|
+
type ToastPosition = "bottom-right" | "bottom-left" | "top-right" | "top-left";
|
|
5
|
+
interface ToastProps {
|
|
6
|
+
title: string;
|
|
7
|
+
icon?: keyof typeof PhosphorIcons;
|
|
8
|
+
children?: ReactNode;
|
|
9
|
+
closable?: boolean;
|
|
10
|
+
error?: boolean;
|
|
11
|
+
success?: boolean;
|
|
12
|
+
autoCloseDelay?: number;
|
|
13
|
+
open?: boolean;
|
|
14
|
+
position?: ToastPosition;
|
|
15
|
+
onClose?: () => void;
|
|
16
|
+
}
|
|
17
|
+
export declare const Toast: ({ title, icon, children, closable, error, success, autoCloseDelay, open, position, onClose }: ToastProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
18
|
+
export {};
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import { jsxs as n, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { useState as g, useEffect as h } from "react";
|
|
3
|
+
import { Icon as w } from "../icon/Icon.js";
|
|
4
|
+
import { IconButton as C } from "../icon-button/IconButton.js";
|
|
5
|
+
import '../../styles/Toast.css';const I = "_toast_10w18_30", z = "_base_10w18_69", j = "_success_10w18_73", k = "_error_10w18_77", B = "_closing_10w18_104", t = {
|
|
6
|
+
toast: I,
|
|
7
|
+
"toast-header": "_toast-header_10w18_49",
|
|
8
|
+
"toast-title-container": "_toast-title-container_10w18_55",
|
|
9
|
+
"toast-title": "_toast-title_10w18_55",
|
|
10
|
+
"toast-content": "_toast-content_10w18_65",
|
|
11
|
+
base: z,
|
|
12
|
+
success: j,
|
|
13
|
+
error: k,
|
|
14
|
+
"bottom-right": "_bottom-right_10w18_84",
|
|
15
|
+
"bottom-left": "_bottom-left_10w18_89",
|
|
16
|
+
"top-right": "_top-right_10w18_94",
|
|
17
|
+
"top-left": "_top-left_10w18_99",
|
|
18
|
+
closing: B
|
|
19
|
+
}, X = ({
|
|
20
|
+
title: d,
|
|
21
|
+
icon: b,
|
|
22
|
+
children: l,
|
|
23
|
+
closable: i = !0,
|
|
24
|
+
error: r = !1,
|
|
25
|
+
success: c = !1,
|
|
26
|
+
autoCloseDelay: _ = 3e3,
|
|
27
|
+
open: s = !0,
|
|
28
|
+
position: v = "bottom-right",
|
|
29
|
+
// ✅ Valeur par défaut
|
|
30
|
+
onClose: f
|
|
31
|
+
}) => {
|
|
32
|
+
const [p, m] = g(s), [N, u] = g(!1);
|
|
33
|
+
let o = "";
|
|
34
|
+
r ? o = t.error : c ? o = t.success : o = t.base;
|
|
35
|
+
const T = r ? "Warning" : c ? "CheckCircle" : "Info", $ = r ? "var(--color-error-500)" : c ? "var(--color-succes-500)" : "var(--general-text-icons)", a = () => {
|
|
36
|
+
u(!0), setTimeout(() => {
|
|
37
|
+
m(!1), f && f();
|
|
38
|
+
}, 300);
|
|
39
|
+
};
|
|
40
|
+
return h(() => {
|
|
41
|
+
s ? (m(!0), u(!1)) : a();
|
|
42
|
+
}, [s]), h(() => {
|
|
43
|
+
if (!i && s) {
|
|
44
|
+
const x = setTimeout(() => {
|
|
45
|
+
a();
|
|
46
|
+
}, _);
|
|
47
|
+
return () => clearTimeout(x);
|
|
48
|
+
}
|
|
49
|
+
}, [i, _, s]), p ? /* @__PURE__ */ n(
|
|
50
|
+
"div",
|
|
51
|
+
{
|
|
52
|
+
className: `${t.toast} ${o} ${N ? t.closing : ""} ${t[v]}`,
|
|
53
|
+
children: [
|
|
54
|
+
/* @__PURE__ */ n("div", { className: t["toast-header"], children: [
|
|
55
|
+
/* @__PURE__ */ n("div", { className: t["toast-title-container"], children: [
|
|
56
|
+
/* @__PURE__ */ e(w, { icon: b || T, size: 24, color: $ }),
|
|
57
|
+
/* @__PURE__ */ e("span", { className: t["toast-title"], children: d })
|
|
58
|
+
] }),
|
|
59
|
+
i && /* @__PURE__ */ e(C, { mode: "ghost", size: "s", onClick: a, children: /* @__PURE__ */ e(w, { icon: "X", size: 16, weight: "regular" }) })
|
|
60
|
+
] }),
|
|
61
|
+
l && /* @__PURE__ */ e("div", { className: `${t["toast-content"]}`, children: l })
|
|
62
|
+
]
|
|
63
|
+
}
|
|
64
|
+
) : null;
|
|
65
|
+
};
|
|
66
|
+
export {
|
|
67
|
+
X as Toast
|
|
68
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._toast_10w18_30{padding:.625rem;display:inline-flex;flex-direction:column;justify-content:start;align-items:start;border-radius:.25rem;border:1px solid var(--general-border-window);background:var(--background-primary);box-shadow:0 4px 4px 0 var(--shadow-color-lowest);width:auto;max-width:80vw;min-width:200px;opacity:1;transform:translateY(0);transition:opacity .3s ease,transform .3s ease;position:fixed;z-index:9999}._toast-header_10w18_49{display:flex;justify-content:space-between;align-items:center;width:100%}._toast-title-container_10w18_55{display:flex;align-items:center;gap:8px}._toast-title_10w18_55{font-size:1em;font-style:normal;font-weight:700}._toast-content_10w18_65{padding-left:2rem}._base_10w18_69 ._toast-title_10w18_55{color:var(--general-text-icons)}._success_10w18_73 ._toast-title_10w18_55{color:var(--color-succes-500)}._error_10w18_77{border-color:var(--color-error-500)}._error_10w18_77 ._toast-title_10w18_55{color:var(--color-error-500)}._bottom-right_10w18_84{bottom:1.25rem;right:1.25rem}._bottom-left_10w18_89{bottom:1.25rem;left:1.25rem}._top-right_10w18_94{top:1.25rem;right:1.25rem}._top-left_10w18_99{top:1.25rem;left:1.25rem}._closing_10w18_104{opacity:0;transform:translateY(10px)}
|