1 | import "core-js/modules/es6.regexp.split";
|
2 | import "core-js/modules/es6.object.assign";
|
3 | import "core-js/modules/es6.regexp.match";
|
4 | import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
5 | import _createClass from "@babel/runtime/helpers/createClass";
|
6 | import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
7 | import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
8 | import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
|
9 | import _inherits from "@babel/runtime/helpers/inherits";
|
10 |
|
11 |
|
12 | import React, { Component } from 'react';
|
13 | import { decode } from '@beisen-platform/common-func';
|
14 | import BaseButton from '@beisen-platform/base-button';
|
15 | import ArrowDownIcon from '@beisen-platform/react-icons/lib/icons/Arrowdown2Nomal.js';
|
16 | import AttentionIcon from '@beisen-platform/react-icons/lib/icons/ZhuyiNomal.js';
|
17 | import './styles/all.css';
|
18 |
|
19 | var PopLayer =
|
20 |
|
21 | function (_Component) {
|
22 | _inherits(PopLayer, _Component);
|
23 |
|
24 | function PopLayer(props) {
|
25 | var _this;
|
26 |
|
27 | _classCallCheck(this, PopLayer);
|
28 |
|
29 | _this = _possibleConstructorReturn(this, _getPrototypeOf(PopLayer).call(this, props));
|
30 |
|
31 | _this.showAllInfo = function () {
|
32 | _this.refs.tipsContent.style.maxHeight = '280px';
|
33 | _this.refs.tipsContent.style.overflowY = 'auto';
|
34 |
|
35 | if (_this.refs.tipsContent.scrollHeight > 280) {
|
36 | if (_this.refs.manualClose) {
|
37 | _this.refs.manualClose.className = 'manual-close manual-close-hasShadow';
|
38 | }
|
39 |
|
40 | if (_this.refs.hasNoButtonShadowLine) {
|
41 | _this.refs.hasNoButtonShadowLine.className = 'hasNoButtonLine hasNoButtonLine_hasShadow';
|
42 | }
|
43 | }
|
44 |
|
45 | if (_this.refs.showAllBtn) {
|
46 | _this.refs.showAllBtn.style.display = 'none';
|
47 | }
|
48 | };
|
49 |
|
50 | _this.DetermineChineseCharacterNum = function (str) {
|
51 | var sum = 0;
|
52 | var re = /[\u4E00-\u9FA5]/g;
|
53 |
|
54 | if (str) {
|
55 | if (re.test(str)) {
|
56 |
|
57 | return str.match(re).length;
|
58 | }
|
59 | }
|
60 |
|
61 | return 0;
|
62 | };
|
63 |
|
64 | _this.renderIcon = function (style, type) {
|
65 | if (style == 'round-pattern') {
|
66 | if (type == 'success') {
|
67 | return React.createElement("div", {
|
68 | className: "round-pattern-tips-icon-border round-pattern-tips-icon-border-success"
|
69 | }, React.createElement("div", {
|
70 | className: "round-pattern-tips-icon"
|
71 | }, React.createElement("div", {
|
72 | className: "successEyesBorder",
|
73 | ref: "eyesBorder"
|
74 | }, React.createElement("div", {
|
75 | className: "successFaceLeftEyes",
|
76 | ref: "successFaceLeftEyes"
|
77 | }), React.createElement("div", {
|
78 | className: "successFaceRightEyes",
|
79 | ref: "successFaceRightEyes"
|
80 | })), React.createElement("div", {
|
81 | className: "successFaceMouse",
|
82 | ref: "mouseActive"
|
83 | }, React.createElement("div", {
|
84 | className: "successMouseFadeOut fadeOut-top",
|
85 | ref: "fadeOutTop"
|
86 | }))));
|
87 | } else if (type == 'error') {
|
88 | return React.createElement("div", {
|
89 | className: "round-pattern-tips-icon-border round-pattern-tips-icon-border-error"
|
90 | }, React.createElement("div", {
|
91 | className: "round-pattern-tips-icon",
|
92 | ref: "roundPatternTipsIcon"
|
93 | }, React.createElement("div", {
|
94 | className: "errorEyesBorder",
|
95 | ref: "eyesBorder"
|
96 | }, React.createElement("div", {
|
97 | className: "errorFaceLeftEyes",
|
98 | ref: "errorFaceLeftEyes"
|
99 | }), React.createElement("div", {
|
100 | className: "errorFaceRightEyes",
|
101 | ref: "errorFaceRightEyes"
|
102 | })), React.createElement("div", {
|
103 | className: "errorFaceMouse",
|
104 | ref: "mouseActive"
|
105 | }, React.createElement("div", {
|
106 | className: "errorMouseFadeOut fadeOut-bottom",
|
107 | ref: "fadeOutBottom"
|
108 | }))));
|
109 | } else if (type == 'warning') {
|
110 | return React.createElement("div", {
|
111 | className: "round-pattern-tips-icon-border round-pattern-tips-icon-border-warning"
|
112 | }, React.createElement("div", {
|
113 | className: "round-pattern-tips-icon",
|
114 | ref: "roundPatternTipsIcon"
|
115 | }, React.createElement("div", {
|
116 | className: "warningEyesBorder",
|
117 | ref: "eyesBorder"
|
118 | }, React.createElement("div", {
|
119 | className: "warningFaceLeftEyes",
|
120 | ref: "warningFaceLeftEyes"
|
121 | }), React.createElement("div", {
|
122 | className: "warningFaceRightEyes",
|
123 | ref: "warningFaceRightEyes"
|
124 | })), React.createElement("div", {
|
125 | className: "warningFaceMouse",
|
126 | ref: "mouseActive"
|
127 | })));
|
128 | } else if (type == 'remind') {
|
129 | return React.createElement("div", {
|
130 | className: "round-pattern-tips-icon-border round-pattern-tips-icon-border-remind"
|
131 | }, React.createElement("div", {
|
132 | className: "round-pattern-tips-icon"
|
133 | }, React.createElement("div", {
|
134 | className: "remindEyesBorder",
|
135 | ref: "eyesBorder"
|
136 | }, React.createElement("div", {
|
137 | className: "remindFaceLeftEyes",
|
138 | ref: "remindFaceLeftEyes"
|
139 | }), React.createElement("div", {
|
140 | className: "remindFaceRightEyes",
|
141 | ref: "remindFaceRightEyes"
|
142 | })), React.createElement("div", {
|
143 | className: "remindFaceMouse",
|
144 | ref: "mouseActive"
|
145 | }, React.createElement("div", {
|
146 | className: "remindMouseFadeOut fadeOut-top",
|
147 | ref: "fadeOutTop"
|
148 | }))));
|
149 | }
|
150 | } else {
|
151 | if (type == 'success') {
|
152 | return React.createElement("div", {
|
153 | className: "tips-icon-border tips-icon-border-success"
|
154 | }, React.createElement("div", {
|
155 | className: "tips-icon"
|
156 | }, React.createElement("div", {
|
157 | className: "successEyesBorder",
|
158 | ref: "eyesBorder"
|
159 | }, React.createElement("div", {
|
160 | className: "successFaceLeftEyes",
|
161 | ref: "successFaceLeftEyes"
|
162 | }), React.createElement("div", {
|
163 | className: "successFaceRightEyes",
|
164 | ref: "successFaceRightEyes"
|
165 | })), React.createElement("div", {
|
166 | className: "successFaceMouse",
|
167 | ref: "mouseActive"
|
168 | }, React.createElement("div", {
|
169 | className: "successMouseFadeOut fadeOut-top",
|
170 | ref: "fadeOutTop"
|
171 | }))));
|
172 | } else if (type == 'error') {
|
173 | return React.createElement("div", {
|
174 | className: "tips-icon-border tips-icon-border-error"
|
175 | }, React.createElement("div", {
|
176 | className: "tips-icon",
|
177 | ref: "roundPatternTipsIcon"
|
178 | }, React.createElement("div", {
|
179 | className: "errorEyesBorder",
|
180 | ref: "eyesBorder"
|
181 | }, React.createElement("div", {
|
182 | className: "errorFaceLeftEyes",
|
183 | ref: "errorFaceLeftEyes"
|
184 | }), React.createElement("div", {
|
185 | className: "errorFaceRightEyes",
|
186 | ref: "errorFaceRightEyes"
|
187 | })), React.createElement("div", {
|
188 | className: "errorFaceMouse",
|
189 | ref: "mouseActive"
|
190 | }, React.createElement("div", {
|
191 | className: "errorMouseFadeOut fadeOut-bottom",
|
192 | ref: "fadeOutBottom"
|
193 | }))));
|
194 | } else if (type == 'warning') {
|
195 | return React.createElement("div", {
|
196 | className: "tips-icon-border tips-icon-border-warning"
|
197 | }, React.createElement("div", {
|
198 | className: "tips-icon",
|
199 | ref: "roundPatternTipsIcon"
|
200 | }, React.createElement("div", {
|
201 | className: "warningEyesBorder",
|
202 | ref: "eyesBorder"
|
203 | }, React.createElement("div", {
|
204 | className: "warningFaceLeftEyes",
|
205 | ref: "warningFaceLeftEyes"
|
206 | }), React.createElement("div", {
|
207 | className: "warningFaceRightEyes",
|
208 | ref: "warningFaceRightEyes"
|
209 | })), React.createElement("div", {
|
210 | className: "warningFaceMouse",
|
211 | ref: "mouseActive"
|
212 | })));
|
213 | } else if (type == 'remind') {
|
214 | return React.createElement("div", {
|
215 | className: "tips-icon-border tips-icon-border-remind"
|
216 | }, React.createElement("div", {
|
217 | className: "tips-icon"
|
218 | }, React.createElement("div", {
|
219 | className: "remindEyesBorder",
|
220 | ref: "eyesBorder"
|
221 | }, React.createElement("div", {
|
222 | className: "remindFaceLeftEyes",
|
223 | ref: "remindFaceLeftEyes"
|
224 | }), React.createElement("div", {
|
225 | className: "remindFaceRightEyes",
|
226 | ref: "remindFaceRightEyes"
|
227 | })), React.createElement("div", {
|
228 | className: "remindFaceMouse",
|
229 | ref: "mouseActive"
|
230 | }, React.createElement("div", {
|
231 | className: "remindMouseFadeOut fadeOut-top",
|
232 | ref: "fadeOutTop"
|
233 | }))));
|
234 | }
|
235 | }
|
236 | };
|
237 |
|
238 | _this.showFaceActive = function (type) {
|
239 | if (type == 'success') {
|
240 | setTimeout(function () {
|
241 | var mouseActive = _this.refs.mouseActive;
|
242 |
|
243 | if (mouseActive) {
|
244 | mouseActive.className = mouseActive.className + ' successMouseMove';
|
245 | }
|
246 |
|
247 | setTimeout(function () {
|
248 | var eyesDom = _this.refs.eyesBorder;
|
249 |
|
250 | if (eyesDom) {
|
251 | eyesDom.className = eyesDom.className + ' successEyesMove';
|
252 | }
|
253 | }, 300);
|
254 | }, 1000);
|
255 | } else if (type == 'error') {
|
256 | setTimeout(function () {
|
257 | var fadeOutBottom = _this.refs.fadeOutBottom;
|
258 | var eyesDom = _this.refs.eyesBorder;
|
259 |
|
260 | if (fadeOutBottom && eyesDom) {
|
261 | fadeOutBottom.className = fadeOutBottom.className + ' fadeOutMove';
|
262 | eyesDom.className = eyesDom.className + ' errorEyesMove';
|
263 | }
|
264 |
|
265 | setTimeout(function () {
|
266 | var icon = _this.refs.roundPatternTipsIcon;
|
267 |
|
268 | if (icon) {
|
269 | icon.className = icon.className + ' iconshake';
|
270 | }
|
271 | }, 0);
|
272 | }, 1000);
|
273 | } else if (type == 'warning') {
|
274 | setTimeout(function () {
|
275 | var eyesDom = _this.refs.eyesBorder;
|
276 |
|
277 | if (eyesDom) {
|
278 | var timeTag = 0;
|
279 | _this.warningTimeOut = setInterval(function () {
|
280 | timeTag++;
|
281 |
|
282 | if (timeTag > 0 && timeTag < 50) {
|
283 | _this.refs.warningFaceLeftEyes.style.left = '2px';
|
284 | _this.refs.warningFaceRightEyes.style.left = '9px';
|
285 | } else {
|
286 | _this.refs.warningFaceLeftEyes.style.left = '1px';
|
287 | _this.refs.warningFaceRightEyes.style.left = '10px';
|
288 | }
|
289 |
|
290 | setTimeout(function () {
|
291 | clearInterval(_this.warningTimeOut);
|
292 | }, 600);
|
293 | }, 10);
|
294 | }
|
295 |
|
296 | setTimeout(function () {
|
297 | var icon = _this.refs.roundPatternTipsIcon;
|
298 |
|
299 | if (icon) {
|
300 | icon.className = icon.className + ' iconshake';
|
301 | }
|
302 | }, 0);
|
303 | }, 1000);
|
304 | } else if (type == 'remind') {
|
305 | setTimeout(function () {
|
306 | React.createElement("div", {
|
307 | className: "remindMouseFadeOut fadeOut-top",
|
308 | ref: "fadeOutTop"
|
309 | });
|
310 | var fadeOutTop = _this.refs.fadeOutTop;
|
311 |
|
312 | if (fadeOutTop) {
|
313 | fadeOutTop.className = fadeOutTop.className + ' fadeOutMove';
|
314 | }
|
315 |
|
316 | setTimeout(function () {
|
317 | var eyesDom = _this.refs.eyesBorder;
|
318 |
|
319 | if (eyesDom) {
|
320 | eyesDom.className = eyesDom.className + ' warningEyesMove';
|
321 | }
|
322 | }, 400);
|
323 | }, 1000);
|
324 | }
|
325 | };
|
326 |
|
327 | _this.createMask = function (hidden) {
|
328 | var dom = document.getElementsByClassName('pop-layer_is-show')[0];
|
329 |
|
330 | if (!hidden && !dom && _this.props.showMask) {
|
331 | _this.container = document.body;
|
332 | _this.wrapper = document.createElement('div');
|
333 | _this.wrapper.className = 'pop-layer_is-show';
|
334 |
|
335 | _this.container.appendChild(_this.wrapper);
|
336 | }
|
337 | };
|
338 |
|
339 | _this.removeMask = function () {
|
340 | var dom = document.getElementsByClassName('pop-layer_is-show')[0];
|
341 | if (dom) document.body.removeChild(dom);
|
342 | };
|
343 |
|
344 | var disappearTime = _this.props.disappearTime ? _this.props.disappearTime : '3000';
|
345 | _this.clickClose = _this.clickClose.bind(_assertThisInitialized(_this));
|
346 | _this.moveTips = _this.moveTips.bind(_assertThisInitialized(_this));
|
347 | var disTime = disappearTime;
|
348 | var infoType = _this.props.infoType ? _this.props.infoType : '0';
|
349 | var infoColor, iconName, title, roundInfoColor, roundIconName, roundCloseIconName, promptMessageType;
|
350 | var showStateDuring = false;
|
351 |
|
352 | switch (infoType) {
|
353 | case '0':
|
354 | promptMessageType = 'success';
|
355 | infoColor = ' color-zero';
|
356 | iconName = ' successFace-tip-icon';
|
357 | roundInfoColor = ' color-zero';
|
358 | roundIconName = ' successFace-tip-icon';
|
359 | roundCloseIconName = ' successClose';
|
360 | title = _this.props.title ? _this.props.title : '正确!';
|
361 | break;
|
362 |
|
363 | case '1':
|
364 | promptMessageType = 'error';
|
365 | infoColor = ' color-one';
|
366 | iconName = ' errorFace-tip-icon';
|
367 | roundInfoColor = ' color-one';
|
368 | roundIconName = ' errorFace-tip-icon';
|
369 | roundCloseIconName = ' errorClose';
|
370 | title = _this.props.title ? _this.props.title : '错误!';
|
371 | break;
|
372 |
|
373 | case '2':
|
374 | promptMessageType = 'warning';
|
375 | infoColor = ' color-two';
|
376 | iconName = ' warningFace-tip-icon';
|
377 | roundInfoColor = ' color-two';
|
378 | roundIconName = ' warningFace-tip-icon';
|
379 | roundCloseIconName = ' warningClose';
|
380 | title = _this.props.title ? _this.props.title : '注意!';
|
381 | break;
|
382 |
|
383 | case '3':
|
384 | promptMessageType = 'remind';
|
385 | infoColor = ' color-three';
|
386 | iconName = ' remindFace-tip-icon';
|
387 | roundInfoColor = ' color-three';
|
388 | roundIconName = ' remindFace-tip-icon';
|
389 | roundCloseIconName = ' remindClose';
|
390 | title = _this.props.title ? _this.props.title : '问号!';
|
391 | break;
|
392 |
|
393 | case '4':
|
394 | promptMessageType = 'info';
|
395 | infoColor = ' color-four';
|
396 | iconName = ' infoFace-tip-icon';
|
397 | roundInfoColor = ' color-four';
|
398 | roundIconName = ' infoFace-tip-icon';
|
399 | roundCloseIconName = ' infoClose';
|
400 | title = _this.props.title ? _this.props.title : '信息!';
|
401 | break;
|
402 |
|
403 | case '5':
|
404 | promptMessageType = 'caution';
|
405 | infoColor = ' color-five';
|
406 | iconName = ' cautionFace-tip-icon';
|
407 | roundInfoColor = ' color-five';
|
408 | roundIconName = ' cautionFace-tip-icon';
|
409 | roundCloseIconName = ' cautionClose';
|
410 | title = _this.props.title ? _this.props.title : '提示!';
|
411 | break;
|
412 |
|
413 | default:
|
414 | return _possibleConstructorReturn(_this);
|
415 | }
|
416 |
|
417 | var sureButton = {
|
418 | bsStyle: 'default',
|
419 | bsSize: 'small',
|
420 | active: true,
|
421 | title: _this.props.sureButtonContent ? _this.props.sureButtonContent : '确定',
|
422 | onClick: _this.sureClick.bind(_assertThisInitialized(_this))
|
423 | };
|
424 | var cancelButton = {
|
425 | bsStyle: 'weaken',
|
426 | bsSize: 'small',
|
427 | active: true,
|
428 | title: _this.props.cancleButtonContent ? _this.props.cancleButtonContent : '取消',
|
429 | onClick: _this.closeClick.bind(_assertThisInitialized(_this))
|
430 | };
|
431 | var autoDirection;
|
432 |
|
433 | if (_this.props.autoDirection == undefined) {
|
434 | autoDirection = true;
|
435 | } else {
|
436 | autoDirection = _this.props.autoDirection;
|
437 | }
|
438 |
|
439 | var setPosition = true;
|
440 |
|
441 | if (_this.props.top === undefined && _this.props.left === undefined && _this.props.right === undefined && _this.props.bottom === undefined) {
|
442 | setPosition = false;
|
443 | }
|
444 |
|
445 | var defualt = {
|
446 | popType: _this.props.popType ? _this.props.popType : '0',
|
447 | infoType: infoType,
|
448 | infoColor: infoColor,
|
449 | iconName: iconName,
|
450 | roundInfoColor: roundInfoColor,
|
451 | roundIconName: roundIconName,
|
452 | roundCloseIconName: roundCloseIconName,
|
453 | showMask: false,
|
454 | manualClose: _this.props.manualClose ? _this.props.manualClose : false,
|
455 | disappearTime: disappearTime,
|
456 | disTime: disTime,
|
457 | promptMessageType: promptMessageType,
|
458 | title: _this.props.title ? _this.props.title : '提示!',
|
459 | content: _this.props.content ? _this.props.content : [],
|
460 | popShow: false,
|
461 | moveTips: false,
|
462 | moveRountTips: false,
|
463 | moveConform: false,
|
464 | sureButton: sureButton,
|
465 | cancelButton: cancelButton,
|
466 | autoDirection: autoDirection,
|
467 | direction: _this.props.direction ? _this.props.direction : 'left-down',
|
468 | target: _this.props.target ? _this.props.target : '',
|
469 | listViewDirection: _this.props.autoDirection ? 'left-down' : _this.props.direction,
|
470 | left: _this.props.left ? _this.props.left : 0,
|
471 | right: _this.props.right ? _this.props.right : 0,
|
472 | top: _this.props.top ? _this.props.top : 0,
|
473 | bottom: _this.props.bottom ? _this.props.bottom : 0,
|
474 | setPosition: setPosition,
|
475 | count: 0
|
476 | };
|
477 | _this.state = Object.assign({}, defualt, props);
|
478 | _this.popClose = _this.popClose.bind(_assertThisInitialized(_this));
|
479 | return _this;
|
480 | }
|
481 | |
482 |
|
483 |
|
484 |
|
485 |
|
486 | _createClass(PopLayer, [{
|
487 | key: "sureClick",
|
488 | value: function sureClick(val) {
|
489 | val.stopPropagation();
|
490 | this.props.onSure && this.props.onSure(val);
|
491 | this.popClose(true);
|
492 | }
|
493 | |
494 |
|
495 |
|
496 |
|
497 | }, {
|
498 | key: "closeClick",
|
499 | value: function closeClick(val) {
|
500 | val.stopPropagation();
|
501 | this.props.onClose && this.props.onClose(val);
|
502 | this.popClose(true);
|
503 | }
|
504 | }, {
|
505 | key: "popClose",
|
506 | value: function popClose(flag, e) {
|
507 | var self = this;
|
508 |
|
509 | if (e && e.stopPropagation) {
|
510 | e && e.stopPropagation();
|
511 | }
|
512 |
|
513 | this.setState({
|
514 | popShow: false
|
515 | });
|
516 | this.removeMask();
|
517 | setTimeout(function () {
|
518 | self.props.showHide && self.props.showHide(flag, e);
|
519 | }, 300);
|
520 | }
|
521 | }, {
|
522 | key: "componentWillMount",
|
523 | value: function componentWillMount(props) {
|
524 | if (!this.props.hidden) {
|
525 | document.removeEventListener('mousedown', this.moveTips);
|
526 | this.setState({
|
527 | popShow: true
|
528 | });
|
529 | }
|
530 | }
|
531 | }, {
|
532 | key: "componentWillUnmount",
|
533 | value: function componentWillUnmount() {
|
534 | this.removeMask();
|
535 | document.removeEventListener('mousedown', this.moveTips);
|
536 | document.removeEventListener('mousedown', this.clickClose);
|
537 | }
|
538 | }, {
|
539 | key: "componentWillReceiveProps",
|
540 | value: function componentWillReceiveProps(nextProps) {
|
541 | var self = this;
|
542 | var _this$state = this.state,
|
543 | autoDirection = _this$state.autoDirection,
|
544 | direction = _this$state.direction;
|
545 |
|
546 | if (this.props.title == nextProps.title && this.props.cancleButtonContent == nextProps.cancleButtonContent && this.props.hidden == nextProps.hidden && this.props.direction == nextProps.direction && this.props.disappearTime == nextProps.disappearTime && this.props.infoType == nextProps.infoType && this.props.left == nextProps.left && this.props.manualClose == nextProps.manualClose && this.props.popType == nextProps.popType && this.props.sureButtonContent == nextProps.sureButtonContent && this.props.target == nextProps.target && this.props.title == nextProps.title && this.props.top == nextProps.top && this.props.bottom == nextProps.bottom && this.props.right == nextProps.right) {
|
547 | this.showStateDuring = false;
|
548 | } else {
|
549 | this.showStateDuring = true;
|
550 | }
|
551 |
|
552 | if (!nextProps.hidden && !this.showStateDuring) {
|
553 | this.setState({
|
554 | popShow: true
|
555 | });
|
556 | this.createMask(nextProps.hidden);
|
557 |
|
558 | if (self.state.popType === '1') {
|
559 | self.setState({
|
560 | target: nextProps.target ? nextProps.target : ''
|
561 | });
|
562 |
|
563 | if (nextProps.target && self.refs.popDirection) {
|
564 | var newTarget = nextProps.target;
|
565 | var popTarget = self.refs.popDirection.getBoundingClientRect();
|
566 | var length = popTarget.height;
|
567 | var winHeight = window.innerHeight;
|
568 | var winWidth = window.innerWidth;
|
569 | var horizontal = winWidth / 2 > newTarget.left ? 'right' : 'left';
|
570 | var vertical = winHeight / 2 > newTarget.top ? winHeight - newTarget.top > length ? '-down' : '-top' : winHeight - newTarget.top > length ? '-down' : '-top';
|
571 | this.state.listViewDirection = autoDirection ? horizontal + vertical : direction;
|
572 | this.setState(this.state);
|
573 | }
|
574 | }
|
575 | }
|
576 |
|
577 | if (nextProps.content != this.props.content) {
|
578 | this.setState({
|
579 | content: nextProps.content
|
580 | });
|
581 | }
|
582 | }
|
583 | }, {
|
584 | key: "shouldComponentUpdate",
|
585 | value: function shouldComponentUpdate(nextProps) {
|
586 | this.state.count++;
|
587 |
|
588 | if (this.props.popType === '0' && this.props.manualClose === false && this.state.count !== 1) {
|
589 | var res = true;
|
590 |
|
591 | if (this.props.cancleButtonContent == nextProps.cancleButtonContent && this.props.hidden == nextProps.hidden && this.props.direction == nextProps.direction && this.props.disappearTime == nextProps.disappearTime && this.props.infoType == nextProps.infoType && this.props.left == nextProps.left && this.props.manualClose == nextProps.manualClose && this.props.popType == nextProps.popType && this.props.sureButtonContent == nextProps.sureButtonContent && this.props.target == nextProps.target && this.props.title == nextProps.title && this.props.top == nextProps.top && this.props.bottom == nextProps.bottom && this.props.right == nextProps.right) {
|
592 | res = false;
|
593 | }
|
594 |
|
595 | return res;
|
596 | } else {
|
597 | return true;
|
598 | }
|
599 | }
|
600 | }, {
|
601 | key: "render",
|
602 | value: function render() {
|
603 | var _this$state2 = this.state,
|
604 | popType = _this$state2.popType,
|
605 | infoColor = _this$state2.infoColor,
|
606 | iconName = _this$state2.iconName,
|
607 | manualClose = _this$state2.manualClose,
|
608 | title = _this$state2.title,
|
609 | content = _this$state2.content,
|
610 | sureButton = _this$state2.sureButton,
|
611 | cancelButton = _this$state2.cancelButton,
|
612 | listViewDirection = _this$state2.listViewDirection,
|
613 | left = _this$state2.left,
|
614 | top = _this$state2.top,
|
615 | setPosition = _this$state2.setPosition,
|
616 | moveTips = _this$state2.moveTips,
|
617 | moveRountTips = _this$state2.moveRountTips,
|
618 | bottom = _this$state2.bottom,
|
619 | right = _this$state2.right,
|
620 | roundIconName = _this$state2.roundIconName,
|
621 | roundInfoColor = _this$state2.roundInfoColor,
|
622 | roundCloseIconName = _this$state2.roundCloseIconName,
|
623 | promptMessageType = _this$state2.promptMessageType;
|
624 | var _this$props = this.props,
|
625 | hidden = _this$props.hidden,
|
626 | maxHeight = _this$props.maxHeight,
|
627 | removeSubBtn = _this$props.removeSubBtn;
|
628 | var manualClosePart;
|
629 | var manualCloseForRoundPatter;
|
630 |
|
631 | if (!manualClose) {
|
632 | manualClosePart = React.createElement("div", {
|
633 | className: "hasNoButtonLine",
|
634 | ref: "hasNoButtonShadowLine"
|
635 | });
|
636 | manualCloseForRoundPatter = '';
|
637 | } else {
|
638 | manualClosePart = React.createElement("div", {
|
639 | className: 'manual-close',
|
640 | ref: "manualClose"
|
641 | }, React.createElement("div", {
|
642 | className: "manual-close-content",
|
643 | onClick: this.popClose
|
644 | }, React.createElement("span", {
|
645 | className: 'manual-close-word'
|
646 | }, "\u6211\u77E5\u9053\u4E86")));
|
647 | manualCloseForRoundPatter = React.createElement("div", {
|
648 | className: "round-pattern-manual-close"
|
649 | }, React.createElement("div", {
|
650 | className: "round-pattern-divide-line"
|
651 | }), React.createElement("div", {
|
652 | className: 'round-pattern-close-btn' + roundCloseIconName,
|
653 | onClick: this.popClose
|
654 | }));
|
655 | }
|
656 |
|
657 | var tipsContent = [];
|
658 | var tipsContentConfirm = [];
|
659 |
|
660 | if (content) {
|
661 | if (content.length == 1) {
|
662 | var _html = {
|
663 | __html: decode(content[0])
|
664 | };
|
665 | tipsContent.push(React.createElement("li", {
|
666 | key: "0",
|
667 | dangerouslySetInnerHTML: _html
|
668 | }));
|
669 | tipsContentConfirm.push(React.createElement("li", {
|
670 | key: "0",
|
671 | dangerouslySetInnerHTML: _html
|
672 | }));
|
673 | } else {
|
674 | content.map(function (item, index) {
|
675 | var _html = {
|
676 | __html: index + 1 + '、' + decode(content[index])
|
677 | };
|
678 | var _html1 = {
|
679 | __html: decode(content[index])
|
680 | };
|
681 | tipsContent.push(React.createElement("li", {
|
682 | key: index,
|
683 | dangerouslySetInnerHTML: _html
|
684 | }));
|
685 | tipsContentConfirm.push(React.createElement("li", {
|
686 | key: index,
|
687 | dangerouslySetInnerHTML: _html1
|
688 | }));
|
689 | });
|
690 | }
|
691 | }
|
692 |
|
693 | if (hidden) {
|
694 | return React.createElement("div", null);
|
695 | } else if (popType === '0') {
|
696 | var num = this.DetermineChineseCharacterNum(decode(title));
|
697 | var maxCharacter = manualClose ? 108 : 120;
|
698 |
|
699 | if (tipsContent.length == 0 && decode(title).length + num <= maxCharacter) {
|
700 | return React.createElement("div", {
|
701 | className: 'round-pattern-pop-outer ' + roundInfoColor + (this.state.popShow ? ' pop-open-tip' : ' pop-close') + (moveRountTips ? ' round-pattern-pop-outer-move' : ''),
|
702 | style: {
|
703 | maxHeight: maxHeight,
|
704 | left: left + 'px',
|
705 | top: top + 'px'
|
706 | },
|
707 | ref: "roundPatternPopOuter"
|
708 | }, React.createElement("div", {
|
709 | className: 'round-pattern-tips-container',
|
710 | ref: "roundPatternTipsContainer"
|
711 | }, this.renderIcon('round-pattern', promptMessageType), React.createElement("div", {
|
712 | className: manualClose ? 'round-pattern-tips-wrap round-pattern-tips-wrap-short' : 'round-pattern-tips-wrap round-pattern-tips-wrap-long',
|
713 | ref: "roundPatternTipsWrap"
|
714 | }, React.createElement("span", {
|
715 | className: 'round-pattern-tips-title',
|
716 | style: {
|
717 | fontSize: 16
|
718 | }
|
719 | }, decode(title))), manualCloseForRoundPatter));
|
720 | } else {
|
721 | return React.createElement("div", {
|
722 | className: 'pop-outer hint-pop' + (this.state.popShow ? ' pop-open-tip' : ' pop-close') + infoColor + (content.length > 0 ? ' with-content' : '') + (moveTips ? ' pop-out-move' : ''),
|
723 | style: {
|
724 | maxHeight: maxHeight,
|
725 | left: left + 'px',
|
726 | top: top + 'px'
|
727 | },
|
728 | ref: "popOut"
|
729 | }, React.createElement("div", {
|
730 | className: 'tips-container'
|
731 | }, this.renderIcon('no-round-pattern', promptMessageType), React.createElement("div", {
|
732 | className: "tips-wrap"
|
733 | }, React.createElement("span", {
|
734 | className: 'tips-title'
|
735 | }, decode(title))), React.createElement("ul", {
|
736 | className: 'tips-content',
|
737 | ref: "tipsContent"
|
738 | }, tipsContent), React.createElement("div", {
|
739 | className: "showallBtn",
|
740 | ref: "showAllBtn",
|
741 | onClick: this.showAllInfo
|
742 | }, "\u67E5\u770B\u66F4\u591A", React.createElement("div", {
|
743 | className: "arrowdown",
|
744 | ref: "showAllIcon"
|
745 | }, React.createElement(ArrowDownIcon, null)))), manualClosePart);
|
746 | }
|
747 | } else {
|
748 | var dirClass;
|
749 |
|
750 | switch (listViewDirection) {
|
751 | case 'right-down':
|
752 | dirClass = 'top left';
|
753 | break;
|
754 |
|
755 | case 'left-down':
|
756 | dirClass = 'top right';
|
757 | break;
|
758 |
|
759 | case 'left-top':
|
760 | dirClass = 'bottom right';
|
761 | break;
|
762 |
|
763 | case 'right-top':
|
764 | dirClass = 'bottom left';
|
765 | break;
|
766 |
|
767 | default:
|
768 | }
|
769 |
|
770 | var popStyle, popClassName;
|
771 |
|
772 | if (setPosition) {
|
773 | popClassName = 'pop-outer confirm-pop' + (this.state.popShow ? ' pop-open' : ' pop-close');
|
774 | popStyle = {
|
775 | WebkitTransformOrigin: dirClass,
|
776 | MozTransformOrigin: dirClass,
|
777 | MzTransformOrigin: dirClass,
|
778 | OTransformOrigin: dirClass,
|
779 | left: this.props.left || '' + 'px',
|
780 | top: this.props.top || '' + 'px',
|
781 | bottom: this.props.bottom || '' + 'px',
|
782 | right: this.props.right || '' + 'px',
|
783 | maxHeight: maxHeight
|
784 | };
|
785 | } else {
|
786 | popClassName = listViewDirection + ' pop-outer confirm-pop' + (this.state.popShow ? ' pop-open' : ' pop-close');
|
787 | popStyle = {
|
788 | WebkitTransformOrigin: dirClass,
|
789 | MozTransformOrigin: dirClass,
|
790 | MzTransformOrigin: dirClass,
|
791 | OTransformOrigin: dirClass,
|
792 | maxHeight: maxHeight
|
793 | };
|
794 | }
|
795 |
|
796 | var confirm_connect_style = this.props.connectStyle ? this.props.connectStyle : {
|
797 | top: '-9px',
|
798 | left: '0px'
|
799 | };
|
800 | return React.createElement("div", {
|
801 | ref: "popDirection",
|
802 | className: this.state.moveConform ? popClassName + ' acConfirmMove' : popClassName,
|
803 | style: popStyle
|
804 | }, React.createElement("div", {
|
805 | className: "confirm-connect",
|
806 | style: confirm_connect_style
|
807 | }), React.createElement("div", {
|
808 | className: "confirm-title"
|
809 | }, React.createElement("div", {
|
810 | className: "confirm-title-image"
|
811 | }, React.createElement(AttentionIcon, {
|
812 | height: 18,
|
813 | width: 18
|
814 | })), React.createElement("div", {
|
815 | className: "confirm-title-message"
|
816 | }, decode(title))), React.createElement("ul", {
|
817 | className: tipsContent.length > 0 ? 'confirm-message confirm-message-hasInfo' : 'confirm-message confirm-message-emptyInfo'
|
818 | }, tipsContentConfirm), React.createElement("div", {
|
819 | className: "us-footer clearfix"
|
820 | }, removeSubBtn ? '' : React.createElement(BaseButton, sureButton), React.createElement(BaseButton, cancelButton)));
|
821 | }
|
822 | }
|
823 | }, {
|
824 | key: "componentDidMount",
|
825 | value: function componentDidMount() {
|
826 |
|
827 | var textvalveBorder = document.createElement('span');
|
828 | textvalveBorder.style.display = 'inline-block';
|
829 |
|
830 | if (this.props.manualClose) {
|
831 | textvalveBorder.className = 'poplayer_text_Border poplayer_text_Border_short';
|
832 | } else {
|
833 | textvalveBorder.className = 'poplayer_text_Border poplayer_text_Border_long';
|
834 | }
|
835 |
|
836 | textvalveBorder.innerHTML = this.props.title;
|
837 | document.body.appendChild(textvalveBorder);
|
838 |
|
839 | if (this.refs.roundPatternTipsContainer) {
|
840 | if (this.props.manualClose) {
|
841 | this.refs.roundPatternPopOuter.style.width = textvalveBorder.clientWidth + 54 + 'px';
|
842 | this.refs.roundPatternTipsContainer.style.height = textvalveBorder.clientHeight + 'px';
|
843 | } else {
|
844 | this.refs.roundPatternPopOuter.style.width = textvalveBorder.clientWidth + 23 + 'px';
|
845 | this.refs.roundPatternTipsContainer.style.height = textvalveBorder.clientHeight + 'px';
|
846 | }
|
847 | }
|
848 |
|
849 | document.body.removeChild(textvalveBorder);
|
850 | this.showFaceActive(this.state.promptMessageType);
|
851 |
|
852 | if (this.refs.tipsContent) {
|
853 | if (this.refs.tipsContent.scrollHeight > 100) {} else {
|
854 | if (this.refs.showAllBtn) {
|
855 | this.refs.showAllBtn.style.display = 'none';
|
856 | }
|
857 | }
|
858 | }
|
859 |
|
860 | var _this$state3 = this.state,
|
861 | popType = _this$state3.popType,
|
862 | manualClose = _this$state3.manualClose,
|
863 | disTime = _this$state3.disTime;
|
864 | var self = this;
|
865 |
|
866 | if (popType === '0' && !manualClose) {
|
867 | setTimeout(function () {
|
868 | self.setState({
|
869 | popShow: false
|
870 | });
|
871 | setTimeout(function () {
|
872 | self.props.showHide && self.props.showHide();
|
873 | }, 300);
|
874 | }, disTime);
|
875 | } else if (popType === '1') {
|
876 | document.removeEventListener('mousedown', this.clickClose);
|
877 | document.addEventListener('mousedown', this.clickClose);
|
878 | } else if (popType === '0' && manualClose) {
|
879 | document.removeEventListener('mousedown', this.moveTips);
|
880 | document.addEventListener('mousedown', this.moveTips);
|
881 | }
|
882 |
|
883 | this.createMask(this.props.hidden);
|
884 | }
|
885 | }, {
|
886 | key: "moveTips",
|
887 | value: function moveTips(e) {
|
888 | var _this2 = this;
|
889 |
|
890 | var area = this.refs.popOut;
|
891 | var area1 = this.refs.roundPatternPopOuter;
|
892 |
|
893 | if (area && area.contains(e.target)) {
|
894 | return;
|
895 | } else if (area1 && area1.contains(e.target)) {
|
896 | return;
|
897 | }
|
898 |
|
899 | var self = this;
|
900 |
|
901 | if (!this.moveUnAble) {
|
902 | var popOutTest = this.refs.popOut;
|
903 | var popOutTest1 = this.refs.roundPatternPopOuter;
|
904 |
|
905 | if (popOutTest1) {
|
906 | this.moveUnAble = true;
|
907 | popOutTest1.className = popOutTest1.className.split('pop-open-after')[0] + ' round-pattern-pop-outer-move';
|
908 | setTimeout(function () {
|
909 | popOutTest1.className = popOutTest1.className.split('round-pattern-pop-outer-move')[0] + ' pop-open-after';
|
910 | _this2.moveUnAble = false;
|
911 | }, 1200);
|
912 | }
|
913 |
|
914 | if (popOutTest) {
|
915 | this.moveUnAble = true;
|
916 | popOutTest.className = popOutTest.className.split('pop-open-after')[0] + ' pop-out-move';
|
917 | setTimeout(function () {
|
918 | popOutTest.className = popOutTest.className.split('pop-out-move')[0] + ' pop-open-after';
|
919 | _this2.moveUnAble = false;
|
920 | }, 1200);
|
921 | }
|
922 | }
|
923 | }
|
924 | }, {
|
925 | key: "clickClose",
|
926 | value: function clickClose(e) {
|
927 | var _this3 = this;
|
928 |
|
929 | var area = this.refs.popDirection;
|
930 | if (area == undefined) return;
|
931 | if (area.contains(e.target)) return;
|
932 |
|
933 |
|
934 | if (!this.clickBool) {
|
935 | this.clickClassName = this.refs.popDirection.className + ' pop-open-after';
|
936 | this.clickBool = 1;
|
937 | }
|
938 |
|
939 | if (this.clickBool == 1) {
|
940 | if (this.refs.popDirection.className.split('pop-open-after')[0].indexOf('acConfirmMove') <= 0) {
|
941 | this.refs.popDirection.className = this.refs.popDirection.className.split('pop-open-after')[0] + ' acConfirmMove';
|
942 | }
|
943 | }
|
944 |
|
945 | clearTimeout(this.timeOut);
|
946 | this.timeOut = setTimeout(function () {
|
947 | _this3.refs.popDirection.className = _this3.clickClassName;
|
948 | _this3.clickBool == 0;
|
949 | }, 900);
|
950 | }
|
951 | }]);
|
952 |
|
953 | return PopLayer;
|
954 | }(Component);
|
955 |
|
956 | export { PopLayer as default }; |
\ | No newline at end of file |