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

beisencloud pc react components

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = undefined;

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 _class, _temp; /* eslint-disable */


var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

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

var _es6PromiseDebounce = require('../es6-promise-debounce');

var _es6PromiseDebounce2 = _interopRequireDefault(_es6PromiseDebounce);

var _uid = require('./uid');

var _uid2 = _interopRequireDefault(_uid);

var _reactDraggable = require('react-draggable');

var _reactDraggable2 = _interopRequireDefault(_reactDraggable);

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

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

var defaultTranslation = {
  confirmText: '确定',
  cancelText: '取消'
};
var CommonPop = (_temp = _class = function (_Component) {
  (0, _inherits3.default)(CommonPop, _Component);

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

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

    _this.getCommonSize = function () {
      var myWidth = void 0,
          myHeight = void 0;
      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.setPopWindowRef = function (ref) {
      _this.PopWindow = ref;
    };

    _this.temp = function () {
      var self = _this;
      var selfDom = void 0;
      if (_this.PopWindow && !_this.PopWindow) {
        return;
      }
      try {
        selfDom = (0, _reactDom.findDOMNode)(_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 = (0, _reactDom.findDOMNode)(self.PopWindow);
      var _nodeSize = {
        width: allWidth,
        height: allHeight
      };
      var _marleft, _marTop;
      _marleft = Math.ceil(_nodeSize.width) / 2 * -1;
      _marTop = Math.ceil(_nodeSize.height) / 2 * -1;
      if (node) {
        node.style.marginLeft = _marleft + 'px';
        node.style.marginTop = _marTop + 'px';
        node.style.height = allHeight + "px";
        node.style.width = allWidth + "px";
      }
      var _contentNode = (0, _reactDom.findDOMNode)(self.popContent);
      _contentNode.style.height = contentHeight + 'px';
      _this._lastSize = {
        height: _this.windowSize.height,
        width: _this.windowSize.width
      };
    };

    _this.getInitialMarginTop = function (allHeight) {
      var _marTop = Math.ceil(allHeight / 2) * -1;
      return navigator.userAgent.indexOf("Edge") > -1 && _this.props.isLookUpV2 ? -(window.innerHeight / 2 + allHeight / 2) + 'px' : _marTop + 'px';
    };

    _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.handleClosePopUp = function () {
      // 在关闭时添加关闭动画
      var animation = _this.props.animation;

      if (animation) _this.PopWindow.classList.add('a-fadeout');
    };

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

      _this.getDragBoundsOffset();
      _this.setState({ dragStart: true });
      _this.isDragged = true;
      handleDragStart && handleDragStart();
    };

    _this.getDragBoundsOffset = function () {
      var node = (0, _reactDom.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));
      }
      _this.dragBounds = {
        top: -offset.top + translateY,
        left: -offset.left + translateX,
        bottom: offset.bottom - offset.height - translateY,
        right: offset.right - offset.width - translateX
      };
    };

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

      _this.setState({ dragStart: false });
      handleDragStop && handleDragStop();
    };

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

      handleDraging && handleDraging();
    };

    _this.windowSize = _this.getCommonSize();
    _this.translation = (0, _extends3.default)({}, defaultTranslation, props.translation);
    _this.state = {
      uid: (0, _uid2.default)(),
      getValue: [],
      dragStart: false,
      hasShadow: false,
      customStyle: props && props.customStyle || {},
      subBtnShow: props.subBtnShow != undefined ? props.subBtnShow : true //默认为true
      , subBtnText: props.subBtnText || _this.translation.confirmText //默认为确定
      , cloBtnShow: props.cloBtnShow != undefined ? props.cloBtnShow : true //默认为true
      , cloBtnText: props.cloBtnText || _this.translation.cancelText //默认为取消
      , 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.dragBounds = {
      left: 0,
      top: 0,
      bottom: 0,
      right: 0

    };
    _this.onClosePopUp = _this.onClosePopUp.bind(_this);
    _this.handelCancel = _this.handelCancel.bind(_this);
    _this.handelEnter = _this.handelEnter.bind(_this);
    _this.setBtnDisabled = _this.setBtnDisabled.bind(_this);
    return _this;
  }

  (0, _createClass3.default)(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 = (0, _es6PromiseDebounce2.default)(function () {
        self.resizePop();
      }, 200);
      //设定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 = 10000;
        this.wrapper.style.backgroundColor = "#03101A";
        this.wrapper.style.display = 'none';
        this.container.appendChild(this.wrapper);
      }

      setTimeout(function () {
        var dom = document.getElementById(self.state.uid);
        if (dom && dom.style) dom.style.display = "block";
      }, 10);
      self._addEvent('resize', self.setPopSize);
      var selfDom = (0, _reactDom.findDOMNode)(this);
      this.resizeListener = function () {
        _this2.popContent.style.height = selfDom.querySelector(".modal-pop__inner").offsetHeight + 'px';
        _this2.temp();
      };
      if (this.props.contentResizeListener) (0, _commonFunc.addResizeListener)(selfDom.querySelector(".modal-pop__inner"), this.resizeListener);
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate() {
      this.setPopSize();
      if (this.props.isClose === true) {
        this.handleClosePopUp();
      }
    }
  }, {
    key: 'componentWillMount',
    value: function componentWillMount() {
      this._removeEvent('resize', this.setPopSize);
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      var animation = this.props.animation;

      var selfDom = (0, _reactDom.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) {
        var dom = document.getElementById(this.state.uid);
        if (dom) document.body.removeChild(dom);
      }

      if (this.props.contentResizeListener && this.resizeListener) {
        (0, _commonFunc.removeResizeListener)(selfDom.querySelector(".modal-pop__inner"), this.resizeListener);
      }

      clearTimeout(this.closeDelayTimer);
    }
  }, {
    key: 'handelEnter',


    //确定
    value: function handelEnter(e) {
      var self = this;
      var _props = this.props,
          removeCommonPop = _props.removeCommonPop,
          submitPop = _props.submitPop,
          animation = _props.animation,
          subBtnDisabled = _props.subBtnDisabled,
          preSubmit = _props.preSubmit;

      if (subBtnDisabled || preSubmit) {
        preSubmit ? preSubmit() : null;
        return;
      }
      if (this.intval) clearInterval(this.intval);
      if (this.props.bodyMask) {
        var dom = document.getElementById(this.state.uid);
        document.body.removeChild(dom);
      }

      this.handleClosePopUp();
      setTimeout(function () {
        removeCommonPop && removeCommonPop();
        submitPop && submitPop({
          target: e,
          value: self.state.getValue,
          status: "submit"
        }); //传入组件的回调
      }, 200);
    }
  }, {
    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 _props2 = this.props,
          removeCommonPop = _props2.removeCommonPop,
          closePop = _props2.closePop,
          animation = _props2.animation,
          cloBtnDisabled = _props2.cloBtnDisabled,
          preCancel = _props2.preCancel;

      if (cloBtnDisabled || preCancel && preCancel()) return;

      this.handleClosePopUp();
      if (this.props.bodyMask) {
        var dom = document.getElementById(this.state.uid);
        if (dom) document.body.removeChild(dom);
      }
      setTimeout(function () {
        removeCommonPop && removeCommonPop();
        closePop && closePop({
          target: e,
          "status": "close"
        }); //传入组件的回调
      }, 200);
    }
  }, {
    key: 'getWidth',
    value: function getWidth() {
      var _props3 = this.props,
          simpleWidth = _props3.simpleWidth,
          bigSize = _props3.bigSize,
          simpleEdition = _props3.simpleEdition;

      var maxWidth = void 0,
          minWidth = void 0;
      var widthScale = this.state.popType == 'lookup' ? 0.55 : 0.60;
      var bzWidth = simpleEdition ? simpleWidth : (this.windowSize.width ? this.windowSize.width : window.screen.availWidth) * 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 (!simpleEdition) {
          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 = void 0,
          Footer = void 0,
          content = void 0,
          Mask = void 0,
          self = this;
      var width = this.getWidth();
      var marginLeft = Math.ceil(width) / 2 * -1;
      var _props4 = this.props,
          hasHeader = _props4.hasHeader,
          hasFooter = _props4.hasFooter,
          hasRender = _props4.hasRender,
          title = _props4.title,
          dataType = _props4.dataType,
          data = _props4.data,
          hidden = _props4.hidden,
          animation = _props4.animation,
          showMask = _props4.showMask,
          bodyMask = _props4.bodyMask,
          simpleEdition = _props4.simpleEdition,
          simpleWidth = _props4.simpleWidth,
          dragDisabled = _props4.dragDisabled,
          grid = _props4.grid,
          showHeaderClose = _props4.showHeaderClose,
          bigSize = _props4.bigSize,
          innerPadding = _props4.innerPadding,
          headerContent = _props4.headerContent;
      var _state = this.state,
          customStyle = _state.customStyle,
          subBtnShow = _state.subBtnShow,
          subBtnText = _state.subBtnText,
          cloBtnShow = _state.cloBtnShow,
          cloBtnText = _state.cloBtnText,
          dragStart = _state.dragStart;


      var sty = simpleEdition ? { "top": "50%", width: simpleWidth + "px", height: "185px", "marginTop": this.getInitialMarginTop(220), "marginLeft": marginLeft + "px" } : { "top": "50%", width: width + "px", height: "185px", "marginTop": this.getInitialMarginTop(220), "marginLeft": marginLeft + "px" };
      var isIE = !!window.ActiveXObject || "ActiveXObject" in window;
      if (hasHeader) {
        if (headerContent) {
          Header = headerContent;
        } else {
          var headerSty = !dragDisabled ? { "cursor": "move" } : {};
          Header = _react2.default.createElement(
            'div',
            { className: 'modal-pop__header', style: headerSty },
            _react2.default.createElement(
              'div',
              { className: 'modal-pop__title' },
              (0, _commonFunc.decode)(title)
            ),
            showHeaderClose ? _react2.default.createElement('div', { className: 'modal-pop_close sys-icon-cus-guanbitanceng1', onClick: this.onClosePopUp }) : ""
          );
        }
      }
      if (hasFooter) {
        Footer = _react2.default.createElement(
          'div',
          { ref: function ref(popFooter) {
              return _this3.popFooter = popFooter;
            }, className: 'btn-group modal-pop__footer' },
          this.props.footerContent,
          cloBtnShow ? _react2.default.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 ? _react2.default.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 : _react2.default.createElement(self.props.PopComponent, (0, _extends3.default)({ data: data }, data, { setBtnDisabled: this.setBtnDisabled }));
      } else {
        content = data;
      }

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

      if (hidden) {
        return _react2.default.createElement('div', null);
      } else if (!simpleEdition) {
        var animationCls = animation && !dragStart && !this.isDragged ? 'a-fadein' : '';
        return _react2.default.createElement(
          'div',
          { className: 'modal-pop', style: customStyle },
          _react2.default.createElement(
            _reactDraggable2.default,
            {
              handle: 'popdrag',
              grid: grid,
              bounds: this.dragBounds,
              disabled: dragDisabled,
              onStart: this.handleDragStart,
              onDrag: this.handleDraging,
              onStop: this.handleDragStop },
            _react2.default.createElement(
              'div',
              { ref: this.setPopWindowRef, className: "modal-pop__container modal-pop_is-open " + (isIE ? ' modal-pop_is-ie ' : '') + animationCls, style: sty },
              _react2.default.createElement(
                'popdrag',
                { className: 'cursor' },
                Header
              ),
              _react2.default.createElement(
                'div',
                { className: 'modal-pop__content', style: { pointerEvents: dragStart ? "none" : "auto" }, ref: function ref(popContent) {
                    return _this3.popContent = popContent;
                  }, onScroll: this.handleWheel.bind(this) },
                _react2.default.createElement(
                  'div',
                  { className: 'modal-pop__inner', style: { padding: innerPadding } },
                  dragStart ? _react2.default.createElement('div', { className: 'modal-pop_is-draging' }) : null,
                  content
                )
              ),
              Footer
            )
          ),
          Mask
        );
      } else {
        var _animationCls = animation || animation == undefined ? 'a-fadein' : '';
        return _react2.default.createElement(
          'div',
          { className: 'modal-pop simple-edition', style: customStyle },
          _react2.default.createElement(
            'div',
            { ref: this.setPopWindowRef, className: "modal-pop__container modal-pop_is-open " + _animationCls, style: sty },
            Header,
            _react2.default.createElement(
              'div',
              { className: 'modal-pop__content', ref: function ref(popContent) {
                  return _this3.popContent = popContent;
                }, onScroll: this.handleWheel.bind(this) },
              _react2.default.createElement(
                'div',
                { className: 'modal-pop__inner', style: { padding: innerPadding } },
                content
              )
            ),
            Footer
          ),
          Mask
        );
      }
    }
  }]);
  return CommonPop;
}(_react.Component), _class.defaultProps = {
  bodyMask: false,
  showMask: true,
  dragDisabled: true,
  grid: [1, 1],
  animation: true,
  contentResizeListener: false,
  showHeaderClose: true,
  bigSize: false,
  innerPadding: '0 5% 0 4%'
}, _temp);
exports.default = CommonPop;
module.exports = exports['default'];