@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
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.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":";;;;;;;;"}
|
|
@@ -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;;;;"}
|
|
@@ -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.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;;;;"}
|
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":";;;;;;;;"}
|
|
@@ -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;;;;"}
|
|
@@ -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.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);
|
|
@@ -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/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;;;;"}
|
package/esm/components/index.js
CHANGED
|
@@ -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,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;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
package/esm/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/esm/index.js
CHANGED
package/esm/index.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import './index.css';
|
|
2
|
+
|
|
3
|
+
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"};
|
|
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,aAAe,CAAC,WAAW,CAAC,uCAAuC,CAAC,cAAc,CAAC,0CAA0C,CAAC,eAAe,CAAC,2CAA2C,CAAC,OAAO,CAAC,mCAAmC,CAAC,aAAa,CAAC,yCAAyC,CAAC;;;;"}
|