mimir-ui-kit 1.14.7 → 1.15.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/ProgressBar-BekX41HR.js +77 -0
- package/dist/assets/Button.css +1 -1
- package/dist/assets/ProgressBar2.css +1 -0
- package/dist/components/Button/Button.js +29 -29
- package/dist/components/Image/Image.d.ts +0 -12
- package/dist/components/Image/Image.js +15 -42
- package/dist/components/Slider/Slider.d.ts +0 -2
- package/dist/components/Slider/Slider.js +2 -4
- package/dist/components/Timer/Timer.d.ts +1 -1
- package/dist/components/Timer/Timer.js +17 -19
- package/dist/components/Toasts/ProgressBar.d.ts +5 -0
- package/dist/components/Toasts/ProgressBar.js +8 -0
- package/dist/components/Toasts/Toast.d.ts +54 -0
- package/dist/components/Toasts/Toast.js +73 -0
- package/dist/components/Toasts/ToastList.d.ts +10 -0
- package/dist/components/Toasts/ToastList.js +50 -0
- package/dist/components/Toasts/ToastsProvider.d.ts +3 -0
- package/dist/components/Toasts/ToastsProvider.js +46 -0
- package/dist/components/Toasts/constants.d.ts +23 -0
- package/dist/components/Toasts/constants.js +49 -0
- package/dist/components/Toasts/hooks.d.ts +2 -0
- package/dist/components/Toasts/hooks.js +16 -0
- package/dist/components/Toasts/index.d.ts +3 -0
- package/dist/components/Toasts/index.js +9 -0
- package/dist/components/Toasts/store.d.ts +29 -0
- package/dist/components/Toasts/store.js +50 -0
- package/dist/components/Toasts/types.d.ts +5 -0
- package/dist/components/Toasts/types.js +1 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +8 -1
- package/dist/hooks/index.d.ts +2 -1
- package/dist/hooks/index.js +3 -2
- package/dist/hooks/useCopyToClipboard/index.d.ts +1 -0
- package/dist/hooks/useCopyToClipboard/index.js +4 -0
- package/dist/hooks/useCopyToClipboard/useCopyToClipboard.d.ts +4 -0
- package/dist/hooks/useCopyToClipboard/useCopyToClipboard.js +23 -0
- package/dist/hooks/useMediaQuery/constants.d.ts +0 -10
- package/dist/hooks/useMediaQuery/constants.js +1 -13
- package/dist/hooks/useMediaQuery/index.d.ts +1 -1
- package/dist/hooks/useMediaQuery/index.js +1 -2
- package/dist/hooks/useTimer/index.d.ts +2 -2
- package/dist/hooks/useTimer/index.js +14 -7
- package/dist/index.js +11 -3
- package/package.json +4 -7
- package/dist/assets/Image.css +0 -1
@@ -0,0 +1,77 @@
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
2
|
+
import { c as classNames } from "./index-CweZ_OcN.js";
|
3
|
+
import { memo, useRef, useEffect } from "react";
|
4
|
+
import { DEFAULT_TOAST_DURATION, EToastVariant } from "./components/Toasts/constants.js";
|
5
|
+
import './assets/ProgressBar2.css';const title = "_title_1bc98_37";
|
6
|
+
const timer = "_timer_1bc98_41";
|
7
|
+
const seconds = "_seconds_1bc98_51";
|
8
|
+
const message = "_message_1bc98_61";
|
9
|
+
const progress = "_progress_1bc98_69";
|
10
|
+
const slot = "_slot_1bc98_95";
|
11
|
+
const success = "_success_1bc98_104";
|
12
|
+
const alarm = "_alarm_1bc98_109";
|
13
|
+
const error = "_error_1bc98_114";
|
14
|
+
const cls = {
|
15
|
+
"toast-list": "_toast-list_1bc98_2",
|
16
|
+
"toast-wrapper": "_toast-wrapper_1bc98_24",
|
17
|
+
title,
|
18
|
+
timer,
|
19
|
+
"timer-title": "_timer-title_1bc98_49",
|
20
|
+
seconds,
|
21
|
+
message,
|
22
|
+
progress,
|
23
|
+
"progress-bar": "_progress-bar_1bc98_78",
|
24
|
+
"close-button": "_close-button_1bc98_89",
|
25
|
+
slot,
|
26
|
+
"default": "_default_1bc98_99",
|
27
|
+
success,
|
28
|
+
alarm,
|
29
|
+
error,
|
30
|
+
"top-right": "_top-right_1bc98_119",
|
31
|
+
"top-center": "_top-center_1bc98_125",
|
32
|
+
"top-left": "_top-left_1bc98_131",
|
33
|
+
"bottom-left": "_bottom-left_1bc98_136",
|
34
|
+
"bottom-center": "_bottom-center_1bc98_141",
|
35
|
+
"bottom-right": "_bottom-right_1bc98_147",
|
36
|
+
"toast-in": "_toast-in_1bc98_179",
|
37
|
+
"toast-out": "_toast-out_1bc98_183"
|
38
|
+
};
|
39
|
+
const ProgressBar = memo(
|
40
|
+
({
|
41
|
+
duration = DEFAULT_TOAST_DURATION,
|
42
|
+
variant = EToastVariant.DEFAULT
|
43
|
+
}) => {
|
44
|
+
const requestRef = useRef();
|
45
|
+
const progressRef = useRef(null);
|
46
|
+
useEffect(() => {
|
47
|
+
const startTime = Date.now();
|
48
|
+
const animate = () => {
|
49
|
+
const elapsedTime = Date.now() - startTime;
|
50
|
+
const percentage = Math.min(elapsedTime / duration * 100, 100);
|
51
|
+
if (progressRef.current) {
|
52
|
+
progressRef.current.style.width = `${percentage}%`;
|
53
|
+
}
|
54
|
+
if (percentage < 100) {
|
55
|
+
requestRef.current = requestAnimationFrame(animate);
|
56
|
+
}
|
57
|
+
};
|
58
|
+
requestRef.current = requestAnimationFrame(animate);
|
59
|
+
return () => {
|
60
|
+
if (requestRef.current) {
|
61
|
+
cancelAnimationFrame(requestRef.current);
|
62
|
+
}
|
63
|
+
};
|
64
|
+
}, [duration]);
|
65
|
+
return /* @__PURE__ */ jsx("div", { className: cls.progress, children: /* @__PURE__ */ jsx(
|
66
|
+
"div",
|
67
|
+
{
|
68
|
+
ref: progressRef,
|
69
|
+
className: classNames(cls["progress-bar"], cls[variant])
|
70
|
+
}
|
71
|
+
) });
|
72
|
+
}
|
73
|
+
);
|
74
|
+
export {
|
75
|
+
ProgressBar as P,
|
76
|
+
cls as c
|
77
|
+
};
|
package/dist/assets/Button.css
CHANGED
@@ -1 +1 @@
|
|
1
|
-
.
|
1
|
+
._button_12tq3_2{--button-loader-color: var(--button-color);--button-cursor: pointer;display:inline-flex;flex-shrink:0;align-items:center;box-sizing:border-box;max-width:100%;height:var(--button-height);padding:0 var(--button-space);overflow:hidden;color:var(--button-color);font-weight:var(--font-weight-text-semibold);font-size:var(--button-font-size);font-family:var(--font-inter);line-height:var(--line-height-text-s1);white-space:nowrap;text-transform:uppercase;-webkit-text-decoration:none;text-decoration:none;text-overflow:ellipsis;-moz-column-gap:var(--button-gap);column-gap:var(--button-gap);background:var(--button-bg-color);border:none;border-color:var(--border-color);cursor:pointer;cursor:var(--button-cursor);transition:background-color .3s ease,border-color .15s ease,box-shadow .15s ease,color .15s ease,fill .15s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none}._button_12tq3_2:hover{color:var(--button-color-hover);background:var(--button-bg-color-hover);border-color:var(--border-color-hover)}._button_12tq3_2:active{color:var(--button-color-active);background:var(--button-bg-color-active);border-color:var(--border-color-active)}._button_12tq3_2:focus{box-shadow:0 0 2px var(--sapphire-normal)}._button_12tq3_2._clear_12tq3_43:focus{box-shadow:none}._button_12tq3_2 svg{color:currentcolor;fill:currentcolor}._button_12tq3_2 svg path{color:currentcolor;fill:currentcolor}._xs_12tq3_55{--button-height: var(--button-height-xs);--button-font-size: var(--control-text-size-xs);--button-space: var(--control-space-xs);--button-gap: 4px;--button-border-radius: var(--button-border-radius-s)}._s_12tq3_63{--button-height: var(--button-height-s);--button-font-size: var(--control-text-size-s);--button-space: var(--control-space-s);--button-gap: 4px;--button-border-radius: var(--button-border-radius-s)}._m_12tq3_71{--button-height: var(--button-height-m);--button-font-size: var(--size-text-m);--button-space: var(--control-space-m);--button-gap: 8px;--button-border-radius: var(--button-border-radius-m)}._l_12tq3_79{--button-height: var(--button-height-l);--button-font-size: var(--size-text-m);--button-space: var(--control-space-l);--button-gap: 8px;--button-border-radius: var(--button-border-radius-l)}._xl_12tq3_87{--button-height: var(--button-height-xl);--button-space: var(--control-space-l);--button-gap: 8px;--button-border-radius: var(--button-border-radius-l);--button-font-size: var(--size-text-m);font-weight:var(--font-weight-text-medium)}._xxl_12tq3_96{--button-height: var(--button-height-xxl);--button-space: var(--control-space-xxl);--button-border-radius: var(--button-border-radius-l);--button-gap: 8px;font-weight:var(--font-weight-text-medium);--button-font-size: var(--size-text-m)}._m-s_12tq3_105{--button-height: var(--button-height-ms);font-weight:var(--font-weight-text-regular);border-radius:var(--control-radius-xs)!important;--button-gap: var(--space-2xs);--button-font-size: var(--size-text-s)}._default-button_12tq3_113{border-radius:var(--control-radius)}._default-button_12tq3_113._primary-sapphire_12tq3_116{--button-bg-color: var(--sapphire-normal);--button-color-hover: var(--light-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--sapphire-active);--button-bg-color-hover: var(--sapphire-hover);--button-color: var(--light-text);--button-border: transparent}._default-button_12tq3_113._primary-citrine_12tq3_125{--button-bg-color: var(--citrine-normal);--button-color-hover: var(--light-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--citrine-active);--button-bg-color-hover: var(--citrine-hover);--button-color: var(--light-text);--button-border: transparent}._default-button_12tq3_113._secondary-asphalt_12tq3_134{--button-bg-color: var(--asphalt-normal);--button-color-hover: var(--light-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--asphalt-active);--button-bg-color-hover: var(--asphalt-hover);--button-color: var(--light-text);--button-border: transparent}._default-button_12tq3_113._secondary-gray_12tq3_143{--button-bg-color: var(--gray-normal);--button-color-hover: var(--counter-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--gray-active);--button-bg-color-hover: var(--gray-hover);--button-color: var(--dark-text);--button-border: transparent}._default-button_12tq3_113._secondary-white_12tq3_152{--button-bg-color: var(--white-normal);--button-color-hover: var(--counter-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--white-active);--button-bg-color-hover: var(--white);--button-color: var(--dark-text);--button-border: transparent}._default-button_12tq3_113._secondary-red_12tq3_161{--button-bg-color: var(--red-normal);--button-color-hover: var(--light-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--red-active);--button-bg-color-hover: var(--red-hover);--button-color: var(--light-text);--button-border: transparent}._round-button_12tq3_171{--button-border-radius-l: 24px;--button-border-radius-m: 20px;--button-border-radius-s: 16px;--button-border-radius-xs: 12px;border-radius:var(--button-border-radius)}._round-button_12tq3_171._black_12tq3_178{--button-bg-color: var(--asphalt-normal);--button-bg-color-hover: var(--asphalt-hover);--button-bg-color-active: var(--sapphire-normal);--button-bg-color-focus: var(--sapphire-normal);--button-color: var(--light-text);--button-color-hover: var(--light-text);--button-color-active: var(--light-text)}._round-button_12tq3_171._gray_12tq3_187{--button-bg-color: var(--gray-normal);--button-bg-color-hover: var(--gray-hover);--button-bg-color-active: var(--sapphire-normal);--button-bg-color-focus: var(--sapphire-normal);--button-color: var(--asphalt-normal);--button-color-hover: var(--asphalt-hover);--button-color-active: var(--light-text)}._round-button_12tq3_171._white_12tq3_196{--button-bg-color: var(--white-normal);--button-bg-color-hover: var(--white-hover);--button-bg-color-active: var(--sapphire-normal);--button-bg-color-focus: var(--sapphire-normal);--button-color: var(--asphalt-normal);--button-color-hover: var(--asphalt-hover);--button-color-active: var(--light-text)}._outline-button_12tq3_206{--button-bg-color: transparent;--button-bg-color-hover: transparent;--button-bg-color-active: transparent;--button-bg-color-focus: transparent;border:1px solid var(--border-color);border-radius:var(--control-radius)}._outline-button_12tq3_206._outline-asphalt_12tq3_214{--border-color: var(--disabled-color);--button-color: var(--black-80);--border-color-hover: var(--black-80);--button-color-hover: var(--black-80);--border-color-active: var(--black-100);--button-color-active: var(--black-100)}._outline-button_12tq3_206._outline-gray_12tq3_222{--border-color: var(--black-5);--button-color: var(--black-5);--border-color-hover: var(--black-5);--button-color-hover: var(--counter-text);--border-color-active: var(--black-80);--button-color-active: var(--white);--button-bg-color-active: var(--black-80)}._outline-button_12tq3_206._outline-white_12tq3_231{--border-color: var(--white);--button-color: var(--white);--border-color-hover: var(--white);--button-color-hover: var(--counter-text);--border-color-active: var(--black-80);--button-color-active: var(--white);--button-bg-color-active: var(--black-80)}._outline-button_12tq3_206._outline-red_12tq3_240{--border-color: var(--error-normal);--button-color: var(--error-normal);--border-color-hover: var(--red-hover);--button-color-hover: var(--red-hover);--border-color-active: var(--red-active);--button-color-active: var(--white);--button-bg-color-active: var(--red-active)}._full_12tq3_250{display:flex;justify-content:center;width:100%}._disabled_12tq3_256{--button-cursor: not-allowed;color:var(--light-text);background-color:var(--disabled)}._disabled_12tq3_256:hover,._disabled_12tq3_256:active,._disabled_12tq3_256:focus{color:var(--light-text);background-color:var(--disabled);box-shadow:none}._disabled_12tq3_256._outline-button_12tq3_206{color:var(--disabled);background-color:transparent;border:1px solid var(--disabled)}._icon-button_12tq3_272{justify-content:center;min-width:var(--button-height);padding:0}
|
@@ -0,0 +1 @@
|
|
1
|
+
._toast-list_1bc98_2{position:fixed;z-index:50;width:100vw;max-width:515px;max-height:100vh;padding:var(--space-m);overflow-x:hidden;overflow-y:auto;overflow:hidden auto}._toast-list_1bc98_2::-webkit-scrollbar{display:none}._toast-list_1bc98_2::-webkit-scrollbar-track{background-color:transparent}._toast-list_1bc98_2::-webkit-scrollbar-thumb{background-color:transparent}._toast-list_1bc98_2::-webkit-scrollbar-thumb:window-inactive{background-color:transparent}._toast-wrapper_1bc98_24{position:relative;display:flex;flex-direction:column;padding:var(--space-m);background-color:var(--toast-bg-color);border-radius:var(--control-radius);transition:all .3s ease}._toast-wrapper_1bc98_24:not(:last-child){margin-bottom:var(--space-s)}._title_1bc98_37:not(:last-child){margin-bottom:var(--space-xs)}._timer_1bc98_41{display:flex;justify-content:space-between}._timer_1bc98_41:not(:last-child){margin-bottom:var(--space-2xs)}._timer-title_1bc98_49,._title_1bc98_37,._seconds_1bc98_51{color:var(--black-60);font-size:var(--size-text-m);line-height:var(--line-height-text-xxs)}._seconds_1bc98_51{color:var(--black-100)}._message_1bc98_61{font-size:var(--size-text-l);line-height:var(--line-height-text-s1)}._message_1bc98_61:not(:last-child){margin-bottom:var(--space-xs)}._progress_1bc98_69{position:relative;width:100%;height:8px;overflow:hidden;background-color:var(--black-5);border-radius:var(--control-radius-xs)}._progress-bar_1bc98_78{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;background-color:var(--progress-bg-color);border-radius:var(--control-radius-xs)}._close-button_1bc98_89{position:absolute;top:var(--space-s);right:var(--space-s)}._slot_1bc98_95{margin-top:var(--space-xl)}._default_1bc98_99{--toast-bg-color: var(--white);--progress-bg-color: var(--sapphire-100)}._success_1bc98_104{--toast-bg-color: var(--success-bg-active);--progress-bg-color: var(--success-normal)}._alarm_1bc98_109{--toast-bg-color: var(--alarm-bg-active);--progress-bg-color: var(--alarm-normal)}._error_1bc98_114{--toast-bg-color: var(--error-bg-active);--progress-bg-color: var(--error-normal)}._top-right_1bc98_119{top:0;right:0;transition:all .3s ease}._top-center_1bc98_125{top:0;right:50%;transform:translate(50%)}._top-left_1bc98_131{top:0;left:0}._bottom-left_1bc98_136{bottom:0;left:0}._bottom-center_1bc98_141{right:50%;bottom:0;transform:translate(50%)}._bottom-right_1bc98_147{right:0;bottom:0}@keyframes _toast-in_1bc98_179{0%{transform:var(--elm-translate);opacity:.7}80%{transform:translate(0);opacity:.7}to{transform:scale(1);opacity:1}}@keyframes _toast-out_1bc98_183{0%{opacity:1}20%{transform:translate(0);opacity:.7}to{transform:var(--elm-translate);opacity:.7}}._toast-in_1bc98_179{animation:_toast-in_1bc98_179 .3s both}._toast-out_1bc98_183{animation:_toast-out_1bc98_183 .8s both}
|
@@ -3,19 +3,19 @@ import { c as classNames } from "../../index-CweZ_OcN.js";
|
|
3
3
|
import { forwardRef } from "react";
|
4
4
|
import { EButtonVariantDefault, EButtonForm } from "./constants.js";
|
5
5
|
import { Icon } from "../../icons/Icon.js";
|
6
|
-
import '../../assets/Button.css';const button = "
|
7
|
-
const clear = "
|
8
|
-
const xs = "
|
9
|
-
const s = "
|
10
|
-
const m = "
|
11
|
-
const l = "
|
12
|
-
const xl = "
|
13
|
-
const xxl = "
|
14
|
-
const black = "
|
15
|
-
const gray = "
|
16
|
-
const white = "
|
17
|
-
const full = "
|
18
|
-
const disabled = "
|
6
|
+
import '../../assets/Button.css';const button = "_button_12tq3_2";
|
7
|
+
const clear = "_clear_12tq3_43";
|
8
|
+
const xs = "_xs_12tq3_55";
|
9
|
+
const s = "_s_12tq3_63";
|
10
|
+
const m = "_m_12tq3_71";
|
11
|
+
const l = "_l_12tq3_79";
|
12
|
+
const xl = "_xl_12tq3_87";
|
13
|
+
const xxl = "_xxl_12tq3_96";
|
14
|
+
const black = "_black_12tq3_178";
|
15
|
+
const gray = "_gray_12tq3_187";
|
16
|
+
const white = "_white_12tq3_196";
|
17
|
+
const full = "_full_12tq3_250";
|
18
|
+
const disabled = "_disabled_12tq3_256";
|
19
19
|
const cls = {
|
20
20
|
button,
|
21
21
|
clear,
|
@@ -25,26 +25,26 @@ const cls = {
|
|
25
25
|
l,
|
26
26
|
xl,
|
27
27
|
xxl,
|
28
|
-
"m-s": "_m-
|
29
|
-
"default-button": "_default-
|
30
|
-
"primary-sapphire": "_primary-
|
31
|
-
"primary-citrine": "_primary-
|
32
|
-
"secondary-asphalt": "_secondary-
|
33
|
-
"secondary-gray": "_secondary-
|
34
|
-
"secondary-white": "_secondary-
|
35
|
-
"secondary-red": "_secondary-
|
36
|
-
"round-button": "_round-
|
28
|
+
"m-s": "_m-s_12tq3_105",
|
29
|
+
"default-button": "_default-button_12tq3_113",
|
30
|
+
"primary-sapphire": "_primary-sapphire_12tq3_116",
|
31
|
+
"primary-citrine": "_primary-citrine_12tq3_125",
|
32
|
+
"secondary-asphalt": "_secondary-asphalt_12tq3_134",
|
33
|
+
"secondary-gray": "_secondary-gray_12tq3_143",
|
34
|
+
"secondary-white": "_secondary-white_12tq3_152",
|
35
|
+
"secondary-red": "_secondary-red_12tq3_161",
|
36
|
+
"round-button": "_round-button_12tq3_171",
|
37
37
|
black,
|
38
38
|
gray,
|
39
39
|
white,
|
40
|
-
"outline-button": "_outline-
|
41
|
-
"outline-asphalt": "_outline-
|
42
|
-
"outline-gray": "_outline-
|
43
|
-
"outline-white": "_outline-
|
44
|
-
"outline-red": "_outline-
|
40
|
+
"outline-button": "_outline-button_12tq3_206",
|
41
|
+
"outline-asphalt": "_outline-asphalt_12tq3_214",
|
42
|
+
"outline-gray": "_outline-gray_12tq3_222",
|
43
|
+
"outline-white": "_outline-white_12tq3_231",
|
44
|
+
"outline-red": "_outline-red_12tq3_240",
|
45
45
|
full,
|
46
46
|
disabled,
|
47
|
-
"icon-button": "_icon-
|
47
|
+
"icon-button": "_icon-button_12tq3_272"
|
48
48
|
};
|
49
49
|
const Button = forwardRef(
|
50
50
|
(props, ref) => {
|
@@ -73,8 +73,8 @@ const Button = forwardRef(
|
|
73
73
|
[cls["icon-button"]]: isIconButton
|
74
74
|
};
|
75
75
|
const buttonClassNames = classNames(
|
76
|
-
cls.button,
|
77
76
|
className,
|
77
|
+
cls.button,
|
78
78
|
mods,
|
79
79
|
clear2 ? [] : [cls[form ?? ""], cls[size]]
|
80
80
|
);
|
@@ -5,10 +5,6 @@ type TProps = ComponentProps<'img'> & {
|
|
5
5
|
* Дополнительный класс к компоненту
|
6
6
|
*/
|
7
7
|
className?: string;
|
8
|
-
/**
|
9
|
-
* Дополнительный класс к контейнеру picture
|
10
|
-
*/
|
11
|
-
pictureClassName?: string;
|
12
8
|
/**
|
13
9
|
* Компонент, который буде показываться, пока идет загрузка изображения
|
14
10
|
*/
|
@@ -17,14 +13,6 @@ type TProps = ComponentProps<'img'> & {
|
|
17
13
|
* Компонент, который буде показываться, если произошла ошибка при загрузке изображения
|
18
14
|
*/
|
19
15
|
errorFallback?: ReactElement;
|
20
|
-
/**
|
21
|
-
* Изображение для десктопной версии
|
22
|
-
*/
|
23
|
-
desktopImage?: string;
|
24
|
-
/**
|
25
|
-
* Изображение для мобильной версии
|
26
|
-
*/
|
27
|
-
mobileImage?: string;
|
28
16
|
};
|
29
17
|
/**
|
30
18
|
* Компонент для отображения изображения с возможность показа загрузки и ошибки
|
@@ -1,23 +1,10 @@
|
|
1
|
-
import {
|
2
|
-
import { c as classNames } from "../../index-CweZ_OcN.js";
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
3
2
|
import { memo, useState, useLayoutEffect } from "react";
|
4
|
-
import { EMediaQuery, EMinMediaQuery } from "../../hooks/useMediaQuery/constants.js";
|
5
|
-
import '../../assets/Image.css';const picture = "_picture_9zemz_2";
|
6
|
-
const image = "_image_9zemz_3";
|
7
|
-
const loading = "_loading_9zemz_9";
|
8
|
-
const cls = {
|
9
|
-
picture,
|
10
|
-
image,
|
11
|
-
loading
|
12
|
-
};
|
13
3
|
const AppImage = memo((props) => {
|
14
4
|
const {
|
15
5
|
className,
|
16
6
|
src,
|
17
7
|
alt = "image",
|
18
|
-
desktopImage,
|
19
|
-
mobileImage,
|
20
|
-
pictureClassName,
|
21
8
|
errorFallback,
|
22
9
|
fallback,
|
23
10
|
...otherProps
|
@@ -26,7 +13,7 @@ const AppImage = memo((props) => {
|
|
26
13
|
const [hasError, setHasError] = useState(false);
|
27
14
|
useLayoutEffect(() => {
|
28
15
|
const img = new Image();
|
29
|
-
img.src = src ??
|
16
|
+
img.src = src ?? "";
|
30
17
|
img.onload = () => {
|
31
18
|
setIsLoading(false);
|
32
19
|
};
|
@@ -34,40 +21,26 @@ const AppImage = memo((props) => {
|
|
34
21
|
setIsLoading(false);
|
35
22
|
setHasError(true);
|
36
23
|
};
|
37
|
-
}, [src
|
24
|
+
}, [src]);
|
38
25
|
if (isLoading && fallback) {
|
39
26
|
return fallback;
|
40
27
|
}
|
41
28
|
if (hasError && errorFallback) {
|
42
29
|
return errorFallback;
|
43
30
|
}
|
44
|
-
return /* @__PURE__ */
|
45
|
-
"
|
31
|
+
return /* @__PURE__ */ jsx(
|
32
|
+
"img",
|
46
33
|
{
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
style: {
|
58
|
-
display: "block",
|
59
|
-
filter: `${isLoading ? "blur(20px)" : ""}`,
|
60
|
-
transition: ".3s filter ease"
|
61
|
-
},
|
62
|
-
className: classNames(cls.image, className, {
|
63
|
-
[cls.loading]: isLoading
|
64
|
-
}),
|
65
|
-
loading: "lazy",
|
66
|
-
src,
|
67
|
-
alt
|
68
|
-
}
|
69
|
-
)
|
70
|
-
]
|
34
|
+
...otherProps,
|
35
|
+
style: {
|
36
|
+
display: "block",
|
37
|
+
filter: `${isLoading ? "blur(20px)" : ""}`,
|
38
|
+
transition: ".3s filter ease"
|
39
|
+
},
|
40
|
+
className,
|
41
|
+
loading: "lazy",
|
42
|
+
src,
|
43
|
+
alt
|
71
44
|
}
|
72
45
|
);
|
73
46
|
});
|
@@ -323,7 +323,7 @@ const Slider = ({
|
|
323
323
|
swiperClassName,
|
324
324
|
slideClassName,
|
325
325
|
imageClassName,
|
326
|
-
delay =
|
326
|
+
delay = 3e3
|
327
327
|
}) => {
|
328
328
|
const progressBar = useRef(null);
|
329
329
|
const swiperRef = useRef(null);
|
@@ -401,9 +401,7 @@ const Slider = ({
|
|
401
401
|
AppImage,
|
402
402
|
{
|
403
403
|
className: classNames(cls.image, imageClassName),
|
404
|
-
src: img.image
|
405
|
-
desktopImage: img.imageDesktop,
|
406
|
-
mobileImage: img.imageMobile
|
404
|
+
src: img.image
|
407
405
|
}
|
408
406
|
)
|
409
407
|
},
|
@@ -20,5 +20,5 @@ type TProps = {
|
|
20
20
|
/**
|
21
21
|
* Компонент Timer отображает таймер с отсчетом времени в минутах и секундах.
|
22
22
|
*/
|
23
|
-
export declare const Timer: ({ expiryTimestamp, autoStart, onTimerEnd, className }: TProps) => import("react/jsx-runtime").JSX.Element
|
23
|
+
export declare const Timer: import('react').MemoExoticComponent<({ expiryTimestamp, autoStart, onTimerEnd, className }: TProps) => import("react/jsx-runtime").JSX.Element>;
|
24
24
|
export {};
|
@@ -1,29 +1,27 @@
|
|
1
1
|
import { jsxs } from "react/jsx-runtime";
|
2
2
|
import { c as classNames } from "../../index-CweZ_OcN.js";
|
3
|
+
import { memo } from "react";
|
3
4
|
import { useTimer } from "../../hooks/useTimer/index.js";
|
4
5
|
import '../../assets/Timer.css';const timer = "_timer_llwad_3";
|
5
6
|
const cls = {
|
6
7
|
timer
|
7
8
|
};
|
8
|
-
const Timer = (
|
9
|
-
expiryTimestamp,
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
formattedSeconds
|
25
|
-
] });
|
26
|
-
};
|
9
|
+
const Timer = memo(
|
10
|
+
({ expiryTimestamp, autoStart = false, onTimerEnd, className }) => {
|
11
|
+
const { minutes, seconds } = useTimer({
|
12
|
+
expiryTimestamp,
|
13
|
+
onExpire: onTimerEnd,
|
14
|
+
autoStart
|
15
|
+
});
|
16
|
+
const formattedMinutes = String(minutes).padStart(2, "0");
|
17
|
+
const formattedSeconds = String(seconds).padStart(2, "0");
|
18
|
+
return /* @__PURE__ */ jsxs("div", { className: classNames(cls.timer, className), children: [
|
19
|
+
formattedMinutes,
|
20
|
+
":",
|
21
|
+
formattedSeconds
|
22
|
+
] });
|
23
|
+
}
|
24
|
+
);
|
27
25
|
export {
|
28
26
|
Timer
|
29
27
|
};
|
@@ -0,0 +1,54 @@
|
|
1
|
+
import { ReactNode, RefObject } from 'react';
|
2
|
+
import { EToastVariant, EToastPosition } from './constants';
|
3
|
+
|
4
|
+
export type TProps = {
|
5
|
+
/**
|
6
|
+
* Идентификатор уведомления.
|
7
|
+
*/
|
8
|
+
id: string;
|
9
|
+
/**
|
10
|
+
* Вариант уведомления.
|
11
|
+
*/
|
12
|
+
variant?: EToastVariant | `${EToastVariant}`;
|
13
|
+
/**
|
14
|
+
* Сообщение уведомления.
|
15
|
+
*/
|
16
|
+
message: ReactNode;
|
17
|
+
/**
|
18
|
+
* Заголовок уведомления.
|
19
|
+
*/
|
20
|
+
title: string;
|
21
|
+
/**
|
22
|
+
* Длительность уведомления.
|
23
|
+
*/
|
24
|
+
duration?: number;
|
25
|
+
/**
|
26
|
+
* Позиция уведомления.
|
27
|
+
*/
|
28
|
+
position?: EToastPosition | `${EToastPosition}`;
|
29
|
+
/**
|
30
|
+
* Флаг, указывающий на автоматическое закрытие уведомления.
|
31
|
+
*/
|
32
|
+
autoClose?: boolean;
|
33
|
+
/**
|
34
|
+
* Флаг, указывающий на необходимость таймера.
|
35
|
+
*/
|
36
|
+
needTimer?: boolean;
|
37
|
+
/**
|
38
|
+
* Флаг, указывающий на необходимость индикатора прогресса.
|
39
|
+
*/
|
40
|
+
needProgress?: boolean;
|
41
|
+
/**
|
42
|
+
* Флаг, указывающий на необходимость кнопки закрытия.
|
43
|
+
*/
|
44
|
+
needCloseButton?: boolean;
|
45
|
+
/**
|
46
|
+
* Функция обратного вызова, вызываемая при удалении уведомления.
|
47
|
+
*/
|
48
|
+
onToastRemove?: (toastId: string, ref: RefObject<HTMLDivElement>) => void;
|
49
|
+
/**
|
50
|
+
* Слот уведомления.
|
51
|
+
*/
|
52
|
+
slot?: ReactNode;
|
53
|
+
};
|
54
|
+
export declare const Toast: import('react').MemoExoticComponent<({ id, title, message, position, variant, duration, autoClose, needProgress, needTimer, needCloseButton, onToastRemove, slot }: TProps) => import("react/jsx-runtime").JSX.Element>;
|
@@ -0,0 +1,73 @@
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
2
|
+
import { c as classNames } from "../../index-CweZ_OcN.js";
|
3
|
+
import { memo, useRef } from "react";
|
4
|
+
import { ANIMATION_VARIABLES_MAP, EToastPosition, EToastVariant, DEFAULT_TOAST_DURATION } from "./constants.js";
|
5
|
+
import { c as cls, P as ProgressBar } from "../../ProgressBar-BekX41HR.js";
|
6
|
+
import { useTimer } from "../../hooks/useTimer/index.js";
|
7
|
+
import { Button } from "../Button/Button.js";
|
8
|
+
const Toast = memo(
|
9
|
+
({
|
10
|
+
id,
|
11
|
+
title = "",
|
12
|
+
message,
|
13
|
+
position = EToastPosition.TOP_RIGHT,
|
14
|
+
variant = EToastVariant.DEFAULT,
|
15
|
+
duration = DEFAULT_TOAST_DURATION,
|
16
|
+
autoClose = true,
|
17
|
+
needProgress = true,
|
18
|
+
needTimer = true,
|
19
|
+
needCloseButton = true,
|
20
|
+
onToastRemove,
|
21
|
+
slot
|
22
|
+
}) => {
|
23
|
+
const wrapperRef = useRef(null);
|
24
|
+
const { seconds } = useTimer({
|
25
|
+
expiryTimestamp: Date.now() + duration,
|
26
|
+
autoStart: needTimer,
|
27
|
+
onExpire: autoClose ? () => onToastRemove == null ? void 0 : onToastRemove(id, wrapperRef) : void 0
|
28
|
+
});
|
29
|
+
return /* @__PURE__ */ jsxs(
|
30
|
+
"div",
|
31
|
+
{
|
32
|
+
style: {
|
33
|
+
["--elm-translate"]: ANIMATION_VARIABLES_MAP[position]
|
34
|
+
},
|
35
|
+
className: classNames(
|
36
|
+
cls["toast-in"],
|
37
|
+
cls["toast-wrapper"],
|
38
|
+
cls[variant]
|
39
|
+
),
|
40
|
+
ref: wrapperRef,
|
41
|
+
role: "alert",
|
42
|
+
children: [
|
43
|
+
title && /* @__PURE__ */ jsx("h3", { className: cls.title, children: title }),
|
44
|
+
message && /* @__PURE__ */ jsx("div", { className: cls.message, children: message }),
|
45
|
+
(needTimer || needProgress) && /* @__PURE__ */ jsxs("div", { children: [
|
46
|
+
!!duration && needTimer && /* @__PURE__ */ jsxs("div", { className: cls.timer, children: [
|
47
|
+
/* @__PURE__ */ jsx("h4", { className: cls["timer-title"], children: "Осталось" }),
|
48
|
+
/* @__PURE__ */ jsxs("p", { className: cls.seconds, children: [
|
49
|
+
seconds,
|
50
|
+
" сек"
|
51
|
+
] })
|
52
|
+
] }),
|
53
|
+
!!duration && needProgress && /* @__PURE__ */ jsx(ProgressBar, { variant, duration })
|
54
|
+
] }),
|
55
|
+
needCloseButton && /* @__PURE__ */ jsx(
|
56
|
+
Button,
|
57
|
+
{
|
58
|
+
onClick: () => onToastRemove == null ? void 0 : onToastRemove(id, wrapperRef),
|
59
|
+
clear: true,
|
60
|
+
isIconButton: true,
|
61
|
+
className: cls["close-button"],
|
62
|
+
iconName: "Close24px"
|
63
|
+
}
|
64
|
+
),
|
65
|
+
slot && /* @__PURE__ */ jsx("div", { className: cls.slot, children: slot })
|
66
|
+
]
|
67
|
+
}
|
68
|
+
);
|
69
|
+
}
|
70
|
+
);
|
71
|
+
export {
|
72
|
+
Toast
|
73
|
+
};
|
@@ -0,0 +1,10 @@
|
|
1
|
+
import { EToastPosition } from './constants';
|
2
|
+
import { TProps as TToastProps } from './Toast';
|
3
|
+
|
4
|
+
type TProps = {
|
5
|
+
position?: EToastPosition | `${EToastPosition}`;
|
6
|
+
toasts: TToastProps[];
|
7
|
+
onToastRemove?: (toastId: string, ref: React.RefObject<HTMLDivElement>) => void;
|
8
|
+
};
|
9
|
+
export declare const ToastList: import('react').MemoExoticComponent<({ toasts, position, onToastRemove }: TProps) => import("react/jsx-runtime").JSX.Element | null>;
|
10
|
+
export {};
|
@@ -0,0 +1,50 @@
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
2
|
+
import { c as classNames } from "../../index-CweZ_OcN.js";
|
3
|
+
import { memo, useRef, useCallback, useEffect } from "react";
|
4
|
+
import { EToastPosition } from "./constants.js";
|
5
|
+
import { c as cls } from "../../ProgressBar-BekX41HR.js";
|
6
|
+
import { Toast } from "./Toast.js";
|
7
|
+
const ToastList = memo(
|
8
|
+
({ toasts, position = EToastPosition.TOP_RIGHT, onToastRemove }) => {
|
9
|
+
const listRef = useRef(null);
|
10
|
+
const handleScrolling = useCallback(
|
11
|
+
(el) => {
|
12
|
+
const isTopPosition = [
|
13
|
+
EToastPosition.TOP_LEFT,
|
14
|
+
EToastPosition.TOP_RIGHT
|
15
|
+
].includes(position);
|
16
|
+
if (isTopPosition) {
|
17
|
+
el == null ? void 0 : el.scrollTo(0, el.scrollHeight);
|
18
|
+
} else {
|
19
|
+
el == null ? void 0 : el.scrollTo(0, 0);
|
20
|
+
}
|
21
|
+
},
|
22
|
+
[position]
|
23
|
+
);
|
24
|
+
useEffect(() => {
|
25
|
+
listRef.current && handleScrolling(listRef.current);
|
26
|
+
}, [handleScrolling, toasts]);
|
27
|
+
if (!toasts.length) {
|
28
|
+
return null;
|
29
|
+
}
|
30
|
+
return /* @__PURE__ */ jsx(
|
31
|
+
"div",
|
32
|
+
{
|
33
|
+
ref: listRef,
|
34
|
+
className: classNames(cls["toast-list"], cls[position]),
|
35
|
+
children: toasts.map((toast) => /* @__PURE__ */ jsx(
|
36
|
+
Toast,
|
37
|
+
{
|
38
|
+
position,
|
39
|
+
onToastRemove,
|
40
|
+
...toast
|
41
|
+
},
|
42
|
+
toast.id
|
43
|
+
))
|
44
|
+
}
|
45
|
+
);
|
46
|
+
}
|
47
|
+
);
|
48
|
+
export {
|
49
|
+
ToastList
|
50
|
+
};
|
@@ -0,0 +1,46 @@
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
2
|
+
import { useReducer, useCallback, useMemo } from "react";
|
3
|
+
import { EToastVariant } from "./constants.js";
|
4
|
+
import { ToastContext } from "./hooks.js";
|
5
|
+
import { reducer, initialState, actionCreators } from "./store.js";
|
6
|
+
import { c as cls } from "../../ProgressBar-BekX41HR.js";
|
7
|
+
import { ToastList } from "./ToastList.js";
|
8
|
+
const ToastProvider = ({ children }) => {
|
9
|
+
const [toasts, dispatch] = useReducer(reducer, initialState);
|
10
|
+
const handleToastAdd = useCallback((toast2) => {
|
11
|
+
dispatch(actionCreators.setToasts(toast2));
|
12
|
+
}, []);
|
13
|
+
const toast = useMemo(
|
14
|
+
() => ({
|
15
|
+
[EToastVariant.DEFAULT]: (toast2) => handleToastAdd({ variant: EToastVariant.DEFAULT, ...toast2 }),
|
16
|
+
[EToastVariant.SUCCESS]: (toast2) => handleToastAdd({ variant: EToastVariant.SUCCESS, ...toast2 }),
|
17
|
+
[EToastVariant.ALARM]: (toast2) => handleToastAdd({ variant: EToastVariant.ALARM, ...toast2 }),
|
18
|
+
[EToastVariant.ERROR]: (toast2) => handleToastAdd({ variant: EToastVariant.ERROR, ...toast2 })
|
19
|
+
}),
|
20
|
+
[handleToastAdd]
|
21
|
+
);
|
22
|
+
const handleToastRemove = useCallback(
|
23
|
+
(toastId, ref) => {
|
24
|
+
var _a, _b;
|
25
|
+
(_a = ref == null ? void 0 : ref.current) == null ? void 0 : _a.classList.add(cls["toast-out"]);
|
26
|
+
(_b = ref == null ? void 0 : ref.current) == null ? void 0 : _b.addEventListener("animationend", () => {
|
27
|
+
dispatch(actionCreators.removeToast(toastId));
|
28
|
+
});
|
29
|
+
},
|
30
|
+
[]
|
31
|
+
);
|
32
|
+
return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: toast, children: [
|
33
|
+
children,
|
34
|
+
/* @__PURE__ */ jsx(
|
35
|
+
ToastList,
|
36
|
+
{
|
37
|
+
toasts: toasts.toasts,
|
38
|
+
onToastRemove: handleToastRemove,
|
39
|
+
position: toasts.position
|
40
|
+
}
|
41
|
+
)
|
42
|
+
] });
|
43
|
+
};
|
44
|
+
export {
|
45
|
+
ToastProvider
|
46
|
+
};
|
@@ -0,0 +1,23 @@
|
|
1
|
+
export declare enum EToastVariant {
|
2
|
+
DEFAULT = "default",
|
3
|
+
ALARM = "alarm",
|
4
|
+
SUCCESS = "success",
|
5
|
+
ERROR = "error"
|
6
|
+
}
|
7
|
+
export declare enum EToastPosition {
|
8
|
+
TOP_LEFT = "top-left",
|
9
|
+
TOP_CENTER = "top-center",
|
10
|
+
TOP_RIGHT = "top-right",
|
11
|
+
BOTTOM_RIGHT = "bottom-right",
|
12
|
+
BOTTOM_CENTER = "bottom-center",
|
13
|
+
BOTTOM_LEFT = "bottom-left"
|
14
|
+
}
|
15
|
+
export declare const ANIMATION_VARIABLES_MAP: {
|
16
|
+
"top-right": string;
|
17
|
+
"top-center": string;
|
18
|
+
"top-left": string;
|
19
|
+
"bottom-left": string;
|
20
|
+
"bottom-center": string;
|
21
|
+
"bottom-right": string;
|
22
|
+
};
|
23
|
+
export declare const DEFAULT_TOAST_DURATION = 3000;
|
@@ -0,0 +1,49 @@
|
|
1
|
+
var EToastVariant = /* @__PURE__ */ ((EToastVariant2) => {
|
2
|
+
EToastVariant2["DEFAULT"] = "default";
|
3
|
+
EToastVariant2["ALARM"] = "alarm";
|
4
|
+
EToastVariant2["SUCCESS"] = "success";
|
5
|
+
EToastVariant2["ERROR"] = "error";
|
6
|
+
return EToastVariant2;
|
7
|
+
})(EToastVariant || {});
|
8
|
+
var EToastPosition = /* @__PURE__ */ ((EToastPosition2) => {
|
9
|
+
EToastPosition2["TOP_LEFT"] = "top-left";
|
10
|
+
EToastPosition2["TOP_CENTER"] = "top-center";
|
11
|
+
EToastPosition2["TOP_RIGHT"] = "top-right";
|
12
|
+
EToastPosition2["BOTTOM_RIGHT"] = "bottom-right";
|
13
|
+
EToastPosition2["BOTTOM_CENTER"] = "bottom-center";
|
14
|
+
EToastPosition2["BOTTOM_LEFT"] = "bottom-left";
|
15
|
+
return EToastPosition2;
|
16
|
+
})(EToastPosition || {});
|
17
|
+
const ANIMATION_VARIABLES_MAP = {
|
18
|
+
[
|
19
|
+
"top-right"
|
20
|
+
/* TOP_RIGHT */
|
21
|
+
]: "translateX(1000px)",
|
22
|
+
[
|
23
|
+
"top-center"
|
24
|
+
/* TOP_CENTER */
|
25
|
+
]: "translateY(-1300px)",
|
26
|
+
[
|
27
|
+
"top-left"
|
28
|
+
/* TOP_LEFT */
|
29
|
+
]: "translateX(-1000px)",
|
30
|
+
[
|
31
|
+
"bottom-left"
|
32
|
+
/* BOTTOM_LEFT */
|
33
|
+
]: "translateX(-1000px)",
|
34
|
+
[
|
35
|
+
"bottom-center"
|
36
|
+
/* BOTTOM_CENTER */
|
37
|
+
]: "translateY(1300px)",
|
38
|
+
[
|
39
|
+
"bottom-right"
|
40
|
+
/* BOTTOM_RIGHT */
|
41
|
+
]: "translateX(1000px)"
|
42
|
+
};
|
43
|
+
const DEFAULT_TOAST_DURATION = 3e3;
|
44
|
+
export {
|
45
|
+
ANIMATION_VARIABLES_MAP,
|
46
|
+
DEFAULT_TOAST_DURATION,
|
47
|
+
EToastPosition,
|
48
|
+
EToastVariant
|
49
|
+
};
|
@@ -0,0 +1,16 @@
|
|
1
|
+
import { createContext, useContext } from "react";
|
2
|
+
const ToastContext = createContext({
|
3
|
+
alarm: () => {
|
4
|
+
},
|
5
|
+
default: () => {
|
6
|
+
},
|
7
|
+
error: () => {
|
8
|
+
},
|
9
|
+
success: () => {
|
10
|
+
}
|
11
|
+
});
|
12
|
+
const useToast = () => useContext(ToastContext);
|
13
|
+
export {
|
14
|
+
ToastContext,
|
15
|
+
useToast
|
16
|
+
};
|
@@ -0,0 +1,29 @@
|
|
1
|
+
import { EToastPosition } from './constants';
|
2
|
+
import { TProps } from './Toast';
|
3
|
+
|
4
|
+
export type State = {
|
5
|
+
toasts: TProps[];
|
6
|
+
position: EToastPosition | `${EToastPosition}`;
|
7
|
+
};
|
8
|
+
export declare enum EToastsActions {
|
9
|
+
SET_TOASTS = "setToasts",
|
10
|
+
REMOVE_TOAST = "removeToast",
|
11
|
+
RESET = "reset"
|
12
|
+
}
|
13
|
+
export declare const actionCreators: {
|
14
|
+
setToasts: (payload: Omit<TProps, "id">) => {
|
15
|
+
readonly type: EToastsActions.SET_TOASTS;
|
16
|
+
readonly payload: Omit<TProps, "id">;
|
17
|
+
};
|
18
|
+
removeToast: (payload: string) => {
|
19
|
+
readonly type: EToastsActions.REMOVE_TOAST;
|
20
|
+
readonly payload: string;
|
21
|
+
};
|
22
|
+
reset: () => {
|
23
|
+
readonly type: EToastsActions.RESET;
|
24
|
+
};
|
25
|
+
};
|
26
|
+
type ActionTypes = ReturnType<typeof actionCreators.setToasts> | ReturnType<typeof actionCreators.removeToast> | ReturnType<typeof actionCreators.reset>;
|
27
|
+
export declare const initialState: State;
|
28
|
+
export declare const reducer: (state: State | undefined, action: ActionTypes) => State;
|
29
|
+
export {};
|
@@ -0,0 +1,50 @@
|
|
1
|
+
import { EToastPosition } from "./constants.js";
|
2
|
+
var EToastsActions = /* @__PURE__ */ ((EToastsActions2) => {
|
3
|
+
EToastsActions2["SET_TOASTS"] = "setToasts";
|
4
|
+
EToastsActions2["REMOVE_TOAST"] = "removeToast";
|
5
|
+
EToastsActions2["RESET"] = "reset";
|
6
|
+
return EToastsActions2;
|
7
|
+
})(EToastsActions || {});
|
8
|
+
const actionCreators = {
|
9
|
+
setToasts: (payload) => ({ type: "setToasts", payload }),
|
10
|
+
removeToast: (payload) => ({ type: "removeToast", payload }),
|
11
|
+
reset: () => ({
|
12
|
+
type: "reset"
|
13
|
+
/* RESET */
|
14
|
+
})
|
15
|
+
};
|
16
|
+
const initialState = {
|
17
|
+
toasts: [],
|
18
|
+
position: EToastPosition.TOP_RIGHT
|
19
|
+
};
|
20
|
+
const reducer = (state = initialState, action) => {
|
21
|
+
switch (action.type) {
|
22
|
+
case "setToasts":
|
23
|
+
return {
|
24
|
+
...state,
|
25
|
+
toasts: [
|
26
|
+
...state.toasts,
|
27
|
+
{ ...action.payload, id: `${Math.random() * 1e4}` }
|
28
|
+
],
|
29
|
+
position: action.payload.position && action.payload.position !== state.position ? action.payload.position : state.position
|
30
|
+
};
|
31
|
+
case "removeToast": {
|
32
|
+
return {
|
33
|
+
...state,
|
34
|
+
toasts: state.toasts.filter((t) => t.id !== action.payload)
|
35
|
+
};
|
36
|
+
}
|
37
|
+
case "reset": {
|
38
|
+
return initialState;
|
39
|
+
}
|
40
|
+
default: {
|
41
|
+
return state;
|
42
|
+
}
|
43
|
+
}
|
44
|
+
};
|
45
|
+
export {
|
46
|
+
EToastsActions,
|
47
|
+
actionCreators,
|
48
|
+
initialState,
|
49
|
+
reducer
|
50
|
+
};
|
@@ -0,0 +1 @@
|
|
1
|
+
|
@@ -32,6 +32,7 @@ export type { TAccordionProps, TAccordionItemProps } from './Accordion';
|
|
32
32
|
export { TabTrail, ETabTrailSize } from './TabTrail';
|
33
33
|
export type { TTabTrailProps, TCategoryTab } from './TabTrail';
|
34
34
|
export { Pagination } from './Pagination';
|
35
|
+
export { ToastProvider, useToast, EToastPosition, EToastVariant } from './Toasts';
|
35
36
|
export { UploaderPhotos } from './UploaderPhotos';
|
36
37
|
export type { TUploaderPhotos, TOnChangePhotosUpdate } from './UploaderPhotos';
|
37
38
|
export { Uploader } from './Uploader';
|
package/dist/components/index.js
CHANGED
@@ -32,6 +32,9 @@ import { AccordionItem } from "./Accordion/AccordionItem/AccordionItem.js";
|
|
32
32
|
import { TabTrail } from "./TabTrail/TabTrail.js";
|
33
33
|
import { ETabTrailSize } from "./TabTrail/constants.js";
|
34
34
|
import { Pagination } from "./Pagination/Pagination.js";
|
35
|
+
import { ToastProvider } from "./Toasts/ToastsProvider.js";
|
36
|
+
import { useToast } from "./Toasts/hooks.js";
|
37
|
+
import { EToastPosition, EToastVariant } from "./Toasts/constants.js";
|
35
38
|
import { UploaderPhotos } from "./UploaderPhotos/UploaderPhotos.js";
|
36
39
|
import { Uploader } from "./Uploader/Uploader.js";
|
37
40
|
export {
|
@@ -57,6 +60,8 @@ export {
|
|
57
60
|
ETabTrailSize,
|
58
61
|
ETagSize,
|
59
62
|
ETagType,
|
63
|
+
EToastPosition,
|
64
|
+
EToastVariant,
|
60
65
|
EVoteSize,
|
61
66
|
AppImage as Image,
|
62
67
|
Input,
|
@@ -75,9 +80,11 @@ export {
|
|
75
80
|
TabTrail,
|
76
81
|
Tag,
|
77
82
|
Timer,
|
83
|
+
ToastProvider,
|
78
84
|
Uploader,
|
79
85
|
UploaderPhotos,
|
80
86
|
Vote,
|
81
87
|
getMaskedInputPhoneValue,
|
82
|
-
getUnmaskedInputValue
|
88
|
+
getUnmaskedInputValue,
|
89
|
+
useToast
|
83
90
|
};
|
package/dist/hooks/index.d.ts
CHANGED
@@ -1,4 +1,5 @@
|
|
1
|
-
export { useMediaQuery, EMediaQuery
|
1
|
+
export { useMediaQuery, EMediaQuery } from './useMediaQuery';
|
2
2
|
export { useLockBodyScroll } from './useLockBodyScroll';
|
3
3
|
export { useInterval } from './useInterval';
|
4
4
|
export { useTimer } from './useTimer';
|
5
|
+
export { useCopyToClipboard } from './useCopyToClipboard';
|
package/dist/hooks/index.js
CHANGED
@@ -1,11 +1,12 @@
|
|
1
1
|
import { useMediaQuery } from "./useMediaQuery/useMediaQuery.js";
|
2
|
-
import { EMediaQuery
|
2
|
+
import { EMediaQuery } from "./useMediaQuery/constants.js";
|
3
3
|
import { useLockBodyScroll } from "./useLockBodyScroll/useLockBodyScroll.js";
|
4
4
|
import { useInterval } from "./useInterval/useInterval.js";
|
5
5
|
import { useTimer } from "./useTimer/index.js";
|
6
|
+
import { useCopyToClipboard } from "./useCopyToClipboard/useCopyToClipboard.js";
|
6
7
|
export {
|
7
8
|
EMediaQuery,
|
8
|
-
|
9
|
+
useCopyToClipboard,
|
9
10
|
useInterval,
|
10
11
|
useLockBodyScroll,
|
11
12
|
useMediaQuery,
|
@@ -0,0 +1 @@
|
|
1
|
+
export { useCopyToClipboard } from './useCopyToClipboard';
|
@@ -0,0 +1,23 @@
|
|
1
|
+
import { useState, useCallback } from "react";
|
2
|
+
function useCopyToClipboard() {
|
3
|
+
const [copiedText, setCopiedText] = useState(null);
|
4
|
+
const copy = useCallback(async (text) => {
|
5
|
+
if (!(navigator == null ? void 0 : navigator.clipboard)) {
|
6
|
+
console.warn("Clipboard not supported");
|
7
|
+
return false;
|
8
|
+
}
|
9
|
+
try {
|
10
|
+
await navigator.clipboard.writeText(text);
|
11
|
+
setCopiedText(text);
|
12
|
+
return true;
|
13
|
+
} catch (error) {
|
14
|
+
console.warn("Copy failed", error);
|
15
|
+
setCopiedText(null);
|
16
|
+
return false;
|
17
|
+
}
|
18
|
+
}, []);
|
19
|
+
return [copiedText, copy];
|
20
|
+
}
|
21
|
+
export {
|
22
|
+
useCopyToClipboard
|
23
|
+
};
|
@@ -8,13 +8,3 @@ export declare enum EMediaQuery {
|
|
8
8
|
XL = "(max-width: 1440px)",
|
9
9
|
XXL = "(max-width: 1920px)"
|
10
10
|
}
|
11
|
-
export declare enum EMinMediaQuery {
|
12
|
-
XSS = "(min-width: 375px)",
|
13
|
-
XS = "(min-width: 600px)",
|
14
|
-
XS1 = "(min-width: 767px)",
|
15
|
-
S = "(min-width: 768px)",
|
16
|
-
M = "(min-width: 960px)",
|
17
|
-
L = "(min-width: 1280px)",
|
18
|
-
XL = "(min-width: 1440px)",
|
19
|
-
XXL = "(min-width: 1920px)"
|
20
|
-
}
|
@@ -9,18 +9,6 @@ var EMediaQuery = /* @__PURE__ */ ((EMediaQuery2) => {
|
|
9
9
|
EMediaQuery2["XXL"] = "(max-width: 1920px)";
|
10
10
|
return EMediaQuery2;
|
11
11
|
})(EMediaQuery || {});
|
12
|
-
var EMinMediaQuery = /* @__PURE__ */ ((EMinMediaQuery2) => {
|
13
|
-
EMinMediaQuery2["XSS"] = "(min-width: 375px)";
|
14
|
-
EMinMediaQuery2["XS"] = "(min-width: 600px)";
|
15
|
-
EMinMediaQuery2["XS1"] = "(min-width: 767px)";
|
16
|
-
EMinMediaQuery2["S"] = "(min-width: 768px)";
|
17
|
-
EMinMediaQuery2["M"] = "(min-width: 960px)";
|
18
|
-
EMinMediaQuery2["L"] = "(min-width: 1280px)";
|
19
|
-
EMinMediaQuery2["XL"] = "(min-width: 1440px)";
|
20
|
-
EMinMediaQuery2["XXL"] = "(min-width: 1920px)";
|
21
|
-
return EMinMediaQuery2;
|
22
|
-
})(EMinMediaQuery || {});
|
23
12
|
export {
|
24
|
-
EMediaQuery
|
25
|
-
EMinMediaQuery
|
13
|
+
EMediaQuery
|
26
14
|
};
|
@@ -1,2 +1,2 @@
|
|
1
1
|
export { useMediaQuery } from './useMediaQuery';
|
2
|
-
export { EMediaQuery
|
2
|
+
export { EMediaQuery } from './constants';
|
@@ -6,8 +6,8 @@ export type TUseTimerProps = {
|
|
6
6
|
};
|
7
7
|
export declare function useTimer({ expiryTimestamp: expiry, onExpire, autoStart }: TUseTimerProps): {
|
8
8
|
start: () => void;
|
9
|
-
pause: () => void;
|
10
|
-
resume: () => void;
|
9
|
+
pause: (cb?: VoidFunction) => void;
|
10
|
+
resume: (cb?: VoidFunction) => void;
|
11
11
|
restart: (newExpiryTimestamp: number, newAutoStart?: boolean) => void;
|
12
12
|
isRunning: boolean;
|
13
13
|
totalSeconds: number;
|
@@ -27,8 +27,11 @@ function useTimer({
|
|
27
27
|
setIsRunning(false);
|
28
28
|
setDelay(null);
|
29
29
|
}, [onExpire]);
|
30
|
-
const pause = useCallback(() => {
|
31
|
-
setIsRunning(
|
30
|
+
const pause = useCallback((cb) => {
|
31
|
+
setIsRunning(() => {
|
32
|
+
cb == null ? void 0 : cb();
|
33
|
+
return false;
|
34
|
+
});
|
32
35
|
}, []);
|
33
36
|
const restart = useCallback(
|
34
37
|
(newExpiryTimestamp, newAutoStart = true) => {
|
@@ -40,11 +43,15 @@ function useTimer({
|
|
40
43
|
},
|
41
44
|
[]
|
42
45
|
);
|
43
|
-
const resume = useCallback(
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
46
|
+
const resume = useCallback(
|
47
|
+
(cb) => {
|
48
|
+
const time = /* @__PURE__ */ new Date();
|
49
|
+
time.setMilliseconds(time.getMilliseconds() + seconds * 1e3);
|
50
|
+
restart(time.getTime(), true);
|
51
|
+
cb == null ? void 0 : cb();
|
52
|
+
},
|
53
|
+
[seconds, restart]
|
54
|
+
);
|
48
55
|
const start = useCallback(() => {
|
49
56
|
if (didStart) {
|
50
57
|
setSeconds(Time.getSecondsFromExpiry(expiryTimestamp ?? 0, false));
|
package/dist/index.js
CHANGED
@@ -32,13 +32,17 @@ import { AccordionItem } from "./components/Accordion/AccordionItem/AccordionIte
|
|
32
32
|
import { TabTrail } from "./components/TabTrail/TabTrail.js";
|
33
33
|
import { ETabTrailSize } from "./components/TabTrail/constants.js";
|
34
34
|
import { Pagination } from "./components/Pagination/Pagination.js";
|
35
|
+
import { ToastProvider } from "./components/Toasts/ToastsProvider.js";
|
36
|
+
import { useToast } from "./components/Toasts/hooks.js";
|
37
|
+
import { EToastPosition, EToastVariant } from "./components/Toasts/constants.js";
|
35
38
|
import { UploaderPhotos } from "./components/UploaderPhotos/UploaderPhotos.js";
|
36
39
|
import { Uploader } from "./components/Uploader/Uploader.js";
|
37
40
|
import { useMediaQuery } from "./hooks/useMediaQuery/useMediaQuery.js";
|
38
|
-
import { EMediaQuery
|
41
|
+
import { EMediaQuery } from "./hooks/useMediaQuery/constants.js";
|
39
42
|
import { useLockBodyScroll } from "./hooks/useLockBodyScroll/useLockBodyScroll.js";
|
40
43
|
import { useInterval } from "./hooks/useInterval/useInterval.js";
|
41
44
|
import { useTimer } from "./hooks/useTimer/index.js";
|
45
|
+
import { useCopyToClipboard } from "./hooks/useCopyToClipboard/useCopyToClipboard.js";
|
42
46
|
import { Icon } from "./icons/Icon.js";
|
43
47
|
import { formating } from "./utils/index.js";
|
44
48
|
import './assets/index.css';export {
|
@@ -58,7 +62,6 @@ import './assets/index.css';export {
|
|
58
62
|
EInputVariant,
|
59
63
|
EMediaQuery,
|
60
64
|
EMergedButtonVariantRound,
|
61
|
-
EMinMediaQuery,
|
62
65
|
ESelectSearchSize,
|
63
66
|
EStepsPrimaryColor,
|
64
67
|
EStepsSecondaryColor,
|
@@ -66,6 +69,8 @@ import './assets/index.css';export {
|
|
66
69
|
ETabTrailSize,
|
67
70
|
ETagSize,
|
68
71
|
ETagType,
|
72
|
+
EToastPosition,
|
73
|
+
EToastVariant,
|
69
74
|
EVoteSize,
|
70
75
|
Icon,
|
71
76
|
AppImage as Image,
|
@@ -85,14 +90,17 @@ import './assets/index.css';export {
|
|
85
90
|
TabTrail,
|
86
91
|
Tag,
|
87
92
|
Timer,
|
93
|
+
ToastProvider,
|
88
94
|
Uploader,
|
89
95
|
UploaderPhotos,
|
90
96
|
Vote,
|
91
97
|
formating,
|
92
98
|
getMaskedInputPhoneValue,
|
93
99
|
getUnmaskedInputValue,
|
100
|
+
useCopyToClipboard,
|
94
101
|
useInterval,
|
95
102
|
useLockBodyScroll,
|
96
103
|
useMediaQuery,
|
97
|
-
useTimer
|
104
|
+
useTimer,
|
105
|
+
useToast
|
98
106
|
};
|
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "mimir-ui-kit",
|
3
3
|
"private": false,
|
4
|
-
"version": "1.
|
4
|
+
"version": "1.15.0",
|
5
5
|
"type": "module",
|
6
6
|
"exports": {
|
7
7
|
".": {
|
@@ -106,7 +106,9 @@
|
|
106
106
|
"peerDependencies": {
|
107
107
|
"@headlessui/react": "^2.1.2",
|
108
108
|
"react": "^18.3.1",
|
109
|
-
"react-dom": "^18.3.1"
|
109
|
+
"react-dom": "^18.3.1",
|
110
|
+
"swiper": "^11.1.5",
|
111
|
+
"react-window": "^1.8.10"
|
110
112
|
},
|
111
113
|
"husky": {
|
112
114
|
"hooks": {
|
@@ -121,10 +123,5 @@
|
|
121
123
|
"**/*.{css,scss}": [
|
122
124
|
"stylelint --fix --formatter verbose"
|
123
125
|
]
|
124
|
-
},
|
125
|
-
"dependencies": {
|
126
|
-
"react-window": "^1.8.10",
|
127
|
-
"swiper": "^11.1.5",
|
128
|
-
"use-clipboard-copy": "^0.2.0"
|
129
126
|
}
|
130
127
|
}
|
package/dist/assets/Image.css
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
._picture_9zemz_2,._image_9zemz_3{display:block;width:100%;height:auto}._loading_9zemz_9{filter:blur(20px);transition:.3s filter ease}
|