@alfalab/core-components-notification-manager 5.8.10 → 6.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 +10 -11
- package/component.js.map +1 -0
- package/components/index.js +3 -2
- package/components/index.js.map +1 -0
- package/components/notification/component.js +1 -0
- package/components/notification/component.js.map +1 -0
- package/components/notification/index.js +3 -2
- package/components/notification/index.js.map +1 -0
- package/cssm/component.js +8 -7
- package/cssm/component.js.map +1 -0
- package/cssm/components/index.js +3 -2
- package/cssm/components/index.js.map +1 -0
- package/cssm/components/notification/component.js +1 -0
- package/cssm/components/notification/component.js.map +1 -0
- package/cssm/components/notification/index.js +3 -2
- package/cssm/components/notification/index.js.map +1 -0
- package/cssm/index.js +1 -0
- package/cssm/index.js.map +1 -0
- package/cssm/index.module.css +5 -26
- package/{component.d.ts → cssm/src/component.d.ts} +5 -8
- package/cssm/src/components/index.d.ts +1 -0
- package/cssm/src/components/notification/component.d.ts +12 -0
- package/cssm/src/components/notification/index.d.ts +1 -0
- package/cssm/src/index.d.ts +1 -0
- package/esm/component.js +3 -4
- package/esm/component.js.map +1 -0
- package/esm/components/index.js +1 -0
- package/esm/components/index.js.map +1 -0
- package/esm/components/notification/component.js +1 -0
- package/esm/components/notification/component.js.map +1 -0
- package/esm/components/notification/index.js +1 -0
- package/esm/components/notification/index.js.map +1 -0
- package/esm/index.css +14 -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/{cssm → esm/src}/component.d.ts +5 -8
- package/esm/src/components/index.d.ts +1 -0
- package/esm/src/components/notification/component.d.ts +12 -0
- package/esm/src/components/notification/index.d.ts +1 -0
- package/esm/src/index.d.ts +1 -0
- package/index.css +14 -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/components/index.js +1 -0
- package/modern/components/index.js.map +1 -0
- package/modern/components/notification/component.js +1 -0
- package/modern/components/notification/component.js.map +1 -0
- package/modern/components/notification/index.js +1 -0
- package/modern/components/notification/index.js.map +1 -0
- package/modern/index.css +14 -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/{esm → modern/src}/component.d.ts +5 -8
- package/modern/src/components/index.d.ts +1 -0
- package/modern/src/components/notification/component.d.ts +12 -0
- package/modern/src/components/notification/index.d.ts +1 -0
- package/modern/src/index.d.ts +1 -0
- package/moderncssm/component.js +2 -1
- package/moderncssm/component.js.map +1 -0
- package/moderncssm/components/index.js +1 -0
- package/moderncssm/components/index.js.map +1 -0
- package/moderncssm/components/notification/component.js +1 -0
- package/moderncssm/components/notification/component.js.map +1 -0
- package/moderncssm/components/notification/index.js +1 -0
- package/moderncssm/components/notification/index.js.map +1 -0
- package/moderncssm/index.js +1 -0
- package/moderncssm/index.js.map +1 -0
- package/moderncssm/index.module.css +0 -2
- package/{modern → moderncssm/src}/component.d.ts +5 -8
- package/moderncssm/src/components/index.d.ts +1 -0
- package/moderncssm/src/components/notification/component.d.ts +12 -0
- package/moderncssm/src/components/notification/index.d.ts +1 -0
- package/moderncssm/src/index.d.ts +1 -0
- package/package.json +7 -6
- package/src/component.d.ts +69 -0
- package/src/component.tsx +1 -1
- package/src/components/index.d.ts +1 -0
- package/src/components/notification/component.d.ts +12 -0
- package/src/components/notification/index.d.ts +1 -0
- package/src/index.d.ts +1 -0
- package/components/index.d.ts +0 -1
- package/components/notification/component.d.ts +0 -12
- package/components/notification/index.d.ts +0 -1
- package/cssm/components/index.d.ts +0 -1
- package/cssm/components/notification/component.d.ts +0 -12
- package/cssm/components/notification/index.d.ts +0 -1
- package/cssm/index.d.ts +0 -1
- package/esm/components/index.d.ts +0 -1
- package/esm/components/notification/component.d.ts +0 -12
- package/esm/components/notification/index.d.ts +0 -1
- package/esm/index.d.ts +0 -1
- package/index.d.ts +0 -1
- package/modern/components/index.d.ts +0 -1
- package/modern/components/notification/component.d.ts +0 -12
- package/modern/components/notification/index.d.ts +0 -1
- package/modern/index.d.ts +0 -1
- package/moderncssm/component.d.ts +0 -72
- package/moderncssm/components/index.d.ts +0 -1
- package/moderncssm/components/notification/component.d.ts +0 -12
- package/moderncssm/components/notification/index.d.ts +0 -1
- package/moderncssm/index.d.ts +0 -1
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
import { NotificationElement } from "./components/index";
|
|
6
|
-
type NotificationManagerProps = HTMLAttributes<HTMLDivElement> & {
|
|
1
|
+
import React, { HTMLAttributes } from 'react';
|
|
2
|
+
import { PortalProps } from '@alfalab/core-components-portal';
|
|
3
|
+
import { NotificationElement } from './components';
|
|
4
|
+
export declare type NotificationManagerProps = HTMLAttributes<HTMLDivElement> & {
|
|
7
5
|
/**
|
|
8
6
|
* Массив нотификаций.
|
|
9
7
|
* В нотификации обязательно передавайте id.
|
|
@@ -36,7 +34,7 @@ type NotificationManagerProps = HTMLAttributes<HTMLDivElement> & {
|
|
|
36
34
|
*/
|
|
37
35
|
container?: PortalProps['getPortalContainer'];
|
|
38
36
|
};
|
|
39
|
-
declare const NotificationManager: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
|
|
37
|
+
export declare const NotificationManager: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
|
|
40
38
|
/**
|
|
41
39
|
* Массив нотификаций.
|
|
42
40
|
* В нотификации обязательно передавайте id.
|
|
@@ -69,4 +67,3 @@ declare const NotificationManager: React.ForwardRefExoticComponent<React.HTMLAtt
|
|
|
69
67
|
*/
|
|
70
68
|
container?: PortalProps['getPortalContainer'];
|
|
71
69
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
72
|
-
export { NotificationManagerProps, NotificationManager };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './notification';
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { FC, ReactElement } from 'react';
|
|
2
|
+
import { NotificationProps as CoreNotificationProps } from '@alfalab/core-components-notification';
|
|
3
|
+
export declare type NotificationElement = ReactElement<CoreNotificationProps & {
|
|
4
|
+
id: string;
|
|
5
|
+
}>;
|
|
6
|
+
declare type NotificationProps = {
|
|
7
|
+
element: NotificationElement;
|
|
8
|
+
className: string;
|
|
9
|
+
onRemoveNotification: (id: string) => void;
|
|
10
|
+
};
|
|
11
|
+
export declare const Notification: FC<NotificationProps>;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './component';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './component';
|
package/index.css
CHANGED
|
@@ -1,68 +1,46 @@
|
|
|
1
|
-
|
|
2
|
-
:
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
6
|
-
} :root {
|
|
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 */ /* deprecated */
|
|
17
|
-
--gap-s: 12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
18
|
-
--gap-xl: 24px; /* deprecated */ /* deprecated */ /* deprecated */
|
|
19
|
-
--gap-4xl: 48px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
20
|
-
|
|
21
|
-
/* новые значения, используйте их */
|
|
22
|
-
|
|
23
|
-
/* no-unit может приводить к проблемам в calc (#1559) */
|
|
24
|
-
/* stylelint-disable-next-line length-zero-no-unit */
|
|
1
|
+
:root {
|
|
2
|
+
--gap-s: 12px;
|
|
3
|
+
--gap-xl: 24px;
|
|
4
|
+
--gap-4xl: 48px;
|
|
25
5
|
--gap-0: 0px;
|
|
26
6
|
--gap-12: var(--gap-s);
|
|
27
7
|
--gap-24: var(--gap-xl);
|
|
28
8
|
--gap-48: var(--gap-4xl);
|
|
29
|
-
}
|
|
30
|
-
} :root {
|
|
31
|
-
} /* сбрасывает синюю подсветку при нажатии */ .notification-manager__component_c6m8z {
|
|
9
|
+
} .notification-manager__component_3o9op {
|
|
32
10
|
position: fixed;
|
|
33
11
|
top: var(--gap-0);
|
|
34
12
|
right: var(--gap-12);
|
|
35
13
|
display: flex;
|
|
36
14
|
flex-direction: column;
|
|
37
|
-
} .notification-
|
|
15
|
+
} .notification-manager__component_3o9op .notification-manager__notification_3o9op {
|
|
38
16
|
width: calc(100vw - var(--gap-24));
|
|
39
17
|
margin-top: var(--gap-12);
|
|
40
18
|
will-change: transform
|
|
41
|
-
} .notification-
|
|
19
|
+
} .notification-manager__component_3o9op .notification-manager__notification_3o9op.notification-manager__withoutMargin_3o9op {
|
|
42
20
|
margin-top: var(--gap-0);
|
|
43
|
-
} .notification-
|
|
21
|
+
} .notification-manager__component_3o9op .notification-manager__notification_3o9op.notification-manager__notification_3o9op {
|
|
44
22
|
position: static;
|
|
45
|
-
} .notification-
|
|
23
|
+
} .notification-manager__enter_3o9op {
|
|
46
24
|
visibility: hidden;
|
|
47
25
|
transform: translate(0, -500px);
|
|
48
|
-
} .notification-
|
|
26
|
+
} .notification-manager__enterActive_3o9op {
|
|
49
27
|
visibility: visible;
|
|
50
28
|
transform: translate(0);
|
|
51
29
|
transition: transform 0.4s ease-out;
|
|
52
30
|
} @media (min-width: 600px) {
|
|
53
|
-
.notification-
|
|
31
|
+
.notification-manager__component_3o9op {
|
|
54
32
|
right: var(--gap-48);
|
|
55
33
|
}
|
|
56
34
|
|
|
57
|
-
.notification-
|
|
35
|
+
.notification-manager__component_3o9op .notification-manager__notification_3o9op {
|
|
58
36
|
width: auto;
|
|
59
37
|
}
|
|
60
38
|
|
|
61
|
-
.notification-
|
|
39
|
+
.notification-manager__enter_3o9op {
|
|
62
40
|
transform: translate(100%, 0);
|
|
63
41
|
}
|
|
64
42
|
|
|
65
|
-
.notification-
|
|
43
|
+
.notification-manager__enterActive_3o9op {
|
|
66
44
|
transform: translate(0);
|
|
67
45
|
}
|
|
68
46
|
}
|
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 = {"component":"notification-manager__component_3o9op","notification":"notification-manager__notification_3o9op","withoutMargin":"notification-manager__withoutMargin_3o9op","enter":"notification-manager__enter_3o9op","enterActive":"notification-manager__enterActive_3o9op"};
|
|
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.component {\n position: fixed;\n top: var(--gap-0);\n right: var(--gap-12);\n display: flex;\n flex-direction: column;\n}\n\n.component .notification {\n width: calc(100vw - var(--gap-24));\n margin-top: var(--gap-12);\n will-change: transform;\n\n &.withoutMargin {\n margin-top: var(--gap-0);\n }\n}\n\n.component .notification.notification {\n position: static;\n}\n\n.enter {\n visibility: hidden;\n transform: translate(0, -500px);\n}\n\n.enterActive {\n visibility: visible;\n transform: translate(0);\n transition: transform 0.4s ease-out;\n}\n\n@media (--tablet-s) {\n .component {\n right: var(--gap-48);\n }\n\n .component .notification {\n width: auto;\n }\n\n .enter {\n transform: translate(100%, 0);\n }\n\n .enterActive {\n transform: translate(0);\n }\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,uCAAuC,CAAC,cAAc,CAAC,0CAA0C,CAAC,eAAe,CAAC,2CAA2C,CAAC,OAAO,CAAC,mCAAmC,CAAC,aAAa,CAAC,yCAAyC,CAAC;;;;"}
|
package/modern/component.js
CHANGED
|
@@ -3,11 +3,9 @@ import { TransitionGroup, CSSTransition } from 'react-transition-group';
|
|
|
3
3
|
import cn from 'classnames';
|
|
4
4
|
import { Portal } from '@alfalab/core-components-portal/modern';
|
|
5
5
|
import { Stack } from '@alfalab/core-components-stack/modern';
|
|
6
|
-
import { stackingOrder } from '@alfalab/stack-context';
|
|
6
|
+
import { stackingOrder } from '@alfalab/core-components-stack-context/modern';
|
|
7
7
|
import { Notification } from './components/notification/component.js';
|
|
8
|
-
|
|
9
|
-
const styles = {"component":"notification-manager__component_c6m8z","notification":"notification-manager__notification_c6m8z","withoutMargin":"notification-manager__withoutMargin_c6m8z","enter":"notification-manager__enter_c6m8z","enterActive":"notification-manager__enterActive_c6m8z"};
|
|
10
|
-
require('./index.css')
|
|
8
|
+
import styles from './index.module.css.js';
|
|
11
9
|
|
|
12
10
|
const CSS_TRANSITION_CLASS_NAMES = {
|
|
13
11
|
enter: styles.enter,
|
|
@@ -30,3 +28,4 @@ const NotificationManager = forwardRef(({ notifications, className, dataTestId,
|
|
|
30
28
|
NotificationManager.displayName = 'NotificationManager';
|
|
31
29
|
|
|
32
30
|
export { NotificationManager };
|
|
31
|
+
//# sourceMappingURL=component.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"component.js","sources":["../../src/component.tsx"],"sourcesContent":["import React, { forwardRef, HTMLAttributes } from 'react';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport cn from 'classnames';\n\nimport { Portal, PortalProps } from '@alfalab/core-components-portal';\nimport { Stack } from '@alfalab/core-components-stack';\nimport { stackingOrder } from '@alfalab/core-components-stack-context';\n\nimport { Notification, NotificationElement } from './components';\n\nimport styles from './index.module.css';\n\nexport type NotificationManagerProps = HTMLAttributes<HTMLDivElement> & {\n /**\n * Массив нотификаций.\n * В нотификации обязательно передавайте id.\n */\n notifications: NotificationElement[];\n\n /**\n * Дополнительный класс (native prop)\n */\n className?: string;\n\n /**\n * Идентификатор для систем автоматизированного тестирования\n */\n dataTestId?: string;\n\n /**\n * z-index компонента\n */\n zIndex?: number;\n\n /**\n * Отступ от верхнего края\n */\n offset?: number;\n\n /**\n * Удаление нотификации\n */\n onRemoveNotification: (id: string) => void;\n\n /**\n * Нода, компонент или функция возвращающая их\n *\n * Контейнер к которому будут добавляться порталы\n */\n container?: PortalProps['getPortalContainer'];\n};\n\nconst CSS_TRANSITION_CLASS_NAMES = {\n enter: styles.enter,\n enterActive: styles.enterActive,\n};\n\nconst TIMEOUT = {\n exit: 0,\n enter: 400,\n};\n\nexport const NotificationManager = forwardRef<HTMLDivElement, NotificationManagerProps>(\n (\n {\n notifications,\n className,\n dataTestId,\n zIndex = stackingOrder.TOAST,\n style = {},\n offset,\n onRemoveNotification,\n container,\n ...restProps\n },\n ref,\n ) => (\n <Stack value={zIndex}>\n {(computedZIndex) => (\n <Portal getPortalContainer={container}>\n <div\n className={cn(styles.component, className)}\n ref={ref}\n data-test-id={dataTestId}\n style={{\n zIndex: computedZIndex,\n top: offset,\n ...style,\n }}\n {...restProps}\n >\n <TransitionGroup>\n {notifications.map((element, index) => (\n <CSSTransition\n key={element.props.id}\n timeout={TIMEOUT}\n classNames={CSS_TRANSITION_CLASS_NAMES}\n unmountOnExit={true}\n >\n <Notification\n element={element}\n className={cn(styles.notification, {\n [styles.withoutMargin]: offset && index === 0,\n })}\n onRemoveNotification={onRemoveNotification}\n />\n </CSSTransition>\n ))}\n </TransitionGroup>\n </div>\n </Portal>\n )}\n </Stack>\n ),\n);\n\nNotificationManager.displayName = 'NotificationManager';\n"],"names":[],"mappings":";;;;;;;;;AAoDA,MAAM,0BAA0B,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC,KAAK;IACnB,WAAW,EAAE,MAAM,CAAC,WAAW;CAClC;AAED,MAAM,OAAO,GAAG;AACZ,IAAA,IAAI,EAAE,CAAC;AACP,IAAA,KAAK,EAAE,GAAG;CACb;AAEY,MAAA,mBAAmB,GAAG,UAAU,CACzC,CACI,EACI,aAAa,EACb,SAAS,EACT,UAAU,EACV,MAAM,GAAG,aAAa,CAAC,KAAK,EAC5B,KAAK,GAAG,EAAE,EACV,MAAM,EACN,oBAAoB,EACpB,SAAS,EACT,GAAG,SAAS,EACf,EACD,GAAG,MAEH,KAAC,CAAA,aAAA,CAAA,KAAK,EAAC,EAAA,KAAK,EAAE,MAAM,EACf,EAAA,CAAC,cAAc,MACZ,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,kBAAkB,EAAE,SAAS,EAAA;AACjC,IAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,EAC1C,GAAG,EAAE,GAAG,kBACM,UAAU,EACxB,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,cAAc;AACtB,YAAA,GAAG,EAAE,MAAM;AACX,YAAA,GAAG,KAAK;AACX,SAAA,EAAA,GACG,SAAS,EAAA;AAEb,QAAA,KAAA,CAAA,aAAA,CAAC,eAAe,EAAA,IAAA,EACX,aAAa,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,MAC9B,oBAAC,aAAa,EAAA,EACV,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE,EACrB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,0BAA0B,EACtC,aAAa,EAAE,IAAI,EAAA;AAEnB,YAAA,KAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EACT,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,YAAY,EAAE;oBAC/B,CAAC,MAAM,CAAC,aAAa,GAAG,MAAM,IAAI,KAAK,KAAK,CAAC;AAChD,iBAAA,CAAC,EACF,oBAAoB,EAAE,oBAAoB,GAC5C,CACU,CACnB,CAAC,CACY,CAChB,CACD,CACZ,CACG,CACX;AAGL,mBAAmB,CAAC,WAAW,GAAG,qBAAqB;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"component.js","sources":["../../../../src/components/notification/component.tsx"],"sourcesContent":["import { cloneElement, FC, ReactElement, useCallback, useMemo } from 'react';\nimport cn from 'classnames';\n\nimport { NotificationProps as CoreNotificationProps } from '@alfalab/core-components-notification';\n\nexport type NotificationElement = ReactElement<CoreNotificationProps & { id: string }>;\n\ntype NotificationProps = {\n element: NotificationElement;\n className: string;\n onRemoveNotification: (id: string) => void;\n};\n\nexport const Notification: FC<NotificationProps> = ({\n element,\n className,\n onRemoveNotification,\n}) => {\n const { onClose, onCloseTimeout } = element.props;\n\n const handleClose = useCallback(() => {\n if (onClose) {\n onClose();\n }\n\n onRemoveNotification(element.props.id);\n }, [onClose, onRemoveNotification, element.props.id]);\n\n const handleCloseTimeout = useCallback(() => {\n if (onCloseTimeout) {\n onCloseTimeout();\n }\n\n onRemoveNotification(element.props.id);\n }, [element.props.id, onCloseTimeout, onRemoveNotification]);\n\n const notificationProps = useMemo<CoreNotificationProps>(\n () => ({\n ...element.props,\n visible: true,\n className: cn(className, element.props.className),\n usePortal: false,\n offset: 0,\n onClose: handleClose,\n onCloseTimeout: handleCloseTimeout,\n }),\n [element, handleClose, handleCloseTimeout, className],\n );\n\n return cloneElement(element, notificationProps);\n};\n"],"names":[],"mappings":";;;AAaO,MAAM,YAAY,GAA0B,CAAC,EAChD,OAAO,EACP,SAAS,EACT,oBAAoB,GACvB,KAAI;IACD,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,GAAG,OAAO,CAAC,KAAK;AAEjD,IAAA,MAAM,WAAW,GAAG,WAAW,CAAC,MAAK;AACjC,QAAA,IAAI,OAAO,EAAE;AACT,YAAA,OAAO,EAAE;AACZ;AAED,QAAA,oBAAoB,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;AAC1C,KAAC,EAAE,CAAC,OAAO,EAAE,oBAAoB,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;AAErD,IAAA,MAAM,kBAAkB,GAAG,WAAW,CAAC,MAAK;AACxC,QAAA,IAAI,cAAc,EAAE;AAChB,YAAA,cAAc,EAAE;AACnB;AAED,QAAA,oBAAoB,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;AAC1C,KAAC,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,EAAE,cAAc,EAAE,oBAAoB,CAAC,CAAC;AAE5D,IAAA,MAAM,iBAAiB,GAAG,OAAO,CAC7B,OAAO;QACH,GAAG,OAAO,CAAC,KAAK;AAChB,QAAA,OAAO,EAAE,IAAI;QACb,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC;AACjD,QAAA,SAAS,EAAE,KAAK;AAChB,QAAA,MAAM,EAAE,CAAC;AACT,QAAA,OAAO,EAAE,WAAW;AACpB,QAAA,cAAc,EAAE,kBAAkB;KACrC,CAAC,EACF,CAAC,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,SAAS,CAAC,CACxD;AAED,IAAA,OAAO,YAAY,CAAC,OAAO,EAAE,iBAAiB,CAAC;AACnD;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
package/modern/index.css
CHANGED
|
@@ -1,68 +1,46 @@
|
|
|
1
|
-
|
|
2
|
-
:
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
6
|
-
} :root {
|
|
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 */ /* deprecated */
|
|
17
|
-
--gap-s: 12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
18
|
-
--gap-xl: 24px; /* deprecated */ /* deprecated */ /* deprecated */
|
|
19
|
-
--gap-4xl: 48px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
20
|
-
|
|
21
|
-
/* новые значения, используйте их */
|
|
22
|
-
|
|
23
|
-
/* no-unit может приводить к проблемам в calc (#1559) */
|
|
24
|
-
/* stylelint-disable-next-line length-zero-no-unit */
|
|
1
|
+
:root {
|
|
2
|
+
--gap-s: 12px;
|
|
3
|
+
--gap-xl: 24px;
|
|
4
|
+
--gap-4xl: 48px;
|
|
25
5
|
--gap-0: 0px;
|
|
26
6
|
--gap-12: var(--gap-s);
|
|
27
7
|
--gap-24: var(--gap-xl);
|
|
28
8
|
--gap-48: var(--gap-4xl);
|
|
29
|
-
}
|
|
30
|
-
} :root {
|
|
31
|
-
} /* сбрасывает синюю подсветку при нажатии */ .notification-manager__component_c6m8z {
|
|
9
|
+
} .notification-manager__component_3o9op {
|
|
32
10
|
position: fixed;
|
|
33
11
|
top: var(--gap-0);
|
|
34
12
|
right: var(--gap-12);
|
|
35
13
|
display: flex;
|
|
36
14
|
flex-direction: column;
|
|
37
|
-
} .notification-
|
|
15
|
+
} .notification-manager__component_3o9op .notification-manager__notification_3o9op {
|
|
38
16
|
width: calc(100vw - var(--gap-24));
|
|
39
17
|
margin-top: var(--gap-12);
|
|
40
18
|
will-change: transform
|
|
41
|
-
} .notification-
|
|
19
|
+
} .notification-manager__component_3o9op .notification-manager__notification_3o9op.notification-manager__withoutMargin_3o9op {
|
|
42
20
|
margin-top: var(--gap-0);
|
|
43
|
-
} .notification-
|
|
21
|
+
} .notification-manager__component_3o9op .notification-manager__notification_3o9op.notification-manager__notification_3o9op {
|
|
44
22
|
position: static;
|
|
45
|
-
} .notification-
|
|
23
|
+
} .notification-manager__enter_3o9op {
|
|
46
24
|
visibility: hidden;
|
|
47
25
|
transform: translate(0, -500px);
|
|
48
|
-
} .notification-
|
|
26
|
+
} .notification-manager__enterActive_3o9op {
|
|
49
27
|
visibility: visible;
|
|
50
28
|
transform: translate(0);
|
|
51
29
|
transition: transform 0.4s ease-out;
|
|
52
30
|
} @media (min-width: 600px) {
|
|
53
|
-
.notification-
|
|
31
|
+
.notification-manager__component_3o9op {
|
|
54
32
|
right: var(--gap-48);
|
|
55
33
|
}
|
|
56
34
|
|
|
57
|
-
.notification-
|
|
35
|
+
.notification-manager__component_3o9op .notification-manager__notification_3o9op {
|
|
58
36
|
width: auto;
|
|
59
37
|
}
|
|
60
38
|
|
|
61
|
-
.notification-
|
|
39
|
+
.notification-manager__enter_3o9op {
|
|
62
40
|
transform: translate(100%, 0);
|
|
63
41
|
}
|
|
64
42
|
|
|
65
|
-
.notification-
|
|
43
|
+
.notification-manager__enterActive_3o9op {
|
|
66
44
|
transform: translate(0);
|
|
67
45
|
}
|
|
68
46
|
}
|
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 = {"component":"notification-manager__component_3o9op","notification":"notification-manager__notification_3o9op","withoutMargin":"notification-manager__withoutMargin_3o9op","enter":"notification-manager__enter_3o9op","enterActive":"notification-manager__enterActive_3o9op"};
|
|
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.component {\n position: fixed;\n top: var(--gap-0);\n right: var(--gap-12);\n display: flex;\n flex-direction: column;\n}\n\n.component .notification {\n width: calc(100vw - var(--gap-24));\n margin-top: var(--gap-12);\n will-change: transform;\n\n &.withoutMargin {\n margin-top: var(--gap-0);\n }\n}\n\n.component .notification.notification {\n position: static;\n}\n\n.enter {\n visibility: hidden;\n transform: translate(0, -500px);\n}\n\n.enterActive {\n visibility: visible;\n transform: translate(0);\n transition: transform 0.4s ease-out;\n}\n\n@media (--tablet-s) {\n .component {\n right: var(--gap-48);\n }\n\n .component .notification {\n width: auto;\n }\n\n .enter {\n transform: translate(100%, 0);\n }\n\n .enterActive {\n transform: translate(0);\n }\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,uCAAuC,CAAC,cAAc,CAAC,0CAA0C,CAAC,eAAe,CAAC,2CAA2C,CAAC,OAAO,CAAC,mCAAmC,CAAC,aAAa,CAAC,yCAAyC,CAAC;;;;"}
|
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
import { NotificationElement } from "./components/index";
|
|
6
|
-
type NotificationManagerProps = HTMLAttributes<HTMLDivElement> & {
|
|
1
|
+
import React, { HTMLAttributes } from 'react';
|
|
2
|
+
import { PortalProps } from '@alfalab/core-components-portal';
|
|
3
|
+
import { NotificationElement } from './components';
|
|
4
|
+
export declare type NotificationManagerProps = HTMLAttributes<HTMLDivElement> & {
|
|
7
5
|
/**
|
|
8
6
|
* Массив нотификаций.
|
|
9
7
|
* В нотификации обязательно передавайте id.
|
|
@@ -36,7 +34,7 @@ type NotificationManagerProps = HTMLAttributes<HTMLDivElement> & {
|
|
|
36
34
|
*/
|
|
37
35
|
container?: PortalProps['getPortalContainer'];
|
|
38
36
|
};
|
|
39
|
-
declare const NotificationManager: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
|
|
37
|
+
export declare const NotificationManager: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
|
|
40
38
|
/**
|
|
41
39
|
* Массив нотификаций.
|
|
42
40
|
* В нотификации обязательно передавайте id.
|
|
@@ -69,4 +67,3 @@ declare const NotificationManager: React.ForwardRefExoticComponent<React.HTMLAtt
|
|
|
69
67
|
*/
|
|
70
68
|
container?: PortalProps['getPortalContainer'];
|
|
71
69
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
72
|
-
export { NotificationManagerProps, NotificationManager };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './notification';
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { FC, ReactElement } from 'react';
|
|
2
|
+
import { NotificationProps as CoreNotificationProps } from '@alfalab/core-components-notification';
|
|
3
|
+
export declare type NotificationElement = ReactElement<CoreNotificationProps & {
|
|
4
|
+
id: string;
|
|
5
|
+
}>;
|
|
6
|
+
declare type NotificationProps = {
|
|
7
|
+
element: NotificationElement;
|
|
8
|
+
className: string;
|
|
9
|
+
onRemoveNotification: (id: string) => void;
|
|
10
|
+
};
|
|
11
|
+
export declare const Notification: FC<NotificationProps>;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './component';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './component';
|
package/moderncssm/component.js
CHANGED
|
@@ -3,7 +3,7 @@ import { TransitionGroup, CSSTransition } from 'react-transition-group';
|
|
|
3
3
|
import cn from 'classnames';
|
|
4
4
|
import { Portal } from '@alfalab/core-components-portal/moderncssm';
|
|
5
5
|
import { Stack } from '@alfalab/core-components-stack/moderncssm';
|
|
6
|
-
import { stackingOrder } from '@alfalab/stack-context';
|
|
6
|
+
import { stackingOrder } from '@alfalab/core-components-stack-context/moderncssm';
|
|
7
7
|
import { Notification } from './components/notification/component.js';
|
|
8
8
|
import styles from './index.module.css';
|
|
9
9
|
|
|
@@ -28,3 +28,4 @@ const NotificationManager = forwardRef(({ notifications, className, dataTestId,
|
|
|
28
28
|
NotificationManager.displayName = 'NotificationManager';
|
|
29
29
|
|
|
30
30
|
export { NotificationManager };
|
|
31
|
+
//# sourceMappingURL=component.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"component.js","sources":["../../src/component.tsx"],"sourcesContent":["import React, { forwardRef, HTMLAttributes } from 'react';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport cn from 'classnames';\n\nimport { Portal, PortalProps } from '@alfalab/core-components-portal';\nimport { Stack } from '@alfalab/core-components-stack';\nimport { stackingOrder } from '@alfalab/core-components-stack-context';\n\nimport { Notification, NotificationElement } from './components';\n\nimport styles from './index.module.css';\n\nexport type NotificationManagerProps = HTMLAttributes<HTMLDivElement> & {\n /**\n * Массив нотификаций.\n * В нотификации обязательно передавайте id.\n */\n notifications: NotificationElement[];\n\n /**\n * Дополнительный класс (native prop)\n */\n className?: string;\n\n /**\n * Идентификатор для систем автоматизированного тестирования\n */\n dataTestId?: string;\n\n /**\n * z-index компонента\n */\n zIndex?: number;\n\n /**\n * Отступ от верхнего края\n */\n offset?: number;\n\n /**\n * Удаление нотификации\n */\n onRemoveNotification: (id: string) => void;\n\n /**\n * Нода, компонент или функция возвращающая их\n *\n * Контейнер к которому будут добавляться порталы\n */\n container?: PortalProps['getPortalContainer'];\n};\n\nconst CSS_TRANSITION_CLASS_NAMES = {\n enter: styles.enter,\n enterActive: styles.enterActive,\n};\n\nconst TIMEOUT = {\n exit: 0,\n enter: 400,\n};\n\nexport const NotificationManager = forwardRef<HTMLDivElement, NotificationManagerProps>(\n (\n {\n notifications,\n className,\n dataTestId,\n zIndex = stackingOrder.TOAST,\n style = {},\n offset,\n onRemoveNotification,\n container,\n ...restProps\n },\n ref,\n ) => (\n <Stack value={zIndex}>\n {(computedZIndex) => (\n <Portal getPortalContainer={container}>\n <div\n className={cn(styles.component, className)}\n ref={ref}\n data-test-id={dataTestId}\n style={{\n zIndex: computedZIndex,\n top: offset,\n ...style,\n }}\n {...restProps}\n >\n <TransitionGroup>\n {notifications.map((element, index) => (\n <CSSTransition\n key={element.props.id}\n timeout={TIMEOUT}\n classNames={CSS_TRANSITION_CLASS_NAMES}\n unmountOnExit={true}\n >\n <Notification\n element={element}\n className={cn(styles.notification, {\n [styles.withoutMargin]: offset && index === 0,\n })}\n onRemoveNotification={onRemoveNotification}\n />\n </CSSTransition>\n ))}\n </TransitionGroup>\n </div>\n </Portal>\n )}\n </Stack>\n ),\n);\n\nNotificationManager.displayName = 'NotificationManager';\n"],"names":[],"mappings":";;;;;;;;;AAoDA,MAAM,0BAA0B,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC,KAAK;IACnB,WAAW,EAAE,MAAM,CAAC,WAAW;CAClC;AAED,MAAM,OAAO,GAAG;AACZ,IAAA,IAAI,EAAE,CAAC;AACP,IAAA,KAAK,EAAE,GAAG;CACb;AAEY,MAAA,mBAAmB,GAAG,UAAU,CACzC,CACI,EACI,aAAa,EACb,SAAS,EACT,UAAU,EACV,MAAM,GAAG,aAAa,CAAC,KAAK,EAC5B,KAAK,GAAG,EAAE,EACV,MAAM,EACN,oBAAoB,EACpB,SAAS,EACT,GAAG,SAAS,EACf,EACD,GAAG,MAEH,KAAC,CAAA,aAAA,CAAA,KAAK,EAAC,EAAA,KAAK,EAAE,MAAM,EACf,EAAA,CAAC,cAAc,MACZ,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,kBAAkB,EAAE,SAAS,EAAA;AACjC,IAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,EAC1C,GAAG,EAAE,GAAG,kBACM,UAAU,EACxB,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,cAAc;AACtB,YAAA,GAAG,EAAE,MAAM;AACX,YAAA,GAAG,KAAK;AACX,SAAA,EAAA,GACG,SAAS,EAAA;AAEb,QAAA,KAAA,CAAA,aAAA,CAAC,eAAe,EAAA,IAAA,EACX,aAAa,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,MAC9B,oBAAC,aAAa,EAAA,EACV,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE,EACrB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,0BAA0B,EACtC,aAAa,EAAE,IAAI,EAAA;AAEnB,YAAA,KAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EACT,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,YAAY,EAAE;oBAC/B,CAAC,MAAM,CAAC,aAAa,GAAG,MAAM,IAAI,KAAK,KAAK,CAAC;AAChD,iBAAA,CAAC,EACF,oBAAoB,EAAE,oBAAoB,GAC5C,CACU,CACnB,CAAC,CACY,CAChB,CACD,CACZ,CACG,CACX;AAGL,mBAAmB,CAAC,WAAW,GAAG,qBAAqB;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"component.js","sources":["../../../../src/components/notification/component.tsx"],"sourcesContent":["import { cloneElement, FC, ReactElement, useCallback, useMemo } from 'react';\nimport cn from 'classnames';\n\nimport { NotificationProps as CoreNotificationProps } from '@alfalab/core-components-notification';\n\nexport type NotificationElement = ReactElement<CoreNotificationProps & { id: string }>;\n\ntype NotificationProps = {\n element: NotificationElement;\n className: string;\n onRemoveNotification: (id: string) => void;\n};\n\nexport const Notification: FC<NotificationProps> = ({\n element,\n className,\n onRemoveNotification,\n}) => {\n const { onClose, onCloseTimeout } = element.props;\n\n const handleClose = useCallback(() => {\n if (onClose) {\n onClose();\n }\n\n onRemoveNotification(element.props.id);\n }, [onClose, onRemoveNotification, element.props.id]);\n\n const handleCloseTimeout = useCallback(() => {\n if (onCloseTimeout) {\n onCloseTimeout();\n }\n\n onRemoveNotification(element.props.id);\n }, [element.props.id, onCloseTimeout, onRemoveNotification]);\n\n const notificationProps = useMemo<CoreNotificationProps>(\n () => ({\n ...element.props,\n visible: true,\n className: cn(className, element.props.className),\n usePortal: false,\n offset: 0,\n onClose: handleClose,\n onCloseTimeout: handleCloseTimeout,\n }),\n [element, handleClose, handleCloseTimeout, className],\n );\n\n return cloneElement(element, notificationProps);\n};\n"],"names":[],"mappings":";;;AAaO,MAAM,YAAY,GAA0B,CAAC,EAChD,OAAO,EACP,SAAS,EACT,oBAAoB,GACvB,KAAI;IACD,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,GAAG,OAAO,CAAC,KAAK;AAEjD,IAAA,MAAM,WAAW,GAAG,WAAW,CAAC,MAAK;AACjC,QAAA,IAAI,OAAO,EAAE;AACT,YAAA,OAAO,EAAE;AACZ;AAED,QAAA,oBAAoB,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;AAC1C,KAAC,EAAE,CAAC,OAAO,EAAE,oBAAoB,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;AAErD,IAAA,MAAM,kBAAkB,GAAG,WAAW,CAAC,MAAK;AACxC,QAAA,IAAI,cAAc,EAAE;AAChB,YAAA,cAAc,EAAE;AACnB;AAED,QAAA,oBAAoB,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;AAC1C,KAAC,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,EAAE,cAAc,EAAE,oBAAoB,CAAC,CAAC;AAE5D,IAAA,MAAM,iBAAiB,GAAG,OAAO,CAC7B,OAAO;QACH,GAAG,OAAO,CAAC,KAAK;AAChB,QAAA,OAAO,EAAE,IAAI;QACb,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC;AACjD,QAAA,SAAS,EAAE,KAAK;AAChB,QAAA,MAAM,EAAE,CAAC;AACT,QAAA,OAAO,EAAE,WAAW;AACpB,QAAA,cAAc,EAAE,kBAAkB;KACrC,CAAC,EACF,CAAC,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,SAAS,CAAC,CACxD;AAED,IAAA,OAAO,YAAY,CAAC,OAAO,EAAE,iBAAiB,CAAC;AACnD;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
package/moderncssm/index.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
import { NotificationElement } from "./components/index";
|
|
6
|
-
type NotificationManagerProps = HTMLAttributes<HTMLDivElement> & {
|
|
1
|
+
import React, { HTMLAttributes } from 'react';
|
|
2
|
+
import { PortalProps } from '@alfalab/core-components-portal';
|
|
3
|
+
import { NotificationElement } from './components';
|
|
4
|
+
export declare type NotificationManagerProps = HTMLAttributes<HTMLDivElement> & {
|
|
7
5
|
/**
|
|
8
6
|
* Массив нотификаций.
|
|
9
7
|
* В нотификации обязательно передавайте id.
|
|
@@ -36,7 +34,7 @@ type NotificationManagerProps = HTMLAttributes<HTMLDivElement> & {
|
|
|
36
34
|
*/
|
|
37
35
|
container?: PortalProps['getPortalContainer'];
|
|
38
36
|
};
|
|
39
|
-
declare const NotificationManager: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
|
|
37
|
+
export declare const NotificationManager: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
|
|
40
38
|
/**
|
|
41
39
|
* Массив нотификаций.
|
|
42
40
|
* В нотификации обязательно передавайте id.
|
|
@@ -69,4 +67,3 @@ declare const NotificationManager: React.ForwardRefExoticComponent<React.HTMLAtt
|
|
|
69
67
|
*/
|
|
70
68
|
container?: PortalProps['getPortalContainer'];
|
|
71
69
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
72
|
-
export { NotificationManagerProps, NotificationManager };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './notification';
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { FC, ReactElement } from 'react';
|
|
2
|
+
import { NotificationProps as CoreNotificationProps } from '@alfalab/core-components-notification';
|
|
3
|
+
export declare type NotificationElement = ReactElement<CoreNotificationProps & {
|
|
4
|
+
id: string;
|
|
5
|
+
}>;
|
|
6
|
+
declare type NotificationProps = {
|
|
7
|
+
element: NotificationElement;
|
|
8
|
+
className: string;
|
|
9
|
+
onRemoveNotification: (id: string) => void;
|
|
10
|
+
};
|
|
11
|
+
export declare const Notification: FC<NotificationProps>;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './component';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './component';
|