mimir-ui-kit 1.66.0 → 1.66.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/ProgressBar-BtLMbQrP.js +67 -0
- package/dist/assets/ProgressBar.css +1 -1
- package/dist/components/Toasts/ProgressBar.js +1 -1
- package/dist/components/Toasts/Toast.js +37 -37
- package/dist/components/Toasts/ToastList.js +1 -1
- package/dist/components/Toasts/ToastsProvider.js +1 -1
- package/package.json +1 -1
- package/dist/ProgressBar-F970LqqJ.js +0 -68
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { jsx as l } from "react/jsx-runtime";
|
|
2
|
+
import { c as u } from "./index-DIxK0V-G.js";
|
|
3
|
+
import { memo as q, useRef as e, useEffect as f } from "react";
|
|
4
|
+
import { DEFAULT_TOAST_DURATION as g, EToastVariant as b } from "./components/Toasts/constants.js";
|
|
5
|
+
import './assets/ProgressBar.css';const d = "_title_lqoti_37", A = "_timer_lqoti_41", T = "_seconds_lqoti_51", h = "_message_lqoti_61", w = "_progress_lqoti_69", D = "_success_lqoti_100", F = "_alarm_lqoti_105", R = "_error_lqoti_110", E = "_purple_lqoti_115", s = {
|
|
6
|
+
"toast-list": "_toast-list_lqoti_2",
|
|
7
|
+
"toast-wrapper": "_toast-wrapper_lqoti_24",
|
|
8
|
+
title: d,
|
|
9
|
+
timer: A,
|
|
10
|
+
"timer-title": "_timer-title_lqoti_49",
|
|
11
|
+
seconds: T,
|
|
12
|
+
message: h,
|
|
13
|
+
progress: w,
|
|
14
|
+
"progress-bar": "_progress-bar_lqoti_78",
|
|
15
|
+
"close-button": "_close-button_lqoti_89",
|
|
16
|
+
default: "_default_lqoti_95",
|
|
17
|
+
success: D,
|
|
18
|
+
alarm: F,
|
|
19
|
+
error: R,
|
|
20
|
+
purple: E,
|
|
21
|
+
"top-right": "_top-right_lqoti_120",
|
|
22
|
+
"top-center": "_top-center_lqoti_126",
|
|
23
|
+
"top-left": "_top-left_lqoti_132",
|
|
24
|
+
"bottom-left": "_bottom-left_lqoti_137",
|
|
25
|
+
"bottom-center": "_bottom-center_lqoti_142",
|
|
26
|
+
"bottom-right": "_bottom-right_lqoti_148",
|
|
27
|
+
"toast-in": "_toast-in_lqoti_180",
|
|
28
|
+
"toast-out": "_toast-out_lqoti_184"
|
|
29
|
+
}, L = q(
|
|
30
|
+
({
|
|
31
|
+
duration: _ = g,
|
|
32
|
+
variant: m = b.DEFAULT,
|
|
33
|
+
isPaused: i = !1
|
|
34
|
+
}) => {
|
|
35
|
+
const t = e(), o = e(null), n = e(Date.now()), r = e(0);
|
|
36
|
+
return f(() => {
|
|
37
|
+
if (i)
|
|
38
|
+
t.current && cancelAnimationFrame(t.current);
|
|
39
|
+
else {
|
|
40
|
+
n.current = Date.now() - r.current;
|
|
41
|
+
const c = () => {
|
|
42
|
+
const p = Date.now();
|
|
43
|
+
r.current = p - n.current;
|
|
44
|
+
const a = Math.min(
|
|
45
|
+
r.current / _ * 100,
|
|
46
|
+
100
|
|
47
|
+
);
|
|
48
|
+
o.current && (o.current.style.width = `${a}%`), a < 100 && (t.current = requestAnimationFrame(c));
|
|
49
|
+
};
|
|
50
|
+
t.current = requestAnimationFrame(c);
|
|
51
|
+
}
|
|
52
|
+
return () => {
|
|
53
|
+
t.current && cancelAnimationFrame(t.current);
|
|
54
|
+
};
|
|
55
|
+
}, [_, i]), /* @__PURE__ */ l("div", { className: s.progress, "data-testid": "progress-bar", children: /* @__PURE__ */ l(
|
|
56
|
+
"div",
|
|
57
|
+
{
|
|
58
|
+
ref: o,
|
|
59
|
+
className: u(s["progress-bar"], s[m])
|
|
60
|
+
}
|
|
61
|
+
) });
|
|
62
|
+
}
|
|
63
|
+
);
|
|
64
|
+
export {
|
|
65
|
+
L as P,
|
|
66
|
+
s as c
|
|
67
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._toast-
|
|
1
|
+
._toast-list_lqoti_2{position:fixed;z-index:var(--mimir-zindex-toasts-list);width:100vw;max-width:515px;max-height:100vh;padding:var(--mimir-space-m);overflow-x:hidden;overflow-y:auto;overflow:hidden auto}._toast-list_lqoti_2::-webkit-scrollbar{display:none}._toast-list_lqoti_2::-webkit-scrollbar-track{background-color:transparent}._toast-list_lqoti_2::-webkit-scrollbar-thumb{background-color:transparent}._toast-list_lqoti_2::-webkit-scrollbar-thumb:window-inactive{background-color:transparent}._toast-wrapper_lqoti_24{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:var(--mimir-space-m);background-color:var(--toast-bg-color);border-radius:var(--mimir-control-radius);-webkit-transition:all .3s ease;transition:all .3s ease}._toast-wrapper_lqoti_24:not(:last-child){margin-bottom:var(--mimir-space-s)}._title_lqoti_37:not(:last-child){margin-bottom:var(--mimir-space-xs)}._timer_lqoti_41{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}._timer_lqoti_41:not(:last-child){margin-bottom:var(--mimir-space-2xs)}._timer-title_lqoti_49,._title_lqoti_37,._seconds_lqoti_51{color:var(--black-60);font-size:var(--mimir-size-text-m);line-height:var(--mimir-line-height-text-xxs)}._seconds_lqoti_51{color:var(--black-100)}._message_lqoti_61{font-size:var(--mimir-size-text-l);line-height:var(--mimir-line-height-text-s1)}._message_lqoti_61:not(:last-child){margin-bottom:var(--mimir-space-xs)}._progress_lqoti_69{position:relative;width:100%;height:8px;overflow:hidden;background-color:var(--black-5);border-radius:var(--mimir-control-radius-xs)}._progress-bar_lqoti_78{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;background-color:var(--progress-bg-color);border-radius:var(--mimir-control-radius-xs)}._close-button_lqoti_89{position:absolute;top:var(--mimir-space-s);right:var(--mimir-space-s)}._default_lqoti_95{--toast-bg-color: var(--white);--progress-bg-color: var(--sapphire-100)}._success_lqoti_100{--toast-bg-color: var(--success-bg-active);--progress-bg-color: var(--success-normal)}._alarm_lqoti_105{--toast-bg-color: var(--alarm-bg-active);--progress-bg-color: var(--alarm-normal)}._error_lqoti_110{--toast-bg-color: var(--error-bg-active);--progress-bg-color: var(--error-normal)}._purple_lqoti_115{--toast-bg-color: var(--purple-bg-active);--progress-bg-color: var(--purple-normal)}._top-right_lqoti_120{top:0;right:0;-webkit-transition:all .3s ease;transition:all .3s ease}._top-center_lqoti_126{top:0;right:50%;-webkit-transform:translateX(50%);transform:translate(50%)}._top-left_lqoti_132{top:0;left:0}._bottom-left_lqoti_137{bottom:0;left:0}._bottom-center_lqoti_142{right:50%;bottom:0;-webkit-transform:translateX(50%);transform:translate(50%)}._bottom-right_lqoti_148{right:0;bottom:0}@-webkit-keyframes _toast-in_lqoti_180{0%{-webkit-transform:var(--elm-translate);transform:var(--elm-translate);opacity:.7}80%{-webkit-transform:translate(0);transform:translate(0);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes _toast-in_lqoti_180{0%{-webkit-transform:var(--elm-translate);transform:var(--elm-translate);opacity:.7}80%{-webkit-transform:translate(0);transform:translate(0);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@-webkit-keyframes _toast-out_lqoti_184{0%{opacity:1}20%{-webkit-transform:translate(0);transform:translate(0);opacity:.7}to{-webkit-transform:var(--elm-translate);transform:var(--elm-translate);opacity:.7}}@keyframes _toast-out_lqoti_184{0%{opacity:1}20%{-webkit-transform:translate(0);transform:translate(0);opacity:.7}to{-webkit-transform:var(--elm-translate);transform:var(--elm-translate);opacity:.7}}._toast-in_lqoti_180{-webkit-animation:_toast-in_lqoti_180 .3s both;animation:_toast-in_lqoti_180 .3s both}._toast-out_lqoti_184{-webkit-animation:_toast-out_lqoti_184 .8s both;animation:_toast-out_lqoti_184 .8s both}
|
|
@@ -1,72 +1,72 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { c as
|
|
3
|
-
import { memo as
|
|
4
|
-
import { ANIMATION_VARIABLES_MAP as U, EToastPosition as j, EToastVariant as x, DEFAULT_TOAST_DURATION as
|
|
5
|
-
import { c as
|
|
6
|
-
import { useTimer as
|
|
1
|
+
import { jsxs as l, jsx as a, Fragment as S } from "react/jsx-runtime";
|
|
2
|
+
import { c as w } from "../../index-DIxK0V-G.js";
|
|
3
|
+
import { memo as y, useRef as F, useState as O } from "react";
|
|
4
|
+
import { ANIMATION_VARIABLES_MAP as U, EToastPosition as j, EToastVariant as x, DEFAULT_TOAST_DURATION as V } from "./constants.js";
|
|
5
|
+
import { c as r, P as b } from "../../ProgressBar-BtLMbQrP.js";
|
|
6
|
+
import { useTimer as g } from "../../hooks/useTimer/index.js";
|
|
7
7
|
import { Button as G } from "../Button/Button.js";
|
|
8
|
-
const
|
|
8
|
+
const W = y(
|
|
9
9
|
({
|
|
10
10
|
id: i,
|
|
11
|
-
title:
|
|
12
|
-
message:
|
|
11
|
+
title: u = "",
|
|
12
|
+
message: d,
|
|
13
13
|
position: P = j.TOP_RIGHT,
|
|
14
14
|
variant: h = x.DEFAULT,
|
|
15
|
-
duration: c =
|
|
15
|
+
duration: c = V,
|
|
16
16
|
autoClose: p = !0,
|
|
17
17
|
needProgress: N = !0,
|
|
18
18
|
needTimer: A = !0,
|
|
19
19
|
needCloseButton: L = !0,
|
|
20
|
-
onToastRemove:
|
|
20
|
+
onToastRemove: s,
|
|
21
21
|
onExpire: f,
|
|
22
|
-
onButtonRemoveClick:
|
|
22
|
+
onButtonRemoveClick: m,
|
|
23
23
|
slot: e,
|
|
24
|
-
pauseOnHover:
|
|
24
|
+
pauseOnHover: n = !1
|
|
25
25
|
}) => {
|
|
26
|
-
const
|
|
26
|
+
const t = F(null), [I, M] = O(!1), { seconds: _ } = g({
|
|
27
27
|
expiryTimestamp: Date.now() + c,
|
|
28
28
|
autoStart: p,
|
|
29
29
|
onExpire: p ? () => {
|
|
30
|
-
|
|
30
|
+
s == null || s(i, t), f == null || f();
|
|
31
31
|
} : void 0,
|
|
32
|
-
isPaused:
|
|
32
|
+
isPaused: I
|
|
33
33
|
}), D = () => {
|
|
34
|
-
|
|
34
|
+
n && M(!0);
|
|
35
35
|
}, E = () => {
|
|
36
|
-
|
|
36
|
+
n && M(!1);
|
|
37
37
|
};
|
|
38
|
-
return /* @__PURE__ */
|
|
38
|
+
return /* @__PURE__ */ l(
|
|
39
39
|
"div",
|
|
40
40
|
{
|
|
41
41
|
style: {
|
|
42
42
|
"--elm-translate": U[P]
|
|
43
43
|
},
|
|
44
|
-
className:
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
44
|
+
className: w(
|
|
45
|
+
r["toast-in"],
|
|
46
|
+
r["toast-wrapper"],
|
|
47
|
+
r[h]
|
|
48
48
|
),
|
|
49
|
-
ref:
|
|
49
|
+
ref: t,
|
|
50
50
|
role: "alert",
|
|
51
51
|
onMouseEnter: D,
|
|
52
52
|
onMouseLeave: E,
|
|
53
53
|
children: [
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
(A || N) && /* @__PURE__ */
|
|
57
|
-
!!c && A && /* @__PURE__ */
|
|
58
|
-
/* @__PURE__ */ a("h4", { className:
|
|
59
|
-
/* @__PURE__ */
|
|
54
|
+
u && /* @__PURE__ */ a("h3", { className: r.title, children: u }),
|
|
55
|
+
d && /* @__PURE__ */ a("div", { className: r.message, children: d }),
|
|
56
|
+
(A || N) && /* @__PURE__ */ l("div", { children: [
|
|
57
|
+
!!c && A && /* @__PURE__ */ l("div", { className: r.timer, children: [
|
|
58
|
+
/* @__PURE__ */ a("h4", { className: r["timer-title"], children: "Осталось" }),
|
|
59
|
+
/* @__PURE__ */ l("p", { className: r.seconds, children: [
|
|
60
60
|
_,
|
|
61
61
|
" сек"
|
|
62
62
|
] })
|
|
63
63
|
] }),
|
|
64
64
|
!!c && N && /* @__PURE__ */ a(
|
|
65
|
-
|
|
65
|
+
b,
|
|
66
66
|
{
|
|
67
67
|
variant: h,
|
|
68
68
|
duration: c,
|
|
69
|
-
isPaused:
|
|
69
|
+
isPaused: I
|
|
70
70
|
}
|
|
71
71
|
)
|
|
72
72
|
] }),
|
|
@@ -74,17 +74,17 @@ const Q = w(
|
|
|
74
74
|
G,
|
|
75
75
|
{
|
|
76
76
|
onClick: () => {
|
|
77
|
-
|
|
77
|
+
s == null || s(i, t), m == null || m();
|
|
78
78
|
},
|
|
79
79
|
clear: !0,
|
|
80
80
|
isIconButton: !0,
|
|
81
|
-
className:
|
|
81
|
+
className: r["close-button"],
|
|
82
82
|
iconName: "Close24px"
|
|
83
83
|
}
|
|
84
84
|
),
|
|
85
|
-
e && /* @__PURE__ */ a(
|
|
85
|
+
e && /* @__PURE__ */ a(S, { children: typeof e == "function" ? e({
|
|
86
86
|
handleToastRemove: () => {
|
|
87
|
-
|
|
87
|
+
s == null || s(i, t);
|
|
88
88
|
}
|
|
89
89
|
}) : e })
|
|
90
90
|
]
|
|
@@ -93,5 +93,5 @@ const Q = w(
|
|
|
93
93
|
}
|
|
94
94
|
);
|
|
95
95
|
export {
|
|
96
|
-
|
|
96
|
+
W as Toast
|
|
97
97
|
};
|
|
@@ -2,7 +2,7 @@ import { jsx as i } from "react/jsx-runtime";
|
|
|
2
2
|
import { c as a } from "../../index-DIxK0V-G.js";
|
|
3
3
|
import { memo as e, useRef as f, useCallback as T, useEffect as u } from "react";
|
|
4
4
|
import { EToastPosition as c } from "./constants.js";
|
|
5
|
-
import { c as l } from "../../ProgressBar-
|
|
5
|
+
import { c as l } from "../../ProgressBar-BtLMbQrP.js";
|
|
6
6
|
import { Toast as d } from "./Toast.js";
|
|
7
7
|
import { Portal as p } from "../Portal/Portal.js";
|
|
8
8
|
const x = e(
|
|
@@ -3,7 +3,7 @@ import { useReducer as u, useCallback as m, useMemo as E } from "react";
|
|
|
3
3
|
import { EToastVariant as o } from "./constants.js";
|
|
4
4
|
import { ToastContext as l } from "./hooks.js";
|
|
5
5
|
import { reducer as L, initialState as A, actionCreators as c } from "./store.js";
|
|
6
|
-
import { c as C } from "../../ProgressBar-
|
|
6
|
+
import { c as C } from "../../ProgressBar-BtLMbQrP.js";
|
|
7
7
|
import { ToastList as S } from "./ToastList.js";
|
|
8
8
|
const F = ({ children: d }) => {
|
|
9
9
|
const [i, r] = u(L, A), a = m((t) => {
|
package/package.json
CHANGED
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
import { jsx as m } from "react/jsx-runtime";
|
|
2
|
-
import { c as u } from "./index-DIxK0V-G.js";
|
|
3
|
-
import { memo as q, useRef as r, useEffect as f } from "react";
|
|
4
|
-
import { DEFAULT_TOAST_DURATION as g, EToastVariant as b } from "./components/Toasts/constants.js";
|
|
5
|
-
import './assets/ProgressBar.css';const d = "_title_14r7q_37", A = "_timer_14r7q_41", T = "_seconds_14r7q_51", h = "_message_14r7q_61", w = "_progress_14r7q_69", D = "_slot_14r7q_95", F = "_success_14r7q_104", R = "_alarm_14r7q_109", E = "_error_14r7q_114", N = "_purple_14r7q_119", o = {
|
|
6
|
-
"toast-list": "_toast-list_14r7q_2",
|
|
7
|
-
"toast-wrapper": "_toast-wrapper_14r7q_24",
|
|
8
|
-
title: d,
|
|
9
|
-
timer: A,
|
|
10
|
-
"timer-title": "_timer-title_14r7q_49",
|
|
11
|
-
seconds: T,
|
|
12
|
-
message: h,
|
|
13
|
-
progress: w,
|
|
14
|
-
"progress-bar": "_progress-bar_14r7q_78",
|
|
15
|
-
"close-button": "_close-button_14r7q_89",
|
|
16
|
-
slot: D,
|
|
17
|
-
default: "_default_14r7q_99",
|
|
18
|
-
success: F,
|
|
19
|
-
alarm: R,
|
|
20
|
-
error: E,
|
|
21
|
-
purple: N,
|
|
22
|
-
"top-right": "_top-right_14r7q_124",
|
|
23
|
-
"top-center": "_top-center_14r7q_130",
|
|
24
|
-
"top-left": "_top-left_14r7q_136",
|
|
25
|
-
"bottom-left": "_bottom-left_14r7q_141",
|
|
26
|
-
"bottom-center": "_bottom-center_14r7q_146",
|
|
27
|
-
"bottom-right": "_bottom-right_14r7q_152",
|
|
28
|
-
"toast-in": "_toast-in_14r7q_184",
|
|
29
|
-
"toast-out": "_toast-out_14r7q_188"
|
|
30
|
-
}, O = q(
|
|
31
|
-
({
|
|
32
|
-
duration: _ = g,
|
|
33
|
-
variant: l = b.DEFAULT,
|
|
34
|
-
isPaused: n = !1
|
|
35
|
-
}) => {
|
|
36
|
-
const t = r(), e = r(null), c = r(Date.now()), s = r(0);
|
|
37
|
-
return f(() => {
|
|
38
|
-
if (n)
|
|
39
|
-
t.current && cancelAnimationFrame(t.current);
|
|
40
|
-
else {
|
|
41
|
-
c.current = Date.now() - s.current;
|
|
42
|
-
const a = () => {
|
|
43
|
-
const p = Date.now();
|
|
44
|
-
s.current = p - c.current;
|
|
45
|
-
const i = Math.min(
|
|
46
|
-
s.current / _ * 100,
|
|
47
|
-
100
|
|
48
|
-
);
|
|
49
|
-
e.current && (e.current.style.width = `${i}%`), i < 100 && (t.current = requestAnimationFrame(a));
|
|
50
|
-
};
|
|
51
|
-
t.current = requestAnimationFrame(a);
|
|
52
|
-
}
|
|
53
|
-
return () => {
|
|
54
|
-
t.current && cancelAnimationFrame(t.current);
|
|
55
|
-
};
|
|
56
|
-
}, [_, n]), /* @__PURE__ */ m("div", { className: o.progress, "data-testid": "progress-bar", children: /* @__PURE__ */ m(
|
|
57
|
-
"div",
|
|
58
|
-
{
|
|
59
|
-
ref: e,
|
|
60
|
-
className: u(o["progress-bar"], o[l])
|
|
61
|
-
}
|
|
62
|
-
) });
|
|
63
|
-
}
|
|
64
|
-
);
|
|
65
|
-
export {
|
|
66
|
-
O as P,
|
|
67
|
-
o as c
|
|
68
|
-
};
|