@alfalab/core-components-notification-manager 5.8.10 → 6.0.0-snapshot-f57d3d0
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.d.ts +6 -9
- package/component.js +10 -11
- package/component.js.map +1 -0
- package/components/index.d.ts +1 -1
- package/components/index.js +3 -2
- package/components/index.js.map +1 -0
- package/components/notification/component.d.ts +5 -5
- package/components/notification/component.js +1 -0
- package/components/notification/component.js.map +1 -0
- package/components/notification/index.d.ts +1 -1
- package/components/notification/index.js +3 -2
- package/components/notification/index.js.map +1 -0
- package/cssm/component.d.ts +6 -9
- package/cssm/component.js +8 -7
- package/cssm/component.js.map +1 -0
- package/cssm/components/index.d.ts +1 -1
- package/cssm/components/index.js +3 -2
- package/cssm/components/index.js.map +1 -0
- package/cssm/components/notification/component.d.ts +5 -5
- package/cssm/components/notification/component.js +1 -0
- package/cssm/components/notification/component.js.map +1 -0
- package/cssm/components/notification/index.d.ts +1 -1
- package/cssm/components/notification/index.js +3 -2
- package/cssm/components/notification/index.js.map +1 -0
- package/cssm/index.d.ts +1 -1
- package/cssm/index.js +1 -0
- package/cssm/index.js.map +1 -0
- package/cssm/index.module.css +5 -26
- package/esm/component.d.ts +6 -9
- package/esm/component.js +3 -4
- package/esm/component.js.map +1 -0
- package/esm/components/index.d.ts +1 -1
- package/esm/components/index.js +1 -0
- package/esm/components/index.js.map +1 -0
- package/esm/components/notification/component.d.ts +5 -5
- package/esm/components/notification/component.js +1 -0
- package/esm/components/notification/component.js.map +1 -0
- package/esm/components/notification/index.d.ts +1 -1
- 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.d.ts +1 -1
- 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/index.css +14 -36
- package/index.d.ts +1 -1
- 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.d.ts +6 -9
- package/modern/component.js +3 -4
- package/modern/component.js.map +1 -0
- package/modern/components/index.d.ts +1 -1
- package/modern/components/index.js +1 -0
- package/modern/components/index.js.map +1 -0
- package/modern/components/notification/component.d.ts +5 -5
- package/modern/components/notification/component.js +1 -0
- package/modern/components/notification/component.js.map +1 -0
- package/modern/components/notification/index.d.ts +1 -1
- 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.d.ts +1 -1
- 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/moderncssm/component.d.ts +6 -9
- package/moderncssm/component.js +2 -1
- package/moderncssm/component.js.map +1 -0
- package/moderncssm/components/index.d.ts +1 -1
- package/moderncssm/components/index.js +1 -0
- package/moderncssm/components/index.js.map +1 -0
- package/moderncssm/components/notification/component.d.ts +5 -5
- package/moderncssm/components/notification/component.js +1 -0
- package/moderncssm/components/notification/component.js.map +1 -0
- package/moderncssm/components/notification/index.d.ts +1 -1
- package/moderncssm/components/notification/index.js +1 -0
- package/moderncssm/components/notification/index.js.map +1 -0
- package/moderncssm/index.d.ts +1 -1
- package/moderncssm/index.js +1 -0
- package/moderncssm/index.js.map +1 -0
- package/moderncssm/index.module.css +0 -2
- package/package.json +7 -6
- package/src/component.tsx +1 -1
package/component.d.ts
CHANGED
|
@@ -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.
|
|
@@ -67,6 +65,5 @@ declare const NotificationManager: React.ForwardRefExoticComponent<React.HTMLAtt
|
|
|
67
65
|
*
|
|
68
66
|
* Контейнер к которому будут добавляться порталы
|
|
69
67
|
*/
|
|
70
|
-
container?:
|
|
68
|
+
container?: any;
|
|
71
69
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
72
|
-
export { NotificationManagerProps, NotificationManager };
|
package/component.js
CHANGED
|
@@ -8,37 +8,36 @@ var reactTransitionGroup = require('react-transition-group');
|
|
|
8
8
|
var cn = require('classnames');
|
|
9
9
|
var coreComponentsPortal = require('@alfalab/core-components-portal');
|
|
10
10
|
var coreComponentsStack = require('@alfalab/core-components-stack');
|
|
11
|
-
var
|
|
12
|
-
var
|
|
11
|
+
var coreComponentsStackContext = require('@alfalab/core-components-stack-context');
|
|
12
|
+
var component = require('./components/notification/component.js');
|
|
13
|
+
var index_module = require('./index.module.css.js');
|
|
13
14
|
|
|
14
15
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
15
16
|
|
|
16
17
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
17
18
|
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
18
19
|
|
|
19
|
-
var 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"};
|
|
20
|
-
require('./index.css')
|
|
21
|
-
|
|
22
20
|
var CSS_TRANSITION_CLASS_NAMES = {
|
|
23
|
-
enter:
|
|
24
|
-
enterActive:
|
|
21
|
+
enter: index_module.enter,
|
|
22
|
+
enterActive: index_module.enterActive,
|
|
25
23
|
};
|
|
26
24
|
var TIMEOUT = {
|
|
27
25
|
exit: 0,
|
|
28
26
|
enter: 400,
|
|
29
27
|
};
|
|
30
28
|
var NotificationManager = React.forwardRef(function (_a, ref) {
|
|
31
|
-
var notifications = _a.notifications, className = _a.className, dataTestId = _a.dataTestId, _b = _a.zIndex, zIndex = _b === void 0 ?
|
|
29
|
+
var notifications = _a.notifications, className = _a.className, dataTestId = _a.dataTestId, _b = _a.zIndex, zIndex = _b === void 0 ? coreComponentsStackContext.stackingOrder.TOAST : _b, _c = _a.style, style = _c === void 0 ? {} : _c, offset = _a.offset, onRemoveNotification = _a.onRemoveNotification, container = _a.container, restProps = tslib.__rest(_a, ["notifications", "className", "dataTestId", "zIndex", "style", "offset", "onRemoveNotification", "container"]);
|
|
32
30
|
return (React__default.default.createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) { return (React__default.default.createElement(coreComponentsPortal.Portal, { getPortalContainer: container },
|
|
33
|
-
React__default.default.createElement("div", tslib.__assign({ className: cn__default.default(
|
|
31
|
+
React__default.default.createElement("div", tslib.__assign({ className: cn__default.default(index_module.component, className), ref: ref, "data-test-id": dataTestId, style: tslib.__assign({ zIndex: computedZIndex, top: offset }, style) }, restProps),
|
|
34
32
|
React__default.default.createElement(reactTransitionGroup.TransitionGroup, null, notifications.map(function (element, index) {
|
|
35
33
|
var _a;
|
|
36
34
|
return (React__default.default.createElement(reactTransitionGroup.CSSTransition, { key: element.props.id, timeout: TIMEOUT, classNames: CSS_TRANSITION_CLASS_NAMES, unmountOnExit: true },
|
|
37
|
-
React__default.default.createElement(
|
|
38
|
-
_a[
|
|
35
|
+
React__default.default.createElement(component.Notification, { element: element, className: cn__default.default(index_module.notification, (_a = {},
|
|
36
|
+
_a[index_module.withoutMargin] = offset && index === 0,
|
|
39
37
|
_a)), onRemoveNotification: onRemoveNotification })));
|
|
40
38
|
}))))); }));
|
|
41
39
|
});
|
|
42
40
|
NotificationManager.displayName = 'NotificationManager';
|
|
43
41
|
|
|
44
42
|
exports.NotificationManager = NotificationManager;
|
|
43
|
+
//# sourceMappingURL=component.js.map
|
package/component.js.map
ADDED
|
@@ -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":["styles","forwardRef","stackingOrder","__rest","React","Stack","Portal","__assign","cn","TransitionGroup","CSSTransition","Notification"],"mappings":";;;;;;;;;;;;;;;;;;;AAoDA,IAAM,0BAA0B,GAAG;IAC/B,KAAK,EAAEA,YAAM,CAAC,KAAK;IACnB,WAAW,EAAEA,YAAM,CAAC,WAAW;CAClC;AAED,IAAM,OAAO,GAAG;AACZ,IAAA,IAAI,EAAE,CAAC;AACP,IAAA,KAAK,EAAE,GAAG;CACb;IAEY,mBAAmB,GAAGC,gBAAU,CACzC,UACI,EAUC,EACD,GAAG,EAAA;AAVC,IAAA,IAAA,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,EAAA,GAAA,EAAA,CAAA,MAA4B,EAA5B,MAAM,GAAA,EAAA,KAAA,MAAA,GAAGC,wCAAa,CAAC,KAAK,GAAA,EAAA,EAC5B,EAAU,GAAA,EAAA,CAAA,KAAA,EAAV,KAAK,GAAG,EAAA,KAAA,MAAA,GAAA,EAAE,GAAA,EAAA,EACV,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,oBAAoB,GAAA,EAAA,CAAA,oBAAA,EACpB,SAAS,GAAA,EAAA,CAAA,SAAA,EACN,SAAS,GAAAC,YAAA,CAAA,EAAA,EAThB,8GAUC,CADe;AAGf,IAAA,QACDC,sBAAC,CAAA,aAAA,CAAAC,yBAAK,IAAC,KAAK,EAAE,MAAM,EACf,EAAA,UAAC,cAAc,EAAA,EAAK,QACjBD,sBAAA,CAAA,aAAA,CAACE,2BAAM,EAAC,EAAA,kBAAkB,EAAE,SAAS,EAAA;AACjC,QAAAF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAAG,cAAA,CAAA,EACI,SAAS,EAAEC,mBAAE,CAACR,YAAM,CAAC,SAAS,EAAE,SAAS,CAAC,EAC1C,GAAG,EAAE,GAAG,EACM,cAAA,EAAA,UAAU,EACxB,KAAK,EACDO,cAAA,CAAA,EAAA,MAAM,EAAE,cAAc,EACtB,GAAG,EAAE,MAAM,EACR,EAAA,KAAK,KAER,SAAS,CAAA;YAEbH,sBAAC,CAAA,aAAA,CAAAK,oCAAe,QACX,aAAa,CAAC,GAAG,CAAC,UAAC,OAAO,EAAE,KAAK,EAAA;;gBAAK,QACnCL,qCAACM,kCAAa,EAAA,EACV,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE,EACrB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,0BAA0B,EACtC,aAAa,EAAE,IAAI,EAAA;AAEnB,oBAAAN,sBAAA,CAAA,aAAA,CAACO,sBAAY,EAAA,EACT,OAAO,EAAE,OAAO,EAChB,SAAS,EAAEH,mBAAE,CAACR,YAAM,CAAC,YAAY,GAAA,EAAA,GAAA,EAAA;4BAC7B,EAAC,CAAAA,YAAM,CAAC,aAAa,CAAA,GAAG,MAAM,IAAI,KAAK,KAAK,CAAC;AAC/C,4BAAA,EAAA,EAAA,EACF,oBAAoB,EAAE,oBAAoB,EAAA,CAC5C,CACU;aACnB,CAAC,CACY,CAChB,CACD,EAhCQ,EAiCpB,CACG;AACX,CAAA;AAGL,mBAAmB,CAAC,WAAW,GAAG,qBAAqB;;;;"}
|
package/components/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from
|
|
1
|
+
export * from './notification';
|
package/components/index.js
CHANGED
|
@@ -2,8 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var component = require('./notification/component.js');
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
exports.Notification =
|
|
9
|
+
exports.Notification = component.Notification;
|
|
10
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { FC, ReactElement } from 'react';
|
|
2
|
-
import { NotificationProps as CoreNotificationProps } from
|
|
3
|
-
type NotificationElement = ReactElement<CoreNotificationProps & {
|
|
2
|
+
import { NotificationProps as CoreNotificationProps } from '@alfalab/core-components-notification';
|
|
3
|
+
export declare type NotificationElement = ReactElement<CoreNotificationProps & {
|
|
4
4
|
id: string;
|
|
5
5
|
}>;
|
|
6
|
-
type NotificationProps = {
|
|
6
|
+
declare type NotificationProps = {
|
|
7
7
|
element: NotificationElement;
|
|
8
8
|
className: string;
|
|
9
9
|
onRemoveNotification: (id: string) => void;
|
|
10
10
|
};
|
|
11
|
-
declare const Notification: FC<NotificationProps>;
|
|
12
|
-
export {
|
|
11
|
+
export declare const Notification: FC<NotificationProps>;
|
|
12
|
+
export {};
|
|
@@ -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":["useCallback","useMemo","__assign","cn","cloneElement"],"mappings":";;;;;;;;;;;;AAaO,IAAM,YAAY,GAA0B,UAAC,EAInD,EAAA;AAHG,IAAA,IAAA,OAAO,aAAA,EACP,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,oBAAoB,GAAA,EAAA,CAAA,oBAAA;IAEd,IAAA,EAAA,GAA8B,OAAO,CAAC,KAAK,EAAzC,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,cAAc,GAAA,EAAA,CAAA,cAAkB;IAEjD,IAAM,WAAW,GAAGA,iBAAW,CAAC,YAAA;AAC5B,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;IAErD,IAAM,kBAAkB,GAAGA,iBAAW,CAAC,YAAA;AACnC,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;IAE5D,IAAM,iBAAiB,GAAGC,aAAO,CAC7B,YAAA,EAAM,QAAAC,cAAA,CAAAA,cAAA,CAAA,EAAA,EACC,OAAO,CAAC,KAAK,CAAA,EAAA,EAChB,OAAO,EAAE,IAAI,EACb,SAAS,EAAEC,mBAAE,CAAC,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,EACjD,SAAS,EAAE,KAAK,EAChB,MAAM,EAAE,CAAC,EACT,OAAO,EAAE,WAAW,EACpB,cAAc,EAAE,kBAAkB,EACpC,CAAA,EAAA,EAAA,EACF,CAAC,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,SAAS,CAAC,CACxD;AAED,IAAA,OAAOC,kBAAY,CAAC,OAAO,EAAE,iBAAiB,CAAC;AACnD;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from
|
|
1
|
+
export * from './component';
|
|
@@ -2,8 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var component = require('./component.js');
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
exports.Notification =
|
|
9
|
+
exports.Notification = component.Notification;
|
|
10
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|
package/cssm/component.d.ts
CHANGED
|
@@ -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.
|
|
@@ -67,6 +65,5 @@ declare const NotificationManager: React.ForwardRefExoticComponent<React.HTMLAtt
|
|
|
67
65
|
*
|
|
68
66
|
* Контейнер к которому будут добавляться порталы
|
|
69
67
|
*/
|
|
70
|
-
container?:
|
|
68
|
+
container?: any;
|
|
71
69
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
72
|
-
export { NotificationManagerProps, NotificationManager };
|
package/cssm/component.js
CHANGED
|
@@ -6,10 +6,10 @@ var tslib = require('tslib');
|
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var reactTransitionGroup = require('react-transition-group');
|
|
8
8
|
var cn = require('classnames');
|
|
9
|
-
var
|
|
10
|
-
var
|
|
11
|
-
var
|
|
12
|
-
var
|
|
9
|
+
var cssm$2 = require('@alfalab/core-components-portal/cssm');
|
|
10
|
+
var cssm$1 = require('@alfalab/core-components-stack/cssm');
|
|
11
|
+
var cssm = require('@alfalab/core-components-stack-context/cssm');
|
|
12
|
+
var component = require('./components/notification/component.js');
|
|
13
13
|
var styles = require('./index.module.css');
|
|
14
14
|
|
|
15
15
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
@@ -27,13 +27,13 @@ var TIMEOUT = {
|
|
|
27
27
|
enter: 400,
|
|
28
28
|
};
|
|
29
29
|
var NotificationManager = React.forwardRef(function (_a, ref) {
|
|
30
|
-
var notifications = _a.notifications, className = _a.className, dataTestId = _a.dataTestId, _b = _a.zIndex, zIndex = _b === void 0 ?
|
|
31
|
-
return (React__default.default.createElement(
|
|
30
|
+
var notifications = _a.notifications, className = _a.className, dataTestId = _a.dataTestId, _b = _a.zIndex, zIndex = _b === void 0 ? cssm.stackingOrder.TOAST : _b, _c = _a.style, style = _c === void 0 ? {} : _c, offset = _a.offset, onRemoveNotification = _a.onRemoveNotification, container = _a.container, restProps = tslib.__rest(_a, ["notifications", "className", "dataTestId", "zIndex", "style", "offset", "onRemoveNotification", "container"]);
|
|
31
|
+
return (React__default.default.createElement(cssm$1.Stack, { value: zIndex }, function (computedZIndex) { return (React__default.default.createElement(cssm$2.Portal, { getPortalContainer: container },
|
|
32
32
|
React__default.default.createElement("div", tslib.__assign({ className: cn__default.default(styles__default.default.component, className), ref: ref, "data-test-id": dataTestId, style: tslib.__assign({ zIndex: computedZIndex, top: offset }, style) }, restProps),
|
|
33
33
|
React__default.default.createElement(reactTransitionGroup.TransitionGroup, null, notifications.map(function (element, index) {
|
|
34
34
|
var _a;
|
|
35
35
|
return (React__default.default.createElement(reactTransitionGroup.CSSTransition, { key: element.props.id, timeout: TIMEOUT, classNames: CSS_TRANSITION_CLASS_NAMES, unmountOnExit: true },
|
|
36
|
-
React__default.default.createElement(
|
|
36
|
+
React__default.default.createElement(component.Notification, { element: element, className: cn__default.default(styles__default.default.notification, (_a = {},
|
|
37
37
|
_a[styles__default.default.withoutMargin] = offset && index === 0,
|
|
38
38
|
_a)), onRemoveNotification: onRemoveNotification })));
|
|
39
39
|
}))))); }));
|
|
@@ -41,3 +41,4 @@ var NotificationManager = React.forwardRef(function (_a, ref) {
|
|
|
41
41
|
NotificationManager.displayName = 'NotificationManager';
|
|
42
42
|
|
|
43
43
|
exports.NotificationManager = NotificationManager;
|
|
44
|
+
//# 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":["styles","forwardRef","stackingOrder","__rest","React","Stack","Portal","__assign","cn","TransitionGroup","CSSTransition","Notification"],"mappings":";;;;;;;;;;;;;;;;;;;;AAoDA,IAAM,0BAA0B,GAAG;IAC/B,KAAK,EAAEA,uBAAM,CAAC,KAAK;IACnB,WAAW,EAAEA,uBAAM,CAAC,WAAW;CAClC;AAED,IAAM,OAAO,GAAG;AACZ,IAAA,IAAI,EAAE,CAAC;AACP,IAAA,KAAK,EAAE,GAAG;CACb;IAEY,mBAAmB,GAAGC,gBAAU,CACzC,UACI,EAUC,EACD,GAAG,EAAA;AAVC,IAAA,IAAA,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,EAAA,GAAA,EAAA,CAAA,MAA4B,EAA5B,MAAM,GAAA,EAAA,KAAA,MAAA,GAAGC,kBAAa,CAAC,KAAK,GAAA,EAAA,EAC5B,EAAU,GAAA,EAAA,CAAA,KAAA,EAAV,KAAK,GAAG,EAAA,KAAA,MAAA,GAAA,EAAE,GAAA,EAAA,EACV,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,oBAAoB,GAAA,EAAA,CAAA,oBAAA,EACpB,SAAS,GAAA,EAAA,CAAA,SAAA,EACN,SAAS,GAAAC,YAAA,CAAA,EAAA,EAThB,8GAUC,CADe;AAGf,IAAA,QACDC,sBAAC,CAAA,aAAA,CAAAC,YAAK,IAAC,KAAK,EAAE,MAAM,EACf,EAAA,UAAC,cAAc,EAAA,EAAK,QACjBD,sBAAA,CAAA,aAAA,CAACE,aAAM,EAAC,EAAA,kBAAkB,EAAE,SAAS,EAAA;AACjC,QAAAF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAAG,cAAA,CAAA,EACI,SAAS,EAAEC,mBAAE,CAACR,uBAAM,CAAC,SAAS,EAAE,SAAS,CAAC,EAC1C,GAAG,EAAE,GAAG,EACM,cAAA,EAAA,UAAU,EACxB,KAAK,EACDO,cAAA,CAAA,EAAA,MAAM,EAAE,cAAc,EACtB,GAAG,EAAE,MAAM,EACR,EAAA,KAAK,KAER,SAAS,CAAA;YAEbH,sBAAC,CAAA,aAAA,CAAAK,oCAAe,QACX,aAAa,CAAC,GAAG,CAAC,UAAC,OAAO,EAAE,KAAK,EAAA;;gBAAK,QACnCL,qCAACM,kCAAa,EAAA,EACV,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE,EACrB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,0BAA0B,EACtC,aAAa,EAAE,IAAI,EAAA;AAEnB,oBAAAN,sBAAA,CAAA,aAAA,CAACO,sBAAY,EAAA,EACT,OAAO,EAAE,OAAO,EAChB,SAAS,EAAEH,mBAAE,CAACR,uBAAM,CAAC,YAAY,GAAA,EAAA,GAAA,EAAA;4BAC7B,EAAC,CAAAA,uBAAM,CAAC,aAAa,CAAA,GAAG,MAAM,IAAI,KAAK,KAAK,CAAC;AAC/C,4BAAA,EAAA,EAAA,EACF,oBAAoB,EAAE,oBAAoB,EAAA,CAC5C,CACU;aACnB,CAAC,CACY,CAChB,CACD,EAhCQ,EAiCpB,CACG;AACX,CAAA;AAGL,mBAAmB,CAAC,WAAW,GAAG,qBAAqB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from
|
|
1
|
+
export * from './notification';
|
package/cssm/components/index.js
CHANGED
|
@@ -2,8 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var component = require('./notification/component.js');
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
exports.Notification =
|
|
9
|
+
exports.Notification = component.Notification;
|
|
10
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { FC, ReactElement } from 'react';
|
|
2
|
-
import { NotificationProps as CoreNotificationProps } from
|
|
3
|
-
type NotificationElement = ReactElement<CoreNotificationProps & {
|
|
2
|
+
import { NotificationProps as CoreNotificationProps } from '@alfalab/core-components-notification';
|
|
3
|
+
export declare type NotificationElement = ReactElement<CoreNotificationProps & {
|
|
4
4
|
id: string;
|
|
5
5
|
}>;
|
|
6
|
-
type NotificationProps = {
|
|
6
|
+
declare type NotificationProps = {
|
|
7
7
|
element: NotificationElement;
|
|
8
8
|
className: string;
|
|
9
9
|
onRemoveNotification: (id: string) => void;
|
|
10
10
|
};
|
|
11
|
-
declare const Notification: FC<NotificationProps>;
|
|
12
|
-
export {
|
|
11
|
+
export declare const Notification: FC<NotificationProps>;
|
|
12
|
+
export {};
|
|
@@ -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":["useCallback","useMemo","__assign","cn","cloneElement"],"mappings":";;;;;;;;;;;;AAaO,IAAM,YAAY,GAA0B,UAAC,EAInD,EAAA;AAHG,IAAA,IAAA,OAAO,aAAA,EACP,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,oBAAoB,GAAA,EAAA,CAAA,oBAAA;IAEd,IAAA,EAAA,GAA8B,OAAO,CAAC,KAAK,EAAzC,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,cAAc,GAAA,EAAA,CAAA,cAAkB;IAEjD,IAAM,WAAW,GAAGA,iBAAW,CAAC,YAAA;AAC5B,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;IAErD,IAAM,kBAAkB,GAAGA,iBAAW,CAAC,YAAA;AACnC,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;IAE5D,IAAM,iBAAiB,GAAGC,aAAO,CAC7B,YAAA,EAAM,QAAAC,cAAA,CAAAA,cAAA,CAAA,EAAA,EACC,OAAO,CAAC,KAAK,CAAA,EAAA,EAChB,OAAO,EAAE,IAAI,EACb,SAAS,EAAEC,mBAAE,CAAC,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,EACjD,SAAS,EAAE,KAAK,EAChB,MAAM,EAAE,CAAC,EACT,OAAO,EAAE,WAAW,EACpB,cAAc,EAAE,kBAAkB,EACpC,CAAA,EAAA,EAAA,EACF,CAAC,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,SAAS,CAAC,CACxD;AAED,IAAA,OAAOC,kBAAY,CAAC,OAAO,EAAE,iBAAiB,CAAC;AACnD;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from
|
|
1
|
+
export * from './component';
|
|
@@ -2,8 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var component = require('./component.js');
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
exports.Notification =
|
|
9
|
+
exports.Notification = component.Notification;
|
|
10
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|
package/cssm/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from
|
|
1
|
+
export * from './component';
|
package/cssm/index.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|
package/cssm/index.module.css
CHANGED
|
@@ -1,33 +1,12 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
} :root {
|
|
6
|
-
|
|
7
|
-
/* Hard */
|
|
8
|
-
|
|
9
|
-
/* Up */
|
|
10
|
-
|
|
11
|
-
/* Hard up */
|
|
12
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
13
|
-
|
|
14
|
-
/* новые значения, используйте их */
|
|
15
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */
|
|
16
|
-
--gap-s: 12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
17
|
-
--gap-xl: 24px; /* deprecated */ /* deprecated */ /* deprecated */
|
|
18
|
-
--gap-4xl: 48px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
19
|
-
|
|
20
|
-
/* новые значения, используйте их */
|
|
21
|
-
|
|
22
|
-
/* no-unit может приводить к проблемам в calc (#1559) */
|
|
23
|
-
/* stylelint-disable-next-line length-zero-no-unit */
|
|
1
|
+
:root {
|
|
2
|
+
--gap-s: 12px;
|
|
3
|
+
--gap-xl: 24px;
|
|
4
|
+
--gap-4xl: 48px;
|
|
24
5
|
--gap-0: 0px;
|
|
25
6
|
--gap-12: var(--gap-s);
|
|
26
7
|
--gap-24: var(--gap-xl);
|
|
27
8
|
--gap-48: var(--gap-4xl);
|
|
28
|
-
}
|
|
29
|
-
} :root {
|
|
30
|
-
} /* сбрасывает синюю подсветку при нажатии */ .component {
|
|
9
|
+
} .component {
|
|
31
10
|
position: fixed;
|
|
32
11
|
top: var(--gap-0);
|
|
33
12
|
right: var(--gap-12);
|
package/esm/component.d.ts
CHANGED
|
@@ -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.
|
|
@@ -67,6 +65,5 @@ declare const NotificationManager: React.ForwardRefExoticComponent<React.HTMLAtt
|
|
|
67
65
|
*
|
|
68
66
|
* Контейнер к которому будут добавляться порталы
|
|
69
67
|
*/
|
|
70
|
-
container?:
|
|
68
|
+
container?: any;
|
|
71
69
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
72
|
-
export { NotificationManagerProps, NotificationManager };
|
package/esm/component.js
CHANGED
|
@@ -4,11 +4,9 @@ import { TransitionGroup, CSSTransition } from 'react-transition-group';
|
|
|
4
4
|
import cn from 'classnames';
|
|
5
5
|
import { Portal } from '@alfalab/core-components-portal/esm';
|
|
6
6
|
import { Stack } from '@alfalab/core-components-stack/esm';
|
|
7
|
-
import { stackingOrder } from '@alfalab/stack-context';
|
|
7
|
+
import { stackingOrder } from '@alfalab/core-components-stack-context/esm';
|
|
8
8
|
import { Notification } from './components/notification/component.js';
|
|
9
|
-
|
|
10
|
-
var 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"};
|
|
11
|
-
require('./index.css')
|
|
9
|
+
import styles from './index.module.css.js';
|
|
12
10
|
|
|
13
11
|
var CSS_TRANSITION_CLASS_NAMES = {
|
|
14
12
|
enter: styles.enter,
|
|
@@ -33,3 +31,4 @@ var NotificationManager = forwardRef(function (_a, ref) {
|
|
|
33
31
|
NotificationManager.displayName = 'NotificationManager';
|
|
34
32
|
|
|
35
33
|
export { NotificationManager };
|
|
34
|
+
//# 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,IAAM,0BAA0B,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC,KAAK;IACnB,WAAW,EAAE,MAAM,CAAC,WAAW;CAClC;AAED,IAAM,OAAO,GAAG;AACZ,IAAA,IAAI,EAAE,CAAC;AACP,IAAA,KAAK,EAAE,GAAG;CACb;IAEY,mBAAmB,GAAG,UAAU,CACzC,UACI,EAUC,EACD,GAAG,EAAA;AAVC,IAAA,IAAA,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,EAAA,GAAA,EAAA,CAAA,MAA4B,EAA5B,MAAM,GAAA,EAAA,KAAA,MAAA,GAAG,aAAa,CAAC,KAAK,GAAA,EAAA,EAC5B,EAAU,GAAA,EAAA,CAAA,KAAA,EAAV,KAAK,GAAG,EAAA,KAAA,MAAA,GAAA,EAAE,GAAA,EAAA,EACV,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,oBAAoB,GAAA,EAAA,CAAA,oBAAA,EACpB,SAAS,GAAA,EAAA,CAAA,SAAA,EACN,SAAS,GAAA,MAAA,CAAA,EAAA,EAThB,8GAUC,CADe;AAGf,IAAA,QACD,KAAC,CAAA,aAAA,CAAA,KAAK,IAAC,KAAK,EAAE,MAAM,EACf,EAAA,UAAC,cAAc,EAAA,EAAK,QACjB,KAAA,CAAA,aAAA,CAAC,MAAM,EAAC,EAAA,kBAAkB,EAAE,SAAS,EAAA;AACjC,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,QAAA,CAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,EAC1C,GAAG,EAAE,GAAG,EACM,cAAA,EAAA,UAAU,EACxB,KAAK,EACD,QAAA,CAAA,EAAA,MAAM,EAAE,cAAc,EACtB,GAAG,EAAE,MAAM,EACR,EAAA,KAAK,KAER,SAAS,CAAA;YAEb,KAAC,CAAA,aAAA,CAAA,eAAe,QACX,aAAa,CAAC,GAAG,CAAC,UAAC,OAAO,EAAE,KAAK,EAAA;;gBAAK,QACnC,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,oBAAA,KAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EACT,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,YAAY,GAAA,EAAA,GAAA,EAAA;4BAC7B,EAAC,CAAA,MAAM,CAAC,aAAa,CAAA,GAAG,MAAM,IAAI,KAAK,KAAK,CAAC;AAC/C,4BAAA,EAAA,EAAA,EACF,oBAAoB,EAAE,oBAAoB,EAAA,CAC5C,CACU;aACnB,CAAC,CACY,CAChB,CACD,EAhCQ,EAiCpB,CACG;AACX,CAAA;AAGL,mBAAmB,CAAC,WAAW,GAAG,qBAAqB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from
|
|
1
|
+
export * from './notification';
|
package/esm/components/index.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { FC, ReactElement } from 'react';
|
|
2
|
-
import { NotificationProps as CoreNotificationProps } from
|
|
3
|
-
type NotificationElement = ReactElement<CoreNotificationProps & {
|
|
2
|
+
import { NotificationProps as CoreNotificationProps } from '@alfalab/core-components-notification';
|
|
3
|
+
export declare type NotificationElement = ReactElement<CoreNotificationProps & {
|
|
4
4
|
id: string;
|
|
5
5
|
}>;
|
|
6
|
-
type NotificationProps = {
|
|
6
|
+
declare type NotificationProps = {
|
|
7
7
|
element: NotificationElement;
|
|
8
8
|
className: string;
|
|
9
9
|
onRemoveNotification: (id: string) => void;
|
|
10
10
|
};
|
|
11
|
-
declare const Notification: FC<NotificationProps>;
|
|
12
|
-
export {
|
|
11
|
+
export declare const Notification: FC<NotificationProps>;
|
|
12
|
+
export {};
|
|
@@ -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,IAAM,YAAY,GAA0B,UAAC,EAInD,EAAA;AAHG,IAAA,IAAA,OAAO,aAAA,EACP,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,oBAAoB,GAAA,EAAA,CAAA,oBAAA;IAEd,IAAA,EAAA,GAA8B,OAAO,CAAC,KAAK,EAAzC,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,cAAc,GAAA,EAAA,CAAA,cAAkB;IAEjD,IAAM,WAAW,GAAG,WAAW,CAAC,YAAA;AAC5B,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;IAErD,IAAM,kBAAkB,GAAG,WAAW,CAAC,YAAA;AACnC,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;IAE5D,IAAM,iBAAiB,GAAG,OAAO,CAC7B,YAAA,EAAM,QAAA,QAAA,CAAA,QAAA,CAAA,EAAA,EACC,OAAO,CAAC,KAAK,CAAA,EAAA,EAChB,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,EACjD,SAAS,EAAE,KAAK,EAChB,MAAM,EAAE,CAAC,EACT,OAAO,EAAE,WAAW,EACpB,cAAc,EAAE,kBAAkB,EACpC,CAAA,EAAA,EAAA,EACF,CAAC,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,SAAS,CAAC,CACxD;AAED,IAAA,OAAO,YAAY,CAAC,OAAO,EAAE,iBAAiB,CAAC;AACnD;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from
|
|
1
|
+
export * from './component';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|