@synerise/ds-alert 0.8.46 → 0.9.0
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +11 -0
- package/README.md +0 -62
- package/dist/index.d.ts +0 -13
- package/dist/index.js +1 -17
- package/dist/modules.d.js +1 -1
- package/dist/style/index.css +1 -1
- package/package.json +10 -12
- package/dist/Notification/Notification.d.ts +0 -40
- package/dist/Notification/Notification.js +0 -137
- package/dist/Notification/Notification.styles.d.ts +0 -23
- package/dist/Notification/Notification.styles.js +0 -49
- package/dist/Notification/__spec__/Notification.spec.d.ts +0 -0
package/CHANGELOG.md
CHANGED
@@ -3,6 +3,17 @@
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
5
5
|
|
6
|
+
# [0.9.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.8.46...@synerise/ds-alert@0.9.0) (2025-01-29)
|
7
|
+
|
8
|
+
|
9
|
+
### Features
|
10
|
+
|
11
|
+
* antd@4.24 react@18 ([d97a667](https://github.com/Synerise/synerise-design/commit/d97a667b1f33aed3177e1851de3b6f60be2d46a6))
|
12
|
+
|
13
|
+
|
14
|
+
|
15
|
+
|
16
|
+
|
6
17
|
## [0.8.46](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.8.45...@synerise/ds-alert@0.8.46) (2025-01-21)
|
7
18
|
|
8
19
|
**Note:** Version bump only for package @synerise/ds-alert
|
package/README.md
CHANGED
@@ -28,56 +28,6 @@ import Alert from '@synerise/ds-alert'
|
|
28
28
|
|
29
29
|
```
|
30
30
|
|
31
|
-
### Notifications
|
32
|
-
|
33
|
-
**DEPRECATED** Notification component will no longer be supported
|
34
|
-
|
35
|
-
Notifications API offer three things:
|
36
|
-
|
37
|
-
* `<Notification/>` component for styled content,
|
38
|
-
* `notificationApi.useNotification()` for building a tunnel for the the right ContextApi (notifications use both `React.createPortal` plus they are mounted in container mounted in `document.body` for making it possible to position them correctly),
|
39
|
-
* *Pro-users*: change `getContainer` for sending notifications in other scrollable sections (`@synerise/ds-modal`, `@synerise/ds-section`).
|
40
|
-
* and `notificationOpen` for scheduling showing notificaitons.
|
41
|
-
|
42
|
-
#### The simplest notification call
|
43
|
-
|
44
|
-
```jsx
|
45
|
-
import notificationApi from '@synerise/ds-alert'
|
46
|
-
|
47
|
-
notification.open({message: 'Message content'});
|
48
|
-
```
|
49
|
-
|
50
|
-
#### Styled notification
|
51
|
-
```jsx
|
52
|
-
import { Notification, notificationApi} from '@synerise/ds-alert'
|
53
|
-
|
54
|
-
notificationApi.open({
|
55
|
-
duration: 4.5,
|
56
|
-
message: <Notification>Message content</Notification>
|
57
|
-
});
|
58
|
-
```
|
59
|
-
|
60
|
-
#### Differently positioned notification
|
61
|
-
|
62
|
-
`antd-notification` is mounted in `docuemnt.body` by default. In order to style using scoped css -
|
63
|
-
`getContainer` has to be a `styled-components`-scoped element, this is done in `mountInstance`, see source code for more.
|
64
|
-
|
65
|
-
```jsx
|
66
|
-
import { Notification, notificationApi, notificationOpen } from '@synerise/ds-alert';
|
67
|
-
|
68
|
-
const [api, contextHolder] = notificationApi.useNotification();
|
69
|
-
notificationOpen({
|
70
|
-
message: <Notification>You have new message.</Notification>,
|
71
|
-
placement: 'topLeft'
|
72
|
-
}, api, contextHolder);
|
73
|
-
```
|
74
|
-
|
75
|
-
### Usage recommendations
|
76
|
-
|
77
|
-
It is recommended to call `notificationOpen` from `React.useEffect`.
|
78
|
-
Of course you can mount styled `<Notification/>` component by yourself,
|
79
|
-
but then you need to manage its rendering lifecycle.
|
80
|
-
|
81
31
|
## Demo
|
82
32
|
|
83
33
|
<iframe src="/storybook-static/iframe.html?id=components-alert--default"></iframe>
|
@@ -183,15 +133,3 @@ but then you need to manage its rendering lifecycle.
|
|
183
133
|
| textButton | string of button | `string` | - |
|
184
134
|
| text | string of withEmphasis or withLink | `string` | - |
|
185
135
|
|
186
|
-
|
187
|
-
### Alert.Notification
|
188
|
-
| Property | Description | Type | Default |
|
189
|
-
|---------------------|---------------------------------------------------------------------------------------------------|---------------------------------------------------------------|-----------------|
|
190
|
-
| children | Content of the notification | string\/React.ReactNode\/JSX.Element | JSX.Element |
|
191
|
-
| type | type of the notification, `"info"/"success"`, see `antd-notification`, `info` by default | keyof NotificationInstance | "info" |
|
192
|
-
| placement | where to position the notification | 'bottomLeft' 'bottomRight' 'topLeft' 'topRight' 'bottom' | "bottom" |
|
193
|
-
| onClose? | Handler for clicking on the close button (close button is rendered only if this prop is provided) | () => void | - |
|
194
|
-
| buttonText? | Text on the action button | string | - |
|
195
|
-
| onButtonClick? | Handler for `onClick` on the action button | () => void | - |
|
196
|
-
| icon? | Icon on the action button | DSIcon | - |
|
197
|
-
| closeIconClassName? | Class of the close icon name | string | "ds-close-icon" |
|
package/dist/index.d.ts
CHANGED
@@ -1,4 +1,3 @@
|
|
1
|
-
import * as NotificationStyles from './Notification/Notification.styles';
|
2
1
|
import * as SectionMessageStyles from './SectionMessage/SectionMessage.styles';
|
3
2
|
import * as ToastStyles from './Toast/Toast.styles';
|
4
3
|
import * as MainAlertStyles from './Alert.styles';
|
@@ -6,18 +5,10 @@ import * as IconAlertStyles from './IconAlert/IconAlert.styles';
|
|
6
5
|
export { default } from './Alert';
|
7
6
|
export declare const AlertStyles: {
|
8
7
|
Alert: typeof MainAlertStyles;
|
9
|
-
Notification: typeof NotificationStyles;
|
10
8
|
SectionMessage: typeof SectionMessageStyles;
|
11
9
|
Toast: typeof ToastStyles;
|
12
10
|
IconAlert: typeof IconAlertStyles;
|
13
11
|
};
|
14
|
-
/**
|
15
|
-
* @deprecated - Notification component will no longer be supported
|
16
|
-
**/
|
17
|
-
export declare const notificationsApi: import("antd/lib/notification").NotificationApi;
|
18
|
-
export type { NotificationProps } from './Notification/Notification';
|
19
|
-
export { default as Notification } from './Notification/Notification';
|
20
|
-
export { notificationOpen } from './Notification/Notification';
|
21
12
|
export { default as SectionMessage } from './SectionMessage/SectionMessage';
|
22
13
|
export type { Props as SectionMessageProps, ColorType as SectionMessageColorType, AlertTypes as SectionMessageAlertTypes, } from './SectionMessage/SectionMessage.types';
|
23
14
|
export { default as Toast } from './Toast/Toast';
|
@@ -27,7 +18,3 @@ export { default as InlineAlert } from './InlineAlert/InlineAlert';
|
|
27
18
|
export { default as AlertInfo } from './AlertInfo/AlertInfo';
|
28
19
|
export type { AlertSize } from './AlertInfo/AlertInfo.types';
|
29
20
|
export { AlertMessage } from './Alert.styles';
|
30
|
-
/**
|
31
|
-
* @deprecated - Notification component will no longer be supported
|
32
|
-
**/
|
33
|
-
export * as S from './Notification/Notification.styles';
|
package/dist/index.js
CHANGED
@@ -1,5 +1,3 @@
|
|
1
|
-
import { notification } from 'antd';
|
2
|
-
import * as NotificationStyles from './Notification/Notification.styles';
|
3
1
|
import * as SectionMessageStyles from './SectionMessage/SectionMessage.styles';
|
4
2
|
import * as ToastStyles from './Toast/Toast.styles';
|
5
3
|
import * as MainAlertStyles from './Alert.styles';
|
@@ -7,28 +5,14 @@ import * as IconAlertStyles from './IconAlert/IconAlert.styles';
|
|
7
5
|
export { default } from './Alert';
|
8
6
|
export var AlertStyles = {
|
9
7
|
Alert: MainAlertStyles,
|
10
|
-
Notification: NotificationStyles,
|
11
8
|
SectionMessage: SectionMessageStyles,
|
12
9
|
Toast: ToastStyles,
|
13
10
|
IconAlert: IconAlertStyles
|
14
11
|
};
|
15
|
-
|
16
|
-
/**
|
17
|
-
* @deprecated - Notification component will no longer be supported
|
18
|
-
**/
|
19
|
-
export var notificationsApi = notification;
|
20
|
-
export { default as Notification } from './Notification/Notification';
|
21
|
-
export { notificationOpen } from './Notification/Notification';
|
22
12
|
export { default as SectionMessage } from './SectionMessage/SectionMessage';
|
23
13
|
export { default as Toast } from './Toast/Toast';
|
24
14
|
export { default as IconAlert } from './IconAlert/IconAlert';
|
25
15
|
export { default as InlineAlert } from './InlineAlert/InlineAlert';
|
26
16
|
export { default as AlertInfo } from './AlertInfo/AlertInfo';
|
27
17
|
// @deprecated use AlertStyles.Alert instead
|
28
|
-
export { AlertMessage } from './Alert.styles';
|
29
|
-
|
30
|
-
/**
|
31
|
-
* @deprecated - Notification component will no longer be supported
|
32
|
-
**/
|
33
|
-
import * as _S from './Notification/Notification.styles';
|
34
|
-
export { _S as S };
|
18
|
+
export { AlertMessage } from './Alert.styles';
|
package/dist/modules.d.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
import '@testing-library/jest-dom
|
1
|
+
import '@testing-library/jest-dom';
|
package/dist/style/index.css
CHANGED
@@ -1 +1 @@
|
|
1
|
-
.ant-
|
1
|
+
.ant-alert{box-sizing:border-box;margin:0;padding:0;color:#6a7580;font-size:13px;font-variant:tabular-nums;line-height:1.38;list-style:none;font-feature-settings:'tnum';position:relative;display:flex;align-items:center;padding:8px 15px;word-wrap:break-word;border-radius:3px}.ant-alert-content{flex:1;min-width:0}.ant-alert-icon{margin-right:8px}.ant-alert-description{display:none;font-size:13px;line-height:21px}.ant-alert-success{background-color:#f4ffe6;border:1px solid #b7f280}.ant-alert-success .ant-alert-icon{color:#54cb0b}.ant-alert-info{background-color:#e6f4ff;border:1px solid #85c0ff}.ant-alert-info .ant-alert-icon{color:#0b68ff}.ant-alert-warning{background-color:#fffce6;border:1px solid #ffe97a}.ant-alert-warning .ant-alert-icon{color:#fab700}.ant-alert-error{background-color:#fff3f0;border:1px solid #ffab9e}.ant-alert-error .ant-alert-icon{color:#f52922}.ant-alert-error .ant-alert-description>pre{margin:0;padding:0}.ant-alert-action{margin-left:8px}.ant-alert-close-icon{margin-left:8px;padding:0;overflow:hidden;font-size:11px;line-height:11px;background-color:transparent;border:none;outline:0;cursor:pointer}.ant-alert-close-icon .anticon-close{color:#232936;transition:color .3s}.ant-alert-close-icon .anticon-close:hover{color:rgba(0,0,0,.75)}.ant-alert-close-text{color:#232936;transition:color .3s}.ant-alert-close-text:hover{color:rgba(0,0,0,.75)}.ant-alert-with-description{align-items:flex-start;padding:15px 15px 15px 24px}.ant-alert-with-description.ant-alert-no-icon{padding:15px 15px}.ant-alert-with-description .ant-alert-icon{margin-right:15px;font-size:24px}.ant-alert-with-description .ant-alert-message{display:block;margin-bottom:4px;color:#384350;font-size:13px}.ant-alert-message{color:#384350}.ant-alert-with-description .ant-alert-description{display:block}.ant-alert.ant-alert-motion-leave{overflow:hidden;opacity:1;transition:max-height .3s cubic-bezier(.78,.14,.15,.86),opacity .3s cubic-bezier(.78,.14,.15,.86),padding-top .3s cubic-bezier(.78,.14,.15,.86),padding-bottom .3s cubic-bezier(.78,.14,.15,.86),margin-bottom .3s cubic-bezier(.78,.14,.15,.86)}.ant-alert.ant-alert-motion-leave-active{max-height:0;margin-bottom:0!important;padding-top:0;padding-bottom:0;opacity:0}.ant-alert-banner{margin-bottom:0;border:0;border-radius:0}.ant-alert.ant-alert-rtl{direction:rtl}.ant-alert-rtl .ant-alert-icon{margin-right:auto;margin-left:8px}.ant-alert-rtl .ant-alert-action{margin-right:8px;margin-left:auto}.ant-alert-rtl .ant-alert-close-icon{margin-right:8px;margin-left:auto}.ant-alert-rtl.ant-alert-with-description{padding-right:24px;padding-left:15px}.ant-alert-rtl.ant-alert-with-description .ant-alert-icon{margin-right:auto;margin-left:15px}.ant-alert{box-sizing:border-box;margin:0;padding:0;color:#6a7580;font-size:13px;font-variant:tabular-nums;line-height:1.38;list-style:none;font-feature-settings:'tnum';position:relative;padding:13px 24px;word-wrap:break-word;border-radius:3px;max-width:792px;width:100%;display:flex;flex-display:row;align-items:flex-start;justify-content:flex-start;border:0}.ant-alert.ant-alert-no-icon{padding:13px 24px}.ant-alert-icon{position:relative;margin-right:12px;top:0;left:0}.ant-alert-description{display:none;font-size:13px;line-height:22px}.ant-alert-success{background-color:#f9ffed;box-shadow:0 0 0 1px #54cb0b;color:#399903}.ant-alert-success .ant-alert-icon svg{color:#399903;fill:#399903}.ant-alert-info{background-color:#f9fafb;box-shadow:0 0 0 1px #6a7580;color:#6a7580}.ant-alert-info .ant-alert-icon svg{color:#6a7580;fill:#6a7580}.ant-alert-warning{background-color:#fffcf0;box-shadow:0 0 0 1px #fab700;color:#eda600}.ant-alert-warning .ant-alert-icon svg{color:#eda600;fill:#eda600}.ant-alert-error{background-color:#fff6f4;box-shadow:0 0 0 1px #f52922;color:#f52922}.ant-alert-error .ant-alert-icon svg{color:#f52922;fill:#f52922}.ant-alert-error .ant-alert-description>pre{margin:0;padding:0}.ant-alert-close-icon{position:absolute;top:8px;right:16px;padding:0;overflow:hidden;font-size:11px;line-height:22px;background-color:transparent;border:none;outline:0;cursor:pointer}.ant-alert-close-icon .anticon-close{color:#232936;transition:color .3s}.ant-alert-close-icon .anticon-close:hover{color:rgba(0,0,0,.75)}.ant-alert-close-text{color:#232936;transition:color .3s}.ant-alert-close-text:hover{color:rgba(0,0,0,.75)}.ant-alert-message{color:inherit}.ant-alert-with-description .ant-alert-description{display:block}.ant-alert.ant-alert-closing{height:0!important;margin:0;padding-top:0;padding-bottom:0;transform-origin:50% 0;transition:all .3s cubic-bezier(.78,.14,.15,.86)}.ant-alert-slide-up-leave{animation:antAlertSlideUpOut .3s cubic-bezier(.78,.14,.15,.86);animation-fill-mode:both}.ant-alert-banner{margin-bottom:0;border:0;border-radius:0}@keyframes antAlertSlideUpIn{0%{transform:scaleY(0);transform-origin:0 0;opacity:0}100%{transform:scaleY(1);transform-origin:0 0;opacity:1}}@keyframes antAlertSlideUpOut{0%{transform:scaleY(1);transform-origin:0 0;opacity:1}100%{transform:scaleY(0);transform-origin:0 0;opacity:0}}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@synerise/ds-alert",
|
3
|
-
"version": "0.
|
3
|
+
"version": "0.9.0",
|
4
4
|
"description": "Alert UI Component for the Synerise Design System",
|
5
5
|
"license": "ISC",
|
6
6
|
"repository": "Synerise/synerise-design",
|
@@ -34,19 +34,17 @@
|
|
34
34
|
],
|
35
35
|
"types": "dist/index.d.ts",
|
36
36
|
"dependencies": {
|
37
|
-
"@synerise/ds-button": "^0.
|
38
|
-
"@synerise/ds-icon": "^0.
|
39
|
-
"@synerise/ds-unordered-list": "^0.
|
40
|
-
"@synerise/ds-utils": "^0.
|
41
|
-
"animate.css": "^4.1.1"
|
42
|
-
"react-animate-height": "^2.0.23",
|
43
|
-
"react-mount-animation": "0.0.9"
|
37
|
+
"@synerise/ds-button": "^0.23.0",
|
38
|
+
"@synerise/ds-icon": "^0.71.0",
|
39
|
+
"@synerise/ds-unordered-list": "^0.4.0",
|
40
|
+
"@synerise/ds-utils": "^0.32.0",
|
41
|
+
"animate.css": "^4.1.1"
|
44
42
|
},
|
45
43
|
"peerDependencies": {
|
46
44
|
"@synerise/ds-core": "*",
|
47
|
-
"antd": "4.
|
48
|
-
"react": ">=16.9.0 <=
|
49
|
-
"styled-components": "5.
|
45
|
+
"antd": "4.24.16",
|
46
|
+
"react": ">=16.9.0 <= 18.3.1",
|
47
|
+
"styled-components": "^5.3.3"
|
50
48
|
},
|
51
|
-
"gitHead": "
|
49
|
+
"gitHead": "fbde34e126b492edaf148e469ab96247a891d6df"
|
52
50
|
}
|
@@ -1,40 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { NotificationInstance } from 'antd/lib/notification';
|
3
|
-
import type { ArgsProps, NotificationApi } from 'antd/es/notification';
|
4
|
-
import 'antd/lib/notification/style/index.less';
|
5
|
-
/**
|
6
|
-
* @deprecated - Notification component will no longer be supported
|
7
|
-
**/
|
8
|
-
export type NotificationProps = {
|
9
|
-
/** content of the notification */
|
10
|
-
children?: JSX.Element | React.ReactNode | React.ReactNode[];
|
11
|
-
/** text displayed on the button */
|
12
|
-
buttonText?: string;
|
13
|
-
/** type of the notification, `"info" | "success"`, see `antd/notification`, `info` by default */
|
14
|
-
type?: keyof NotificationInstance;
|
15
|
-
/** handler for clicking on the button, note button is rendered only if `buttonText` is provided */
|
16
|
-
onButtonClick?: (ev: React.MouseEvent<HTMLElement, MouseEvent>) => void;
|
17
|
-
/** close icon class */
|
18
|
-
closeIconClassName?: string;
|
19
|
-
/** where to position notification, `"{top,bottom}{Left,Right}" | "bottom"` */
|
20
|
-
placement?: ArgsProps['placement'] | 'bottom';
|
21
|
-
} & Partial<Omit<ArgsProps, 'placement'>>;
|
22
|
-
type NotificationApiHook = ReturnType<NotificationApi['useNotification']>;
|
23
|
-
type ApiHook = NotificationApiHook[0];
|
24
|
-
type ContextHolder = NotificationApiHook[1];
|
25
|
-
/**
|
26
|
-
* @deprecated - Notification component will no longer be supported
|
27
|
-
**/
|
28
|
-
export declare function Notification({ buttonText, children, onButtonClick, onClose, icon, closeIconClassName, }: NotificationProps): JSX.Element;
|
29
|
-
/**
|
30
|
-
* @deprecated - Notification component will no longer be supported
|
31
|
-
**/
|
32
|
-
export declare function mountInstance(contextHolder?: ContextHolder, { getContainer, className }?: {
|
33
|
-
getContainer?: (() => HTMLElement) | undefined;
|
34
|
-
className?: string | undefined;
|
35
|
-
}): [Promise<HTMLElement>, HTMLElement, () => void];
|
36
|
-
/**
|
37
|
-
* @deprecated - Notification component will no longer be supported
|
38
|
-
**/
|
39
|
-
export declare function notificationOpen({ type, className, message, icon, onClick, onClose, closeIconClassName, placement, ...props }: NotificationProps, notificationApi?: ApiHook, contextHolder?: ContextHolder): Promise<void>;
|
40
|
-
export default Notification;
|
@@ -1,137 +0,0 @@
|
|
1
|
-
var _excluded = ["type", "className", "message", "icon", "onClick", "onClose", "closeIconClassName", "placement"];
|
2
|
-
function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, defineProperty = Object.defineProperty || function (obj, key, desc) { obj[key] = desc.value; }, $Symbol = "function" == typeof Symbol ? Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return Object.defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = Object.create(protoGenerator.prototype), context = new Context(tryLocsList || []); return defineProperty(generator, "_invoke", { value: makeInvokeMethod(innerFn, self, context) }), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = Object.getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype); function defineIteratorMethods(prototype) { ["next", "throw", "return"].forEach(function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == typeof value && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; defineProperty(this, "_invoke", { value: function value(method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; } function maybeInvokeDelegate(delegate, context) { var methodName = context.method, method = delegate.iterator[methodName]; if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel; var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), defineProperty(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (val) { var object = Object(val), keys = []; for (var key in object) keys.push(key); return keys.reverse(), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined); }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, "catch": function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
|
3
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
4
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
5
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
6
|
-
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
|
7
|
-
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
8
|
-
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
9
|
-
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
|
10
|
-
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
|
11
|
-
import React from 'react';
|
12
|
-
import * as ReactDOM from 'react-dom';
|
13
|
-
import { notification } from 'antd';
|
14
|
-
import "antd/lib/notification/style/index.css";
|
15
|
-
import Button from '@synerise/ds-button';
|
16
|
-
import Icon, { UserAddM, CloseM } from '@synerise/ds-icon';
|
17
|
-
import * as S from './Notification.styles';
|
18
|
-
|
19
|
-
/**
|
20
|
-
* @deprecated - Notification component will no longer be supported
|
21
|
-
**/
|
22
|
-
|
23
|
-
/**
|
24
|
-
* @deprecated - Notification component will no longer be supported
|
25
|
-
**/
|
26
|
-
export function Notification(_ref) {
|
27
|
-
var buttonText = _ref.buttonText,
|
28
|
-
_ref$children = _ref.children,
|
29
|
-
children = _ref$children === void 0 ? undefined : _ref$children,
|
30
|
-
onButtonClick = _ref.onButtonClick,
|
31
|
-
onClose = _ref.onClose,
|
32
|
-
icon = _ref.icon,
|
33
|
-
_ref$closeIconClassNa = _ref.closeIconClassName,
|
34
|
-
closeIconClassName = _ref$closeIconClassNa === void 0 ? 'ds-close-icon' : _ref$closeIconClassNa;
|
35
|
-
return /*#__PURE__*/React.createElement(S.NotificationsContainer, null, /*#__PURE__*/React.createElement(S.TextLabel, null, children), (buttonText || onClose) && /*#__PURE__*/React.createElement(S.Shrink, null, buttonText && /*#__PURE__*/React.createElement(Button, {
|
36
|
-
type: "primary",
|
37
|
-
mode: "icon-label",
|
38
|
-
color: "blue",
|
39
|
-
onClick: onButtonClick
|
40
|
-
}, icon || icon !== null && /*#__PURE__*/React.createElement(Icon, {
|
41
|
-
component: /*#__PURE__*/React.createElement(UserAddM, null)
|
42
|
-
}), buttonText), onClose && /*#__PURE__*/React.createElement(Button, {
|
43
|
-
className: closeIconClassName,
|
44
|
-
type: "ghost",
|
45
|
-
onClick: onClose
|
46
|
-
}, /*#__PURE__*/React.createElement(Icon, {
|
47
|
-
component: /*#__PURE__*/React.createElement(CloseM, null)
|
48
|
-
}))));
|
49
|
-
}
|
50
|
-
|
51
|
-
/**
|
52
|
-
* @deprecated - Notification component will no longer be supported
|
53
|
-
**/
|
54
|
-
export function mountInstance(contextHolder, _temp) {
|
55
|
-
var _ref2 = _temp === void 0 ? {} : _temp,
|
56
|
-
_ref2$getContainer = _ref2.getContainer,
|
57
|
-
getContainer = _ref2$getContainer === void 0 ? function () {
|
58
|
-
return document.body;
|
59
|
-
} : _ref2$getContainer,
|
60
|
-
_ref2$className = _ref2.className,
|
61
|
-
className = _ref2$className === void 0 ? 'popup-container' : _ref2$className;
|
62
|
-
var element = document.createElement('div');
|
63
|
-
element.setAttribute('class', className);
|
64
|
-
var cont = getContainer();
|
65
|
-
cont.appendChild(element);
|
66
|
-
var jsxEl = /*#__PURE__*/React.createElement(S.NotificationsWrapper, null, contextHolder);
|
67
|
-
var renderPromsie = new Promise(function (resolve) {
|
68
|
-
ReactDOM.render(jsxEl, element, function () {
|
69
|
-
return resolve(element);
|
70
|
-
});
|
71
|
-
});
|
72
|
-
var cleanUpFunction = function cleanUpFunction() {
|
73
|
-
cont.removeChild(element);
|
74
|
-
};
|
75
|
-
return [renderPromsie, element, cleanUpFunction];
|
76
|
-
}
|
77
|
-
|
78
|
-
/**
|
79
|
-
* @deprecated - Notification component will no longer be supported
|
80
|
-
**/
|
81
|
-
export function notificationOpen(_x, _x2, _x3) {
|
82
|
-
return _notificationOpen.apply(this, arguments);
|
83
|
-
}
|
84
|
-
function _notificationOpen() {
|
85
|
-
_notificationOpen = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref3, notificationApi, contextHolder) {
|
86
|
-
var _ref3$type, type, _ref3$className, className, message, icon, onClick, onClose, _ref3$closeIconClassN, closeIconClassName, _ref3$placement, placement, props, api, el, containerPromise, _mountInstance, getContainer, maybeCloseClick;
|
87
|
-
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
88
|
-
while (1) switch (_context.prev = _context.next) {
|
89
|
-
case 0:
|
90
|
-
_ref3$type = _ref3.type, type = _ref3$type === void 0 ? 'info' : _ref3$type, _ref3$className = _ref3.className, className = _ref3$className === void 0 ? 'popup-container' : _ref3$className, message = _ref3.message, icon = _ref3.icon, onClick = _ref3.onClick, onClose = _ref3.onClose, _ref3$closeIconClassN = _ref3.closeIconClassName, closeIconClassName = _ref3$closeIconClassN === void 0 ? 'ds-close-icon' : _ref3$closeIconClassN, _ref3$placement = _ref3.placement, placement = _ref3$placement === void 0 ? 'bottom' : _ref3$placement, props = _objectWithoutPropertiesLoose(_ref3, _excluded);
|
91
|
-
api = notificationApi || notification; // TODO: check if context is actually available
|
92
|
-
el = document.body.querySelector("." + className);
|
93
|
-
if (!el) {
|
94
|
-
_mountInstance = mountInstance(contextHolder, {
|
95
|
-
className: className
|
96
|
-
});
|
97
|
-
containerPromise = _mountInstance[0];
|
98
|
-
el = _mountInstance[1];
|
99
|
-
}
|
100
|
-
_context.next = 6;
|
101
|
-
return containerPromise;
|
102
|
-
case 6:
|
103
|
-
getContainer = function getContainer() {
|
104
|
-
var _el;
|
105
|
-
return (_el = el) == null ? void 0 : _el.querySelector('div>div,.NotificationsBottomPlacementWrapper>.NotificationsWrapper');
|
106
|
-
};
|
107
|
-
/** a workaround for handling close clicks,
|
108
|
-
* since there's no way for injecting other element triggering onClose listener.
|
109
|
-
* It is set as a listener for all the clicks
|
110
|
-
* and fires onClose when close-icon was clicked */
|
111
|
-
maybeCloseClick = function maybeCloseClick(ev) {
|
112
|
-
var _ev$currentTarget;
|
113
|
-
var isClickedElementChildOfCloseIcon = ev.target.closest("." + closeIconClassName);
|
114
|
-
var isThisCloseIcon = ev == null || (_ev$currentTarget = ev.currentTarget) == null ? void 0 : _ev$currentTarget.classList.contains("" + closeIconClassName);
|
115
|
-
if (isClickedElementChildOfCloseIcon || isThisCloseIcon) {
|
116
|
-
return onClose && onClose();
|
117
|
-
}
|
118
|
-
return onClick && onClick();
|
119
|
-
};
|
120
|
-
return _context.abrupt("return", api.open(_objectSpread({
|
121
|
-
message: message,
|
122
|
-
type: type,
|
123
|
-
placement: placement,
|
124
|
-
getContainer: getContainer,
|
125
|
-
icon: icon,
|
126
|
-
onClick: maybeCloseClick,
|
127
|
-
bottom: 16
|
128
|
-
}, props)));
|
129
|
-
case 9:
|
130
|
-
case "end":
|
131
|
-
return _context.stop();
|
132
|
-
}
|
133
|
-
}, _callee);
|
134
|
-
}));
|
135
|
-
return _notificationOpen.apply(this, arguments);
|
136
|
-
}
|
137
|
-
export default Notification;
|
@@ -1,23 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* @deprecated - Notification component will no longer be supported
|
3
|
-
**/
|
4
|
-
export declare const NotificationsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
5
|
-
/**
|
6
|
-
* @deprecated - Notification component will no longer be supported
|
7
|
-
**/
|
8
|
-
export declare const Shrink: import("styled-components").StyledComponent<"div", any, {}, never>;
|
9
|
-
/**
|
10
|
-
* @deprecated - Notification component will no longer be supported
|
11
|
-
**/
|
12
|
-
export declare const TextLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
|
13
|
-
/**
|
14
|
-
* @deprecated - Notification component will no longer be supported
|
15
|
-
**/
|
16
|
-
export declare const NotificationsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
17
|
-
declare const _default: {
|
18
|
-
NotificationsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
19
|
-
NotificationsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
20
|
-
TextLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
|
21
|
-
Shrink: import("styled-components").StyledComponent<"div", any, {}, never>;
|
22
|
-
};
|
23
|
-
export default _default;
|
@@ -1,49 +0,0 @@
|
|
1
|
-
import styled from 'styled-components';
|
2
|
-
import { theme } from '@synerise/ds-core';
|
3
|
-
|
4
|
-
/**
|
5
|
-
* @deprecated - Notification component will no longer be supported
|
6
|
-
**/
|
7
|
-
export var NotificationsContainer = styled.div.withConfig({
|
8
|
-
displayName: "Notificationstyles__NotificationsContainer",
|
9
|
-
componentId: "sc-1ke52b0-0"
|
10
|
-
})(["background-color:", ";color:white;min-width:588px;padding:8px 8px 8px 16px;display:flex;align-items:center;width:100px;min-height:50px;"], function (props) {
|
11
|
-
var _palette;
|
12
|
-
return (_palette = ((props == null ? void 0 : props.theme) || theme).palette) == null ? void 0 : _palette['grey-800'];
|
13
|
-
});
|
14
|
-
|
15
|
-
/**
|
16
|
-
* @deprecated - Notification component will no longer be supported
|
17
|
-
**/
|
18
|
-
export var Shrink = styled.div.withConfig({
|
19
|
-
displayName: "Notificationstyles__Shrink",
|
20
|
-
componentId: "sc-1ke52b0-1"
|
21
|
-
})(["flex-grow:0;"]);
|
22
|
-
|
23
|
-
/**
|
24
|
-
* @deprecated - Notification component will no longer be supported
|
25
|
-
**/
|
26
|
-
export var TextLabel = styled.div.withConfig({
|
27
|
-
displayName: "Notificationstyles__TextLabel",
|
28
|
-
componentId: "sc-1ke52b0-2"
|
29
|
-
})(["flex-grow:1;font-size:13px;"]);
|
30
|
-
|
31
|
-
/**
|
32
|
-
* @deprecated - Notification component will no longer be supported
|
33
|
-
**/
|
34
|
-
export var NotificationsWrapper = styled.div.withConfig({
|
35
|
-
displayName: "Notificationstyles__NotificationsWrapper",
|
36
|
-
componentId: "sc-1ke52b0-3"
|
37
|
-
})(["& .ant-notification-bottom .ant-notification-hook-holder{margin:0;&:not(:first-child){margin-top:8px;}}& .ant-notification.ant-notification-bottom{right:0;left:0;margin:0 auto;width:588px;bottom:8px;}& .ant-notification-hook-holder{background-color:transparent;box-shadow:none;width:588px;}& .ant-notification-notice{padding:0;background-color:transparent;margin:unset;}& .ant-notification-notice{background-color:transparent;width:588px;border-radius:6px;box-shadow:0 16px 32px 0 ", "1a,0 8px 16px 0 ", "1a;}.ant-notification-notice-icon{display:none;}.ant-notification-notice-with-icon{background-color:transparent;}.ant-notification-notice-close{display:none;}& .ant-notification-notice-message,& .ant-notification-notice-closable .ant-notification-notice-message{padding-right:0;}& .ant-notification-notice-message,& .ant-notification-notice-with-icon .ant-notification-notice-message{margin-left:0;margin-bottom:0;}}"], function (props) {
|
38
|
-
var _palette2;
|
39
|
-
return (_palette2 = ((props == null ? void 0 : props.theme) || theme).palette) == null ? void 0 : _palette2['grey-900'];
|
40
|
-
}, function (props) {
|
41
|
-
var _palette3;
|
42
|
-
return (_palette3 = ((props == null ? void 0 : props.theme) || theme).palette) == null ? void 0 : _palette3['grey-900'];
|
43
|
-
});
|
44
|
-
export default {
|
45
|
-
NotificationsContainer: NotificationsContainer,
|
46
|
-
NotificationsWrapper: NotificationsWrapper,
|
47
|
-
TextLabel: TextLabel,
|
48
|
-
Shrink: Shrink
|
49
|
-
};
|
File without changes
|