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