@alfalab/core-components-notification-manager 5.1.8 → 5.1.10
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-ad675777.d.ts → component-6e41fd5e.d.ts} +0 -0
- package/{component-ad675777.js → component-6e41fd5e.js} +3 -3
- package/component.js +9 -11
- package/components/index.js +1 -3
- package/components/notification/component.js +1 -3
- package/components/notification/index.d.ts +1 -1
- package/components/notification/index.js +1 -3
- package/cssm/{component-f0e3da83.d.ts → component-5b782f5c.d.ts} +0 -0
- package/cssm/{component-f0e3da83.js → component-5b782f5c.js} +3 -3
- package/cssm/component.js +13 -15
- package/cssm/components/index.js +1 -3
- package/cssm/components/notification/component.js +1 -3
- package/cssm/components/notification/index.d.ts +1 -1
- package/cssm/components/notification/index.js +1 -3
- package/cssm/index.js +3 -5
- package/esm/{component-25ea14c2.d.ts → component-1907c039.d.ts} +0 -0
- package/esm/{component-25ea14c2.js → component-1907c039.js} +0 -0
- package/esm/component.js +2 -2
- package/esm/components/index.js +1 -1
- package/esm/components/notification/component.js +1 -1
- package/esm/components/notification/index.d.ts +1 -1
- package/esm/components/notification/index.js +1 -1
- package/esm/index.css +11 -11
- package/esm/index.js +3 -3
- package/index.css +11 -11
- package/index.js +3 -5
- package/modern/component.js +2 -2
- package/modern/components/index.js +1 -1
- package/modern/components/notification/index.js +1 -1
- package/modern/index.css +11 -11
- package/modern/index.js +1 -1
- package/package.json +4 -4
|
File without changes
|
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var cn = require('classnames');
|
|
5
5
|
|
|
6
|
-
function
|
|
6
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
7
7
|
|
|
8
|
-
var cn__default = /*#__PURE__*/
|
|
8
|
+
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
9
9
|
|
|
10
10
|
/******************************************************************************
|
|
11
11
|
Copyright (c) Microsoft Corporation.
|
|
@@ -61,7 +61,7 @@ var Notification = function (_a) {
|
|
|
61
61
|
}
|
|
62
62
|
onRemoveNotification(element.props.id);
|
|
63
63
|
}, [element.props.id, onCloseTimeout, onRemoveNotification]);
|
|
64
|
-
var notificationProps = React.useMemo(function () { return (exports.__assign(exports.__assign({}, element.props), { visible: true, className: cn__default
|
|
64
|
+
var notificationProps = React.useMemo(function () { return (exports.__assign(exports.__assign({}, element.props), { visible: true, className: cn__default.default(className, element.props.className), usePortal: false, offset: 0, onClose: handleClose, onCloseTimeout: handleCloseTimeout })); }, [element, handleClose, handleCloseTimeout, className]);
|
|
65
65
|
return React.cloneElement(element, notificationProps);
|
|
66
66
|
};
|
|
67
67
|
|
package/component.js
CHANGED
|
@@ -1,20 +1,18 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var components_notification_component = require('./component-ad675777.js');
|
|
3
|
+
var components_notification_component = require('./component-6e41fd5e.js');
|
|
6
4
|
var React = require('react');
|
|
7
5
|
var reactTransitionGroup = require('react-transition-group');
|
|
8
6
|
var cn = require('classnames');
|
|
9
7
|
var coreComponentsPortal = require('@alfalab/core-components-portal');
|
|
10
8
|
var coreComponentsStack = require('@alfalab/core-components-stack');
|
|
11
9
|
|
|
12
|
-
function
|
|
10
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
13
11
|
|
|
14
|
-
var React__default = /*#__PURE__*/
|
|
15
|
-
var cn__default = /*#__PURE__*/
|
|
12
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
13
|
+
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
16
14
|
|
|
17
|
-
var styles = {"component":"notification-
|
|
15
|
+
var styles = {"component":"notification-manager__component_1sqn5","notification":"notification-manager__notification_1sqn5","enter":"notification-manager__enter_1sqn5","enterActive":"notification-manager__enterActive_1sqn5","exit":"notification-manager__exit_1sqn5","exitActive":"notification-manager__exitActive_1sqn5"};
|
|
18
16
|
require('./index.css')
|
|
19
17
|
|
|
20
18
|
var CSS_TRANSITION_CLASS_NAMES = {
|
|
@@ -25,10 +23,10 @@ var CSS_TRANSITION_CLASS_NAMES = {
|
|
|
25
23
|
};
|
|
26
24
|
var NotificationManager = React.forwardRef(function (_a, ref) {
|
|
27
25
|
var notifications = _a.notifications, className = _a.className, dataTestId = _a.dataTestId, _b = _a.zIndex, zIndex = _b === void 0 ? coreComponentsStack.stackingOrder.TOAST : _b, _c = _a.style, style = _c === void 0 ? {} : _c, onRemoveNotification = _a.onRemoveNotification, restProps = components_notification_component.__rest(_a, ["notifications", "className", "dataTestId", "zIndex", "style", "onRemoveNotification"]);
|
|
28
|
-
return (React__default
|
|
29
|
-
React__default
|
|
30
|
-
React__default
|
|
31
|
-
React__default
|
|
26
|
+
return (React__default.default.createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) { return (React__default.default.createElement(coreComponentsPortal.Portal, null,
|
|
27
|
+
React__default.default.createElement("div", components_notification_component.__assign({ className: cn__default.default(styles.component, className), ref: ref, "data-test-id": dataTestId, style: components_notification_component.__assign({ zIndex: computedZIndex }, style) }, restProps),
|
|
28
|
+
React__default.default.createElement(reactTransitionGroup.TransitionGroup, null, notifications.map(function (element) { return (React__default.default.createElement(reactTransitionGroup.CSSTransition, { key: element.props.id, timeout: 400, classNames: CSS_TRANSITION_CLASS_NAMES, unmountOnExit: true },
|
|
29
|
+
React__default.default.createElement(components_notification_component.Notification, { element: element, className: styles.notification, onRemoveNotification: onRemoveNotification }))); }))))); }));
|
|
32
30
|
});
|
|
33
31
|
|
|
34
32
|
exports.NotificationManager = NotificationManager;
|
package/components/index.js
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var components_notification_component = require('../component-ad675777.js');
|
|
3
|
+
var components_notification_component = require('../component-6e41fd5e.js');
|
|
6
4
|
require('react');
|
|
7
5
|
require('classnames');
|
|
8
6
|
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var components_notification_component = require('../../component-ad675777.js');
|
|
3
|
+
var components_notification_component = require('../../component-6e41fd5e.js');
|
|
6
4
|
require('react');
|
|
7
5
|
require('classnames');
|
|
8
6
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from "../../component-
|
|
1
|
+
export * from "../../component-6e41fd5e";
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var components_notification_component = require('../../component-ad675777.js');
|
|
3
|
+
var components_notification_component = require('../../component-6e41fd5e.js');
|
|
6
4
|
require('react');
|
|
7
5
|
require('classnames');
|
|
8
6
|
|
|
File without changes
|
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var cn = require('classnames');
|
|
5
5
|
|
|
6
|
-
function
|
|
6
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
7
7
|
|
|
8
|
-
var cn__default = /*#__PURE__*/
|
|
8
|
+
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
9
9
|
|
|
10
10
|
/******************************************************************************
|
|
11
11
|
Copyright (c) Microsoft Corporation.
|
|
@@ -61,7 +61,7 @@ var Notification = function (_a) {
|
|
|
61
61
|
}
|
|
62
62
|
onRemoveNotification(element.props.id);
|
|
63
63
|
}, [element.props.id, onCloseTimeout, onRemoveNotification]);
|
|
64
|
-
var notificationProps = React.useMemo(function () { return (exports.__assign(exports.__assign({}, element.props), { visible: true, className: cn__default
|
|
64
|
+
var notificationProps = React.useMemo(function () { return (exports.__assign(exports.__assign({}, element.props), { visible: true, className: cn__default.default(className, element.props.className), usePortal: false, offset: 0, onClose: handleClose, onCloseTimeout: handleCloseTimeout })); }, [element, handleClose, handleCloseTimeout, className]);
|
|
65
65
|
return React.cloneElement(element, notificationProps);
|
|
66
66
|
};
|
|
67
67
|
|
package/cssm/component.js
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var components_notification_component = require('./component-f0e3da83.js');
|
|
3
|
+
var components_notification_component = require('./component-5b782f5c.js');
|
|
6
4
|
var React = require('react');
|
|
7
5
|
var reactTransitionGroup = require('react-transition-group');
|
|
8
6
|
var cn = require('classnames');
|
|
@@ -10,24 +8,24 @@ var coreComponentsPortal = require('@alfalab/core-components-portal/cssm');
|
|
|
10
8
|
var coreComponentsStack = require('@alfalab/core-components-stack/cssm');
|
|
11
9
|
var styles = require('./index.module.css');
|
|
12
10
|
|
|
13
|
-
function
|
|
11
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
14
12
|
|
|
15
|
-
var React__default = /*#__PURE__*/
|
|
16
|
-
var cn__default = /*#__PURE__*/
|
|
17
|
-
var styles__default = /*#__PURE__*/
|
|
13
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
14
|
+
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
15
|
+
var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
|
|
18
16
|
|
|
19
17
|
var CSS_TRANSITION_CLASS_NAMES = {
|
|
20
|
-
enter: styles__default
|
|
21
|
-
enterActive: styles__default
|
|
22
|
-
exit: styles__default
|
|
23
|
-
exitActive: styles__default
|
|
18
|
+
enter: styles__default.default.enter,
|
|
19
|
+
enterActive: styles__default.default.enterActive,
|
|
20
|
+
exit: styles__default.default.exit,
|
|
21
|
+
exitActive: styles__default.default.exitActive,
|
|
24
22
|
};
|
|
25
23
|
var NotificationManager = React.forwardRef(function (_a, ref) {
|
|
26
24
|
var notifications = _a.notifications, className = _a.className, dataTestId = _a.dataTestId, _b = _a.zIndex, zIndex = _b === void 0 ? coreComponentsStack.stackingOrder.TOAST : _b, _c = _a.style, style = _c === void 0 ? {} : _c, onRemoveNotification = _a.onRemoveNotification, restProps = components_notification_component.__rest(_a, ["notifications", "className", "dataTestId", "zIndex", "style", "onRemoveNotification"]);
|
|
27
|
-
return (React__default
|
|
28
|
-
React__default
|
|
29
|
-
React__default
|
|
30
|
-
React__default
|
|
25
|
+
return (React__default.default.createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) { return (React__default.default.createElement(coreComponentsPortal.Portal, null,
|
|
26
|
+
React__default.default.createElement("div", components_notification_component.__assign({ className: cn__default.default(styles__default.default.component, className), ref: ref, "data-test-id": dataTestId, style: components_notification_component.__assign({ zIndex: computedZIndex }, style) }, restProps),
|
|
27
|
+
React__default.default.createElement(reactTransitionGroup.TransitionGroup, null, notifications.map(function (element) { return (React__default.default.createElement(reactTransitionGroup.CSSTransition, { key: element.props.id, timeout: 400, classNames: CSS_TRANSITION_CLASS_NAMES, unmountOnExit: true },
|
|
28
|
+
React__default.default.createElement(components_notification_component.Notification, { element: element, className: styles__default.default.notification, onRemoveNotification: onRemoveNotification }))); }))))); }));
|
|
31
29
|
});
|
|
32
30
|
|
|
33
31
|
exports.NotificationManager = NotificationManager;
|
package/cssm/components/index.js
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var components_notification_component = require('../component-f0e3da83.js');
|
|
3
|
+
var components_notification_component = require('../component-5b782f5c.js');
|
|
6
4
|
require('react');
|
|
7
5
|
require('classnames');
|
|
8
6
|
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var components_notification_component = require('../../component-f0e3da83.js');
|
|
3
|
+
var components_notification_component = require('../../component-5b782f5c.js');
|
|
6
4
|
require('react');
|
|
7
5
|
require('classnames');
|
|
8
6
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from "../../component-
|
|
1
|
+
export * from "../../component-5b782f5c";
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var components_notification_component = require('../../component-f0e3da83.js');
|
|
3
|
+
var components_notification_component = require('../../component-5b782f5c.js');
|
|
6
4
|
require('react');
|
|
7
5
|
require('classnames');
|
|
8
6
|
|
package/cssm/index.js
CHANGED
|
@@ -1,15 +1,13 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
require('./component-f0e3da83.js');
|
|
3
|
+
var component = require('./component.js');
|
|
4
|
+
require('./component-5b782f5c.js');
|
|
6
5
|
require('react');
|
|
7
|
-
require('react-transition-group');
|
|
8
6
|
require('classnames');
|
|
7
|
+
require('react-transition-group');
|
|
9
8
|
require('@alfalab/core-components-portal/cssm');
|
|
10
9
|
require('@alfalab/core-components-stack/cssm');
|
|
11
10
|
require('./index.module.css');
|
|
12
|
-
var component = require('./component.js');
|
|
13
11
|
|
|
14
12
|
|
|
15
13
|
|
|
File without changes
|
|
File without changes
|
package/esm/component.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { _ as __rest, a as __assign, N as Notification } from './component-
|
|
1
|
+
import { _ as __rest, a as __assign, N as Notification } from './component-1907c039.js';
|
|
2
2
|
import React, { forwardRef } from 'react';
|
|
3
3
|
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 { stackingOrder, Stack } from '@alfalab/core-components-stack/esm';
|
|
7
7
|
|
|
8
|
-
var styles = {"component":"notification-
|
|
8
|
+
var styles = {"component":"notification-manager__component_1sqn5","notification":"notification-manager__notification_1sqn5","enter":"notification-manager__enter_1sqn5","enterActive":"notification-manager__enterActive_1sqn5","exit":"notification-manager__exit_1sqn5","exitActive":"notification-manager__exitActive_1sqn5"};
|
|
9
9
|
require('./index.css')
|
|
10
10
|
|
|
11
11
|
var CSS_TRANSITION_CLASS_NAMES = {
|
package/esm/components/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from "../../component-
|
|
1
|
+
export * from "../../component-1907c039";
|
package/esm/index.css
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 1opbz */
|
|
2
2
|
:root {
|
|
3
3
|
--gap-s: 12px;
|
|
4
4
|
--gap-xl: 24px;
|
|
5
5
|
--gap-4xl: 48px;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
-
.notification-
|
|
8
|
+
.notification-manager__component_1sqn5 {
|
|
9
9
|
position: fixed;
|
|
10
10
|
top: 0;
|
|
11
11
|
right: var(--gap-s);
|
|
@@ -13,48 +13,48 @@
|
|
|
13
13
|
flex-direction: column;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
.notification-
|
|
16
|
+
.notification-manager__component_1sqn5 .notification-manager__notification_1sqn5 {
|
|
17
17
|
position: static;
|
|
18
18
|
width: calc(100vw - var(--gap-xl));
|
|
19
19
|
margin-top: var(--gap-s);
|
|
20
20
|
will-change: transform;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
-
.notification-
|
|
23
|
+
.notification-manager__enter_1sqn5 {
|
|
24
24
|
visibility: hidden;
|
|
25
25
|
transform: translate(0, -500px);
|
|
26
26
|
transition: transform 0.4s ease-out;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
-
.notification-
|
|
29
|
+
.notification-manager__enterActive_1sqn5 {
|
|
30
30
|
visibility: visible;
|
|
31
31
|
transform: translate(0);
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
.notification-
|
|
34
|
+
.notification-manager__exit_1sqn5 {
|
|
35
35
|
opacity: 0;
|
|
36
36
|
transition: opacity 0.15s ease-in-out;
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
-
.notification-
|
|
39
|
+
.notification-manager__exitActive_1sqn5 {
|
|
40
40
|
visibility: hidden;
|
|
41
41
|
opacity: 0;
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
@media (min-width: 600px) {
|
|
45
|
-
.notification-
|
|
45
|
+
.notification-manager__component_1sqn5 {
|
|
46
46
|
right: var(--gap-4xl);
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
-
.notification-
|
|
49
|
+
.notification-manager__component_1sqn5 .notification-manager__notification_1sqn5 {
|
|
50
50
|
width: auto;
|
|
51
51
|
}
|
|
52
52
|
|
|
53
|
-
.notification-
|
|
53
|
+
.notification-manager__enter_1sqn5 {
|
|
54
54
|
transform: translate(100%, 0);
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
.notification-
|
|
57
|
+
.notification-manager__enterActive_1sqn5 {
|
|
58
58
|
transform: translate(0);
|
|
59
59
|
}
|
|
60
60
|
}
|
package/esm/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
export { NotificationManager } from './component.js';
|
|
2
|
+
import './component-1907c039.js';
|
|
2
3
|
import 'react';
|
|
3
|
-
import 'react-transition-group';
|
|
4
4
|
import 'classnames';
|
|
5
|
+
import 'react-transition-group';
|
|
5
6
|
import '@alfalab/core-components-portal/esm';
|
|
6
7
|
import '@alfalab/core-components-stack/esm';
|
|
7
|
-
export { NotificationManager } from './component.js';
|
package/index.css
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 1opbz */
|
|
2
2
|
:root {
|
|
3
3
|
--gap-s: 12px;
|
|
4
4
|
--gap-xl: 24px;
|
|
5
5
|
--gap-4xl: 48px;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
-
.notification-
|
|
8
|
+
.notification-manager__component_1sqn5 {
|
|
9
9
|
position: fixed;
|
|
10
10
|
top: 0;
|
|
11
11
|
right: var(--gap-s);
|
|
@@ -13,48 +13,48 @@
|
|
|
13
13
|
flex-direction: column;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
.notification-
|
|
16
|
+
.notification-manager__component_1sqn5 .notification-manager__notification_1sqn5 {
|
|
17
17
|
position: static;
|
|
18
18
|
width: calc(100vw - var(--gap-xl));
|
|
19
19
|
margin-top: var(--gap-s);
|
|
20
20
|
will-change: transform;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
-
.notification-
|
|
23
|
+
.notification-manager__enter_1sqn5 {
|
|
24
24
|
visibility: hidden;
|
|
25
25
|
transform: translate(0, -500px);
|
|
26
26
|
transition: transform 0.4s ease-out;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
-
.notification-
|
|
29
|
+
.notification-manager__enterActive_1sqn5 {
|
|
30
30
|
visibility: visible;
|
|
31
31
|
transform: translate(0);
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
.notification-
|
|
34
|
+
.notification-manager__exit_1sqn5 {
|
|
35
35
|
opacity: 0;
|
|
36
36
|
transition: opacity 0.15s ease-in-out;
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
-
.notification-
|
|
39
|
+
.notification-manager__exitActive_1sqn5 {
|
|
40
40
|
visibility: hidden;
|
|
41
41
|
opacity: 0;
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
@media (min-width: 600px) {
|
|
45
|
-
.notification-
|
|
45
|
+
.notification-manager__component_1sqn5 {
|
|
46
46
|
right: var(--gap-4xl);
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
-
.notification-
|
|
49
|
+
.notification-manager__component_1sqn5 .notification-manager__notification_1sqn5 {
|
|
50
50
|
width: auto;
|
|
51
51
|
}
|
|
52
52
|
|
|
53
|
-
.notification-
|
|
53
|
+
.notification-manager__enter_1sqn5 {
|
|
54
54
|
transform: translate(100%, 0);
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
.notification-
|
|
57
|
+
.notification-manager__enterActive_1sqn5 {
|
|
58
58
|
transform: translate(0);
|
|
59
59
|
}
|
|
60
60
|
}
|
package/index.js
CHANGED
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
require('./component-ad675777.js');
|
|
3
|
+
var component = require('./component.js');
|
|
4
|
+
require('./component-6e41fd5e.js');
|
|
6
5
|
require('react');
|
|
7
|
-
require('react-transition-group');
|
|
8
6
|
require('classnames');
|
|
7
|
+
require('react-transition-group');
|
|
9
8
|
require('@alfalab/core-components-portal');
|
|
10
9
|
require('@alfalab/core-components-stack');
|
|
11
|
-
var component = require('./component.js');
|
|
12
10
|
|
|
13
11
|
|
|
14
12
|
|
package/modern/component.js
CHANGED
|
@@ -2,10 +2,10 @@ import React, { forwardRef } from 'react';
|
|
|
2
2
|
import { TransitionGroup, CSSTransition } from 'react-transition-group';
|
|
3
3
|
import cn from 'classnames';
|
|
4
4
|
import { Portal } from '@alfalab/core-components-portal/modern';
|
|
5
|
-
import {
|
|
5
|
+
import { Stack, stackingOrder } from '@alfalab/core-components-stack/modern';
|
|
6
6
|
import { Notification } from './components/notification/component.js';
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
const styles = {"component":"notification-manager__component_1sqn5","notification":"notification-manager__notification_1sqn5","enter":"notification-manager__enter_1sqn5","enterActive":"notification-manager__enterActive_1sqn5","exit":"notification-manager__exit_1sqn5","exitActive":"notification-manager__exitActive_1sqn5"};
|
|
9
9
|
require('./index.css')
|
|
10
10
|
|
|
11
11
|
const CSS_TRANSITION_CLASS_NAMES = {
|
package/modern/index.css
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 1opbz */
|
|
2
2
|
:root {
|
|
3
3
|
--gap-s: 12px;
|
|
4
4
|
--gap-xl: 24px;
|
|
5
5
|
--gap-4xl: 48px;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
-
.notification-
|
|
8
|
+
.notification-manager__component_1sqn5 {
|
|
9
9
|
position: fixed;
|
|
10
10
|
top: 0;
|
|
11
11
|
right: var(--gap-s);
|
|
@@ -13,48 +13,48 @@
|
|
|
13
13
|
flex-direction: column;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
.notification-
|
|
16
|
+
.notification-manager__component_1sqn5 .notification-manager__notification_1sqn5 {
|
|
17
17
|
position: static;
|
|
18
18
|
width: calc(100vw - var(--gap-xl));
|
|
19
19
|
margin-top: var(--gap-s);
|
|
20
20
|
will-change: transform;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
-
.notification-
|
|
23
|
+
.notification-manager__enter_1sqn5 {
|
|
24
24
|
visibility: hidden;
|
|
25
25
|
transform: translate(0, -500px);
|
|
26
26
|
transition: transform 0.4s ease-out;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
-
.notification-
|
|
29
|
+
.notification-manager__enterActive_1sqn5 {
|
|
30
30
|
visibility: visible;
|
|
31
31
|
transform: translate(0);
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
.notification-
|
|
34
|
+
.notification-manager__exit_1sqn5 {
|
|
35
35
|
opacity: 0;
|
|
36
36
|
transition: opacity 0.15s ease-in-out;
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
-
.notification-
|
|
39
|
+
.notification-manager__exitActive_1sqn5 {
|
|
40
40
|
visibility: hidden;
|
|
41
41
|
opacity: 0;
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
@media (min-width: 600px) {
|
|
45
|
-
.notification-
|
|
45
|
+
.notification-manager__component_1sqn5 {
|
|
46
46
|
right: var(--gap-4xl);
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
-
.notification-
|
|
49
|
+
.notification-manager__component_1sqn5 .notification-manager__notification_1sqn5 {
|
|
50
50
|
width: auto;
|
|
51
51
|
}
|
|
52
52
|
|
|
53
|
-
.notification-
|
|
53
|
+
.notification-manager__enter_1sqn5 {
|
|
54
54
|
transform: translate(100%, 0);
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
.notification-
|
|
57
|
+
.notification-manager__enterActive_1sqn5 {
|
|
58
58
|
transform: translate(0);
|
|
59
59
|
}
|
|
60
60
|
}
|
package/modern/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
+
export { NotificationManager } from './component.js';
|
|
1
2
|
import 'react';
|
|
2
3
|
import 'react-transition-group';
|
|
3
4
|
import 'classnames';
|
|
4
5
|
import '@alfalab/core-components-portal/modern';
|
|
5
6
|
import '@alfalab/core-components-stack/modern';
|
|
6
7
|
import './components/notification/component.js';
|
|
7
|
-
export { NotificationManager } from './component.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alfalab/core-components-notification-manager",
|
|
3
|
-
"version": "5.1.
|
|
3
|
+
"version": "5.1.10",
|
|
4
4
|
"description": "Notification manager",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "MIT",
|
|
@@ -17,9 +17,9 @@
|
|
|
17
17
|
"react": "^16.9.0 || ^17.0.1 || ^18.0.0"
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"@alfalab/core-components-notification": "^6.1.
|
|
21
|
-
"@alfalab/core-components-portal": "^3.1.
|
|
22
|
-
"@alfalab/core-components-stack": "^4.0.
|
|
20
|
+
"@alfalab/core-components-notification": "^6.1.10",
|
|
21
|
+
"@alfalab/core-components-portal": "^3.1.2",
|
|
22
|
+
"@alfalab/core-components-stack": "^4.0.2",
|
|
23
23
|
"classnames": "^2.3.1",
|
|
24
24
|
"react-transition-group": "^4.4.1"
|
|
25
25
|
}
|