@beisen/ethos/lib/data-grid/Wrapper/index.js

beisencloud pc react components

'use strict';

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

var _extends3 = _interopRequireDefault(_extends2);

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

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

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

var React = require('react');
var assign = require('object-assign');

var Scroller = require('../react-virtual-scroller');


function emptyFn() {}

module.exports = React.createClass({

  displayName: 'ReactDataGrid.Wrapper',

  propTypes: {
    scrollLeft: React.PropTypes.number,
    scrollTop: React.PropTypes.number,
    scrollbarSize: React.PropTypes.number,
    rowHeight: React.PropTypes.any
  },

  getDefaultProps: function getDefaultProps() {
    return {
      scrollLeft: 0,
      scrollTop: 0
    };
  },

  onMount: function onMount(scroller) {
    (this.props.onMount || emptyFn)(this, scroller);
  },
  handleWheelLeft: function handleWheelLeft(e) {
    this.handleWheel(e, "left");
  },
  handleWheelRight: function handleWheelRight(e) {
    this.handleWheel(e, "left");
  },
  componentDidMount: function componentDidMount() {
    this.props.addRightWrapperShadow && this.props.addRightWrapperShadow();
  },
  handleWheel: function handleWheel(e, from) {
    var props = this.props;
    var thisDom = (0, _reactDom.findDOMNode)(this);

    var topP = thisDom.scrollTop;
    var leftP = thisDom.scrollLeft;

    this.oldScroll = topP;

    this.props.onScrollTop && this.props.onScrollTop(e, topP, leftP, from);
  },

  render: function render() {

    var props = this.prepareProps(this.props);
    var groupsCount = 0;
    if (props.groupData) {
      groupsCount = props.groupData.groupsCount;
    }

    var verticalScrollerSize = (props.totalLength + groupsCount) * props.rowHeight; // + loadersSize

    var screenWidth = window.screen.width;

    var emptyTextStyle = (0, _extends3.default)({ marginLeft: 0 - screenWidth / 2, 'display': 'none' }, props.emptyTextStyle);

    var content = props.fixStatus == 'no' && props.empty ? React.createElement(
      'div',
      { className: 'z-empty-text', style: emptyTextStyle },
      props.emptyText
    ) : React.createElement('div', (0, _extends3.default)({}, props.tableProps, { ref: 'table' }));

    //wuzhe----固定列不需要渲染滚动条
    if (this.props.fixStatus == "left") {

      var events = {
        onScroll: this.handleWheelLeft
      };

      return React.createElement(
        'div',
        (0, _extends3.default)({ className: 'fixWrapperLeft', style: { width: props.width + "px", "overflow": "auto" } }, events),
        content
      );
    }
    if (this.props.fixStatus == "right") {
      var width = props.width;
      //修复firefox下有空白bug
      if (!(navigator.userAgent.indexOf("Firefox") > -1) && props.haspadding) {
        width = width - props.haspadding;
      }
      var events = {
        onScroll: this.handleWheelRight //left:(props.left)+"px"

        //wangyongning add；
      };var isIE = !!window.ActiveXObject || "ActiveXObject" in window;
      var isEdge = navigator.userAgent.indexOf('Edge') > 0 ? true : false;
      var right = 0;
      var operator = props.allColumns && props.allColumns.filter(function (item) {
        return item.title == '操作';
      })[0];
      var pop = document.getElementsByClassName("modal-pop");
      if (props.allColumns && props.allColumns.length >= 2) {
        if (this.props.hasScroll) {
          if (isEdge) {
            right = props.allColumns.length >= 2 ? -3 : -this.props.scrollWidth - 1;
          } else if (!isIE) {
            right = -this.props.scrollWidth - 1;
          } else {
            width += operator && operator.width == 50 ? 0 : -3;
          }
        } else {
          if (isIE) {
            width += operator && operator.width == 50 ? 11 : 10;
          }
          if (isEdge) {
            width += operator && operator.width == 50 ? 6 : 5;
          }
        } //如果有滚动条就给它往右平移个滚动条宽度
      } else {
        var scrollWidth = -this.props.scrollWidth - 1;
        var right = !isIE && this.props.hasScroll ? scrollWidth : 0; //如果有滚动条就给它往右平移个滚动条宽度
        var pop = document.getElementsByClassName("modal-pop");
        width = isIE && pop.length == 0 ? 36 : this.props.isLookUpv1 ? 36 : isEdge ? 36 : width;
      }
      var maxWidth = 'none';
      if (isIE && props.allColumns && props.allColumns.length < 2 && operator && operator.width != 50) {
        if ((0, _commonFunc.judgeBrowser)().isIe10) {
          maxWidth = '7px';
        } else {
          maxWidth = '10px';
        }
      }

      width += this.props.hasScroll ? 0 : 3; //如果没有滚动条了把减去的宽度加回来
      width = isIE && !this.props.hasScroll && width < 24 ? 24 : width; //针对ie11浏览器下后面空白的问题修改
      return React.createElement(
        'div',
        (0, _extends3.default)({ className: 'fixWrapperRight', style: { maxWidth: maxWidth, width: width + "px", "overflow": "auto", position: "absolute", zIndex: 2, top: 0, right: right + "px" } }, events),
        content
      );
    }

    return React.createElement(
      Scroller,
      {
        onMount: this.onMount,
        preventDefaultHorizontal: true,

        loadMask: !props.loadMaskOverHeader,
        loading: props.loading,

        scrollbarSize: props.scrollbarSize,

        minVerticalScrollStep: props.rowHeight,
        scrollTop: props.scrollTop,
        scrollLeft: props.scrollLeft,

        scrollHeight: verticalScrollerSize,
        scrollWidth: props.minRowWidth,

        onVerticalScroll: this.onVerticalScroll,
        onHorizontalScroll: this.onHorizontalScroll,
        onScrollTop: props.onScrollTop,
        rollHeight: props.rollHeight,
        nozScroll: props.nozScroll,
        marginLeft: props.marginLeft,
        style: props.style,
        height: props.height,
        tbodyWidth: props.bodyWidth

      },
      content
    );
  },

  onVerticalScrollOverflow: function onVerticalScrollOverflow() {},

  onHorizontalScrollOverflow: function onHorizontalScrollOverflow() {},

  onHorizontalScroll: function onHorizontalScroll(scrollLeft) {
    this.props.onScrollLeft(scrollLeft);
  },

  onVerticalScroll: function onVerticalScroll(pos) {
    this.props.hoverClear();
    this.props.onScrollTop(pos);
  },

  prepareProps: function prepareProps(thisProps) {
    var props = {};

    assign(props, thisProps);

    return props;
  }
});