@beisen-platform/common-pop/lib/index.js

import "core-js/modules/es7.object.get-own-property-descriptors";
import "core-js/modules/es6.symbol";
import "core-js/modules/web.dom.iterable";
import "core-js/modules/es6.array.iterator";
import "core-js/modules/es6.object.to-string";
import "core-js/modules/es6.object.keys";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _extends from "@babel/runtime/helpers/extends";
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";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

/* eslint-disable */
import React, { Component } from 'react';
import { findDOMNode } from 'react-dom';
import './styles/all.css';
import debounce from '@beisen/es6-promise-debounce';
import getUid from './uid';
import Draggable from 'react-draggable-3d';
import { addResizeListener, removeResizeListener, decode } from '@beisen-platform/common-func';
import CloseIcon from '@beisen-platform/react-icons/lib/icons/CusGuanbitanceng1.js';
import { Helper } from '@beisen-platform/platform-base'; //构建失败了几次:5

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

  function CommonPop(props) {
    var _this;

    _classCallCheck(this, CommonPop);

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

    _this.getCommonSize = function () {
      var myWidth, myHeight;

      if (typeof window.innerWidth == 'number') {
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
      } else {
        if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
          myWidth = document.documentElement.clientWidth;
          myHeight = document.documentElement.clientHeight;
        } else {
          if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
            myWidth = document.body.clientWidth;
            myHeight = document.body.clientHeight;
          }
        }
      }

      return {
        width: myWidth,
        height: myHeight
      };
    };

    _this.temp = function () {
      var self = _assertThisInitialized(_this);

      var selfDom;

      if (_this.PopWindow && !_this.PopWindow) {
        return;
      }

      try {
        selfDom = findDOMNode(_assertThisInitialized(_this));
      } catch (e) {
        return;
      }

      var headHeight = selfDom.querySelector(".modal-pop__header") ? selfDom.querySelector(".modal-pop__header").offsetHeight : 0;
      var footHeight = selfDom.querySelector(".modal-pop__footer") ? selfDom.querySelector(".modal-pop__footer").offsetHeight : 0;
      var contentHeight = selfDom.querySelector(".modal-pop__content").scrollHeight > 0 ? selfDom.querySelector(".modal-pop__content").scrollHeight : selfDom.querySelector(".modal-pop__content").offsetHeight;

      var allWidth = _this.getWidth();

      var allHeight = contentHeight + headHeight + footHeight;
      var winHeight = _this.windowSize.height;
      var widthScale = _this.state.popType == 'lookup' ? 0.8 : 0.9;

      if (allHeight > winHeight * widthScale) {
        allHeight = winHeight * widthScale;
        contentHeight = allHeight - headHeight - footHeight;
      }

      if (allHeight < 220) {
        allHeight = 220;
      }

      var node = findDOMNode(self.PopWindow);
      var _nodeSize = {
        width: allWidth,
        height: allHeight
      };

      var _marleft, _marTop;

      var userAgent = navigator.userAgent;
      _marleft = Math.ceil(_nodeSize.width) / 2 * -1;
      _marTop = Math.ceil(_nodeSize.height / 2) * -1; //在IE11下计算出现小数，与translate3d冲突造成现实模糊

      if (node) {
        node.style.marginLeft = _marleft - (_this.props.menuWidth || 0) + 'px';
        node.style.marginTop = userAgent.indexOf("Edge") > -1 && _this.props.isLookUpV2 ? -(window.innerHeight / 2 + allHeight / 2) + 'px' : _marTop + 'px';
        node.style.height = allHeight + "px";
        node.style.width = allWidth + "px";
      } // if ((node && userAgent.indexOf("Edge") > -1 && this.props.isLookUpV2) || (node && (userAgent.indexOf("Edge") > -1 || !!window.ActiveXObject || "ActiveXObject" in window) ) ) {
      //   //edge下弹窗会偏移，出此下策实属无奈
      //   node.style.position = "absolute";
      //   // node.style.top = 0;
      // }
      // if (this.props.fixPos && userAgent.indexOf("Windows NT 10.0")>-1 && (userAgent.indexOf("Edge")>-1 || (!!window.ActiveXObject || "ActiveXObject" in window))){
      //   //专门解决在win10 IE下非iframe页面下弹窗错位问题
      //   if (node) {
      //     node.style.position = "absolute";
      //     node.style.top = "50%";
      //   }
      // }


      var innerDom = selfDom.querySelector(".modal-pop__inner");

      if (_this.props.innerPadding == '0 8%') {
        if (allWidth <= 833) {
          innerDom.style.padding = _this.props.innerPadding;
        } else {
          innerDom.style.padding = "";
        }
      }

      var _contentNode = findDOMNode(self.popContent);

      _contentNode.style.height = contentHeight + 'px';
      _this._lastSize = {
        height: _this.windowSize.height,
        width: _this.windowSize.width
      };
    };

    _this.resizePop = function () {
      _this.windowSize = _this.getCommonSize();
      if (_this._lastSize == _this.windowSize) return;

      _this.temp();
    };

    _this._addEvent = function (event_name, callback) {
      _this._removeEvent(event_name, callback);

      if (window.addEventListener) {
        window.addEventListener("on" + event_name, callback, false);
        window.addEventListener(event_name, callback, false);
      } else {
        if (window.attachEvent) {
          window.attachEvent("on" + event_name, callback);
          window.attachEvent(event_name, callback);
          document.body.attachEvent("on" + event_name, callback);
          document.body.attachEvent(event_name, callback);
        }
      }
    };

    _this._removeEvent = function (event_name, callback) {
      if (window.removeEventListener) {
        window.removeEventListener("on" + event_name, callback, false);
        window.removeEventListener(event_name, callback, false);
      } else {
        if (window.detachEvent) {
          window.detachEvent("on" + event_name, callback);
          window.detachEvent(event_name, callback);
          document.body.detachEvent("on" + event_name, callback);
          document.body.detachEvent(event_name, callback);
        }
      }
    };

    _this.handleDragStart = function () {
      var handleDragStart = _this.props.handleDragStart;

      _this.getDragBoundsOffset();

      _this.setState({
        dragStart: true
      });

      handleDragStart && handleDragStart();
    };

    _this.getDragBoundsOffset = function () {
      var node = findDOMNode(_this.PopWindow);
      var offset = node.getBoundingClientRect();
      var translateX = 0,
          translateY = 0;
      var styleStr = node.style.transform;

      if (styleStr) {
        var yStartIndex = styleStr.indexOf(',');
        var yLastIndex = styleStr.indexOf(')');
        var XStartIndex = styleStr.indexOf('(');
        var XLastIndex = styleStr.indexOf(',');
        translateX = parseInt(styleStr.substring(XStartIndex + 1, XLastIndex));
        translateY = parseInt(styleStr.substring(yStartIndex + 1, yLastIndex));
      }

      var leftMenu = 180;

      try {
        leftMenu = window.top.document.getElementById('__iTalent_pop_mask_menu').clientWidth;
      } catch (e) {}

      _this.dragBounds = {
        top: -offset.top + translateY,
        left: -offset.left + translateX,
        bottom: offset.bottom - offset.height - translateY,
        right: offset.right - offset.width - translateX + leftMenu
      };
    };

    _this.handleDraging = function () {
      var handleDraging = _this.props.handleDraging;
      handleDraging && handleDraging();
    };

    _this.handleDragStop = function () {
      var handleDragStop = _this.props.handleDragStop;

      _this.setState({
        dragStart: false
      });

      handleDragStop && handleDragStop();
    };

    _this.windowSize = _this.getCommonSize();
    _this.state = {
      top: -800,
      uid: getUid(),
      getValue: [],
      dragStart: false,
      hasShadow: false,
      customStyle: props && props.customStyle || {},
      subBtnShow: props.subBtnShow != undefined ? props.subBtnShow : true //默认为true
      ,
      subBtnText: props.subBtnText || "确定" //默认为确定
      ,
      cloBtnShow: props.cloBtnShow != undefined ? props.cloBtnShow : true //默认为true
      ,
      cloBtnText: props.cloBtnText || "取消" //默认为取消
      ,
      popType: props && props.popType || 'default' //'lookup'   'default'
      ,
      isLRAlign: props.isLRAlign != undefined ? props.isLRAlign : false //对齐方式 是否是左右 默认是顶对齐
      ,
      subBtnStatus: props && props.subBtnDisabled || false,
      cloBtnStatus: props && props.cloBtnDisabled || false
    };
    _this.onClosePopUp = _this.onClosePopUp.bind(_assertThisInitialized(_this));
    _this.handelCancel = _this.handelCancel.bind(_assertThisInitialized(_this));
    _this.handelEnter = _this.handelEnter.bind(_assertThisInitialized(_this));
    _this.setBtnDisabled = _this.setBtnDisabled.bind(_assertThisInitialized(_this)); // if(navigator.userAgent.toLowerCase().match(/trident/)){
    //   const elements = window.top.document.getElementsByClassName('tu-iframe-main-box')
    //   const iframeContainer = elements[0]
    //   if(iframeContainer){
    //     iframeContainer.style.overflow = 'auto'
    //     iframeContainer.style.position = 'static'
    //     iframeContainer.style.width = '100%'
    //     iframeContainer.className = iframeContainer.className+'-deprecated'
    //   }
    // }

    _this.dragBounds = {
      left: 0,
      top: 0,
      bottom: 0,
      right: 0
    };
    return _this;
  }

  _createClass(CommonPop, [{
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      this.setState({
        subBtnStatus: nextProps.subBtnDisabled
      });
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this2 = this;

      var self = this;
      this.setPopSize = debounce(function () {
        self.resizePop();
      }, 300); //设定commonPop高度

      self.PopWindow && (self.PopWindow.style.left = '50%');
      var mask = document.getElementById(this.state.uid);

      if (this.props.showMask && this.props.bodyMask && !mask) {
        this.container = document.body;
        this.wrapper = document.createElement('div');
        this.wrapper.className = 'modal-pop__mask';
        this.wrapper.id = this.state.uid;
        this.wrapper.style.zIndex = this.props.bodyMaskZIndex || 10000;
        this.wrapper.style.backgroundColor = "#03101A";
        this.wrapper.style.display = 'none';
        this.container.style.overflowY = 'hidden'; // document.addEventListener('scroll',ev => {console.log(ev.target);ev.stopPropagation();ev.preventDefault();return false})

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

      setTimeout(function () {
        var userAgent = navigator.userAgent; // if (userAgent.indexOf("Edge") == -1 || !self.props.isLookUpV2) {

        self.setState({
          top: "50%"
        }); // }

        var dom = document.getElementById(self.state.uid);
        if (dom && dom.style) dom.style.display = "block";
      }, 300);

      self._addEvent('resize', self.setPopSize);

      var selfDom = findDOMNode(this);

      this.resizeListener = function () {
        _this2.popContent.style.height = selfDom.querySelector(".modal-pop__inner").offsetHeight + 'px';

        _this2.temp();
      }; //this.setPopSize();// 这里主动调用setPopSize


      if (this.props.contentResizeListener) {
        setTimeout(function () {
          addResizeListener(selfDom.querySelector(".modal-pop__inner"), _this2.resizeListener);
        }, 3000);
      }

      this.props.onPopLoad && this.props.onPopLoad();
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      this.setPopSize();
    }
  }, {
    key: "componentWillMount",
    value: function componentWillMount() {
      this._removeEvent('resize', this.setPopSize);
    } // 暴露给外部调用内部resize, 用于处理内容高度变化时，通知弹层根据内容调整大小

  }, {
    key: "ref_ResizePop",
    value: function ref_ResizePop() {
      this.temp();
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      var animation = this.props.animation;
      var selfDom = findDOMNode(this);
      if (this.intval) clearInterval(this.intval);

      this._removeEvent('resize', this.setPopSize);

      if (animation) {
        this.loadTimeout && clearTimeout(this.loadTimeout);
        this.loadTimeout = false;
      }

      if (this.props.bodyMask) {
        document.body.style.overflowY = 'auto';
        var dom = document.getElementById(this.state.uid);

        if (dom) {
          this.props.onBodyMaskRemoved && this.props.onBodyMaskRemoved();

          try {
            document.body.removeChild(dom);
          } catch (e) {
            console.warn(e);
          }
        }
      }

      if (this.props.contentResizeListener && this.resizeListener) {
        removeResizeListener(selfDom.querySelector(".modal-pop__inner"), this.resizeListener);
      }
    }
  }, {
    key: "handelEnter",
    //确定
    value: function handelEnter(e) {
      var self = this;
      var _this$props = this.props,
          removeCommonPop = _this$props.removeCommonPop,
          submitPop = _this$props.submitPop,
          animation = _this$props.animation,
          subBtnDisabled = _this$props.subBtnDisabled,
          preSubmit = _this$props.preSubmit;
      if (subBtnDisabled || preSubmit && preSubmit()) return;
      if (this.intval) clearInterval(this.intval);
      if (animation) this.setState({
        top: -800
      });

      if (this.props.bodyMask) {
        var dom = document.getElementById(this.state.uid);

        if (dom) {
          this.props.onBodyMaskRemoved && this.props.onBodyMaskRemoved();

          try {
            document.body.removeChild(dom);
          } catch (e) {
            console.warn(e);
          }
        }
      }

      setTimeout(function () {
        removeCommonPop && removeCommonPop();
        submitPop && submitPop({
          target: e,
          value: self.state.getValue,
          status: "submit"
        }); //传入组件的回调
      }, 300);
    }
  }, {
    key: "onClosePopUp",
    value: function onClosePopUp(e) {
      this.handelCancel(e);
      if (this.intval) clearInterval(this.intval);
      document.removeEventListener('click', this.onClosePopUp);
    }
  }, {
    key: "handleWheel",
    value: function handleWheel(e) {
      this.props.handleWheel && this.props.handleWheel(e);
    } //取消 关闭

  }, {
    key: "handelCancel",
    value: function handelCancel(e) {
      var _this$props2 = this.props,
          removeCommonPop = _this$props2.removeCommonPop,
          closePop = _this$props2.closePop,
          animation = _this$props2.animation,
          cloBtnDisabled = _this$props2.cloBtnDisabled,
          preCancel = _this$props2.preCancel;
      if (cloBtnDisabled || preCancel && preCancel()) return;
      if (animation) this.setState({
        top: -800
      });

      if (this.props.bodyMask) {
        var dom = document.getElementById(this.state.uid);

        if (dom) {
          this.props.onBodyMaskRemoved && this.props.onBodyMaskRemoved();

          try {
            document.body.removeChild(dom);
          } catch (e) {
            console.warn(e);
          }
        }
      }

      setTimeout(function () {
        removeCommonPop && removeCommonPop();
        closePop && closePop({
          target: e,
          "status": "close"
        }); //传入组件的回调
      }, 300);
    }
  }, {
    key: "getWidth",
    value: function getWidth() {
      var _this$props3 = this.props,
          simpleWidth = _this$props3.simpleWidth,
          bigSize = _this$props3.bigSize;
      var maxWidth, minWidth;
      var widthScale = this.state.popType == 'lookup' ? 0.55 : 0.60;
      var bzWidth = this.props.simpleEdition ? simpleWidth : this.windowSize.width * widthScale;

      if (this.state.popType == 'lookup') {
        if (bzWidth < 800) {
          bzWidth = 800;
        }

        if (bzWidth > 1000) {
          bzWidth = 1000;
        }
      } else {
        if (!bigSize) {
          maxWidth = 660;
          minWidth = 600;
        } else {
          maxWidth = 1000;
          minWidth = 700;
        }

        if (bzWidth > maxWidth) {
          bzWidth = maxWidth;
        } else if (bzWidth < minWidth) {
          bzWidth = minWidth;
        }
      }

      return bzWidth;
    }
  }, {
    key: "setBtnDisabled",
    value: function setBtnDisabled(status1, status2) {
      this.setState({
        cloBtnStatus: status1,
        subBtnStatus: status2
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;

      var Header,
          Footer,
          content,
          Mask,
          self = this;
      var width = this.getWidth();
      var marginLeft = Math.ceil(width) / 2 * -1;
      var _this$props4 = this.props,
          hasHeader = _this$props4.hasHeader,
          hasFooter = _this$props4.hasFooter,
          hasRender = _this$props4.hasRender,
          title = _this$props4.title,
          dataType = _this$props4.dataType,
          data = _this$props4.data,
          hidden = _this$props4.hidden,
          animation = _this$props4.animation,
          showMask = _this$props4.showMask,
          bodyMask = _this$props4.bodyMask,
          simpleEdition = _this$props4.simpleEdition,
          simpleWidth = _this$props4.simpleWidth,
          dragDisabled = _this$props4.dragDisabled,
          grid = _this$props4.grid,
          showHeaderClose = _this$props4.showHeaderClose,
          bigSize = _this$props4.bigSize,
          innerPadding = _this$props4.innerPadding;
      var _this$state = this.state,
          customStyle = _this$state.customStyle,
          subBtnShow = _this$state.subBtnShow,
          subBtnText = _this$state.subBtnText,
          cloBtnShow = _this$state.cloBtnShow,
          cloBtnText = _this$state.cloBtnText,
          dragStart = _this$state.dragStart;
      var sty = simpleEdition ? {
        "top": this.state.top,
        width: simpleWidth + "px",
        height: "170px",
        marginTop: "-140px",
        marginLeft: marginLeft - (this.props.menuWidth || 0) + "px"
      } : {
        "top": this.state.top,
        width: width + "px",
        height: "170px",
        marginTop: "-140px",
        marginLeft: marginLeft - (this.props.menuWidth || 0) + "px"
      };
      var isIE = !!window.ActiveXObject || "ActiveXObject" in window;
      var innerStyle = {}; // if (this.state.popType == "lookup") {
      //   innerStyle = {padding: '0 20px'};
      // } else {
      //   innerStyle = this.state.isLRAlign
      //     ? {padding: '0 '+ ( bigSize ? '4%': '20px')}
      //     : (simpleEdition
      //         ? {padding: '0 20px'}
      //         : {width: '520px',margin: '0 auto'}
      //       );
      // }

      if (hasHeader) {
        var headerSty = !dragDisabled ? {
          "cursor": "move"
        } : {};
        Header = React.createElement("div", {
          className: "modal-pop__header",
          style: headerSty
        }, React.createElement("div", {
          className: "modal-pop__title"
        }, decode(title)), showHeaderClose ? React.createElement("div", {
          className: "modal-pop_close icon-close",
          onClick: this.onClosePopUp
        }, React.createElement("div", {
          className: "modal-pop_close-hot"
        }), React.createElement(CloseIcon, null)) : "");
      }

      if (hasFooter) {
        Footer = React.createElement("div", {
          ref: function ref(popFooter) {
            return _this3.popFooter = popFooter;
          },
          className: "btn-group modal-pop__footer"
        }, this.props.footerContent, cloBtnShow ? React.createElement("button", {
          style: {
            "marginRight": subBtnShow ? "" : "20px"
          },
          className: "btn " + (subBtnShow ? 'btn_weaken' : 'btn_default') + (this.state.cloBtnStatus ? 'btn_w_disabled' : ''),
          onClick: this.state.cloBtnStatus ? null : this.onClosePopUp
        }, cloBtnText) : "", subBtnShow ? React.createElement("button", {
          className: "btn btn_default " + (this.state.subBtnStatus ? 'btn_d_disabled' : ''),
          onClick: this.state.subBtnStatus ? null : this.handelEnter
        }, subBtnText) : "");
      }

      if (dataType == "component" && this.props.PopComponent) {
        content = hasRender ? self.props.PopComponent : React.createElement(self.props.PopComponent, _extends({
          data: data
        }, data, {
          setBtnDisabled: this.setBtnDisabled
        }));
      } else {
        content = data;
      }

      if (showMask && !bodyMask) {
        Mask = React.createElement("div", {
          className: "modal-pop__mask",
          id: this.state.uid,
          style: {
            "backgroundColor": "#03101A",
            "display": "none"
          }
        });
      }

      if (hidden) {
        return React.createElement("div", null);
      } else if (!simpleEdition) {
        return React.createElement("div", {
          className: "modal-pop",
          style: customStyle
        }, React.createElement(Draggable, {
          handle: "popdrag",
          bounds: this.dragBounds,
          grid: grid,
          disabled: dragDisabled,
          onStart: this.handleDragStart,
          onDrag: this.handleDraging,
          onStop: this.handleDragStop
        }, React.createElement("div", {
          ref: function ref(PopWindow) {
            _this3.PopWindow = PopWindow;
          },
          className: "modal-pop__container modal-pop_is-open " + (isIE ? ' modal-pop_is-ie ' : '') + (animation && !dragStart ? 'a-modal-pop' : ''),
          style: sty
        }, React.createElement("popdrag", {
          className: "cursor"
        }, Header), React.createElement("div", {
          className: "modal-pop__content",
          style: _objectSpread({
            pointerEvents: dragStart ? "none" : "auto"
          }, this.props.contentStyle),
          ref: function ref(popContent) {
            return _this3.popContent = popContent;
          },
          onScroll: this.handleWheel.bind(this)
        }, React.createElement("div", {
          className: "modal-pop__inner",
          style: {
            padding: innerPadding
          }
        }, dragStart ? React.createElement("div", {
          className: "modal-pop_is-draging"
        }) : null, content)), Footer)), Mask);
      } else {
        return React.createElement("div", {
          className: "modal-pop simple-edition",
          style: customStyle
        }, React.createElement("div", {
          ref: function ref(PopWindow) {
            _this3.PopWindow = PopWindow;
          },
          className: "modal-pop__container modal-pop_is-open " + (animation || animation == undefined ? 'a-modal-pop' : ''),
          style: sty
        }, Header, React.createElement("div", {
          className: "modal-pop__content",
          ref: function ref(popContent) {
            return _this3.popContent = popContent;
          },
          onScroll: this.handleWheel.bind(this)
        }, React.createElement("div", {
          className: "modal-pop__inner",
          style: {
            padding: innerPadding
          }
        }, content)), Footer), Mask);
      }
    }
  }]);

  return CommonPop;
}(Component);

CommonPop.defaultProps = {
  bodyMask: false,
  showMask: true,
  dragDisabled: true,
  grid: [1, 1],
  animation: true,
  contentResizeListener: false,
  showHeaderClose: true,
  bigSize: false,
  innerPadding: '0 5% 0 4%'
};
export { CommonPop as default };