1 | import _extends from 'babel-runtime/helpers/extends';
|
2 | import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
|
3 | import React, { useState } from 'react';
|
4 | import ReactDOM from 'react-dom';
|
5 | import ConfigProvider from '../config-provider';
|
6 | import Animate from '../animate';
|
7 | import Message from './message';
|
8 | import { obj, log, guid } from '../util';
|
9 |
|
10 | var _config = {
|
11 | top: 8,
|
12 | maxCount: 0,
|
13 | duration: 3000
|
14 | };
|
15 |
|
16 | var MessageWrapper = function MessageWrapper(props) {
|
17 |
|
18 | var _props$prefix = props.prefix,
|
19 | prefix = _props$prefix === undefined ? 'next-' : _props$prefix,
|
20 | _props$dataSource = props.dataSource,
|
21 | dataSource = _props$dataSource === undefined ? [] : _props$dataSource;
|
22 |
|
23 | var _useState = useState(),
|
24 | forceUpdate = _useState[1];
|
25 |
|
26 | dataSource.forEach(function (i) {
|
27 | if (!i.timer) {
|
28 | i.timer = setTimeout(function () {
|
29 | var idx = dataSource.indexOf(i);
|
30 | if (idx > -1) {
|
31 | var item = dataSource[idx];
|
32 | typeof item.onClose === 'function' && item.onClose();
|
33 | dataSource.splice(idx, 1);
|
34 | forceUpdate({});
|
35 | }
|
36 | }, i.duration);
|
37 | }
|
38 | });
|
39 |
|
40 | return React.createElement(
|
41 | 'div',
|
42 | { className: prefix + 'message-wrapper-v2', style: { top: _config.top } },
|
43 | React.createElement(
|
44 | Animate,
|
45 | {
|
46 | animationAppear: true,
|
47 | animation: {
|
48 | appear: 'pulse',
|
49 | enter: 'pulse',
|
50 | leave: prefix + 'message-fade-leave'
|
51 | },
|
52 | singleMode: false
|
53 | },
|
54 | dataSource.map(function (i) {
|
55 | var key = i.key,
|
56 | className = i.className,
|
57 | type = i.type,
|
58 | title = i.title,
|
59 | content = i.content,
|
60 | style = i.style,
|
61 | others = _objectWithoutProperties(i, ['key', 'className', 'type', 'title', 'content', 'style']);
|
62 |
|
63 | return React.createElement(
|
64 | 'div',
|
65 | { className: prefix + 'message-list', key: key },
|
66 | React.createElement(
|
67 | Message,
|
68 | _extends({}, others, {
|
69 | className: className,
|
70 | prefix: prefix,
|
71 | visible: true,
|
72 | type: type,
|
73 | shape: 'toast',
|
74 | title: title,
|
75 | style: style
|
76 | }),
|
77 | content
|
78 | )
|
79 | );
|
80 | })
|
81 | )
|
82 | );
|
83 | };
|
84 |
|
85 | var ConfigedMessages = ConfigProvider.config(MessageWrapper);
|
86 |
|
87 | var messageRootNode = void 0;
|
88 | var messageList = [];
|
89 |
|
90 | var createMessage = function createMessage(props) {
|
91 | var _props$key = props.key,
|
92 | key = _props$key === undefined ? guid('message-') : _props$key,
|
93 | others = _objectWithoutProperties(props, ['key']);
|
94 |
|
95 | if (!messageRootNode) {
|
96 | messageRootNode = document.createElement('div');
|
97 | document.body.appendChild(messageRootNode);
|
98 | }
|
99 |
|
100 | var maxCount = _config.maxCount,
|
101 | duration = _config.duration;
|
102 |
|
103 |
|
104 | var item = _extends({
|
105 | key: key,
|
106 | duration: duration
|
107 | }, others);
|
108 |
|
109 | messageList.push(item);
|
110 |
|
111 | if (maxCount && messageList.length > maxCount) {
|
112 | messageList.shift();
|
113 | }
|
114 |
|
115 | ReactDOM.render(React.createElement(
|
116 | ConfigProvider,
|
117 | ConfigProvider.getContext(),
|
118 | React.createElement(ConfigedMessages, { dataSource: messageList })
|
119 | ), messageRootNode);
|
120 |
|
121 | return {
|
122 | key: key,
|
123 | close: function close() {
|
124 | if (item.timer) {
|
125 | clearTimeout(item.timer);
|
126 | }
|
127 | var idx = messageList.indexOf(item);
|
128 | if (idx > -1) {
|
129 | typeof item.onClose === 'function' && item.onClose();
|
130 | messageList.splice(idx, 1);
|
131 |
|
132 | ReactDOM.render(React.createElement(
|
133 | ConfigProvider,
|
134 | ConfigProvider.getContext(),
|
135 | React.createElement(ConfigedMessages, { dataSource: messageList })
|
136 | ), messageRootNode);
|
137 | }
|
138 | }
|
139 | };
|
140 | };
|
141 |
|
142 | function close(key) {
|
143 | if (key) {
|
144 | var index = messageList.findIndex(function (item) {
|
145 | return item.key === key;
|
146 | });
|
147 | messageList.splice(index, 1);
|
148 | } else {
|
149 | messageList = [];
|
150 | }
|
151 |
|
152 | if (messageRootNode) {
|
153 | ReactDOM.render(React.createElement(
|
154 | ConfigProvider,
|
155 | ConfigProvider.getContext(),
|
156 | React.createElement(ConfigedMessages, { dataSource: messageList })
|
157 | ), messageRootNode);
|
158 | }
|
159 | }
|
160 |
|
161 | function handleConfig(config, type) {
|
162 | var newConfig = {};
|
163 |
|
164 | if (typeof config === 'string' || React.isValidElement(config)) {
|
165 | newConfig.title = config;
|
166 | } else if (obj.typeOf(config) === 'Object') {
|
167 | newConfig = _extends({}, config);
|
168 | }
|
169 |
|
170 | if (type) {
|
171 | newConfig.type = type;
|
172 | }
|
173 |
|
174 | return newConfig;
|
175 | }
|
176 |
|
177 | function open(type) {
|
178 | return function (config) {
|
179 | config = handleConfig(config, type);
|
180 | return createMessage(config);
|
181 | };
|
182 | }
|
183 |
|
184 | function destory() {
|
185 | if (!messageRootNode) return;
|
186 | if (messageRootNode) {
|
187 | ReactDOM.unmountComponentAtNode(messageRootNode);
|
188 | messageRootNode.parentNode.removeChild(messageRootNode);
|
189 | messageRootNode = null;
|
190 | }
|
191 | }
|
192 |
|
193 | export default {
|
194 | open: open(),
|
195 | success: open('success'),
|
196 | warning: open('warning'),
|
197 | error: open('error'),
|
198 | help: open('help'),
|
199 | loading: open('loading'),
|
200 | notice: open('notice'),
|
201 | close: close,
|
202 | destory: destory,
|
203 | config: function config() {
|
204 | if (!useState) {
|
205 | log.warning('need react version > 16.8.0');
|
206 | return;
|
207 | }
|
208 |
|
209 | for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
210 | args[_key] = arguments[_key];
|
211 | }
|
212 |
|
213 | return _extends.apply(undefined, [_config].concat(args));
|
214 | }
|
215 | }; |
\ | No newline at end of file |