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

beisencloud pc react components

'use strict';

var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

var _typeof2 = require('babel-runtime/helpers/typeof');

var _typeof3 = _interopRequireDefault(_typeof2);

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

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _reactDom2 = _interopRequireDefault(_reactDom);

var _debounce = require('debounce');

var _debounce2 = _interopRequireDefault(_debounce);

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

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

var CommonMount = function CommonMount(params) {
  var _this = this;

  (0, _classCallCheck3.default)(this, CommonMount);

  this.createDom = function () {
    if (document.getElementById(_this.containerId)) return;
    var oDiv = document.createElement('div');
    oDiv.id = _this.containerId;
    document.body.appendChild(oDiv);
  };

  this.renderDom = function (id, Component, tigger, positionInfo) {
    var isInput = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
    var deviationLeft = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
    var directionLeft = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
    var resizeTime = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : 100;
    var inputHeight = arguments[8];
    var z_Index = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : undefined;

    _this.id = id;
    var self = _this;
    self.positionInfo = positionInfo;
    deviationLeft = typeof deviationLeft === 'number' ? deviationLeft : 0;
    window.onresize = (0, _debounce2.default)(function () {
      var ele = document.getElementById(id);
      if (ele && ele.style) {
        ele.style.top = self.getPosition(self.positionInfo, isInput, deviationLeft, directionLeft, resizeTime, inputHeight, z_Index).top + 'px';
        ele.style.left = self.getPosition(self.positionInfo, isInput, deviationLeft, directionLeft, resizeTime, inputHeight, z_Index).left + 'px';
      }
    }, resizeTime);

    var offset = _this.getPosition(positionInfo, isInput, deviationLeft, directionLeft, resizeTime, inputHeight, z_Index);
    window.commonMountOffset = offset;
    var targetDom = document.getElementById(_this.containerId);
    if (!targetDom) {
      _this.createDom();
    }
    if ((typeof Component === 'undefined' ? 'undefined' : (0, _typeof3.default)(Component)) == 'object') {
      _reactDom2.default.render(_react2.default.createElement(
        'div',
        { className: id, id: id, style: offset },
        Component
      ), document.getElementById(_this.containerId));
    }
    if (typeof Component == 'function') {
      _reactDom2.default.render(_react2.default.createElement(
        'div',
        { className: id, id: id, style: offset },
        _react2.default.createElement(Component, null)
      ), document.getElementById(_this.containerId));
    }
    // 是否滚动跟随
    if (_this.follow) {
      var node = document.getElementById(id);
      _this.autoFollowScroll(tigger, node, positionInfo, isInput, deviationLeft, directionLeft, resizeTime, inputHeight, z_Index);
    }

    //挂载组件高度增高时，挂载位置适应变化
    _this.resizeListener = function () {
      if (!document.getElementById(id)) return;
      var height = document.getElementById(id).offsetHeight;
      var top = document.getElementById(id).offsetTop;
      if (height + top > window.innerHeight) {
        top -= height + top - window.innerHeight;
        document.getElementById(id).style.top = top + 'px';
      } else {
        if (window.commonMountOffset && window.commonMountOffset.top > top) {
          document.getElementById(id).style.top = window.commonMountOffset.top + 'px';
        }
      }
    };
    if (document.getElementById(id)) {
      (0, _commonFunc.addResizeListener)(document.getElementById(id), _this.resizeListener);
    }
  };

  this.autoFollowScroll = function (tigger, follower, positionInfo, isInput, deviationLeft, directionLeft, resizeTime, inputHeight, z_Index) {
    if (!tigger || !follower) {
      return false;
    }
    // let lastPosition = 0;
    var self = _this;
    _this.autoFollow = (0, _debounce2.default)(function (e) {
      //如果监听到滚动的target是挂载的话则跳出
      var dom = document.getElementById(self.containerId);
      if (dom && dom.contains(e.target) || dom == e.target) return;
      var offset = self.getPosition(positionInfo, isInput, deviationLeft, directionLeft, resizeTime, inputHeight, z_Index);
      follower.style.top = offset.top + 'px';
    }, 0);
    window.removeEventListener("scroll", _this.autoFollow, true);
    window.addEventListener('scroll', _this.autoFollow, true);
  };

  this.unmountBox = function () {
    if (_this.resizeListeners && document.getElementById(_this.id)) {
      (0, _commonFunc.removeResizeListener)(document.getElementById(_this.id), _this.windowResizeListener);
    };
    window.removeEventListener("scroll", _this.autoFollow, true);
    window.onresize = null;
    var targetDom = _this.containerId && document.getElementById(_this.containerId);
    if (targetDom) {
      _reactDom2.default.unmountComponentAtNode(targetDom);
      document.body.removeChild(targetDom);
    }
  };

  this.getPosition = function (positionInfo, isInput, deviationLeft, directionLeft, resizeTime, inputHeight, z_Index) {

    // target 挂载节点
    // mount  挂载元素宽高 {width: '', height: ''}
    // tHeight 挂载节点偏移量，默认为0，可不传
    var _positionInfo = (0, _slicedToArray3.default)(positionInfo, 4),
        target = _positionInfo[0],
        mount = _positionInfo[1],
        tHeight = _positionInfo[2],
        container = _positionInfo[3];

    var offset = {};
    var _container = container === undefined ? window : container;
    var _tHeight = tHeight === undefined ? 0 : tHeight;
    // dom_offset 挂载节点相对屏幕的位置 宽高
    var dom_offset = target.getBoundingClientRect();
    // 挂载容器的 宽高 相对屏幕位置
    var container_bottom = _container == window ? _container.innerHeight : _container.getBoundingClientRect().bottom;
    var container_right = _container == window ? _container.innerWidth : _container.getBoundingClientRect().right;
    // input距离可视区域底距离
    var _tempTop = container_bottom - (dom_offset.top + dom_offset.height);
    var _tempBottom = dom_offset.top; //input上边缘距离可视区域顶距离
    var _tempRight = container_right - dom_offset.left; //右边缘到可视区域右边缘距离
    var mountH = parseFloat(mount.height);
    var mountW = parseFloat(mount.width);
    var zIndex_temp = void 0,
        iHeight = void 0;
    iHeight = isInput ? 0 : inputHeight ? inputHeight : 48;
    // 判断并计算左右位置
    if (_tempRight > mountW) {
      offset.left = dom_offset.left;
      if (dom_offset.left <= 0) offset.left = 0;
    } else if (dom_offset.left > mountW) {
      offset.left = dom_offset.left - mountW + target.clientWidth;
      if (dom_offset.left + target.clientWidth > container_right) offset.left = container_right - mountW;
    } else {
      offset.left = container_right - mountW;
    }
    //自定义水平居左居右
    if (directionLeft) offset.left = dom_offset.left - mountW + target.clientWidth;
    // 判断并计算上下位置
    if (_tempTop > mountH) {
      //下
      offset.top = dom_offset.top + dom_offset.height;
    } else if (_tempBottom > mountH) {
      //上
      offset.top = dom_offset.bottom - mountH - 2 - _tHeight - iHeight;
      if (offset.top < 0) {
        //防止弹层超出可视区域，使其在边界内展示，2是为了防止被阴影挡住
        var difference = window.innerHeight - mountH;
        if (difference > 0) {
          offset.top = offset.top + difference > 0 ? 2 : offset.top + difference;
        }
      }
    } else {
      offset.top = container_bottom - mountH;
    }
    //zyt
    if (z_Index == undefined) {
      zIndex_temp = '999999';
    } else {
      zIndex_temp = z_Index;
    }
    return {
      width: mount.width,
      zIndex: zIndex_temp,
      left: offset.left - deviationLeft,
      top: offset.top,
      position: _this.fixed ? 'fixed' : 'absolute'
    };
  };

  // 容器ID
  this.containerId = params.containerId;
  // 是否滚动跟随，默认true
  this.follow = params.follow;
  // 定位：fixed，false时为absolute
  this.fixed = typeof params.fixed == 'boolean' ? params.fixed : true;
  this.createDom();
}
// 创建挂载容器


// 渲染挂载节点


// 滚动跟随

// 卸载

// 获取位置信息
;

module.exports = CommonMount;