1 | import _extends from 'babel-runtime/helpers/extends';
|
2 | import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
|
3 | import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
|
4 | import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
|
5 | import _inherits from 'babel-runtime/helpers/inherits';
|
6 |
|
7 | var _class, _temp;
|
8 |
|
9 | import React, { Component } from 'react';
|
10 | import ReactDOM from 'react-dom';
|
11 | import PropTypes from 'prop-types';
|
12 | import ConfigProvider from '../config-provider';
|
13 | import Animate from '../animate';
|
14 | import Message from '../message';
|
15 | import uuid from '../util/guid';
|
16 | import _config from './config';
|
17 |
|
18 | var getAnimation = function getAnimation(placement) {
|
19 | switch (placement) {
|
20 | case 'tl':
|
21 | case 'bl':
|
22 | return 'slideInLeft';
|
23 | case 'tr':
|
24 | case 'br':
|
25 | return 'slideInRight';
|
26 | default:
|
27 | return null;
|
28 | }
|
29 | };
|
30 |
|
31 | var Notification = (_temp = _class = function (_Component) {
|
32 | _inherits(Notification, _Component);
|
33 |
|
34 | function Notification(props) {
|
35 | _classCallCheck(this, Notification);
|
36 |
|
37 | var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
38 |
|
39 | _this.close = function (key) {
|
40 | var notifications = _this.state.notifications;
|
41 |
|
42 | var index = notifications.findIndex(function (notification) {
|
43 | return notification.key === key;
|
44 | });
|
45 |
|
46 | if (index === -1) return;
|
47 | var _notifications$index = notifications[index],
|
48 | onClose = _notifications$index.onClose,
|
49 | timer = _notifications$index.timer;
|
50 |
|
51 |
|
52 | notifications.splice(index, 1);
|
53 |
|
54 | var timerIndex = _this.timers.findIndex(function (v) {
|
55 | return v === timer;
|
56 | });
|
57 |
|
58 | if (timerIndex !== -1) {
|
59 | _this.timers.splice(timerIndex, 1);
|
60 | }
|
61 |
|
62 | if (timer) {
|
63 | clearTimeout(timer);
|
64 | }
|
65 |
|
66 | _this.setState({
|
67 | notifications: notifications
|
68 | });
|
69 |
|
70 | if (onClose) {
|
71 | onClose();
|
72 | }
|
73 | };
|
74 |
|
75 | _this.open = function (_ref) {
|
76 | var key = _ref.key,
|
77 | duration = _ref.duration,
|
78 | others = _objectWithoutProperties(_ref, ['key', 'duration']);
|
79 |
|
80 | var notifications = [].concat(_this.state.notifications);
|
81 | if (!key) {
|
82 | key = uuid('notification-');
|
83 | }
|
84 |
|
85 | var index = notifications.findIndex(function (notification) {
|
86 | return notification.key === key;
|
87 | });
|
88 |
|
89 | if (index !== -1) {
|
90 | notifications[index] = _extends({}, notifications[index], others);
|
91 | } else {
|
92 | var timer = void 0;
|
93 |
|
94 | if (duration > 0) {
|
95 | timer = setTimeout(function () {
|
96 | _this.close(key);
|
97 | }, duration);
|
98 | _this.timers.push(timer);
|
99 | }
|
100 | notifications.push(_extends({}, others, {
|
101 | key: key,
|
102 | timer: timer
|
103 | }));
|
104 | }
|
105 |
|
106 | if (_config.maxCount > 0 && _config.maxCount < notifications.length) {
|
107 | while (notifications.length > _config.maxCount) {
|
108 | var _key = notifications[0].key;
|
109 |
|
110 | _this.close(_key);
|
111 | notifications.splice(0, 1);
|
112 | }
|
113 | }
|
114 |
|
115 | _this.setState({
|
116 | notifications: notifications
|
117 | });
|
118 |
|
119 | return key;
|
120 | };
|
121 |
|
122 | _this.state = {
|
123 | notifications: []
|
124 | };
|
125 | _this.timers = [];
|
126 | return _this;
|
127 | }
|
128 |
|
129 | Notification.prototype.componentWillUnmount = function componentWillUnmount() {
|
130 | this.timers.forEach(function (timer) {
|
131 | if (!timer) return;
|
132 | clearTimeout(timer);
|
133 | });
|
134 | };
|
135 |
|
136 | Notification.prototype.render = function render() {
|
137 | var _ref2;
|
138 |
|
139 | var prefix = this.props.prefix;
|
140 | var notifications = this.state.notifications;
|
141 |
|
142 |
|
143 | return React.createElement(
|
144 | 'div',
|
145 | {
|
146 | className: prefix + 'notification',
|
147 | style: (_ref2 = {}, _ref2[_config.placement.indexOf('b') === 0 ? 'bottom' : 'top'] = _config.offset[1], _ref2[_config.placement.indexOf('l') !== -1 ? 'left' : 'right'] = _config.offset[0], _ref2)
|
148 | },
|
149 | React.createElement(
|
150 | Animate,
|
151 | {
|
152 | animationAppear: true,
|
153 | animation: {
|
154 | enter: getAnimation(_config.placement),
|
155 | leave: prefix + 'notification-fade-leave'
|
156 | },
|
157 | singleMode: false
|
158 | },
|
159 | notifications.map(function (_ref3) {
|
160 | var key = _ref3.key,
|
161 | type = _ref3.type,
|
162 | title = _ref3.title,
|
163 | content = _ref3.content,
|
164 | icon = _ref3.icon,
|
165 | onClick = _ref3.onClick,
|
166 | style = _ref3.style,
|
167 | className = _ref3.className;
|
168 | return React.createElement(
|
169 | Message,
|
170 | {
|
171 | key: key,
|
172 | shape: 'toast',
|
173 | type: type,
|
174 | title: title,
|
175 | iconType: icon,
|
176 | closeable: true,
|
177 | animation: false,
|
178 | size: _config.size,
|
179 | visible: true,
|
180 | style: style,
|
181 | className: className,
|
182 | onClick: onClick,
|
183 | onClose: function onClose() {
|
184 | return close(key);
|
185 | }
|
186 | },
|
187 | content
|
188 | );
|
189 | })
|
190 | )
|
191 | );
|
192 | };
|
193 |
|
194 | return Notification;
|
195 | }(Component), _class.propTypes = {
|
196 | prefix: PropTypes.string
|
197 | }, _class.defaultProps = {
|
198 | prefix: 'next-'
|
199 | }, _temp);
|
200 | Notification.displayName = 'Notification';
|
201 |
|
202 |
|
203 | var ConfigedNotification = ConfigProvider.config(Notification, {
|
204 | exportNames: ['open', 'close']
|
205 | });
|
206 | var instance = void 0;
|
207 | var mounting = false;
|
208 | var waitOpens = [];
|
209 |
|
210 | function open() {
|
211 | var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
212 |
|
213 | if (!options.title && !options.content) return;
|
214 |
|
215 | var duration = !options.duration && options.duration !== 0 ? _config.duration : options.duration;
|
216 |
|
217 | if (!instance) {
|
218 | if (!options.key) {
|
219 | options.key = uuid('notification-');
|
220 | }
|
221 |
|
222 | waitOpens.push(_extends({}, options, {
|
223 | duration: duration
|
224 | }));
|
225 |
|
226 | if (!mounting) {
|
227 | mounting = true;
|
228 | var div = document.createElement('div');
|
229 | if (_config.getContainer) {
|
230 | var root = _config.getContainer();
|
231 | root.appendChild(div);
|
232 | } else {
|
233 | document.body.appendChild(div);
|
234 | }
|
235 |
|
236 | ReactDOM.render(React.createElement(
|
237 | ConfigProvider,
|
238 | ConfigProvider.getContext(),
|
239 | React.createElement(ConfigedNotification, {
|
240 | ref: function ref(_ref4) {
|
241 | instance = _ref4;
|
242 | }
|
243 | })
|
244 | ), div, function () {
|
245 | waitOpens.forEach(function (item) {
|
246 | return instance.open(item);
|
247 | });
|
248 | waitOpens = [];
|
249 | mounting = false;
|
250 | });
|
251 | }
|
252 |
|
253 | return options.key;
|
254 | }
|
255 |
|
256 | var key = instance.open(_extends({}, options, {
|
257 | duration: duration
|
258 | }));
|
259 |
|
260 | return key;
|
261 | }
|
262 |
|
263 | function close(key) {
|
264 | if (!instance) {
|
265 | var index = waitOpens.findIndex(function (item) {
|
266 | return item.key === key;
|
267 | });
|
268 | waitOpens.splice(index, 1);
|
269 | return;
|
270 | }
|
271 |
|
272 | instance.close(key);
|
273 | }
|
274 |
|
275 | function destroy() {
|
276 | if (!instance) return;
|
277 | var mountNode = ReactDOM.findDOMNode(instance).parentNode;
|
278 | if (mountNode) {
|
279 | ReactDOM.unmountComponentAtNode(mountNode);
|
280 | mountNode.parentNode.removeChild(mountNode);
|
281 | }
|
282 | }
|
283 |
|
284 | var levels = {};
|
285 |
|
286 | ['success', 'error', 'warning', 'notice', 'help'].forEach(function (type) {
|
287 | levels[type] = function () {
|
288 | var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
289 |
|
290 | return open(_extends({}, options, {
|
291 | type: type
|
292 | }));
|
293 | };
|
294 | });
|
295 | export default _extends({
|
296 | config: function config() {
|
297 | for (var _len = arguments.length, args = Array(_len), _key2 = 0; _key2 < _len; _key2++) {
|
298 | args[_key2] = arguments[_key2];
|
299 | }
|
300 |
|
301 | return _extends.apply(undefined, [_config].concat(args));
|
302 | },
|
303 |
|
304 | open: open,
|
305 | close: close,
|
306 | destroy: destroy
|
307 | }, levels); |
\ | No newline at end of file |