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

beisencloud pc react components

'use strict';

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _commonFunc = require('../common-func');

require('./styles/all.scss');

var _baseButton = require('../base-button');

var _baseButton2 = _interopRequireDefault(_baseButton);

var _utils = require('./utils');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var defaultTranslation = {
  alreadyKnown: '我知道了',
  viewMore: '查看更多',
  correctMsgText: '正确！',
  errorMsgText: '错误！',
  attentionMsgText: '注意！',
  questionMarkMsgText: '问号！',
  messageMsgText: '信息！',
  notificationMsgText: '提示！',
  confirmText: '确定',
  cancelText: '取消'
}; /* eslint-disable */

var PopLayer = function (_Component) {
  (0, _inherits3.default)(PopLayer, _Component);

  function PopLayer(props) {
    (0, _classCallCheck3.default)(this, PopLayer);

    var _this = (0, _possibleConstructorReturn3.default)(this, (PopLayer.__proto__ || (0, _getPrototypeOf2.default)(PopLayer)).call(this, props));

    _this.lookMorehover = function () {
      if (_this.refs.showAllIcon) {
        _this.refs.showAllIcon.className = 'sys-icon-arrowdown2-active arrowdown';
      }
    };

    _this.lookMorehOut = function () {
      if (_this.refs.showAllIcon) {
        _this.refs.showAllIcon.className = 'sys-icon-arrowdown2-nomal arrowdown';
      }
    };

    _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 _react2.default.createElement(
            'div',
            { className: 'round-pattern-tips-icon-border round-pattern-tips-icon-border-success' },
            _react2.default.createElement(
              'div',
              { className: 'round-pattern-tips-icon' },
              _react2.default.createElement(
                'div',
                { className: 'successEyesBorder', ref: 'eyesBorder' },
                _react2.default.createElement('div', { className: 'successFaceLeftEyes', ref: 'successFaceLeftEyes' }),
                _react2.default.createElement('div', { className: 'successFaceRightEyes', ref: 'successFaceRightEyes' })
              ),
              _react2.default.createElement(
                'div',
                { className: 'successFaceMouse', ref: 'mouseActive' },
                _react2.default.createElement('div', { className: 'successMouseFadeOut fadeOut-top', ref: 'fadeOutTop' })
              )
            )
          );
        } else if (type == 'error') {
          return _react2.default.createElement(
            'div',
            { className: 'round-pattern-tips-icon-border round-pattern-tips-icon-border-error' },
            _react2.default.createElement(
              'div',
              { className: 'round-pattern-tips-icon', ref: 'roundPatternTipsIcon' },
              _react2.default.createElement(
                'div',
                { className: 'errorEyesBorder', ref: 'eyesBorder' },
                _react2.default.createElement('div', { className: 'errorFaceLeftEyes', ref: 'errorFaceLeftEyes' }),
                _react2.default.createElement('div', { className: 'errorFaceRightEyes', ref: 'errorFaceRightEyes' })
              ),
              _react2.default.createElement(
                'div',
                { className: 'errorFaceMouse', ref: 'mouseActive' },
                _react2.default.createElement('div', { className: 'errorMouseFadeOut fadeOut-bottom', ref: 'fadeOutBottom' })
              )
            )
          );
        } else if (type == 'warning') {
          return _react2.default.createElement(
            'div',
            { className: 'round-pattern-tips-icon-border round-pattern-tips-icon-border-warning' },
            _react2.default.createElement(
              'div',
              { className: 'round-pattern-tips-icon', ref: 'roundPatternTipsIcon' },
              _react2.default.createElement(
                'div',
                { className: 'warningEyesBorder', ref: 'eyesBorder' },
                _react2.default.createElement('div', { className: 'warningFaceLeftEyes', ref: 'warningFaceLeftEyes' }),
                _react2.default.createElement('div', { className: 'warningFaceRightEyes', ref: 'warningFaceRightEyes' })
              ),
              _react2.default.createElement('div', { className: 'warningFaceMouse', ref: 'mouseActive' })
            )
          );
        } else if (type == 'remind') {
          return _react2.default.createElement(
            'div',
            { className: 'round-pattern-tips-icon-border round-pattern-tips-icon-border-remind' },
            _react2.default.createElement(
              'div',
              { className: 'round-pattern-tips-icon' },
              _react2.default.createElement(
                'div',
                { className: 'remindEyesBorder', ref: 'eyesBorder' },
                _react2.default.createElement('div', { className: 'remindFaceLeftEyes', ref: 'remindFaceLeftEyes' }),
                _react2.default.createElement('div', { className: 'remindFaceRightEyes', ref: 'remindFaceRightEyes' })
              ),
              _react2.default.createElement(
                'div',
                { className: 'remindFaceMouse', ref: 'mouseActive' },
                _react2.default.createElement('div', { className: 'remindMouseFadeOut fadeOut-top', ref: 'fadeOutTop' })
              )
            )
          );
        }
      } else {
        if (type == 'success') {
          return _react2.default.createElement(
            'div',
            { className: 'tips-icon-border tips-icon-border-success' },
            _react2.default.createElement(
              'div',
              { className: 'tips-icon' },
              _react2.default.createElement(
                'div',
                { className: 'successEyesBorder', ref: 'eyesBorder' },
                _react2.default.createElement('div', { className: 'successFaceLeftEyes', ref: 'successFaceLeftEyes' }),
                _react2.default.createElement('div', { className: 'successFaceRightEyes', ref: 'successFaceRightEyes' })
              ),
              _react2.default.createElement(
                'div',
                { className: 'successFaceMouse', ref: 'mouseActive' },
                _react2.default.createElement('div', { className: 'successMouseFadeOut fadeOut-top', ref: 'fadeOutTop' })
              )
            )
          );
        } else if (type == 'error') {
          return _react2.default.createElement(
            'div',
            { className: 'tips-icon-border tips-icon-border-error' },
            _react2.default.createElement(
              'div',
              { className: 'tips-icon', ref: 'roundPatternTipsIcon' },
              _react2.default.createElement(
                'div',
                { className: 'errorEyesBorder', ref: 'eyesBorder' },
                _react2.default.createElement('div', { className: 'errorFaceLeftEyes', ref: 'errorFaceLeftEyes' }),
                _react2.default.createElement('div', { className: 'errorFaceRightEyes', ref: 'errorFaceRightEyes' })
              ),
              _react2.default.createElement(
                'div',
                { className: 'errorFaceMouse', ref: 'mouseActive' },
                _react2.default.createElement('div', { className: 'errorMouseFadeOut fadeOut-bottom', ref: 'fadeOutBottom' })
              )
            )
          );
        } else if (type == 'warning') {
          return _react2.default.createElement(
            'div',
            { className: 'tips-icon-border tips-icon-border-warning' },
            _react2.default.createElement(
              'div',
              { className: 'tips-icon', ref: 'roundPatternTipsIcon' },
              _react2.default.createElement(
                'div',
                { className: 'warningEyesBorder', ref: 'eyesBorder' },
                _react2.default.createElement('div', { className: 'warningFaceLeftEyes', ref: 'warningFaceLeftEyes' }),
                _react2.default.createElement('div', { className: 'warningFaceRightEyes', ref: 'warningFaceRightEyes' })
              ),
              _react2.default.createElement('div', { className: 'warningFaceMouse', ref: 'mouseActive' })
            )
          );
        } else if (type == 'remind') {
          return _react2.default.createElement(
            'div',
            { className: 'tips-icon-border tips-icon-border-remind' },
            _react2.default.createElement(
              'div',
              { className: 'tips-icon' },
              _react2.default.createElement(
                'div',
                { className: 'remindEyesBorder', ref: 'eyesBorder' },
                _react2.default.createElement('div', { className: 'remindFaceLeftEyes', ref: 'remindFaceLeftEyes' }),
                _react2.default.createElement('div', { className: 'remindFaceRightEyes', ref: 'remindFaceRightEyes' })
              ),
              _react2.default.createElement(
                'div',
                { className: 'remindFaceMouse', ref: 'mouseActive' },
                _react2.default.createElement('div', { className: 'remindMouseFadeOut fadeOut-top', ref: 'fadeOutTop' })
              )
            )
          );
        }
      }
    };

    _this.extFieldChange = function (data) {
      if (_this.props.onChange) {
        _this.props.onChange(data);
      }
    };

    _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++;
              var faceLeftEyes = _this.refs.warningFaceLeftEyes;
              var faceRightEyes = _this.refs.warningFaceRightEyes;

              if (timeTag > 0 && timeTag < 50) {
                if (faceLeftEyes) faceLeftEyes.style.left = '2px';
                if (faceRightEyes) faceRightEyes.style.left = '9px';
              } else {
                if (faceLeftEyes) faceLeftEyes.style.left = '1px';
                if (faceRightEyes) faceRightEyes.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 () {
          _react2.default.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 = (0, _utils.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 = marginTop + 'px';
          _this.refs.popDirection.style.marginLeft = 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);
    };

    _this.translation = (0, _extends3.default)({}, defaultTranslation, props.translation);
    var disappearTime = _this.props.disappearTime ? _this.props.disappearTime : "3000";
    _this.clickClose = _this.clickClose.bind(_this);
    _this.moveTips = _this.moveTips.bind(_this);
    var disTime = disappearTime;
    var infoType = _this.props.infoType ? _this.props.infoType : "0";
    var infoColor = void 0,
        iconName = void 0,
        title = void 0,
        roundInfoColor = void 0,
        roundIconName = void 0,
        roundCloseIconName = void 0,
        promptMessageType = void 0;
    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 : _this.translation.correctMsgText;
        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 : _this.translation.errorMsgText;
        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 : _this.translation.attentionMsgText;
        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 : _this.translation.questionMarkMsgText;
        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 : _this.translation.messageMsgText;
        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 : _this.translation.notificationMsgText;
        break;
      default:
        return (0, _possibleConstructorReturn3.default)(_this);
    }
    var sureButton = {
      bsStyle: "default",
      bsSize: "small",
      active: true,
      title: _this.props.sureButtonContent ? _this.props.sureButtonContent : _this.translation.confirmText,
      onClick: _this.sureClick.bind(_this)
    };
    var cancelButton = {
      bsStyle: "weaken",
      bsSize: "small",
      active: true,
      title: _this.props.cancleButtonContent ? _this.props.cancleButtonContent : _this.translation.cancelText,
      onClick: _this.closeClick.bind(_this)
    };

    var autoDirection = void 0;
    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 : _this.translation.notificationMsgText,
      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 = (0, _extends3.default)({}, defualt, props);
    _this.popClose = _this.popClose.bind(_this);
    return _this;
  }
  /*
    确定回调
   */


  (0, _createClass3.default)(PopLayer, [{
    key: 'sureClick',
    value: function sureClick(val) {
      var extFieldData = this.refs.extFieldData && this.refs.extFieldData.getChildrenValue ? this.refs.extFieldData.getChildrenValue() : null;
      if (extFieldData) {
        val.target['extFieldData'] = extFieldData;
      }

      val.stopPropagation();
      this.props.onSure && this.props.onSure(val);
      this.popClose(true);
    }

    /*
      取消回调
     */

  }, {
    key: 'closeClick',
    value: function closeClick(val) {
      var extFieldData = this.refs.extFieldData && this.refs.extFieldData.getChildrenValue ? this.refs.extFieldData.getChildrenValue() : null;
      if (extFieldData) {
        val.target['extFieldData'] = extFieldData;
      }
      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();
      }
      if (!this.props.cliCloBtnNoHide) {
        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 _state = this.state,
          autoDirection = _state.autoDirection,
          direction = _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 _state2 = this.state,
          popType = _state2.popType,
          infoColor = _state2.infoColor,
          iconName = _state2.iconName,
          manualClose = _state2.manualClose,
          title = _state2.title,
          content = _state2.content,
          sureButton = _state2.sureButton,
          cancelButton = _state2.cancelButton,
          listViewDirection = _state2.listViewDirection,
          left = _state2.left,
          top = _state2.top,
          setPosition = _state2.setPosition,
          moveTips = _state2.moveTips,
          moveRountTips = _state2.moveRountTips,
          bottom = _state2.bottom,
          right = _state2.right,
          roundIconName = _state2.roundIconName,
          roundInfoColor = _state2.roundInfoColor,
          roundCloseIconName = _state2.roundCloseIconName,
          promptMessageType = _state2.promptMessageType;
      var _props = this.props,
          hidden = _props.hidden,
          maxHeight = _props.maxHeight,
          removeSubBtn = _props.removeSubBtn,
          translation = _props.translation,
          target = _props.target,
          direction = _props.direction,
          width = _props.width;

      var innerStyle = maxHeight ? { "maxHeight": maxHeight, 'overflowX': 'hidden' } : {};
      var manualClosePart = void 0;
      var manualCloseForRoundPatter = void 0;
      if (!manualClose) {
        manualClosePart = _react2.default.createElement('div', { className: 'hasNoButtonLine', ref: 'hasNoButtonShadowLine' });
        manualCloseForRoundPatter = '';
      } else {
        manualClosePart = _react2.default.createElement(
          'div',
          { className: "manual-close", ref: 'manualClose' },
          _react2.default.createElement(
            'div',
            { className: 'manual-close-content', onClick: this.popClose },
            _react2.default.createElement(
              'span',
              { className: "manual-close-word" },
              this.translation.alreadyKnown
            )
          )
        );
        manualCloseForRoundPatter = _react2.default.createElement(
          'div',
          { className: 'round-pattern-manual-close' },
          _react2.default.createElement('div', { className: 'round-pattern-divide-line' }),
          _react2.default.createElement('div', { className: "round-pattern-close-btn" + roundCloseIconName, onClick: this.popClose })
        );
      }

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

      if (hidden) {
        return _react2.default.createElement('div', null);
      } else if (popType === "0") {
        var num = this.DetermineChineseCharacterNum((0, _commonFunc.decode)(title));
        var maxCharacter = manualClose ? 108 : 120;
        if (tipsContent.length == 0 && (0, _commonFunc.decode)(title).length + num <= maxCharacter) {
          return _react2.default.createElement(
            'div',
            { className: "round-pattern-pop-outer " + roundInfoColor + (this.state.popShow ? " pop-open-tip" : " pop-close") + (moveRountTips ? ' round-pattern-pop-outer-move' : ''), style: { "left": left + "px", "top": top + "px", opacity: 0 }, ref: 'roundPatternPopOuter' },
            _react2.default.createElement(
              'div',
              { className: "round-pattern-tips-container", ref: 'roundPatternTipsContainer' },
              this.renderIcon('round-pattern', promptMessageType),
              _react2.default.createElement(
                'div',
                { className: manualClose ? "round-pattern-tips-wrap round-pattern-tips-wrap-short" : "round-pattern-tips-wrap round-pattern-tips-wrap-long", ref: 'roundPatternTipsWrap' },
                _react2.default.createElement(
                  'span',
                  { className: "round-pattern-tips-title" },
                  (0, _commonFunc.decode)(title)
                )
              ),
              manualCloseForRoundPatter
            )
          );
        } else {
          return _react2.default.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: { "left": left + "px", "top": top + "px" }, ref: 'popOut' },
            _react2.default.createElement(
              'div',
              { className: "tips-container", style: innerStyle },
              this.renderIcon('no-round-pattern', promptMessageType),
              _react2.default.createElement(
                'div',
                { className: 'tips-wrap' },
                _react2.default.createElement(
                  'span',
                  { className: "tips-title" },
                  (0, _commonFunc.decode)(title)
                )
              ),
              _react2.default.createElement(
                'ul',
                { className: "tips-content", ref: 'tipsContent' },
                tipsContent
              ),
              _react2.default.createElement(
                'div',
                { className: 'showallBtn', ref: 'showAllBtn', onMouseOver: this.lookMorehover, onMouseOut: this.lookMorehOut, onClick: this.showAllInfo },
                this.translation.viewMore,
                _react2.default.createElement('div', { className: 'sys-icon-arrowdown2-nomal arrowdown', ref: 'showAllIcon' })
              )
            ),
            manualClosePart
          );
        }
      } else {
        var dirClass = void 0;
        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 = void 0,
            popClassName = void 0;
        popClassName = (setPosition ? '' : listViewDirection) + ' pop-outer confirm-pop ' + (this.state.popShow ? "pop-open" : "pop-close") + ' ' + (direction === 'center' && target ? 'pop-layer__center' : '');
        popStyle = (0, _utils.genPopStyleIfPosition)(dirClass, maxHeight, setPosition, this.props);
        if (direction === 'center') {
          if (target) {
            var _computeTargetCenterP = (0, _utils.computeTargetCenterPosition)(target),
                _top = _computeTargetCenterP.top,
                _left = _computeTargetCenterP.left;

            popStyle = (0, _utils.genPopStyleIfPosition)(dirClass, (maxHeight || _utils.MAX_CONFIRM_HEIGHT) - 44, true, { top: _top, left: _left });
            if (width) {
              popStyle.width = width;
            } else {
              popStyle.width = 340;
            }
            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 PageType = window._beisenCmp && window._beisenCmp[this.props.extComponentName] ? window._beisenCmp[this.props.extComponentName] : null;

        var centerConfirmStyle = direction === 'center' ? { maxHeight: maxHeight ? maxHeight - 44 - 36 : _utils.MAX_CONFIRM_HEIGHT - 44 - 36, overflowY: 'scroll' } : {};
        return _react2.default.createElement(
          'div',
          { ref: 'popDirection', className: this.state.moveConform ? popClassName + ' acConfirmMove' : popClassName, style: popStyle },
          listViewDirection !== 'center' && _react2.default.createElement('div', { className: 'confirm-connect', style: confirm_connect_style }) /* 当布局方式为居中时，不显示气泡的小尖角 */,
          _react2.default.createElement(
            'div',
            { style: centerConfirmStyle, className: 'confirm-content-container' },
            _react2.default.createElement(
              'div',
              { className: 'confirm-title' },
              _react2.default.createElement('div', { className: 'confirm-title-image pc_sys_zhuyi_nomal' }),
              _react2.default.createElement(
                'div',
                { className: 'confirm-title-message' },
                (0, _commonFunc.decode)(title)
              )
            ),
            PageType ? _react2.default.createElement(PageType, { ref: 'extFieldData' }) : '',
            _react2.default.createElement(
              'ul',
              { className: tipsContent.length > 0 ? "confirm-message confirm-message-hasInfo" : "confirm-message confirm-message-emptyInfo",
                style: listViewDirection === 'center' ? { maxHeight: 10000 } : {} },
              tipsContentConfirm
            )
          ),
          _react2.default.createElement(
            'div',
            { className: 'us-footer clearfix' },
            removeSubBtn ? '' : _react2.default.createElement(_baseButton2.default, sureButton),
            _react2.default.createElement(_baseButton2.default, cancelButton)
          )
        );
      }
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate() {
      if (this.refs.tipsContent && this.refs.tipsContent.scrollHeight <= 100) {
        this.refs.showAllBtn.style.display = 'none';
      }
      if (this.props.direction === 'center') {
        this.setCenterPosition();
      }
    }
  }, {
    key: 'componentDidMount',
    value: function componentDidMount() {
      var _this2 = this;

      //这里要做创建虚拟dom的操作 因为可能存在didMount操作的时候找得到节点  但是节点因为涉及到变淡弹层弹出  没显示问题 造成表单无权限提示信息错乱的问题
      var setTime = this.props.popLayerShowArea == 'form' ? 500 : 0;
      setTimeout(function () {
        var textvalveBorder = document.createElement('div');
        if (_this2.props.manualClose) {
          textvalveBorder.className = 'poplayer_text_Border poplayer_text_Border_short';
        } else {
          textvalveBorder.className = 'poplayer_text_Border poplayer_text_Border_long';
        }
        textvalveBorder.innerText = (0, _commonFunc.decode)(_this2.props.title);
        document.body.appendChild(textvalveBorder);
        if (_this2.refs.roundPatternTipsContainer) {
          if (_this2.props.manualClose) {
            _this2.refs.roundPatternPopOuter.style.opacity = '1';
            _this2.refs.roundPatternPopOuter.style.width = textvalveBorder.clientWidth + 52 + 'px';
            _this2.refs.roundPatternTipsContainer.style.height = textvalveBorder.clientHeight + 'px';
          } else {
            _this2.refs.roundPatternPopOuter.style.opacity = '1';
            _this2.refs.roundPatternPopOuter.style.width = textvalveBorder.clientWidth + 23 + 'px';
            _this2.refs.roundPatternTipsContainer.style.height = textvalveBorder.clientHeight + 'px';
          }
        }
        document.body.removeChild(textvalveBorder);
      }, [setTime]);
      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 _state3 = this.state,
          popType = _state3.popType,
          manualClose = _state3.manualClose,
          disTime = _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: 'moveTips',
    value: function moveTips(e) {
      var _this3 = 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';
            _this3.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';
            _this3.moveUnAble = false;
          }, 1200);
        }
      }
    }
  }, {
    key: 'clickClose',
    value: function clickClose(e) {
      var area = this.refs.popDirection;
      var self = this;
      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 () {
        if (self.refs.popDirection) {
          self.refs.popDirection.className = self.clickClassName;
        }
        self.clickBool == 0;
      }, 900);
      // document.removeEventListener('mousedown', this.clickClose);
    }
  }]);
  return PopLayer;
}(_react.Component);

module.exports = PopLayer;