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

 /* eslint-disable */
import React, {Component} from 'react'
import {findDOMNode} from 'react-dom'
import './styles/all.scss';
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
export default class CommonPop extends Component {
  static defaultProps = {
    bodyMask: false,
    showMask: true,
    dragDisabled: true,
    grid:[1, 1],
    animation: true,
    contentResizeListener: false,
    showHeaderClose: true,
    bigSize: false,
    innerPadding: '0 5% 0 4%'
  }

  constructor(props) {
    super(props);
    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(this);
    this.handelCancel = this.handelCancel.bind(this);
    this.handelEnter = this.handelEnter.bind(this);
    this.setBtnDisabled = this.setBtnDisabled.bind(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,

    }

  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      subBtnStatus: nextProps.subBtnDisabled
    })
  }

  getCommonSize = () => {
    let 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
    }
  }
  componentDidMount() {
    let self = this;
    this.setPopSize = debounce(function() {
      self.resizePop();
    }, 300);
    //设定commonPop高度
    self.PopWindow && (self.PopWindow.style.left = '50%');
    let 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%"
        });
      // }
      let dom = document.getElementById(self.state.uid);
      if (dom && dom.style) dom.style.display = "block";
    },300);
    self._addEvent('resize', self.setPopSize);
    let selfDom = findDOMNode(this);
    this.resizeListener = () => {
      this.popContent.style.height = selfDom.querySelector(".modal-pop__inner").offsetHeight + 'px';
      this.temp();
    }
    //this.setPopSize();// 这里主动调用setPopSize
    if(this.props.contentResizeListener){
      setTimeout(()=>{
        addResizeListener(selfDom.querySelector(".modal-pop__inner"),this.resizeListener)
      },3000)
    }
    this.props.onPopLoad && this.props.onPopLoad();

  }
  componentDidUpdate() {
    this.setPopSize();
  }
  temp = () => {
    let self = this
    let selfDom;
    if (this.PopWindow && !this.PopWindow) {
      return;
    }
    try {
      selfDom = findDOMNode(this);
    } catch (e) {
      return;
    }
    let headHeight = selfDom.querySelector(".modal-pop__header") ? selfDom.querySelector(".modal-pop__header").offsetHeight : 0;
    let footHeight = selfDom.querySelector(".modal-pop__footer") ? selfDom.querySelector(".modal-pop__footer").offsetHeight : 0;
    let contentHeight = selfDom.querySelector(".modal-pop__content").scrollHeight > 0 ? selfDom.querySelector(".modal-pop__content").scrollHeight : selfDom.querySelector(".modal-pop__content").offsetHeight;

    let allWidth = this.getWidth();
    let allHeight = contentHeight + headHeight + footHeight;
    let winHeight = this.windowSize.height;

    let 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;
    }
    let node = findDOMNode(self.PopWindow);
    let _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%";
    //   }
    // }
    let 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
    }
  }
  resizePop = () => {
     this.windowSize = this.getCommonSize();
     if (this._lastSize == this.windowSize) return;
     this.temp();
  }
  componentWillMount() {
    this._removeEvent('resize', this.setPopSize);
  }

  // 暴露给外部调用内部resize, 用于处理内容高度变化时，通知弹层根据内容调整大小
  ref_ResizePop() {
    this.temp();
  }

  componentWillUnmount() {
    const {animation} = this.props;
    let 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'
      let 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);
    }
  }

  _addEvent = (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)
      }
    }
  }

  _removeEvent = (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)
      }
    }
  }

  //确定
  handelEnter(e) {
    let self = this;
    const {removeCommonPop, submitPop, animation, subBtnDisabled, preSubmit} = this.props;
    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);
  }

  onClosePopUp(e) {
    this.handelCancel(e);
    if(this.intval) clearInterval(this.intval);
    document.removeEventListener('click', this.onClosePopUp);
  }

  handleWheel(e) {
    this.props.handleWheel && this.props.handleWheel(e);
  }
  //取消 关闭
  handelCancel(e) {
    const {removeCommonPop, closePop, animation, cloBtnDisabled, preCancel} = this.props;
    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);
  }

  getWidth() {
      const { simpleWidth, bigSize } = this.props;
      let maxWidth, minWidth;
      let widthScale = this.state.popType == 'lookup' ? 0.55 : 0.60;
      let 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;
  }
  setBtnDisabled(status1,status2) {
    this.setState({cloBtnStatus: status1, subBtnStatus: status2})
  }

  handleDragStart = () => {
    const { handleDragStart } = this.props;
    this.getDragBoundsOffset()
    this.setState({dragStart: true})
    handleDragStart && handleDragStart();
  }


  getDragBoundsOffset = () => {
    let node = findDOMNode(this.PopWindow);
    let offset = node.getBoundingClientRect()
    let translateX = 0, translateY = 0;
    let styleStr = node.style.transform
    if(styleStr){
      let yStartIndex =  styleStr.indexOf(',')
      let yLastIndex =  styleStr.indexOf(')')
      let XStartIndex =  styleStr.indexOf('(')
      let XLastIndex =  styleStr.indexOf(',')
      translateX = parseInt(styleStr.substring(XStartIndex + 1, XLastIndex))
      translateY = parseInt(styleStr.substring(yStartIndex + 1, yLastIndex))
    }
    let 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
    }
  }


  handleDraging = () => {
    const { handleDraging } = this.props;
    handleDraging && handleDraging()
  }




  handleDragStop = () => {
    const { handleDragStop } = this.props;
    this.setState({dragStart: false})
    handleDragStop && handleDragStop();
  }










  render() {
    let Header, Footer, content,Mask , self = this;
    let width = this.getWidth();
    let marginLeft = Math.ceil(width) / 2 * -1;
    const {hasHeader, hasFooter, hasRender, title, dataType, data, hidden,
      animation,showMask, bodyMask, simpleEdition, simpleWidth, dragDisabled, grid,
       showHeaderClose, bigSize, innerPadding} = this.props;
    const {customStyle, subBtnShow, subBtnText, cloBtnShow, cloBtnText, dragStart} = this.state;
    let 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"};
    let isIE = !!window.ActiveXObject || "ActiveXObject" in window;
    let 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) {
      let headerSty = !dragDisabled ? {"cursor": "move"}:{}
      Header = <div className="modal-pop__header" style={headerSty}>
                  <div className="modal-pop__title">
                    {decode(title)}
                  </div>
                  {
                    showHeaderClose
                      ? <div className="modal-pop_close icon-close" onClick={this.onClosePopUp}>
                         <div className = 'modal-pop_close-hot'></div>
                          <CloseIcon />
                        </div>
                      : ""
                  }
                </div>
    }
    if (hasFooter) {
      Footer = <div ref={popFooter => this.popFooter=popFooter} className="btn-group modal-pop__footer">
                {this.props.footerContent}
                {
                  cloBtnShow
                    ? <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}
                      </button>
                    : ""
                }
                {
                  subBtnShow
                    ? <button
                        className={"btn btn_default " + (this.state.subBtnStatus ? 'btn_d_disabled' : '')}
                        onClick={this.state.subBtnStatus ? null : this.handelEnter}
                      >
                        {subBtnText}
                      </button>
                    : ""
                }
               </div>
    }

    if (dataType == "component" && this.props.PopComponent) {
      content = hasRender ? self.props.PopComponent : <self.props.PopComponent data={data} {...data} setBtnDisabled={this.setBtnDisabled} />
    } else {
      content = data
    }

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

    if (hidden) {
      return <div></div>;
    } else if (!simpleEdition) {
      return (
        <div className="modal-pop" style={customStyle}   >
          <Draggable
            handle="popdrag"
            bounds={this.dragBounds}

            grid={grid}
            disabled={dragDisabled}
            onStart={this.handleDragStart}
            onDrag={this.handleDraging}

            onStop={this.handleDragStop}>

            <div ref={PopWindow => {this.PopWindow=PopWindow}} className={"modal-pop__container modal-pop_is-open "+(isIE ? ' modal-pop_is-ie ' : '')+(animation && !dragStart ?'a-modal-pop':'')} style={sty}>
              <popdrag className="cursor">
                {Header}
              </popdrag>
              <div className="modal-pop__content" style={{pointerEvents:dragStart ? "none": "auto", ...this.props.contentStyle}} ref={popContent => this.popContent = popContent} onScroll={this.handleWheel.bind(this)}>
                <div className="modal-pop__inner" style={{padding:innerPadding}}>
                  {
                    dragStart
                      ? <div className="modal-pop_is-draging"></div>
                      : null
                  }
                  {content}
                </div>
              </div>
              {Footer}
            </div>
          </Draggable>
          {Mask}
        </div>
      )
    }else{
      return (
        <div className="modal-pop simple-edition" style={customStyle}>
          <div ref={PopWindow => {this.PopWindow=PopWindow}} className={"modal-pop__container modal-pop_is-open "+(animation || animation == undefined ?'a-modal-pop':'')} style={sty}>
            {Header}
            <div className="modal-pop__content" ref={popContent => this.popContent = popContent} onScroll={this.handleWheel.bind(this)}>
              <div className="modal-pop__inner" style={{padding:innerPadding}}>
                {content}
              </div>
            </div>
            {Footer}
          </div>
          {Mask}
        </div>
      )
    }
  }
}