@alfalab/core-components-notification 7.5.10 → 8.0.0-snapshot-1393ffa
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/Component.js +11 -12
- package/Component.js.map +1 -0
- package/cssm/Component.js +9 -8
- package/cssm/Component.js.map +1 -0
- package/cssm/index.js +1 -0
- package/cssm/index.js.map +1 -0
- package/cssm/index.module.css +7 -27
- package/cssm/shared/index.js +3 -2
- package/cssm/shared/index.js.map +1 -0
- package/{Component.d.ts → cssm/src/Component.d.ts} +5 -8
- package/cssm/src/index.d.ts +1 -0
- package/cssm/src/shared/index.d.ts +1 -0
- package/cssm/src/utils/getNotificationTestIds.d.ts +4 -0
- package/cssm/src/utils/index.d.ts +2 -0
- package/cssm/utils/getNotificationTestIds.js +4 -19
- package/cssm/utils/getNotificationTestIds.js.map +1 -0
- package/cssm/utils/index.js +1 -0
- package/cssm/utils/index.js.map +1 -0
- package/esm/Component.js +3 -4
- package/esm/Component.js.map +1 -0
- package/esm/index.css +15 -36
- package/esm/index.js +1 -0
- package/esm/index.js.map +1 -0
- package/esm/index.module.css.js +6 -0
- package/esm/index.module.css.js.map +1 -0
- package/esm/shared/index.js +1 -0
- package/esm/shared/index.js.map +1 -0
- package/esm/{Component.d.ts → src/Component.d.ts} +5 -8
- package/esm/src/index.d.ts +1 -0
- package/esm/src/shared/index.d.ts +1 -0
- package/esm/src/utils/getNotificationTestIds.d.ts +4 -0
- package/esm/src/utils/index.d.ts +2 -0
- package/esm/utils/getNotificationTestIds.js +2 -17
- package/esm/utils/getNotificationTestIds.js.map +1 -0
- package/esm/utils/index.js +1 -0
- package/esm/utils/index.js.map +1 -0
- package/index.css +15 -36
- package/index.js +1 -0
- package/index.js.map +1 -0
- package/index.module.css.js +8 -0
- package/index.module.css.js.map +1 -0
- package/modern/Component.js +3 -4
- package/modern/Component.js.map +1 -0
- package/modern/index.css +15 -36
- package/modern/index.js +1 -0
- package/modern/index.js.map +1 -0
- package/modern/index.module.css.js +6 -0
- package/modern/index.module.css.js.map +1 -0
- package/modern/shared/index.js +1 -0
- package/modern/shared/index.js.map +1 -0
- package/{cssm → modern/src}/Component.d.ts +5 -8
- package/modern/src/index.d.ts +1 -0
- package/modern/src/shared/index.d.ts +1 -0
- package/modern/src/utils/getNotificationTestIds.d.ts +4 -0
- package/modern/src/utils/index.d.ts +2 -0
- package/modern/utils/getNotificationTestIds.js +2 -17
- package/modern/utils/getNotificationTestIds.js.map +1 -0
- package/modern/utils/index.js +1 -0
- package/modern/utils/index.js.map +1 -0
- package/moderncssm/Component.js +2 -1
- package/moderncssm/Component.js.map +1 -0
- package/moderncssm/index.js +1 -0
- package/moderncssm/index.js.map +1 -0
- package/moderncssm/index.module.css +1 -2
- package/moderncssm/shared/index.js +1 -0
- package/moderncssm/shared/index.js.map +1 -0
- package/{modern → moderncssm/src}/Component.d.ts +5 -8
- package/moderncssm/src/index.d.ts +1 -0
- package/moderncssm/src/shared/index.d.ts +1 -0
- package/moderncssm/src/utils/getNotificationTestIds.d.ts +4 -0
- package/moderncssm/src/utils/index.d.ts +2 -0
- package/moderncssm/utils/getNotificationTestIds.js +2 -17
- package/moderncssm/utils/getNotificationTestIds.js.map +1 -0
- package/moderncssm/utils/index.js +1 -0
- package/moderncssm/utils/index.js.map +1 -0
- package/package.json +8 -6
- package/shared/index.js +3 -2
- package/shared/index.js.map +1 -0
- package/src/Component.d.ts +86 -0
- package/src/Component.tsx +1 -1
- package/src/index.d.ts +1 -0
- package/src/shared/index.d.ts +1 -0
- package/src/utils/getNotificationTestIds.d.ts +4 -0
- package/src/utils/index.d.ts +2 -0
- package/utils/getNotificationTestIds.js +4 -19
- package/utils/getNotificationTestIds.js.map +1 -0
- package/utils/index.js +1 -0
- package/utils/index.js.map +1 -0
- package/browser-e5f2ef37.d.ts +0 -8
- package/cssm/browser-e5f2ef37.d.ts +0 -8
- package/cssm/fnUtils-edf8408d.d.ts +0 -16
- package/cssm/index.d.ts +0 -1
- package/cssm/shared/index.d.ts +0 -1
- package/cssm/useCustomWebkitScrollbar-e5f2ef37.d.ts +0 -2
- package/cssm/useIsMounted-edf8408d.d.ts +0 -3
- package/cssm/utils/getNotificationTestIds.d.ts +0 -5
- package/cssm/utils/index.d.ts +0 -4
- package/esm/browser-e5f2ef37.d.ts +0 -8
- package/esm/fnUtils-edf8408d.d.ts +0 -16
- package/esm/index.d.ts +0 -1
- package/esm/shared/index.d.ts +0 -1
- package/esm/useCustomWebkitScrollbar-e5f2ef37.d.ts +0 -2
- package/esm/useIsMounted-edf8408d.d.ts +0 -3
- package/esm/utils/getNotificationTestIds.d.ts +0 -5
- package/esm/utils/index.d.ts +0 -4
- package/fnUtils-edf8408d.d.ts +0 -16
- package/index.d.ts +0 -1
- package/modern/browser-e5f2ef37.d.ts +0 -8
- package/modern/fnUtils-edf8408d.d.ts +0 -16
- package/modern/index.d.ts +0 -1
- package/modern/shared/index.d.ts +0 -1
- package/modern/useCustomWebkitScrollbar-e5f2ef37.d.ts +0 -2
- package/modern/useIsMounted-edf8408d.d.ts +0 -3
- package/modern/utils/getNotificationTestIds.d.ts +0 -5
- package/modern/utils/index.d.ts +0 -4
- package/moderncssm/Component.d.ts +0 -89
- package/moderncssm/browser-e5f2ef37.d.ts +0 -8
- package/moderncssm/fnUtils-edf8408d.d.ts +0 -16
- package/moderncssm/index.d.ts +0 -1
- package/moderncssm/shared/index.d.ts +0 -1
- package/moderncssm/useCustomWebkitScrollbar-e5f2ef37.d.ts +0 -2
- package/moderncssm/useIsMounted-edf8408d.d.ts +0 -3
- package/moderncssm/utils/getNotificationTestIds.d.ts +0 -5
- package/moderncssm/utils/index.d.ts +0 -4
- package/shared/index.d.ts +0 -1
- package/useCustomWebkitScrollbar-e5f2ef37.d.ts +0 -2
- package/useIsMounted-edf8408d.d.ts +0 -3
- package/utils/getNotificationTestIds.d.ts +0 -5
- package/utils/index.d.ts +0 -4
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
import { ToastPlateDesktopProps } from "@alfalab/core-components-toast-plate/desktop";
|
|
5
|
-
type NotificationProps = ToastPlateDesktopProps & {
|
|
1
|
+
import React, { MouseEvent } from 'react';
|
|
2
|
+
import { ToastPlateDesktopProps } from '@alfalab/core-components-toast-plate/desktop';
|
|
3
|
+
export declare type NotificationProps = ToastPlateDesktopProps & {
|
|
6
4
|
/**
|
|
7
5
|
* Управление видимостью компонента
|
|
8
6
|
*/
|
|
@@ -44,7 +42,7 @@ type NotificationProps = ToastPlateDesktopProps & {
|
|
|
44
42
|
*/
|
|
45
43
|
onClickOutside?: (event?: MouseEvent<any>) => void;
|
|
46
44
|
};
|
|
47
|
-
declare const Notification: React.ForwardRefExoticComponent<ToastPlateDesktopProps & {
|
|
45
|
+
export declare const Notification: React.ForwardRefExoticComponent<ToastPlateDesktopProps & {
|
|
48
46
|
/**
|
|
49
47
|
* Управление видимостью компонента
|
|
50
48
|
*/
|
|
@@ -68,7 +66,7 @@ declare const Notification: React.ForwardRefExoticComponent<ToastPlateDesktopPro
|
|
|
68
66
|
/**
|
|
69
67
|
* Позиционирование компонента от верхнего или нижнего края экрана
|
|
70
68
|
*/
|
|
71
|
-
position?: "
|
|
69
|
+
position?: "top" | "bottom" | undefined;
|
|
72
70
|
/**
|
|
73
71
|
* Обработчик события истечения времени до закрытия компонента
|
|
74
72
|
*/
|
|
@@ -86,4 +84,3 @@ declare const Notification: React.ForwardRefExoticComponent<ToastPlateDesktopPro
|
|
|
86
84
|
*/
|
|
87
85
|
onClickOutside?: ((event?: MouseEvent<any>) => void) | undefined;
|
|
88
86
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
89
|
-
export { NotificationProps, Notification };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Component';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { getNotificationTestIds } from '../utils/getNotificationTestIds';
|
|
@@ -1,20 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { createContext } from 'react';
|
|
3
|
-
import '@alfalab/hooks';
|
|
4
|
-
|
|
5
|
-
function getDataTestId(dataTestId, element) {
|
|
6
|
-
var elementPart = element ? "-".concat(element.toLowerCase()) : '';
|
|
7
|
-
return dataTestId ? "".concat(dataTestId).concat(elementPart) : undefined;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
detect();
|
|
11
|
-
|
|
12
|
-
detect();
|
|
13
|
-
|
|
14
|
-
createContext(function () { return null; });
|
|
15
|
-
|
|
16
|
-
/* eslint-disable no-console */
|
|
17
|
-
if (process.env.NODE_ENV === 'development') ;
|
|
1
|
+
import { getDataTestId } from '@alfalab/core-components-shared/esm';
|
|
18
2
|
|
|
19
3
|
function getNotificationTestIds(dataTestId) {
|
|
20
4
|
return {
|
|
@@ -24,3 +8,4 @@ function getNotificationTestIds(dataTestId) {
|
|
|
24
8
|
}
|
|
25
9
|
|
|
26
10
|
export { getNotificationTestIds };
|
|
11
|
+
//# sourceMappingURL=getNotificationTestIds.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getNotificationTestIds.js","sources":["../../../src/utils/getNotificationTestIds.ts"],"sourcesContent":["import { getDataTestId } from '@alfalab/core-components-shared';\n\nexport function getNotificationTestIds(dataTestId: string) {\n return {\n badge: getDataTestId(dataTestId, 'badge'),\n component: getDataTestId(dataTestId, 'component'),\n };\n}\n"],"names":[],"mappings":";;AAEM,SAAU,sBAAsB,CAAC,UAAkB,EAAA;IACrD,OAAO;AACH,QAAA,KAAK,EAAE,aAAa,CAAC,UAAU,EAAE,OAAO,CAAC;AACzC,QAAA,SAAS,EAAE,aAAa,CAAC,UAAU,EAAE,WAAW,CAAC;KACpD;AACL;;;;"}
|
package/esm/utils/index.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/utils/index.ts"],"sourcesContent":["import React from 'react';\n\n/*\n * Дублирую хук из @alfalab/hooks, так как не подходят названия событий\n * https://github.com/core-ds/utils/blob/develop/packages/hooks/src/useClickOutside/hook.ts\n * issue завел, когда изменения будут реализованы, отсюда можно будет удалить\n * https://github.com/core-ds/utils/issues/35\n */\nexport function useClickOutside(\n ref: React.RefObject<HTMLElement>,\n cb: (e: React.MouseEvent | React.TouchEvent) => void,\n): void {\n React.useEffect(() => {\n // eslint-disable-next-line\n const handler = (event: any) => {\n if (!ref.current || ref.current.contains(event.target)) {\n return;\n }\n\n cb(event);\n };\n\n document.addEventListener('click', handler);\n document.addEventListener('touchend', handler);\n\n return () => {\n document.removeEventListener('click', handler);\n document.removeEventListener('touchend', handler);\n };\n }, [ref, cb]);\n}\n"],"names":[],"mappings":";;AAEA;;;;;AAKG;AACa,SAAA,eAAe,CAC3B,GAAiC,EACjC,EAAoD,EAAA;IAEpD,KAAK,CAAC,SAAS,CAAC,YAAA;;QAEZ,IAAM,OAAO,GAAG,UAAC,KAAU,EAAA;AACvB,YAAA,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;gBACpD;AACH;YAED,EAAE,CAAC,KAAK,CAAC;AACb,SAAC;AAED,QAAA,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC;AAC3C,QAAA,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,OAAO,CAAC;QAE9C,OAAO,YAAA;AACH,YAAA,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC;AAC9C,YAAA,QAAQ,CAAC,mBAAmB,CAAC,UAAU,EAAE,OAAO,CAAC;AACrD,SAAC;AACL,KAAC,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;AACjB;;;;"}
|
package/index.css
CHANGED
|
@@ -1,29 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
:
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
/* Hard */
|
|
9
|
-
|
|
10
|
-
/* Up */
|
|
11
|
-
|
|
12
|
-
/* Hard up */
|
|
13
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
14
|
-
|
|
15
|
-
/* новые значения, используйте их */
|
|
16
|
-
} :root { /* deprecated */ /* deprecated */
|
|
17
|
-
--gap-xs: 8px; /* deprecated */
|
|
18
|
-
--gap-s: 12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
19
|
-
--gap-xl: 24px; /* deprecated */ /* deprecated */ /* deprecated */
|
|
20
|
-
--gap-4xl: 48px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
21
|
-
--gap-s-neg: -12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
22
|
-
|
|
23
|
-
/* новые значения, используйте их */
|
|
24
|
-
|
|
25
|
-
/* no-unit может приводить к проблемам в calc (#1559) */
|
|
26
|
-
/* stylelint-disable-next-line length-zero-no-unit */
|
|
1
|
+
:root {
|
|
2
|
+
--gap-xs: 8px;
|
|
3
|
+
--gap-s: 12px;
|
|
4
|
+
--gap-xl: 24px;
|
|
5
|
+
--gap-4xl: 48px;
|
|
6
|
+
--gap-s-neg: -12px;
|
|
27
7
|
--gap-0: 0px;
|
|
28
8
|
--gap-8: var(--gap-xs);
|
|
29
9
|
--gap-12: var(--gap-s);
|
|
@@ -31,38 +11,37 @@
|
|
|
31
11
|
--gap-48: var(--gap-4xl);
|
|
32
12
|
--gap-12-neg: var(--gap-s-neg);
|
|
33
13
|
} :root {
|
|
34
|
-
} :root {
|
|
35
|
-
} /* сбрасывает синюю подсветку при нажатии */ :root {
|
|
36
14
|
--notification-desktop-content-width: 278px;
|
|
37
|
-
} .
|
|
15
|
+
} .notification__notificationComponent_1qc43 {
|
|
38
16
|
visibility: hidden;
|
|
39
17
|
right: var(--gap-12);
|
|
40
18
|
transform: translate(0, -500px);
|
|
41
19
|
width: calc(100% - var(--gap-24));
|
|
42
20
|
max-width: calc(100vw - var(--gap-24));
|
|
43
21
|
-webkit-user-select: none;
|
|
22
|
+
-moz-user-select: none;
|
|
44
23
|
user-select: none;
|
|
45
24
|
transition: transform 0.4s ease-out
|
|
46
|
-
} @media screen and (min-width: 600px) { .
|
|
25
|
+
} @media screen and (min-width: 600px) { .notification__notificationComponent_1qc43 {
|
|
47
26
|
right: var(--gap-48);
|
|
48
27
|
width: auto;
|
|
49
28
|
transform: translate(calc(100% + var(--gap-48)), 0)
|
|
50
29
|
}
|
|
51
|
-
} .
|
|
30
|
+
} .notification__notificationComponent_1qc43.notification__isVisible_1qc43 {
|
|
52
31
|
visibility: visible;
|
|
53
32
|
transform: translate(0, 0);
|
|
54
|
-
} .
|
|
33
|
+
} .notification__notificationComponent_1qc43.notification__isClosing_1qc43 {
|
|
55
34
|
transition: transform 0.1s ease-out;
|
|
56
35
|
transform: translate(100vw, 0)
|
|
57
|
-
} @media screen and (min-width: 600px) { .
|
|
36
|
+
} @media screen and (min-width: 600px) { .notification__notificationComponent_1qc43.notification__isClosing_1qc43 {
|
|
58
37
|
transform: translate(calc(100% + var(--gap-48)), 0)
|
|
59
38
|
}
|
|
60
|
-
} .
|
|
39
|
+
} .notification__notificationComponent_1qc43.notification__notificationComponent_1qc43 {
|
|
61
40
|
position: fixed;
|
|
62
|
-
} @media screen and (min-width: 600px) { .
|
|
41
|
+
} @media screen and (min-width: 600px) { .notification__toastContent_1qc43 {
|
|
63
42
|
width: var(--notification-desktop-content-width)
|
|
64
43
|
}
|
|
65
|
-
} .
|
|
44
|
+
} .notification__actionSection_1qc43 {
|
|
66
45
|
min-width: 104px;
|
|
67
46
|
min-height: 48px;
|
|
68
47
|
padding: var(--gap-0) var(--gap-8);
|
package/index.js
CHANGED
package/index.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
require('./index.css');
|
|
4
|
+
|
|
5
|
+
var styles = {"notificationComponent":"notification__notificationComponent_1qc43","isVisible":"notification__isVisible_1qc43","isClosing":"notification__isClosing_1qc43","toastContent":"notification__toastContent_1qc43","actionSection":"notification__actionSection_1qc43"};
|
|
6
|
+
|
|
7
|
+
module.exports = styles;
|
|
8
|
+
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '../../vars/src/index.css';\n\n:root {\n --notification-desktop-content-width: 278px;\n}\n\n.notificationComponent {\n visibility: hidden;\n right: var(--gap-12);\n transform: translate(0, -500px);\n width: calc(100% - var(--gap-24));\n max-width: calc(100vw - var(--gap-24));\n user-select: none;\n transition: transform 0.4s ease-out;\n\n @media screen and (min-width: 600px) {\n right: var(--gap-48);\n width: auto;\n transform: translate(calc(100% + var(--gap-48)), 0);\n }\n\n &.isVisible {\n visibility: visible;\n transform: translate(0, 0);\n }\n\n &.isClosing {\n transition: transform 0.1s ease-out;\n transform: translate(100vw, 0);\n\n @media screen and (min-width: 600px) {\n transform: translate(calc(100% + var(--gap-48)), 0);\n }\n }\n}\n\n.notificationComponent.notificationComponent {\n position: fixed;\n}\n\n.toastContent {\n @media screen and (min-width: 600px) {\n width: var(--notification-desktop-content-width);\n }\n}\n\n.actionSection {\n min-width: 104px;\n min-height: 48px;\n padding: var(--gap-0) var(--gap-8);\n margin: var(--gap-12-neg) var(--gap-0);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,uBAAuB,CAAC,2CAA2C,CAAC,WAAW,CAAC,+BAA+B,CAAC,WAAW,CAAC,+BAA+B,CAAC,cAAc,CAAC,kCAAkC,CAAC,eAAe,CAAC,mCAAmC,CAAC;;;;"}
|
package/modern/Component.js
CHANGED
|
@@ -5,12 +5,10 @@ import cn from 'classnames';
|
|
|
5
5
|
import elementClosest from 'element-closest';
|
|
6
6
|
import { Portal } from '@alfalab/core-components-portal/modern';
|
|
7
7
|
import { Stack } from '@alfalab/core-components-stack/modern';
|
|
8
|
+
import { stackingOrder } from '@alfalab/core-components-stack-context/modern';
|
|
8
9
|
import { ToastPlateDesktop } from '@alfalab/core-components-toast-plate/modern/desktop';
|
|
9
|
-
import { stackingOrder } from '@alfalab/stack-context';
|
|
10
10
|
import { useClickOutside } from './utils/index.js';
|
|
11
|
-
|
|
12
|
-
const styles = {"notificationComponent":"notification__notificationComponent_1o0d1","isVisible":"notification__isVisible_1o0d1","isClosing":"notification__isClosing_1o0d1","toastContent":"notification__toastContent_1o0d1","actionSection":"notification__actionSection_1o0d1"};
|
|
13
|
-
require('./index.css')
|
|
11
|
+
import styles from './index.module.css.js';
|
|
14
12
|
|
|
15
13
|
const notificationClassNameSelector = `.${styles.notificationComponent}`;
|
|
16
14
|
const Notification = forwardRef(({ className, actionSectionClassName, children, visible, offset = 108, hasCloser = true, autoCloseDelay = 5000, usePortal = true, zIndex = stackingOrder.TOAST, style, position = 'top', onClose, onCloseTimeout, onMouseEnter, onMouseLeave, onClickOutside, ...restProps }, ref) => {
|
|
@@ -95,3 +93,4 @@ const Notification = forwardRef(({ className, actionSectionClassName, children,
|
|
|
95
93
|
Notification.displayName = 'Notification';
|
|
96
94
|
|
|
97
95
|
export { Notification };
|
|
96
|
+
//# sourceMappingURL=Component.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../src/Component.tsx"],"sourcesContent":["import React, {\n forwardRef,\n Fragment,\n MouseEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport { useSwipeable } from 'react-swipeable';\nimport cn from 'classnames';\nimport elementClosest from 'element-closest';\n\nimport { Portal } from '@alfalab/core-components-portal';\nimport { Stack } from '@alfalab/core-components-stack';\nimport { stackingOrder } from '@alfalab/core-components-stack-context';\nimport {\n ToastPlateDesktop,\n ToastPlateDesktopProps,\n} from '@alfalab/core-components-toast-plate/desktop';\n\nimport { useClickOutside } from './utils';\n\nimport styles from './index.module.css';\n\nexport type NotificationProps = ToastPlateDesktopProps & {\n /**\n * Управление видимостью компонента\n */\n visible?: boolean;\n\n /**\n * Отступ от верхнего края\n */\n offset?: number;\n\n /**\n * Время до закрытия компонента\n */\n autoCloseDelay?: number | null;\n\n /**\n * Использовать портал\n */\n usePortal?: boolean;\n\n /**\n * z-index компонента\n */\n zIndex?: number;\n\n /**\n * Позиционирование компонента от верхнего или нижнего края экрана\n */\n position?: 'top' | 'bottom';\n\n /**\n * Обработчик события истечения времени до закрытия компонента\n */\n onCloseTimeout?: () => void;\n\n /**\n * Обработчик события наведения курсора на компонент\n */\n onMouseEnter?: (event?: MouseEvent<HTMLDivElement>) => void;\n\n /**\n * Обработчик события снятия курсора с компонента\n */\n onMouseLeave?: (event?: MouseEvent<HTMLDivElement>) => void;\n\n /**\n * Обработчик клика вне компонента\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onClickOutside?: (event?: MouseEvent<any>) => void;\n};\n\nconst notificationClassNameSelector = `.${styles.notificationComponent}`;\n\nexport const Notification = forwardRef<HTMLDivElement, NotificationProps>(\n (\n {\n className,\n actionSectionClassName,\n children,\n visible,\n offset = 108,\n hasCloser = true,\n autoCloseDelay = 5000,\n usePortal = true,\n zIndex = stackingOrder.TOAST,\n style,\n position = 'top',\n onClose,\n onCloseTimeout,\n onMouseEnter,\n onMouseLeave,\n onClickOutside,\n ...restProps\n },\n ref,\n ) => {\n const notificationRef = useRef<HTMLDivElement>(null);\n const autoCloseTimeoutRef = useRef(0);\n const closeTimeoutRef = useRef(0);\n\n const [isClosing, setIsClosing] = useState(false);\n\n const startAutoCloseTimer = useCallback(() => {\n if (autoCloseDelay !== null) {\n autoCloseTimeoutRef.current = window.setTimeout(() => {\n if (onCloseTimeout) {\n onCloseTimeout();\n }\n }, autoCloseDelay);\n }\n }, [autoCloseDelay, onCloseTimeout]);\n\n const stopAutoCloseTimer = useCallback(() => {\n clearTimeout(autoCloseTimeoutRef.current);\n }, []);\n\n useEffect(\n () => () => {\n clearTimeout(closeTimeoutRef.current);\n },\n [],\n );\n\n useEffect(() => {\n elementClosest(window);\n }, []);\n\n useEffect(() => {\n if (visible) {\n startAutoCloseTimer();\n }\n\n return () => {\n stopAutoCloseTimer();\n };\n }, [startAutoCloseTimer, stopAutoCloseTimer, visible]);\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n stopAutoCloseTimer();\n\n if (onMouseEnter) {\n onMouseEnter(event);\n }\n },\n [onMouseEnter, stopAutoCloseTimer],\n );\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n stopAutoCloseTimer();\n startAutoCloseTimer();\n\n if (onMouseLeave) {\n onMouseLeave(event);\n }\n },\n [onMouseLeave, startAutoCloseTimer, stopAutoCloseTimer],\n );\n\n const handleOutsideClick = useCallback(\n (event: React.MouseEvent | React.TouchEvent) => {\n const isTargetNotification = !!(event.target as Element).closest(\n notificationClassNameSelector,\n );\n\n /*\n * проверка isTargetNotification нужна для предотвращения срабатывания handleOutsideClick\n * при клике на другие нотификации, если их несколько на странице\n */\n if (onClickOutside && visible && !isTargetNotification) {\n onClickOutside(event as React.MouseEvent);\n }\n },\n [onClickOutside, visible],\n );\n\n useClickOutside(notificationRef, handleOutsideClick);\n\n const swipeableHandlers = useSwipeable({\n onSwiped: ({ dir }) => {\n if (onClose && ['Left', 'Right', 'Up'].includes(dir)) {\n setIsClosing(true);\n\n closeTimeoutRef.current = window.setTimeout(() => {\n setIsClosing(false);\n onClose();\n }, 100);\n }\n },\n delta: 100,\n });\n\n const Wrapper = usePortal ? Portal : Fragment;\n\n return (\n <Stack value={zIndex}>\n {(computedZIndex) => (\n <Wrapper>\n <div {...swipeableHandlers}>\n <ToastPlateDesktop\n className={cn(\n styles.notificationComponent,\n {\n [styles.isVisible]: visible,\n [styles.isClosing]: isClosing,\n },\n className,\n )}\n contentClassName={styles.toastContent}\n actionSectionClassName={cn(\n actionSectionClassName,\n styles.actionSection,\n )}\n style={{\n [position]: offset,\n zIndex: computedZIndex,\n ...style,\n }}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n ref={mergeRefs([ref, notificationRef])}\n role={visible ? 'alert' : undefined}\n hasCloser={hasCloser}\n onClose={onClose}\n {...restProps}\n >\n {children}\n </ToastPlateDesktop>\n </div>\n </Wrapper>\n )}\n </Stack>\n );\n },\n);\n\nNotification.displayName = 'Notification';\n"],"names":[],"mappings":";;;;;;;;;;;;AA+EA,MAAM,6BAA6B,GAAG,CAAA,CAAA,EAAI,MAAM,CAAC,qBAAqB,EAAE;AAEjE,MAAM,YAAY,GAAG,UAAU,CAClC,CACI,EACI,SAAS,EACT,sBAAsB,EACtB,QAAQ,EACR,OAAO,EACP,MAAM,GAAG,GAAG,EACZ,SAAS,GAAG,IAAI,EAChB,cAAc,GAAG,IAAI,EACrB,SAAS,GAAG,IAAI,EAChB,MAAM,GAAG,aAAa,CAAC,KAAK,EAC5B,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,GAAG,SAAS,EACf,EACD,GAAG,KACH;AACA,IAAA,MAAM,eAAe,GAAG,MAAM,CAAiB,IAAI,CAAC;AACpD,IAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,CAAC,CAAC;AACrC,IAAA,MAAM,eAAe,GAAG,MAAM,CAAC,CAAC,CAAC;IAEjC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAEjD,IAAA,MAAM,mBAAmB,GAAG,WAAW,CAAC,MAAK;QACzC,IAAI,cAAc,KAAK,IAAI,EAAE;YACzB,mBAAmB,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,MAAK;AACjD,gBAAA,IAAI,cAAc,EAAE;AAChB,oBAAA,cAAc,EAAE;AACnB;aACJ,EAAE,cAAc,CAAC;AACrB;AACL,KAAC,EAAE,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC;AAEpC,IAAA,MAAM,kBAAkB,GAAG,WAAW,CAAC,MAAK;AACxC,QAAA,YAAY,CAAC,mBAAmB,CAAC,OAAO,CAAC;KAC5C,EAAE,EAAE,CAAC;AAEN,IAAA,SAAS,CACL,MAAM,MAAK;AACP,QAAA,YAAY,CAAC,eAAe,CAAC,OAAO,CAAC;KACxC,EACD,EAAE,CACL;IAED,SAAS,CAAC,MAAK;QACX,cAAc,CAAC,MAAM,CAAC;KACzB,EAAE,EAAE,CAAC;IAEN,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,OAAO,EAAE;AACT,YAAA,mBAAmB,EAAE;AACxB;AAED,QAAA,OAAO,MAAK;AACR,YAAA,kBAAkB,EAAE;AACxB,SAAC;KACJ,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,EAAE,OAAO,CAAC,CAAC;AAEtD,IAAA,MAAM,gBAAgB,GAAG,WAAW,CAChC,CAAC,KAAuC,KAAI;AACxC,QAAA,kBAAkB,EAAE;AAEpB,QAAA,IAAI,YAAY,EAAE;YACd,YAAY,CAAC,KAAK,CAAC;AACtB;AACL,KAAC,EACD,CAAC,YAAY,EAAE,kBAAkB,CAAC,CACrC;AAED,IAAA,MAAM,gBAAgB,GAAG,WAAW,CAChC,CAAC,KAAuC,KAAI;AACxC,QAAA,kBAAkB,EAAE;AACpB,QAAA,mBAAmB,EAAE;AAErB,QAAA,IAAI,YAAY,EAAE;YACd,YAAY,CAAC,KAAK,CAAC;AACtB;KACJ,EACD,CAAC,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,CAAC,CAC1D;AAED,IAAA,MAAM,kBAAkB,GAAG,WAAW,CAClC,CAAC,KAA0C,KAAI;AAC3C,QAAA,MAAM,oBAAoB,GAAG,CAAC,CAAE,KAAK,CAAC,MAAkB,CAAC,OAAO,CAC5D,6BAA6B,CAChC;AAED;;;AAGG;AACH,QAAA,IAAI,cAAc,IAAI,OAAO,IAAI,CAAC,oBAAoB,EAAE;YACpD,cAAc,CAAC,KAAyB,CAAC;AAC5C;AACL,KAAC,EACD,CAAC,cAAc,EAAE,OAAO,CAAC,CAC5B;AAED,IAAA,eAAe,CAAC,eAAe,EAAE,kBAAkB,CAAC;IAEpD,MAAM,iBAAiB,GAAG,YAAY,CAAC;AACnC,QAAA,QAAQ,EAAE,CAAC,EAAE,GAAG,EAAE,KAAI;AAClB,YAAA,IAAI,OAAO,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;gBAClD,YAAY,CAAC,IAAI,CAAC;gBAElB,eAAe,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,MAAK;oBAC7C,YAAY,CAAC,KAAK,CAAC;AACnB,oBAAA,OAAO,EAAE;iBACZ,EAAE,GAAG,CAAC;AACV;SACJ;AACD,QAAA,KAAK,EAAE,GAAG;AACb,KAAA,CAAC;IAEF,MAAM,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ;AAE7C,IAAA,QACI,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,KAAK,EAAE,MAAM,EACf,EAAA,CAAC,cAAc,MACZ,oBAAC,OAAO,EAAA,IAAA;AACJ,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAS,iBAAiB,EAAA;YACtB,KAAC,CAAA,aAAA,CAAA,iBAAiB,IACd,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,qBAAqB,EAC5B;AACI,oBAAA,CAAC,MAAM,CAAC,SAAS,GAAG,OAAO;AAC3B,oBAAA,CAAC,MAAM,CAAC,SAAS,GAAG,SAAS;iBAChC,EACD,SAAS,CACZ,EACD,gBAAgB,EAAE,MAAM,CAAC,YAAY,EACrC,sBAAsB,EAAE,EAAE,CACtB,sBAAsB,EACtB,MAAM,CAAC,aAAa,CACvB,EACD,KAAK,EAAE;oBACH,CAAC,QAAQ,GAAG,MAAM;AAClB,oBAAA,MAAM,EAAE,cAAc;AACtB,oBAAA,GAAG,KAAK;iBACX,EACD,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,gBAAgB,EAC9B,GAAG,EAAE,SAAS,CAAC,CAAC,GAAG,EAAE,eAAe,CAAC,CAAC,EACtC,IAAI,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,EACnC,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EACZ,GAAA,SAAS,IAEZ,QAAQ,CACO,CAClB,CACA,CACb,CACG;AAEhB,CAAC;AAGL,YAAY,CAAC,WAAW,GAAG,cAAc;;;;"}
|
package/modern/index.css
CHANGED
|
@@ -1,29 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
:
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
/* Hard */
|
|
9
|
-
|
|
10
|
-
/* Up */
|
|
11
|
-
|
|
12
|
-
/* Hard up */
|
|
13
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
14
|
-
|
|
15
|
-
/* новые значения, используйте их */
|
|
16
|
-
} :root { /* deprecated */ /* deprecated */
|
|
17
|
-
--gap-xs: 8px; /* deprecated */
|
|
18
|
-
--gap-s: 12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
19
|
-
--gap-xl: 24px; /* deprecated */ /* deprecated */ /* deprecated */
|
|
20
|
-
--gap-4xl: 48px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
21
|
-
--gap-s-neg: -12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
22
|
-
|
|
23
|
-
/* новые значения, используйте их */
|
|
24
|
-
|
|
25
|
-
/* no-unit может приводить к проблемам в calc (#1559) */
|
|
26
|
-
/* stylelint-disable-next-line length-zero-no-unit */
|
|
1
|
+
:root {
|
|
2
|
+
--gap-xs: 8px;
|
|
3
|
+
--gap-s: 12px;
|
|
4
|
+
--gap-xl: 24px;
|
|
5
|
+
--gap-4xl: 48px;
|
|
6
|
+
--gap-s-neg: -12px;
|
|
27
7
|
--gap-0: 0px;
|
|
28
8
|
--gap-8: var(--gap-xs);
|
|
29
9
|
--gap-12: var(--gap-s);
|
|
@@ -31,38 +11,37 @@
|
|
|
31
11
|
--gap-48: var(--gap-4xl);
|
|
32
12
|
--gap-12-neg: var(--gap-s-neg);
|
|
33
13
|
} :root {
|
|
34
|
-
} :root {
|
|
35
|
-
} /* сбрасывает синюю подсветку при нажатии */ :root {
|
|
36
14
|
--notification-desktop-content-width: 278px;
|
|
37
|
-
} .
|
|
15
|
+
} .notification__notificationComponent_1qc43 {
|
|
38
16
|
visibility: hidden;
|
|
39
17
|
right: var(--gap-12);
|
|
40
18
|
transform: translate(0, -500px);
|
|
41
19
|
width: calc(100% - var(--gap-24));
|
|
42
20
|
max-width: calc(100vw - var(--gap-24));
|
|
43
21
|
-webkit-user-select: none;
|
|
22
|
+
-moz-user-select: none;
|
|
44
23
|
user-select: none;
|
|
45
24
|
transition: transform 0.4s ease-out
|
|
46
|
-
} @media screen and (min-width: 600px) { .
|
|
25
|
+
} @media screen and (min-width: 600px) { .notification__notificationComponent_1qc43 {
|
|
47
26
|
right: var(--gap-48);
|
|
48
27
|
width: auto;
|
|
49
28
|
transform: translate(calc(100% + var(--gap-48)), 0)
|
|
50
29
|
}
|
|
51
|
-
} .
|
|
30
|
+
} .notification__notificationComponent_1qc43.notification__isVisible_1qc43 {
|
|
52
31
|
visibility: visible;
|
|
53
32
|
transform: translate(0, 0);
|
|
54
|
-
} .
|
|
33
|
+
} .notification__notificationComponent_1qc43.notification__isClosing_1qc43 {
|
|
55
34
|
transition: transform 0.1s ease-out;
|
|
56
35
|
transform: translate(100vw, 0)
|
|
57
|
-
} @media screen and (min-width: 600px) { .
|
|
36
|
+
} @media screen and (min-width: 600px) { .notification__notificationComponent_1qc43.notification__isClosing_1qc43 {
|
|
58
37
|
transform: translate(calc(100% + var(--gap-48)), 0)
|
|
59
38
|
}
|
|
60
|
-
} .
|
|
39
|
+
} .notification__notificationComponent_1qc43.notification__notificationComponent_1qc43 {
|
|
61
40
|
position: fixed;
|
|
62
|
-
} @media screen and (min-width: 600px) { .
|
|
41
|
+
} @media screen and (min-width: 600px) { .notification__toastContent_1qc43 {
|
|
63
42
|
width: var(--notification-desktop-content-width)
|
|
64
43
|
}
|
|
65
|
-
} .
|
|
44
|
+
} .notification__actionSection_1qc43 {
|
|
66
45
|
min-width: 104px;
|
|
67
46
|
min-height: 48px;
|
|
68
47
|
padding: var(--gap-0) var(--gap-8);
|
package/modern/index.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import './index.css';
|
|
2
|
+
|
|
3
|
+
const styles = {"notificationComponent":"notification__notificationComponent_1qc43","isVisible":"notification__isVisible_1qc43","isClosing":"notification__isClosing_1qc43","toastContent":"notification__toastContent_1qc43","actionSection":"notification__actionSection_1qc43"};
|
|
4
|
+
|
|
5
|
+
export { styles as default };
|
|
6
|
+
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '../../vars/src/index.css';\n\n:root {\n --notification-desktop-content-width: 278px;\n}\n\n.notificationComponent {\n visibility: hidden;\n right: var(--gap-12);\n transform: translate(0, -500px);\n width: calc(100% - var(--gap-24));\n max-width: calc(100vw - var(--gap-24));\n user-select: none;\n transition: transform 0.4s ease-out;\n\n @media screen and (min-width: 600px) {\n right: var(--gap-48);\n width: auto;\n transform: translate(calc(100% + var(--gap-48)), 0);\n }\n\n &.isVisible {\n visibility: visible;\n transform: translate(0, 0);\n }\n\n &.isClosing {\n transition: transform 0.1s ease-out;\n transform: translate(100vw, 0);\n\n @media screen and (min-width: 600px) {\n transform: translate(calc(100% + var(--gap-48)), 0);\n }\n }\n}\n\n.notificationComponent.notificationComponent {\n position: fixed;\n}\n\n.toastContent {\n @media screen and (min-width: 600px) {\n width: var(--notification-desktop-content-width);\n }\n}\n\n.actionSection {\n min-width: 104px;\n min-height: 48px;\n padding: var(--gap-0) var(--gap-8);\n margin: var(--gap-12-neg) var(--gap-0);\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,uBAAuB,CAAC,2CAA2C,CAAC,WAAW,CAAC,+BAA+B,CAAC,WAAW,CAAC,+BAA+B,CAAC,cAAc,CAAC,kCAAkC,CAAC,eAAe,CAAC,mCAAmC,CAAC;;;;"}
|
package/modern/shared/index.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
import { ToastPlateDesktopProps } from "@alfalab/core-components-toast-plate/desktop";
|
|
5
|
-
type NotificationProps = ToastPlateDesktopProps & {
|
|
1
|
+
import React, { MouseEvent } from 'react';
|
|
2
|
+
import { ToastPlateDesktopProps } from '@alfalab/core-components-toast-plate/desktop';
|
|
3
|
+
export declare type NotificationProps = ToastPlateDesktopProps & {
|
|
6
4
|
/**
|
|
7
5
|
* Управление видимостью компонента
|
|
8
6
|
*/
|
|
@@ -44,7 +42,7 @@ type NotificationProps = ToastPlateDesktopProps & {
|
|
|
44
42
|
*/
|
|
45
43
|
onClickOutside?: (event?: MouseEvent<any>) => void;
|
|
46
44
|
};
|
|
47
|
-
declare const Notification: React.ForwardRefExoticComponent<ToastPlateDesktopProps & {
|
|
45
|
+
export declare const Notification: React.ForwardRefExoticComponent<ToastPlateDesktopProps & {
|
|
48
46
|
/**
|
|
49
47
|
* Управление видимостью компонента
|
|
50
48
|
*/
|
|
@@ -68,7 +66,7 @@ declare const Notification: React.ForwardRefExoticComponent<ToastPlateDesktopPro
|
|
|
68
66
|
/**
|
|
69
67
|
* Позиционирование компонента от верхнего или нижнего края экрана
|
|
70
68
|
*/
|
|
71
|
-
position?: "
|
|
69
|
+
position?: "top" | "bottom" | undefined;
|
|
72
70
|
/**
|
|
73
71
|
* Обработчик события истечения времени до закрытия компонента
|
|
74
72
|
*/
|
|
@@ -86,4 +84,3 @@ declare const Notification: React.ForwardRefExoticComponent<ToastPlateDesktopPro
|
|
|
86
84
|
*/
|
|
87
85
|
onClickOutside?: ((event?: MouseEvent<any>) => void) | undefined;
|
|
88
86
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
89
|
-
export { NotificationProps, Notification };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Component';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { getNotificationTestIds } from '../utils/getNotificationTestIds';
|
|
@@ -1,20 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { createContext } from 'react';
|
|
3
|
-
import '@alfalab/hooks';
|
|
4
|
-
|
|
5
|
-
function getDataTestId(dataTestId, element) {
|
|
6
|
-
const elementPart = element ? `-${element.toLowerCase()}` : '';
|
|
7
|
-
return dataTestId ? `${dataTestId}${elementPart}` : undefined;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
detect();
|
|
11
|
-
|
|
12
|
-
detect();
|
|
13
|
-
|
|
14
|
-
createContext(() => null);
|
|
15
|
-
|
|
16
|
-
/* eslint-disable no-console */
|
|
17
|
-
if (process.env.NODE_ENV === 'development') ;
|
|
1
|
+
import { getDataTestId } from '@alfalab/core-components-shared/modern';
|
|
18
2
|
|
|
19
3
|
function getNotificationTestIds(dataTestId) {
|
|
20
4
|
return {
|
|
@@ -24,3 +8,4 @@ function getNotificationTestIds(dataTestId) {
|
|
|
24
8
|
}
|
|
25
9
|
|
|
26
10
|
export { getNotificationTestIds };
|
|
11
|
+
//# sourceMappingURL=getNotificationTestIds.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getNotificationTestIds.js","sources":["../../../src/utils/getNotificationTestIds.ts"],"sourcesContent":["import { getDataTestId } from '@alfalab/core-components-shared';\n\nexport function getNotificationTestIds(dataTestId: string) {\n return {\n badge: getDataTestId(dataTestId, 'badge'),\n component: getDataTestId(dataTestId, 'component'),\n };\n}\n"],"names":[],"mappings":";;AAEM,SAAU,sBAAsB,CAAC,UAAkB,EAAA;IACrD,OAAO;AACH,QAAA,KAAK,EAAE,aAAa,CAAC,UAAU,EAAE,OAAO,CAAC;AACzC,QAAA,SAAS,EAAE,aAAa,CAAC,UAAU,EAAE,WAAW,CAAC;KACpD;AACL;;;;"}
|
package/modern/utils/index.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/utils/index.ts"],"sourcesContent":["import React from 'react';\n\n/*\n * Дублирую хук из @alfalab/hooks, так как не подходят названия событий\n * https://github.com/core-ds/utils/blob/develop/packages/hooks/src/useClickOutside/hook.ts\n * issue завел, когда изменения будут реализованы, отсюда можно будет удалить\n * https://github.com/core-ds/utils/issues/35\n */\nexport function useClickOutside(\n ref: React.RefObject<HTMLElement>,\n cb: (e: React.MouseEvent | React.TouchEvent) => void,\n): void {\n React.useEffect(() => {\n // eslint-disable-next-line\n const handler = (event: any) => {\n if (!ref.current || ref.current.contains(event.target)) {\n return;\n }\n\n cb(event);\n };\n\n document.addEventListener('click', handler);\n document.addEventListener('touchend', handler);\n\n return () => {\n document.removeEventListener('click', handler);\n document.removeEventListener('touchend', handler);\n };\n }, [ref, cb]);\n}\n"],"names":[],"mappings":";;AAEA;;;;;AAKG;AACa,SAAA,eAAe,CAC3B,GAAiC,EACjC,EAAoD,EAAA;AAEpD,IAAA,KAAK,CAAC,SAAS,CAAC,MAAK;;AAEjB,QAAA,MAAM,OAAO,GAAG,CAAC,KAAU,KAAI;AAC3B,YAAA,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;gBACpD;AACH;YAED,EAAE,CAAC,KAAK,CAAC;AACb,SAAC;AAED,QAAA,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC;AAC3C,QAAA,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,OAAO,CAAC;AAE9C,QAAA,OAAO,MAAK;AACR,YAAA,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC;AAC9C,YAAA,QAAQ,CAAC,mBAAmB,CAAC,UAAU,EAAE,OAAO,CAAC;AACrD,SAAC;AACL,KAAC,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;AACjB;;;;"}
|
package/moderncssm/Component.js
CHANGED
|
@@ -5,8 +5,8 @@ import cn from 'classnames';
|
|
|
5
5
|
import elementClosest from 'element-closest';
|
|
6
6
|
import { Portal } from '@alfalab/core-components-portal/moderncssm';
|
|
7
7
|
import { Stack } from '@alfalab/core-components-stack/moderncssm';
|
|
8
|
+
import { stackingOrder } from '@alfalab/core-components-stack-context/moderncssm';
|
|
8
9
|
import { ToastPlateDesktop } from '@alfalab/core-components-toast-plate/moderncssm/desktop';
|
|
9
|
-
import { stackingOrder } from '@alfalab/stack-context';
|
|
10
10
|
import { useClickOutside } from './utils/index.js';
|
|
11
11
|
import styles from './index.module.css';
|
|
12
12
|
|
|
@@ -93,3 +93,4 @@ const Notification = forwardRef(({ className, actionSectionClassName, children,
|
|
|
93
93
|
Notification.displayName = 'Notification';
|
|
94
94
|
|
|
95
95
|
export { Notification };
|
|
96
|
+
//# sourceMappingURL=Component.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../src/Component.tsx"],"sourcesContent":["import React, {\n forwardRef,\n Fragment,\n MouseEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport { useSwipeable } from 'react-swipeable';\nimport cn from 'classnames';\nimport elementClosest from 'element-closest';\n\nimport { Portal } from '@alfalab/core-components-portal';\nimport { Stack } from '@alfalab/core-components-stack';\nimport { stackingOrder } from '@alfalab/core-components-stack-context';\nimport {\n ToastPlateDesktop,\n ToastPlateDesktopProps,\n} from '@alfalab/core-components-toast-plate/desktop';\n\nimport { useClickOutside } from './utils';\n\nimport styles from './index.module.css';\n\nexport type NotificationProps = ToastPlateDesktopProps & {\n /**\n * Управление видимостью компонента\n */\n visible?: boolean;\n\n /**\n * Отступ от верхнего края\n */\n offset?: number;\n\n /**\n * Время до закрытия компонента\n */\n autoCloseDelay?: number | null;\n\n /**\n * Использовать портал\n */\n usePortal?: boolean;\n\n /**\n * z-index компонента\n */\n zIndex?: number;\n\n /**\n * Позиционирование компонента от верхнего или нижнего края экрана\n */\n position?: 'top' | 'bottom';\n\n /**\n * Обработчик события истечения времени до закрытия компонента\n */\n onCloseTimeout?: () => void;\n\n /**\n * Обработчик события наведения курсора на компонент\n */\n onMouseEnter?: (event?: MouseEvent<HTMLDivElement>) => void;\n\n /**\n * Обработчик события снятия курсора с компонента\n */\n onMouseLeave?: (event?: MouseEvent<HTMLDivElement>) => void;\n\n /**\n * Обработчик клика вне компонента\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onClickOutside?: (event?: MouseEvent<any>) => void;\n};\n\nconst notificationClassNameSelector = `.${styles.notificationComponent}`;\n\nexport const Notification = forwardRef<HTMLDivElement, NotificationProps>(\n (\n {\n className,\n actionSectionClassName,\n children,\n visible,\n offset = 108,\n hasCloser = true,\n autoCloseDelay = 5000,\n usePortal = true,\n zIndex = stackingOrder.TOAST,\n style,\n position = 'top',\n onClose,\n onCloseTimeout,\n onMouseEnter,\n onMouseLeave,\n onClickOutside,\n ...restProps\n },\n ref,\n ) => {\n const notificationRef = useRef<HTMLDivElement>(null);\n const autoCloseTimeoutRef = useRef(0);\n const closeTimeoutRef = useRef(0);\n\n const [isClosing, setIsClosing] = useState(false);\n\n const startAutoCloseTimer = useCallback(() => {\n if (autoCloseDelay !== null) {\n autoCloseTimeoutRef.current = window.setTimeout(() => {\n if (onCloseTimeout) {\n onCloseTimeout();\n }\n }, autoCloseDelay);\n }\n }, [autoCloseDelay, onCloseTimeout]);\n\n const stopAutoCloseTimer = useCallback(() => {\n clearTimeout(autoCloseTimeoutRef.current);\n }, []);\n\n useEffect(\n () => () => {\n clearTimeout(closeTimeoutRef.current);\n },\n [],\n );\n\n useEffect(() => {\n elementClosest(window);\n }, []);\n\n useEffect(() => {\n if (visible) {\n startAutoCloseTimer();\n }\n\n return () => {\n stopAutoCloseTimer();\n };\n }, [startAutoCloseTimer, stopAutoCloseTimer, visible]);\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n stopAutoCloseTimer();\n\n if (onMouseEnter) {\n onMouseEnter(event);\n }\n },\n [onMouseEnter, stopAutoCloseTimer],\n );\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n stopAutoCloseTimer();\n startAutoCloseTimer();\n\n if (onMouseLeave) {\n onMouseLeave(event);\n }\n },\n [onMouseLeave, startAutoCloseTimer, stopAutoCloseTimer],\n );\n\n const handleOutsideClick = useCallback(\n (event: React.MouseEvent | React.TouchEvent) => {\n const isTargetNotification = !!(event.target as Element).closest(\n notificationClassNameSelector,\n );\n\n /*\n * проверка isTargetNotification нужна для предотвращения срабатывания handleOutsideClick\n * при клике на другие нотификации, если их несколько на странице\n */\n if (onClickOutside && visible && !isTargetNotification) {\n onClickOutside(event as React.MouseEvent);\n }\n },\n [onClickOutside, visible],\n );\n\n useClickOutside(notificationRef, handleOutsideClick);\n\n const swipeableHandlers = useSwipeable({\n onSwiped: ({ dir }) => {\n if (onClose && ['Left', 'Right', 'Up'].includes(dir)) {\n setIsClosing(true);\n\n closeTimeoutRef.current = window.setTimeout(() => {\n setIsClosing(false);\n onClose();\n }, 100);\n }\n },\n delta: 100,\n });\n\n const Wrapper = usePortal ? Portal : Fragment;\n\n return (\n <Stack value={zIndex}>\n {(computedZIndex) => (\n <Wrapper>\n <div {...swipeableHandlers}>\n <ToastPlateDesktop\n className={cn(\n styles.notificationComponent,\n {\n [styles.isVisible]: visible,\n [styles.isClosing]: isClosing,\n },\n className,\n )}\n contentClassName={styles.toastContent}\n actionSectionClassName={cn(\n actionSectionClassName,\n styles.actionSection,\n )}\n style={{\n [position]: offset,\n zIndex: computedZIndex,\n ...style,\n }}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n ref={mergeRefs([ref, notificationRef])}\n role={visible ? 'alert' : undefined}\n hasCloser={hasCloser}\n onClose={onClose}\n {...restProps}\n >\n {children}\n </ToastPlateDesktop>\n </div>\n </Wrapper>\n )}\n </Stack>\n );\n },\n);\n\nNotification.displayName = 'Notification';\n"],"names":[],"mappings":"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"}
|
package/moderncssm/index.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|