@beisen-platform/pop-layer/lib/PopLayer.js

import "core-js/modules/es6.regexp.split";
import "core-js/modules/es6.object.assign";
import "core-js/modules/es6.regexp.match";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";

/* eslint-disable */
import React, { Component } from 'react';
import { decode } from '@beisen-platform/common-func';
import BaseButton from '@beisen-platform/base-button';
import ArrowDownIcon from '@beisen-platform/react-icons/lib/icons/Arrowdown2Nomal.js';
import AttentionIcon from '@beisen-platform/react-icons/lib/icons/ZhuyiNomal.js';
import { computeTargetCenterPosition, genPopStyleIfPosition, computePositionToMakePopCenter, MAX_CONFIRM_HEIGHT } from "./utils";
import './styles/all.css';

var PopLayer =
/*#__PURE__*/
function (_Component) {
  _inherits(PopLayer, _Component);

  function PopLayer(props) {
    var _this;

    _classCallCheck(this, PopLayer);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(PopLayer).call(this, props));

    _this.showAllInfo = function () {
      _this.refs.tipsContent.style.maxHeight = '280px';
      _this.refs.tipsContent.style.overflowY = 'auto';

      if (_this.refs.tipsContent.scrollHeight > 280) {
        if (_this.refs.manualClose) {
          _this.refs.manualClose.className = 'manual-close manual-close-hasShadow';
        }

        if (_this.refs.hasNoButtonShadowLine) {
          _this.refs.hasNoButtonShadowLine.className = 'hasNoButtonLine hasNoButtonLine_hasShadow';
        }
      }

      if (_this.refs.showAllBtn) {
        _this.refs.showAllBtn.style.display = 'none';
      }
    };

    _this.DetermineChineseCharacterNum = function (str) {
      var sum = 0;
      var re = /[\u4E00-\u9FA5]/g; //测试中文字符的正则

      if (str) {
        if (re.test(str)) {
          //使用正则判断是否存在中文
          return str.match(re).length; //返回中文的个数
        }
      }

      return 0;
    };

    _this.renderIcon = function (style, type) {
      if (style == 'round-pattern') {
        if (type == 'success') {
          return React.createElement("div", {
            className: "round-pattern-tips-icon-border round-pattern-tips-icon-border-success"
          }, React.createElement("div", {
            className: "round-pattern-tips-icon"
          }, React.createElement("div", {
            className: "successEyesBorder",
            ref: "eyesBorder"
          }, React.createElement("div", {
            className: "successFaceLeftEyes",
            ref: "successFaceLeftEyes"
          }), React.createElement("div", {
            className: "successFaceRightEyes",
            ref: "successFaceRightEyes"
          })), React.createElement("div", {
            className: "successFaceMouse",
            ref: "mouseActive"
          }, React.createElement("div", {
            className: "successMouseFadeOut fadeOut-top",
            ref: "fadeOutTop"
          }))));
        } else if (type == 'error') {
          return React.createElement("div", {
            className: "round-pattern-tips-icon-border round-pattern-tips-icon-border-error"
          }, React.createElement("div", {
            className: "round-pattern-tips-icon",
            ref: "roundPatternTipsIcon"
          }, React.createElement("div", {
            className: "errorEyesBorder",
            ref: "eyesBorder"
          }, React.createElement("div", {
            className: "errorFaceLeftEyes",
            ref: "errorFaceLeftEyes"
          }), React.createElement("div", {
            className: "errorFaceRightEyes",
            ref: "errorFaceRightEyes"
          })), React.createElement("div", {
            className: "errorFaceMouse",
            ref: "mouseActive"
          }, React.createElement("div", {
            className: "errorMouseFadeOut fadeOut-bottom",
            ref: "fadeOutBottom"
          }))));
        } else if (type == 'warning') {
          return React.createElement("div", {
            className: "round-pattern-tips-icon-border round-pattern-tips-icon-border-warning"
          }, React.createElement("div", {
            className: "round-pattern-tips-icon",
            ref: "roundPatternTipsIcon"
          }, React.createElement("div", {
            className: "warningEyesBorder",
            ref: "eyesBorder"
          }, React.createElement("div", {
            className: "warningFaceLeftEyes",
            ref: "warningFaceLeftEyes"
          }), React.createElement("div", {
            className: "warningFaceRightEyes",
            ref: "warningFaceRightEyes"
          })), React.createElement("div", {
            className: "warningFaceMouse",
            ref: "mouseActive"
          })));
        } else if (type == 'remind') {
          return React.createElement("div", {
            className: "round-pattern-tips-icon-border round-pattern-tips-icon-border-remind"
          }, React.createElement("div", {
            className: "round-pattern-tips-icon"
          }, React.createElement("div", {
            className: "remindEyesBorder",
            ref: "eyesBorder"
          }, React.createElement("div", {
            className: "remindFaceLeftEyes",
            ref: "remindFaceLeftEyes"
          }), React.createElement("div", {
            className: "remindFaceRightEyes",
            ref: "remindFaceRightEyes"
          })), React.createElement("div", {
            className: "remindFaceMouse",
            ref: "mouseActive"
          }, React.createElement("div", {
            className: "remindMouseFadeOut fadeOut-top",
            ref: "fadeOutTop"
          }))));
        }
      } else {
        if (type == 'success') {
          return React.createElement("div", {
            className: "tips-icon-border tips-icon-border-success"
          }, React.createElement("div", {
            className: "tips-icon"
          }, React.createElement("div", {
            className: "successEyesBorder",
            ref: "eyesBorder"
          }, React.createElement("div", {
            className: "successFaceLeftEyes",
            ref: "successFaceLeftEyes"
          }), React.createElement("div", {
            className: "successFaceRightEyes",
            ref: "successFaceRightEyes"
          })), React.createElement("div", {
            className: "successFaceMouse",
            ref: "mouseActive"
          }, React.createElement("div", {
            className: "successMouseFadeOut fadeOut-top",
            ref: "fadeOutTop"
          }))));
        } else if (type == 'error') {
          return React.createElement("div", {
            className: "tips-icon-border tips-icon-border-error"
          }, React.createElement("div", {
            className: "tips-icon",
            ref: "roundPatternTipsIcon"
          }, React.createElement("div", {
            className: "errorEyesBorder",
            ref: "eyesBorder"
          }, React.createElement("div", {
            className: "errorFaceLeftEyes",
            ref: "errorFaceLeftEyes"
          }), React.createElement("div", {
            className: "errorFaceRightEyes",
            ref: "errorFaceRightEyes"
          })), React.createElement("div", {
            className: "errorFaceMouse",
            ref: "mouseActive"
          }, React.createElement("div", {
            className: "errorMouseFadeOut fadeOut-bottom",
            ref: "fadeOutBottom"
          }))));
        } else if (type == 'warning') {
          return React.createElement("div", {
            className: "tips-icon-border tips-icon-border-warning"
          }, React.createElement("div", {
            className: "tips-icon",
            ref: "roundPatternTipsIcon"
          }, React.createElement("div", {
            className: "warningEyesBorder",
            ref: "eyesBorder"
          }, React.createElement("div", {
            className: "warningFaceLeftEyes",
            ref: "warningFaceLeftEyes"
          }), React.createElement("div", {
            className: "warningFaceRightEyes",
            ref: "warningFaceRightEyes"
          })), React.createElement("div", {
            className: "warningFaceMouse",
            ref: "mouseActive"
          })));
        } else if (type == 'remind') {
          return React.createElement("div", {
            className: "tips-icon-border tips-icon-border-remind"
          }, React.createElement("div", {
            className: "tips-icon"
          }, React.createElement("div", {
            className: "remindEyesBorder",
            ref: "eyesBorder"
          }, React.createElement("div", {
            className: "remindFaceLeftEyes",
            ref: "remindFaceLeftEyes"
          }), React.createElement("div", {
            className: "remindFaceRightEyes",
            ref: "remindFaceRightEyes"
          })), React.createElement("div", {
            className: "remindFaceMouse",
            ref: "mouseActive"
          }, React.createElement("div", {
            className: "remindMouseFadeOut fadeOut-top",
            ref: "fadeOutTop"
          }))));
        }
      }
    };

    _this.showFaceActive = function (type) {
      if (type == 'success') {
        setTimeout(function () {
          var mouseActive = _this.refs.mouseActive;

          if (mouseActive) {
            mouseActive.className = mouseActive.className + ' successMouseMove';
          }

          setTimeout(function () {
            var eyesDom = _this.refs.eyesBorder;

            if (eyesDom) {
              eyesDom.className = eyesDom.className + ' successEyesMove';
            }
          }, 300);
        }, 1000);
      } else if (type == 'error') {
        setTimeout(function () {
          var fadeOutBottom = _this.refs.fadeOutBottom;
          var eyesDom = _this.refs.eyesBorder;

          if (fadeOutBottom && eyesDom) {
            fadeOutBottom.className = fadeOutBottom.className + ' fadeOutMove';
            eyesDom.className = eyesDom.className + ' errorEyesMove';
          }

          setTimeout(function () {
            var icon = _this.refs.roundPatternTipsIcon;

            if (icon) {
              icon.className = icon.className + ' iconshake';
            }
          }, 0);
        }, 1000);
      } else if (type == 'warning') {
        setTimeout(function () {
          var eyesDom = _this.refs.eyesBorder;

          if (eyesDom) {
            var timeTag = 0;
            _this.warningTimeOut = setInterval(function () {
              timeTag++;

              if (timeTag > 0 && timeTag < 50) {
                _this.refs.warningFaceLeftEyes.style.left = '2px';
                _this.refs.warningFaceRightEyes.style.left = '9px';
              } else {
                _this.refs.warningFaceLeftEyes.style.left = '1px';
                _this.refs.warningFaceRightEyes.style.left = '10px';
              }

              setTimeout(function () {
                clearInterval(_this.warningTimeOut);
              }, 600);
            }, 10);
          }

          setTimeout(function () {
            var icon = _this.refs.roundPatternTipsIcon;

            if (icon) {
              icon.className = icon.className + ' iconshake';
            }
          }, 0);
        }, 1000);
      } else if (type == 'remind') {
        setTimeout(function () {
          React.createElement("div", {
            className: "remindMouseFadeOut fadeOut-top",
            ref: "fadeOutTop"
          });
          var fadeOutTop = _this.refs.fadeOutTop;

          if (fadeOutTop) {
            fadeOutTop.className = fadeOutTop.className + ' fadeOutMove';
          }

          setTimeout(function () {
            var eyesDom = _this.refs.eyesBorder;

            if (eyesDom) {
              eyesDom.className = eyesDom.className + ' warningEyesMove';
            }
          }, 400);
        }, 1000);
      }
    };

    _this.setCenterPosition = function () {
      if (_this.refs.popDirection) {
        if (_this.props.target) {
          var _computePositionToMak = computePositionToMakePopCenter(_this.refs.popDirection, _this.props.target),
              top = _computePositionToMak.top,
              left = _computePositionToMak.left,
              marginTop = _computePositionToMak.marginTop,
              marginLeft = _computePositionToMak.marginLeft;

          _this.refs.popDirection.style.top = top;
          _this.refs.popDirection.style.left = left;
          _this.refs.popDirection.style.marginTop = "".concat(marginTop, "px");
          _this.refs.popDirection.style.marginLeft = "".concat(marginLeft, "px");
        } else {
          console.warn('当布局方式为居中时，相对居中对象target是必需的');
        }
      }
    };

    _this.createMask = function (hidden) {
      var dom = document.getElementsByClassName('pop-layer_is-show')[0];

      if (!hidden && !dom && _this.props.showMask) {
        _this.container = document.body;
        _this.wrapper = document.createElement('div');
        _this.wrapper.className = 'pop-layer_is-show';

        _this.container.appendChild(_this.wrapper);
      }
    };

    _this.removeMask = function () {
      var dom = document.getElementsByClassName('pop-layer_is-show')[0];
      if (dom) document.body.removeChild(dom);
    };

    var disappearTime = _this.props.disappearTime ? _this.props.disappearTime : '3000';
    _this.clickClose = _this.clickClose.bind(_assertThisInitialized(_this));
    _this.moveTips = _this.moveTips.bind(_assertThisInitialized(_this));
    var disTime = disappearTime;
    var infoType = _this.props.infoType ? _this.props.infoType : '0';
    var infoColor, iconName, title, roundInfoColor, roundIconName, roundCloseIconName, promptMessageType;
    var showStateDuring = false;

    switch (infoType) {
      case '0':
        promptMessageType = 'success';
        infoColor = ' color-zero';
        iconName = ' successFace-tip-icon';
        roundInfoColor = ' color-zero';
        roundIconName = ' successFace-tip-icon';
        roundCloseIconName = ' successClose';
        title = _this.props.title ? _this.props.title : '正确！';
        break;

      case '1':
        promptMessageType = 'error';
        infoColor = ' color-one';
        iconName = ' errorFace-tip-icon';
        roundInfoColor = ' color-one';
        roundIconName = ' errorFace-tip-icon';
        roundCloseIconName = ' errorClose';
        title = _this.props.title ? _this.props.title : '错误！';
        break;

      case '2':
        promptMessageType = 'warning';
        infoColor = ' color-two';
        iconName = ' warningFace-tip-icon';
        roundInfoColor = ' color-two';
        roundIconName = ' warningFace-tip-icon';
        roundCloseIconName = ' warningClose';
        title = _this.props.title ? _this.props.title : '注意！';
        break;

      case '3':
        promptMessageType = 'remind';
        infoColor = ' color-three';
        iconName = ' remindFace-tip-icon';
        roundInfoColor = ' color-three';
        roundIconName = ' remindFace-tip-icon';
        roundCloseIconName = ' remindClose';
        title = _this.props.title ? _this.props.title : '问号！';
        break;

      case '4':
        promptMessageType = 'info';
        infoColor = ' color-four';
        iconName = ' infoFace-tip-icon';
        roundInfoColor = ' color-four';
        roundIconName = ' infoFace-tip-icon';
        roundCloseIconName = ' infoClose';
        title = _this.props.title ? _this.props.title : '信息！';
        break;

      case '5':
        promptMessageType = 'caution';
        infoColor = ' color-five';
        iconName = ' cautionFace-tip-icon';
        roundInfoColor = ' color-five';
        roundIconName = ' cautionFace-tip-icon';
        roundCloseIconName = ' cautionClose';
        title = _this.props.title ? _this.props.title : '提示！';
        break;

      default:
        return _possibleConstructorReturn(_this);
    }

    var sureButton = {
      bsStyle: 'default',
      bsSize: 'small',
      active: true,
      title: _this.props.sureButtonContent ? _this.props.sureButtonContent : '确定',
      onClick: _this.sureClick.bind(_assertThisInitialized(_this))
    };
    var cancelButton = {
      bsStyle: 'weaken',
      bsSize: 'small',
      active: true,
      title: _this.props.cancleButtonContent ? _this.props.cancleButtonContent : '取消',
      onClick: _this.closeClick.bind(_assertThisInitialized(_this))
    };
    var autoDirection;

    if (_this.props.autoDirection == undefined) {
      autoDirection = true;
    } else {
      autoDirection = _this.props.autoDirection;
    }

    var setPosition = true;

    if (_this.props.top === undefined && _this.props.left === undefined && _this.props.right === undefined && _this.props.bottom === undefined) {
      setPosition = false;
    }

    var defualt = {
      popType: _this.props.popType ? _this.props.popType : '0',
      infoType: infoType,
      infoColor: infoColor,
      iconName: iconName,
      roundInfoColor: roundInfoColor,
      roundIconName: roundIconName,
      roundCloseIconName: roundCloseIconName,
      showMask: false,
      manualClose: _this.props.manualClose ? _this.props.manualClose : false,
      disappearTime: disappearTime,
      disTime: disTime,
      promptMessageType: promptMessageType,
      title: _this.props.title ? _this.props.title : '提示！',
      content: _this.props.content ? _this.props.content : [],
      popShow: false,
      moveTips: false,
      moveRountTips: false,
      moveConform: false,
      sureButton: sureButton,
      cancelButton: cancelButton,
      autoDirection: autoDirection,
      direction: _this.props.direction ? _this.props.direction : 'left-down',
      target: _this.props.target ? _this.props.target : '',
      listViewDirection: _this.props.autoDirection ? 'left-down' : _this.props.direction,
      left: _this.props.left ? _this.props.left : 0,
      right: _this.props.right ? _this.props.right : 0,
      top: _this.props.top ? _this.props.top : 0,
      bottom: _this.props.bottom ? _this.props.bottom : 0,
      setPosition: setPosition,
      count: 0
    };
    _this.state = Object.assign({}, defualt, props);
    _this.popClose = _this.popClose.bind(_assertThisInitialized(_this));
    return _this;
  }
  /*
     确定回调
    */


  _createClass(PopLayer, [{
    key: "sureClick",
    value: function sureClick(val) {
      val.stopPropagation();
      this.props.onSure && this.props.onSure(val);
      this.popClose(true);
    }
    /*
       取消回调
      */

  }, {
    key: "closeClick",
    value: function closeClick(val) {
      val.stopPropagation();
      this.props.onClose && this.props.onClose(val);
      this.popClose(true);
    }
  }, {
    key: "popClose",
    value: function popClose(flag, e) {
      var self = this;

      if (e && e.stopPropagation) {
        e && e.stopPropagation();
      }

      this.setState({
        popShow: false
      });
      this.removeMask();
      setTimeout(function () {
        self.props.showHide && self.props.showHide(flag, e);
      }, 300);
    }
  }, {
    key: "componentWillMount",
    value: function componentWillMount(props) {
      if (!this.props.hidden) {
        document.removeEventListener('mousedown', this.moveTips);
        this.setState({
          popShow: true
        });
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.removeMask();
      document.removeEventListener('mousedown', this.moveTips);
      document.removeEventListener('mousedown', this.clickClose);
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      var self = this;
      var _this$state = this.state,
          autoDirection = _this$state.autoDirection,
          direction = _this$state.direction;

      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) {
        this.showStateDuring = false;
      } else {
        this.showStateDuring = true;
      }

      if (!nextProps.hidden && !this.showStateDuring) {
        this.setState({
          popShow: true
        });
        this.createMask(nextProps.hidden);

        if (self.state.popType === '1') {
          self.setState({
            target: nextProps.target ? nextProps.target : ''
          });

          if (nextProps.target && self.refs.popDirection) {
            var newTarget = nextProps.target;
            var popTarget = self.refs.popDirection.getBoundingClientRect();
            var length = popTarget.height;
            var winHeight = window.innerHeight;
            var winWidth = window.innerWidth;
            var horizontal = winWidth / 2 > newTarget.left ? 'right' : 'left';
            var vertical = winHeight / 2 > newTarget.top ? winHeight - newTarget.top > length ? '-down' : '-top' : winHeight - newTarget.top > length ? '-down' : '-top';
            this.state.listViewDirection = autoDirection ? horizontal + vertical : direction;
            this.setState(this.state);
          }
        }
      }

      if (nextProps.content != this.props.content) {
        this.setState({
          content: nextProps.content
        });
      }
    }
  }, {
    key: "shouldComponentUpdate",
    value: function shouldComponentUpdate(nextProps) {
      this.state.count++;

      if (this.props.popType === '0' && this.props.manualClose === false && this.state.count !== 1) {
        var res = true;

        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) {
          res = false;
        }

        return res;
      } else {
        return true;
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$state2 = this.state,
          popType = _this$state2.popType,
          infoColor = _this$state2.infoColor,
          iconName = _this$state2.iconName,
          manualClose = _this$state2.manualClose,
          title = _this$state2.title,
          content = _this$state2.content,
          sureButton = _this$state2.sureButton,
          cancelButton = _this$state2.cancelButton,
          listViewDirection = _this$state2.listViewDirection,
          left = _this$state2.left,
          top = _this$state2.top,
          setPosition = _this$state2.setPosition,
          moveTips = _this$state2.moveTips,
          moveRountTips = _this$state2.moveRountTips,
          bottom = _this$state2.bottom,
          right = _this$state2.right,
          roundIconName = _this$state2.roundIconName,
          roundInfoColor = _this$state2.roundInfoColor,
          roundCloseIconName = _this$state2.roundCloseIconName,
          promptMessageType = _this$state2.promptMessageType;
      var _this$props = this.props,
          hidden = _this$props.hidden,
          maxHeight = _this$props.maxHeight,
          removeSubBtn = _this$props.removeSubBtn,
          direction = _this$props.direction,
          target = _this$props.target;
      var manualClosePart;
      var manualCloseForRoundPatter;

      if (!manualClose) {
        manualClosePart = React.createElement("div", {
          className: "hasNoButtonLine",
          ref: "hasNoButtonShadowLine"
        });
        manualCloseForRoundPatter = '';
      } else {
        manualClosePart = React.createElement("div", {
          className: 'manual-close',
          ref: "manualClose"
        }, React.createElement("div", {
          className: "manual-close-content",
          onClick: this.popClose
        }, React.createElement("span", {
          className: 'manual-close-word'
        }, "\u6211\u77E5\u9053\u4E86")));
        manualCloseForRoundPatter = React.createElement("div", {
          className: "round-pattern-manual-close"
        }, React.createElement("div", {
          className: "round-pattern-divide-line"
        }), React.createElement("div", {
          className: 'round-pattern-close-btn' + roundCloseIconName,
          onClick: this.popClose
        }));
      }

      var tipsContent = [];
      var tipsContentConfirm = [];

      if (content) {
        if (content.length == 1) {
          var _html = {
            __html: decode(content[0])
          };
          tipsContent.push(React.createElement("li", {
            key: "0",
            dangerouslySetInnerHTML: _html
          }));
          tipsContentConfirm.push(React.createElement("li", {
            key: "0",
            dangerouslySetInnerHTML: _html
          }));
        } else {
          content.map(function (item, index) {
            var _html = {
              __html: index + 1 + '、' + decode(content[index])
            };
            var _html1 = {
              __html: decode(content[index])
            };
            tipsContent.push(React.createElement("li", {
              key: index,
              dangerouslySetInnerHTML: _html
            }));
            tipsContentConfirm.push(React.createElement("li", {
              key: index,
              dangerouslySetInnerHTML: _html1
            }));
          });
        }
      }

      if (hidden) {
        return React.createElement("div", null);
      } else if (popType === '0') {
        var num = this.DetermineChineseCharacterNum(decode(title));
        var maxCharacter = manualClose ? 108 : 120;

        if (tipsContent.length == 0 && decode(title).length + num <= maxCharacter) {
          return React.createElement("div", {
            className: 'round-pattern-pop-outer ' + roundInfoColor + (this.state.popShow ? ' pop-open-tip' : ' pop-close') + (moveRountTips ? ' round-pattern-pop-outer-move' : ''),
            style: {
              maxHeight: maxHeight,
              left: left + 'px',
              top: top + 'px'
            },
            ref: "roundPatternPopOuter"
          }, React.createElement("div", {
            className: 'round-pattern-tips-container',
            ref: "roundPatternTipsContainer"
          }, this.renderIcon('round-pattern', promptMessageType), React.createElement("div", {
            className: manualClose ? 'round-pattern-tips-wrap round-pattern-tips-wrap-short' : 'round-pattern-tips-wrap round-pattern-tips-wrap-long',
            ref: "roundPatternTipsWrap"
          }, React.createElement("span", {
            className: 'round-pattern-tips-title',
            style: {
              fontSize: 16
            }
          }, decode(title))), manualCloseForRoundPatter));
        } else {
          return React.createElement("div", {
            className: 'pop-outer hint-pop' + (this.state.popShow ? ' pop-open-tip' : ' pop-close') + infoColor + (content.length > 0 ? ' with-content' : '') + (moveTips ? ' pop-out-move' : ''),
            style: {
              maxHeight: maxHeight,
              left: left + 'px',
              top: top + 'px'
            },
            ref: "popOut"
          }, React.createElement("div", {
            className: 'tips-container'
          }, this.renderIcon('no-round-pattern', promptMessageType), React.createElement("div", {
            className: "tips-wrap"
          }, React.createElement("span", {
            className: 'tips-title'
          }, decode(title))), React.createElement("ul", {
            className: 'tips-content',
            ref: "tipsContent"
          }, tipsContent), React.createElement("div", {
            className: "showallBtn",
            ref: "showAllBtn",
            onClick: this.showAllInfo
          }, "\u67E5\u770B\u66F4\u591A", React.createElement("div", {
            className: "arrowdown",
            ref: "showAllIcon"
          }, React.createElement(ArrowDownIcon, null)))), manualClosePart);
        }
      } else {
        var dirClass;

        switch (listViewDirection) {
          case 'right-down':
            dirClass = 'top left';
            break;

          case 'left-down':
            dirClass = 'top right';
            break;

          case 'left-top':
            dirClass = 'bottom right';
            break;

          case 'right-top':
            dirClass = 'bottom left';
            break;

          default:
        }

        var popStyle, popClassName;
        popClassName = "".concat(setPosition ? '' : listViewDirection, " pop-outer confirm-pop ").concat(this.state.popShow ? "pop-open" : "pop-close", " ").concat(direction === 'center' && target ? 'pop-layer__center' : '');
        popStyle = genPopStyleIfPosition(dirClass, maxHeight, setPosition, this.props);

        if (direction === 'center') {
          if (target) {
            var _computeTargetCenterP = computeTargetCenterPosition(target),
                _top = _computeTargetCenterP.top,
                _left = _computeTargetCenterP.left;

            popStyle = genPopStyleIfPosition(dirClass, (maxHeight || MAX_CONFIRM_HEIGHT) - 44, true, {
              top: _top,
              left: _left
            });

            if (this.state.popShow === false) {
              popClassName += ' pop-layer__center_close';
            }
          } else {
            console.warn('当布局方式为居中时，相对居中对象target是必需的');
          }
        }

        var confirm_connect_style = this.props.connectStyle ? this.props.connectStyle : {
          top: '-9px',
          left: '0px'
        };
        var centerConfirmStyle = direction === 'center' ? {
          maxHeight: maxHeight ? maxHeight - 44 - 36 : MAX_CONFIRM_HEIGHT - 44 - 36,
          overflowY: 'scroll'
        } : {};
        return React.createElement("div", {
          ref: "popDirection",
          className: this.state.moveConform ? popClassName + ' acConfirmMove' : popClassName,
          style: popStyle
        }, listViewDirection !== 'center' && React.createElement("div", {
          className: "confirm-connect",
          style: confirm_connect_style
        })
        /* 当布局方式为居中时，不显示气泡的小尖角 */
        , React.createElement("div", {
          style: centerConfirmStyle,
          className: "confirm-content-container"
        }, React.createElement("div", {
          className: "confirm-title"
        }, React.createElement("div", {
          className: "confirm-title-image pc_sys_zhuyi_nomal"
        }), React.createElement("div", {
          className: "confirm-title-message"
        }, decode(title))), React.createElement("ul", {
          className: tipsContent.length > 0 ? "confirm-message confirm-message-hasInfo" : "confirm-message confirm-message-emptyInfo",
          style: listViewDirection === 'center' ? {
            maxHeight: 10000
          } : {}
        }, tipsContentConfirm)), React.createElement("div", {
          className: "us-footer clearfix"
        }, removeSubBtn ? '' : React.createElement(BaseButton, sureButton), React.createElement(BaseButton, cancelButton)));
      }
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      //这里要做创建虚拟dom的操作 因为可能存在didMount操作的时候找得到节点  但是节点因为涉及到变淡弹层弹出  没显示问题 造成表单无权限提示信息错乱的问题
      var textvalveBorder = document.createElement('span');
      textvalveBorder.style.display = 'inline-block';

      if (this.props.manualClose) {
        textvalveBorder.className = 'poplayer_text_Border poplayer_text_Border_short';
      } else {
        textvalveBorder.className = 'poplayer_text_Border poplayer_text_Border_long';
      }

      textvalveBorder.innerHTML = this.props.title;
      document.body.appendChild(textvalveBorder);

      if (this.refs.roundPatternTipsContainer) {
        if (this.props.manualClose) {
          this.refs.roundPatternPopOuter.style.width = textvalveBorder.clientWidth + 54 + 'px';
          this.refs.roundPatternTipsContainer.style.height = textvalveBorder.clientHeight + 'px';
        } else {
          this.refs.roundPatternPopOuter.style.width = textvalveBorder.clientWidth + 30 + 'px';
          this.refs.roundPatternTipsContainer.style.height = textvalveBorder.clientHeight + 'px';
        }
      }

      document.body.removeChild(textvalveBorder);
      this.showFaceActive(this.state.promptMessageType);

      if (this.refs.tipsContent) {
        if (this.refs.tipsContent.scrollHeight > 100) {} else {
          if (this.refs.showAllBtn) {
            this.refs.showAllBtn.style.display = 'none';
          }
        }
      }

      var _this$state3 = this.state,
          popType = _this$state3.popType,
          manualClose = _this$state3.manualClose,
          disTime = _this$state3.disTime;
      var self = this;

      if (popType === '0' && !manualClose) {
        setTimeout(function () {
          self.setState({
            popShow: false
          });
          setTimeout(function () {
            self.props.showHide && self.props.showHide();
          }, 300);
        }, disTime);
      } else if (popType === '1') {
        document.removeEventListener('mousedown', this.clickClose);
        document.addEventListener('mousedown', this.clickClose);

        if (this.props.direction === 'center') {
          this.setCenterPosition();
        }
      } else if (popType === '0' && manualClose) {
        document.removeEventListener('mousedown', this.moveTips);
        document.addEventListener('mousedown', this.moveTips);
      }

      this.createMask(this.props.hidden);
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      if (this.props.direction === 'center') {
        this.setCenterPosition();
      }
    }
  }, {
    key: "moveTips",
    value: function moveTips(e) {
      var _this2 = this;

      var area = this.refs.popOut;
      var area1 = this.refs.roundPatternPopOuter;

      if (area && area.contains(e.target)) {
        return;
      } else if (area1 && area1.contains(e.target)) {
        return;
      }

      var self = this;

      if (!this.moveUnAble) {
        var popOutTest = this.refs.popOut;
        var popOutTest1 = this.refs.roundPatternPopOuter;

        if (popOutTest1) {
          this.moveUnAble = true;
          popOutTest1.className = popOutTest1.className.split('pop-open-after')[0] + ' round-pattern-pop-outer-move';
          setTimeout(function () {
            popOutTest1.className = popOutTest1.className.split('round-pattern-pop-outer-move')[0] + ' pop-open-after';
            _this2.moveUnAble = false;
          }, 1200);
        }

        if (popOutTest) {
          this.moveUnAble = true;
          popOutTest.className = popOutTest.className.split('pop-open-after')[0] + ' pop-out-move';
          setTimeout(function () {
            popOutTest.className = popOutTest.className.split('pop-out-move')[0] + ' pop-open-after';
            _this2.moveUnAble = false;
          }, 1200);
        }
      }
    }
  }, {
    key: "clickClose",
    value: function clickClose(e) {
      var _this3 = this;

      var area = this.refs.popDirection;
      if (area == undefined) return;
      if (area.contains(e.target)) return; //这里做点击其他处   弹层晃动的操作
      // this.popClose(false, e);

      if (!this.clickBool) {
        this.clickClassName = this.refs.popDirection.className + ' pop-open-after';
        this.clickBool = 1;
      }

      if (this.clickBool == 1) {
        if (this.refs.popDirection.className.split('pop-open-after')[0].indexOf('acConfirmMove') <= 0) {
          this.refs.popDirection.className = this.refs.popDirection.className.split('pop-open-after')[0] + ' acConfirmMove';
        }
      }

      clearTimeout(this.timeOut);
      this.timeOut = setTimeout(function () {
        _this3.refs.popDirection.className = _this3.clickClassName;
        _this3.clickBool == 0;
      }, 900); // document.removeEventListener('mousedown', this.clickClose);
    }
  }]);

  return PopLayer;
}(Component);

export { PopLayer as default };