@synerise/ds-alert 0.5.2 → 0.7.0
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/CHANGELOG.md +39 -0
- package/README.md +63 -2
- package/dist/Notification/Notification.d.ts +65 -0
- package/dist/Notification/Notification.js +185 -0
- package/dist/Notification/Notification.styles.d.ts +11 -0
- package/dist/Notification/Notification.styles.js +36 -0
- package/dist/Notification/__spec__/Notification.spec.d.ts +0 -0
- package/dist/Notification/__spec__/Notification.spec.js +29 -0
- package/dist/index.d.ts +9 -0
- package/dist/index.js +12 -1
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
@@ -3,6 +3,45 @@
|
|
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.7.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.6.1...@synerise/ds-alert@0.7.0) (2022-04-01)
|
7
|
+
|
8
|
+
|
9
|
+
### Bug Fixes
|
10
|
+
|
11
|
+
* **alert:** linter Promise, async function returns Promise<void> ([5c1e54d](https://github.com/Synerise/synerise-design/commit/5c1e54d52a0897345cd88609adcbdcdcf5fd85bf))
|
12
|
+
|
13
|
+
|
14
|
+
### Features
|
15
|
+
|
16
|
+
* **alert:** notificationOpen to use Promise interface ([531b813](https://github.com/Synerise/synerise-design/commit/531b81318370f97d29c13d14510e602b861e20f4))
|
17
|
+
|
18
|
+
|
19
|
+
|
20
|
+
|
21
|
+
|
22
|
+
## [0.6.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.6.0...@synerise/ds-alert@0.6.1) (2022-03-31)
|
23
|
+
|
24
|
+
|
25
|
+
### Bug Fixes
|
26
|
+
|
27
|
+
* **alert:** exporting NotificationProps typing ([985c994](https://github.com/Synerise/synerise-design/commit/985c994a516f0323e2903afddf9ca4bea33a594c))
|
28
|
+
|
29
|
+
|
30
|
+
|
31
|
+
|
32
|
+
|
33
|
+
# [0.6.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.5.2...@synerise/ds-alert@0.6.0) (2022-03-30)
|
34
|
+
|
35
|
+
|
36
|
+
### Features
|
37
|
+
|
38
|
+
* **alert:** add Notification component, stories, test todos ([eeb09d8](https://github.com/Synerise/synerise-design/commit/eeb09d857938100058e6c3112082014acdb67d6c))
|
39
|
+
* **alert:** add the remaining placements, code cleanup, storybook fixes ([c469574](https://github.com/Synerise/synerise-design/commit/c469574c2fa5135d956127a5bc35601808285569))
|
40
|
+
|
41
|
+
|
42
|
+
|
43
|
+
|
44
|
+
|
6
45
|
## [0.5.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.5.1...@synerise/ds-alert@0.5.2) (2022-03-21)
|
7
46
|
|
8
47
|
**Note:** Version bump only for package @synerise/ds-alert
|
package/README.md
CHANGED
@@ -13,7 +13,7 @@ yarn add @synerise/ds-alert
|
|
13
13
|
```
|
14
14
|
|
15
15
|
## Usage
|
16
|
-
```
|
16
|
+
```jsx
|
17
17
|
import Alert from '@synerise/ds-alert'
|
18
18
|
|
19
19
|
<Alert
|
@@ -28,6 +28,54 @@ import Alert from '@synerise/ds-alert'
|
|
28
28
|
|
29
29
|
```
|
30
30
|
|
31
|
+
### Notifications
|
32
|
+
|
33
|
+
Notifications API offer three things:
|
34
|
+
|
35
|
+
* `<Notification/>` component for styled content,
|
36
|
+
* `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),
|
37
|
+
* *Pro-users*: change `getContainer` for sending notifications in other scrollable sections (`@synerise/ds-modal`, `@synerise/ds-section`).
|
38
|
+
* and `notificationOpen` for scheduling showing notificaitons.
|
39
|
+
|
40
|
+
#### The simplest notification call
|
41
|
+
|
42
|
+
```jsx
|
43
|
+
import notificationApi from '@synerise/ds-alert'
|
44
|
+
|
45
|
+
notification.open({message: 'Message content'});
|
46
|
+
```
|
47
|
+
|
48
|
+
#### Styled notification
|
49
|
+
```jsx
|
50
|
+
import { Notification, notificationApi} from '@synerise/ds-alert'
|
51
|
+
|
52
|
+
notificationApi.open({
|
53
|
+
duration: 4.5,
|
54
|
+
message: <Notification>Message content</Notification>
|
55
|
+
});
|
56
|
+
```
|
57
|
+
|
58
|
+
#### Differently positioned notification
|
59
|
+
|
60
|
+
`antd-notification` is mounted in `docuemnt.body` by default. In order to style using scoped css -
|
61
|
+
`getContainer` has to be a `styled-components`-scoped element, this is done in `mountInstance`, see source code for more.
|
62
|
+
|
63
|
+
```jsx
|
64
|
+
import { Notification, notificationApi, notificationOpen } from '@synerise/ds-alert';
|
65
|
+
|
66
|
+
const [api, contextHolder] = notificationApi.useNotification();
|
67
|
+
notificationOpen({
|
68
|
+
message: <Notification>You have new message.</Notification>,
|
69
|
+
placement: 'topLeft'
|
70
|
+
}, api, contextHolder);
|
71
|
+
```
|
72
|
+
|
73
|
+
### Usage recommendations
|
74
|
+
|
75
|
+
It is recommended to call `notificationOpen` from `React.useEffect`.
|
76
|
+
Of course you can mount styled `<Notification/>` component by yourself,
|
77
|
+
but then you need to manage its rendering lifecycle.
|
78
|
+
|
31
79
|
## Demo
|
32
80
|
|
33
81
|
<iframe src="/storybook-static/iframe.html?id=components-alert--default"></iframe>
|
@@ -131,4 +179,17 @@ import Alert from '@synerise/ds-alert'
|
|
131
179
|
| withClose | prop to set closeIcon | `React.ReactNode` | - |
|
132
180
|
| button | prop to set button | `boolean` | - |
|
133
181
|
| textButton | string of button | `string` | - |
|
134
|
-
| text | string of withEmphasis or withLink | `string` | - |
|
182
|
+
| text | string of withEmphasis or withLink | `string` | - |
|
183
|
+
|
184
|
+
|
185
|
+
### Alert.Notification
|
186
|
+
| Property | Description | Type | Default |
|
187
|
+
|---------------------|---------------------------------------------------------------------------------------------------|---------------------------------------------------------------|-----------------|
|
188
|
+
| children | Content of the notification | string\/React.ReactNode\/JSX.Element | JSX.Element |
|
189
|
+
| type | type of the notification, `"info"/"success"`, see `antd-notification`, `info` by default | keyof NotificationInstance | "info" |
|
190
|
+
| placement | where to position the notification | 'bottomLeft' 'bottomRight' 'topLeft' 'topRight' 'bottom' | "bottom" |
|
191
|
+
| onClose? | Handler for clicking on the close button (close button is rendered only if this prop is provided) | () => void | - |
|
192
|
+
| buttonText? | Text on the action button | string | - |
|
193
|
+
| onButtonClick? | Handler for `onClick` on the action button | () => void | - |
|
194
|
+
| icon? | Icon on the action button | DSIcon | - |
|
195
|
+
| closeIconClassName? | Class of the close icon name | string | "ds-close-icon" |
|
@@ -0,0 +1,65 @@
|
|
1
|
+
import * as 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
|
+
* Typings for using better autocompletion for defining an argument for `notificationOpen`'s message property.
|
7
|
+
*/
|
8
|
+
export declare 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
|
+
declare type NotificationApiHook = ReturnType<NotificationApi['useNotification']>;
|
23
|
+
declare type ApiHook = NotificationApiHook[0];
|
24
|
+
declare type ContextHolder = NotificationApiHook[1];
|
25
|
+
/**
|
26
|
+
* Component with the content of the notification.
|
27
|
+
* Note that in order to show notification you need to use `notificationOpen`
|
28
|
+
*/
|
29
|
+
export declare function Notification({ buttonText, children, onButtonClick, onClose, icon, closeIconClassName, }: NotificationProps): JSX.Element;
|
30
|
+
/**
|
31
|
+
* creates a div, mounts it in getContainer and returns reference to it.
|
32
|
+
* This is a helper function for creating a getContainer-compatible element,
|
33
|
+
* which later should be passed to getContainer option in `antd-notification`'s api
|
34
|
+
*
|
35
|
+
* @param @contextHolder notification's hook api context
|
36
|
+
* @param @getContainer where to mount styled wrapper; can be a ref=React.useRef, <div ref={ref}/>
|
37
|
+
**/
|
38
|
+
export declare function mountInstance(contextHolder?: ContextHolder, { getContainer, className }?: {
|
39
|
+
getContainer?: (() => HTMLElement) | undefined;
|
40
|
+
className?: string | undefined;
|
41
|
+
}): [Promise<HTMLElement>, HTMLElement, () => void];
|
42
|
+
/**
|
43
|
+
* Function for showing new notifications.
|
44
|
+
* It requires proper context to be injected (see `notificationApi.useNotification`)
|
45
|
+
* and `message` prop in its first argument.
|
46
|
+
* Below you will find an example usage.
|
47
|
+
* Please remember that it is on you to provide contextHolder in the right place.
|
48
|
+
* ```
|
49
|
+
* import { notificationApi, Notification, notificationOpen } from '@synerise/ds-alert';
|
50
|
+
* const [api, contextHolder] = notificationApi.useNotification();
|
51
|
+
*
|
52
|
+
* function App() {
|
53
|
+
* return (<div id="app">
|
54
|
+
* {contextHolder}
|
55
|
+
* <button onClick={() => notificationOpen({
|
56
|
+
* message: <Notification>You have been notified.</Notification>
|
57
|
+
* })}>
|
58
|
+
* Show notification
|
59
|
+
* </button>);
|
60
|
+
*
|
61
|
+
* ReactDOM.render(<App/>, document.querySelector('#app'));
|
62
|
+
* ```
|
63
|
+
*/
|
64
|
+
export declare function notificationOpen({ type, className, message, icon, onClick, onClose, closeIconClassName, placement, ...props }: NotificationProps, notificationApi?: ApiHook, contextHolder?: ContextHolder): Promise<void>;
|
65
|
+
export default Notification;
|
@@ -0,0 +1,185 @@
|
|
1
|
+
var _excluded = ["type", "className", "message", "icon", "onClick", "onClose", "closeIconClassName", "placement"];
|
2
|
+
|
3
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
4
|
+
|
5
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
6
|
+
|
7
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
8
|
+
|
9
|
+
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; }
|
10
|
+
|
11
|
+
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); } }
|
12
|
+
|
13
|
+
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); }); }; }
|
14
|
+
|
15
|
+
import * as React from 'react';
|
16
|
+
import * as ReactDOM from 'react-dom';
|
17
|
+
import { notification } from 'antd';
|
18
|
+
import "antd/lib/notification/style/index.css";
|
19
|
+
import Button from '@synerise/ds-button';
|
20
|
+
import Icon, { UserAddM, CloseM } from '@synerise/ds-icon';
|
21
|
+
import * as S from './Notification.styles';
|
22
|
+
/**
|
23
|
+
* Typings for using better autocompletion for defining an argument for `notificationOpen`'s message property.
|
24
|
+
*/
|
25
|
+
|
26
|
+
/**
|
27
|
+
* Component with the content of the notification.
|
28
|
+
* Note that in order to show notification you need to use `notificationOpen`
|
29
|
+
*/
|
30
|
+
export function Notification(_ref) {
|
31
|
+
var buttonText = _ref.buttonText,
|
32
|
+
_ref$children = _ref.children,
|
33
|
+
children = _ref$children === void 0 ? undefined : _ref$children,
|
34
|
+
onButtonClick = _ref.onButtonClick,
|
35
|
+
onClose = _ref.onClose,
|
36
|
+
icon = _ref.icon,
|
37
|
+
_ref$closeIconClassNa = _ref.closeIconClassName,
|
38
|
+
closeIconClassName = _ref$closeIconClassNa === void 0 ? 'ds-close-icon' : _ref$closeIconClassNa;
|
39
|
+
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, {
|
40
|
+
type: "primary",
|
41
|
+
mode: "icon-label",
|
42
|
+
color: "blue",
|
43
|
+
onClick: onButtonClick
|
44
|
+
}, icon || icon !== null && /*#__PURE__*/React.createElement(Icon, {
|
45
|
+
component: /*#__PURE__*/React.createElement(UserAddM, null)
|
46
|
+
}), buttonText), onClose && /*#__PURE__*/React.createElement(Button, {
|
47
|
+
className: closeIconClassName,
|
48
|
+
type: "ghost",
|
49
|
+
onClick: onClose
|
50
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
51
|
+
component: /*#__PURE__*/React.createElement(CloseM, null)
|
52
|
+
}))));
|
53
|
+
}
|
54
|
+
/**
|
55
|
+
* creates a div, mounts it in getContainer and returns reference to it.
|
56
|
+
* This is a helper function for creating a getContainer-compatible element,
|
57
|
+
* which later should be passed to getContainer option in `antd-notification`'s api
|
58
|
+
*
|
59
|
+
* @param @contextHolder notification's hook api context
|
60
|
+
* @param @getContainer where to mount styled wrapper; can be a ref=React.useRef, <div ref={ref}/>
|
61
|
+
**/
|
62
|
+
|
63
|
+
export function mountInstance(contextHolder, _temp) {
|
64
|
+
var _ref2 = _temp === void 0 ? {} : _temp,
|
65
|
+
_ref2$getContainer = _ref2.getContainer,
|
66
|
+
getContainer = _ref2$getContainer === void 0 ? function () {
|
67
|
+
return document.body;
|
68
|
+
} : _ref2$getContainer,
|
69
|
+
_ref2$className = _ref2.className,
|
70
|
+
className = _ref2$className === void 0 ? 'popup-container' : _ref2$className;
|
71
|
+
|
72
|
+
var element = document.createElement('div');
|
73
|
+
element.setAttribute('class', className);
|
74
|
+
var cont = getContainer();
|
75
|
+
cont.appendChild(element);
|
76
|
+
var jsxEl = /*#__PURE__*/React.createElement(S.NotificationsWrapper, null, contextHolder);
|
77
|
+
var renderPromsie = new Promise(function (resolve) {
|
78
|
+
ReactDOM.render(jsxEl, element, function () {
|
79
|
+
return resolve(element);
|
80
|
+
});
|
81
|
+
});
|
82
|
+
|
83
|
+
var cleanUpFunction = function cleanUpFunction() {
|
84
|
+
cont.removeChild(element);
|
85
|
+
};
|
86
|
+
|
87
|
+
return [renderPromsie, element, cleanUpFunction];
|
88
|
+
}
|
89
|
+
/**
|
90
|
+
* Function for showing new notifications.
|
91
|
+
* It requires proper context to be injected (see `notificationApi.useNotification`)
|
92
|
+
* and `message` prop in its first argument.
|
93
|
+
* Below you will find an example usage.
|
94
|
+
* Please remember that it is on you to provide contextHolder in the right place.
|
95
|
+
* ```
|
96
|
+
* import { notificationApi, Notification, notificationOpen } from '@synerise/ds-alert';
|
97
|
+
* const [api, contextHolder] = notificationApi.useNotification();
|
98
|
+
*
|
99
|
+
* function App() {
|
100
|
+
* return (<div id="app">
|
101
|
+
* {contextHolder}
|
102
|
+
* <button onClick={() => notificationOpen({
|
103
|
+
* message: <Notification>You have been notified.</Notification>
|
104
|
+
* })}>
|
105
|
+
* Show notification
|
106
|
+
* </button>);
|
107
|
+
*
|
108
|
+
* ReactDOM.render(<App/>, document.querySelector('#app'));
|
109
|
+
* ```
|
110
|
+
*/
|
111
|
+
|
112
|
+
export function notificationOpen(_x, _x2, _x3) {
|
113
|
+
return _notificationOpen.apply(this, arguments);
|
114
|
+
}
|
115
|
+
|
116
|
+
function _notificationOpen() {
|
117
|
+
_notificationOpen = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(_ref3, notificationApi, contextHolder) {
|
118
|
+
var _ref3$type, type, _ref3$className, className, message, icon, onClick, onClose, _ref3$closeIconClassN, closeIconClassName, _ref3$placement, placement, props, api, el, containerPromise, _mountInstance, getContainer, maybeCloseClick;
|
119
|
+
|
120
|
+
return regeneratorRuntime.wrap(function _callee$(_context) {
|
121
|
+
while (1) {
|
122
|
+
switch (_context.prev = _context.next) {
|
123
|
+
case 0:
|
124
|
+
_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);
|
125
|
+
api = notificationApi || notification; // TODO: check if context is actually available
|
126
|
+
|
127
|
+
el = document.body.querySelector("." + className);
|
128
|
+
|
129
|
+
if (!el) {
|
130
|
+
_mountInstance = mountInstance(contextHolder, {
|
131
|
+
className: className
|
132
|
+
});
|
133
|
+
containerPromise = _mountInstance[0];
|
134
|
+
el = _mountInstance[1];
|
135
|
+
}
|
136
|
+
|
137
|
+
_context.next = 6;
|
138
|
+
return containerPromise;
|
139
|
+
|
140
|
+
case 6:
|
141
|
+
getContainer = function getContainer() {
|
142
|
+
var _el;
|
143
|
+
|
144
|
+
return (_el = el) == null ? void 0 : _el.querySelector('div>div,.NotificationsBottomPlacementWrapper>.NotificationsWrapper');
|
145
|
+
};
|
146
|
+
/** a workaround for handling close clicks,
|
147
|
+
* since there's no way for injecting other element triggering onClose listener.
|
148
|
+
* It is set as a listener for all the clicks
|
149
|
+
* and fires onClose when close-icon was clicked */
|
150
|
+
|
151
|
+
|
152
|
+
maybeCloseClick = function maybeCloseClick(ev) {
|
153
|
+
var _ev$currentTarget;
|
154
|
+
|
155
|
+
var isClickedElementChildOfCloseIcon = ev.target.closest("." + closeIconClassName);
|
156
|
+
var isThisCloseIcon = ev == null ? void 0 : (_ev$currentTarget = ev.currentTarget) == null ? void 0 : _ev$currentTarget.classList.contains("" + closeIconClassName);
|
157
|
+
|
158
|
+
if (isClickedElementChildOfCloseIcon || isThisCloseIcon) {
|
159
|
+
return onClose && onClose();
|
160
|
+
}
|
161
|
+
|
162
|
+
return onClick && onClick();
|
163
|
+
};
|
164
|
+
|
165
|
+
return _context.abrupt("return", api.open(_objectSpread({
|
166
|
+
message: message,
|
167
|
+
type: type,
|
168
|
+
placement: placement,
|
169
|
+
getContainer: getContainer,
|
170
|
+
icon: icon,
|
171
|
+
onClick: maybeCloseClick,
|
172
|
+
bottom: 16
|
173
|
+
}, props)));
|
174
|
+
|
175
|
+
case 9:
|
176
|
+
case "end":
|
177
|
+
return _context.stop();
|
178
|
+
}
|
179
|
+
}
|
180
|
+
}, _callee);
|
181
|
+
}));
|
182
|
+
return _notificationOpen.apply(this, arguments);
|
183
|
+
}
|
184
|
+
|
185
|
+
export default Notification;
|
@@ -0,0 +1,11 @@
|
|
1
|
+
export declare const NotificationsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
2
|
+
export declare const Shrink: import("styled-components").StyledComponent<"div", any, {}, never>;
|
3
|
+
export declare const TextLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
|
4
|
+
export declare const NotificationsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
5
|
+
declare const _default: {
|
6
|
+
NotificationsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
7
|
+
NotificationsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
8
|
+
TextLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
|
9
|
+
Shrink: import("styled-components").StyledComponent<"div", any, {}, never>;
|
10
|
+
};
|
11
|
+
export default _default;
|
@@ -0,0 +1,36 @@
|
|
1
|
+
import styled from 'styled-components';
|
2
|
+
import theme from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
|
3
|
+
export var NotificationsContainer = styled.div.withConfig({
|
4
|
+
displayName: "Notificationstyles__NotificationsContainer",
|
5
|
+
componentId: "sc-1ke52b0-0"
|
6
|
+
})(["background-color:", ";color:white;min-width:588px;padding:8px 8px 8px 16px;display:flex;align-items:center;width:100px;min-height:50px;"], function (props) {
|
7
|
+
var _palette;
|
8
|
+
|
9
|
+
return (_palette = ((props == null ? void 0 : props.theme) || theme).palette) == null ? void 0 : _palette['grey-800'];
|
10
|
+
});
|
11
|
+
export var Shrink = styled.div.withConfig({
|
12
|
+
displayName: "Notificationstyles__Shrink",
|
13
|
+
componentId: "sc-1ke52b0-1"
|
14
|
+
})(["flex-grow:0;"]);
|
15
|
+
export var TextLabel = styled.div.withConfig({
|
16
|
+
displayName: "Notificationstyles__TextLabel",
|
17
|
+
componentId: "sc-1ke52b0-2"
|
18
|
+
})(["flex-grow:1;font-size:13px;"]);
|
19
|
+
export var NotificationsWrapper = styled.div.withConfig({
|
20
|
+
displayName: "Notificationstyles__NotificationsWrapper",
|
21
|
+
componentId: "sc-1ke52b0-3"
|
22
|
+
})(["& .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:3px;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) {
|
23
|
+
var _palette2;
|
24
|
+
|
25
|
+
return (_palette2 = ((props == null ? void 0 : props.theme) || theme).palette) == null ? void 0 : _palette2['grey-900'];
|
26
|
+
}, function (props) {
|
27
|
+
var _palette3;
|
28
|
+
|
29
|
+
return (_palette3 = ((props == null ? void 0 : props.theme) || theme).palette) == null ? void 0 : _palette3['grey-900'];
|
30
|
+
});
|
31
|
+
export default {
|
32
|
+
NotificationsContainer: NotificationsContainer,
|
33
|
+
NotificationsWrapper: NotificationsWrapper,
|
34
|
+
TextLabel: TextLabel,
|
35
|
+
Shrink: Shrink
|
36
|
+
};
|
File without changes
|
@@ -0,0 +1,29 @@
|
|
1
|
+
describe('notification', function () {
|
2
|
+
it.todo('notification message should allow passing jsx component');
|
3
|
+
it.todo('notification should have close-button');
|
4
|
+
it.todo('notification holder should have no padding nor margin');
|
5
|
+
it.todo('by default there should be no icon');
|
6
|
+
it.todo('notifications should be closable with a close icon-click');
|
7
|
+
it.todo('notifications should dissapear after given time');
|
8
|
+
it.todo('pass duration and other props to the notification.open api');
|
9
|
+
it.todo('should mount in a styled-components NotificationWrapper wrapper (not next to as a e.g. sibling)');
|
10
|
+
it.todo('notification message can handle multiline and/or long messages');
|
11
|
+
it.todo('notifications appear correctly even after destroying notifications instance');
|
12
|
+
it.todo('notification container has no background (so border-radius on the content can be applied)');
|
13
|
+
it.todo('container has background-color of gray-900 and 3px border-radius, padding-left is 16px');
|
14
|
+
it.todo('shadow has gray-800');
|
15
|
+
it.todo('default text font-size is 13px');
|
16
|
+
it.todo('button label font-size is 13px');
|
17
|
+
it.todo('notification has min-height of 50px (NotificationsContainer)');
|
18
|
+
it.todo('ant-notification-hook-holder should have 0px height if empty (including margins)');
|
19
|
+
it.todo('first ant-notification-hook-handler has margin-top 0px, the other ones have 8px');
|
20
|
+
it.todo('.ant-notification > div should have transparent background');
|
21
|
+
it.todo('close button and action button can be shown separately (even exclusively)');
|
22
|
+
it.todo("Notification's message can accept special characters \"&'");
|
23
|
+
it.todo('placement bottom applies .ant-notification-bottom class to the container');
|
24
|
+
it.todo('sending notification with another placement handles it correctly');
|
25
|
+
it.todo('getContainer should always point at NotificationsWrapper element');
|
26
|
+
it.todo('.ant-notification-bottom should be properly styled even if e.g. .ant-notification-topLeft was added first (`.ant-notification{, }.ant-notification-bottom`)');
|
27
|
+
it.todo('notificationOpen works with useEffect');
|
28
|
+
it.todo('if running from useEffect handle it so works, do not force used to rely on useLayoutEffect');
|
29
|
+
});
|
package/dist/index.d.ts
CHANGED
@@ -1 +1,10 @@
|
|
1
1
|
export { default } from './Alert';
|
2
|
+
export * as S from './Notification/Notification.styles';
|
3
|
+
/**
|
4
|
+
* notificationApi is required for properly handling injecting ContextApi for styling and locales.
|
5
|
+
* It's a proxy to `antd`'s `notification` module.
|
6
|
+
*/
|
7
|
+
export declare const notificationsApi: import("antd/lib/notification").NotificationApi;
|
8
|
+
export type { NotificationProps } from './Notification/Notification';
|
9
|
+
export { default as Notification } from './Notification/Notification';
|
10
|
+
export { notificationOpen } from './Notification/Notification';
|
package/dist/index.js
CHANGED
@@ -1 +1,12 @@
|
|
1
|
-
|
1
|
+
import { notification } from 'antd';
|
2
|
+
export { default } from './Alert';
|
3
|
+
import * as _S from './Notification/Notification.styles';
|
4
|
+
export { _S as S };
|
5
|
+
/**
|
6
|
+
* notificationApi is required for properly handling injecting ContextApi for styling and locales.
|
7
|
+
* It's a proxy to `antd`'s `notification` module.
|
8
|
+
*/
|
9
|
+
|
10
|
+
export var notificationsApi = notification;
|
11
|
+
export { default as Notification } from './Notification/Notification';
|
12
|
+
export { notificationOpen } from './Notification/Notification';
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@synerise/ds-alert",
|
3
|
-
"version": "0.
|
3
|
+
"version": "0.7.0",
|
4
4
|
"description": "Alert UI Component for the Synerise Design System",
|
5
5
|
"license": "ISC",
|
6
6
|
"repository": "Synerise/synerise-design",
|
@@ -32,10 +32,10 @@
|
|
32
32
|
],
|
33
33
|
"types": "dist/index.d.ts",
|
34
34
|
"dependencies": {
|
35
|
-
"@synerise/ds-button": "^0.17.
|
36
|
-
"@synerise/ds-icon": "^0.
|
35
|
+
"@synerise/ds-button": "^0.17.2",
|
36
|
+
"@synerise/ds-icon": "^0.49.0",
|
37
37
|
"@synerise/ds-typography": "^0.12.2",
|
38
|
-
"@synerise/ds-unordered-list": "^0.2.
|
38
|
+
"@synerise/ds-unordered-list": "^0.2.10",
|
39
39
|
"animate.css": "^4.1.1",
|
40
40
|
"react-animate-height": "^2.0.23",
|
41
41
|
"react-mount-animation": "0.0.9"
|
@@ -47,5 +47,5 @@
|
|
47
47
|
"devDependencies": {
|
48
48
|
"@synerise/ds-utils": "^0.19.0"
|
49
49
|
},
|
50
|
-
"gitHead": "
|
50
|
+
"gitHead": "b0e79f0b32b23d3a5128d885e8c52a0f54029ce7"
|
51
51
|
}
|