@beisen/ethos/lib/data-grid/react-virtual-scroller.js

beisencloud pc react components

'use strict';

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

var _extends3 = _interopRequireDefault(_extends2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

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

var PropTypes = require('./PropTypes');
var assign = require('object-assign');
var DragHelper = require('drag-helper');
var normalize = require('react-style-normalizer');
var hasTouch = require('has-touch');

var preventDefault = function preventDefault(event) {
  return event && event.preventDefault();
};
var signum = function signum(x) {
  return x < 0 ? -1 : 1;
};
var emptyFn = function emptyFn() {};
var ABS = Math.abs;

var horizontalScrollbarStyle = {};

var IS_MAC = global && global.navigator && global.navigator.appVersion && global.navigator.appVersion.indexOf("Mac") != -1;
var IS_FIREFOX = global && global.navigator && global.navigator.userAgent && !!~global.navigator.userAgent.toLowerCase().indexOf('firefox');

if (IS_MAC) {
  horizontalScrollbarStyle.position = 'absolute';
  horizontalScrollbarStyle.height = 20;
}

var PT = _react2.default.PropTypes;
var DISPLAY_NAME = 'Scroller';

var ON_OVERFLOW_NAMES = {
  vertical: 'onVerticalScrollOverflow',
  horizontal: 'onHorizontalScrollOverflow'
};

var ON_SCROLL_NAMES = {
  vertical: 'onVerticalScroll',
  horizontal: 'onHorizontalScroll'

  /**
   * The scroller can have a load mask (loadMask prop is true by default),
   * you just need to specify loading=true to see it in action
   *
   * <Scroller loading={true} />
   *
   * If you don't want a load mask, specify
   *
   * <Scroller loadMask={false} />
   *
   * Or if you want to customize the loadMask factory, specify
   *
   * function mask(props) { return aMaskFactory(props) }
   * <Scroller loading={true} loadMask={mask}
   *
   */
};module.exports = _react2.default.createClass({

  displayName: 'Scroller',
  propTypes: {
    loadMask: PT.oneOfType([PT.bool, PT.func]),

    loading: PT.bool,
    normalizeStyles: PT.bool,

    scrollTop: PT.number,
    scrollLeft: PT.number,

    scrollWidth: PT.number.isRequired,
    scrollHeight: PT.number.isRequired,

    height: PT.number,
    width: PT.number,

    minScrollStep: PT.number,
    minHorizontalScrollStep: PT.number,
    minVerticalScrollStep: PT.number,

    virtualRendering: PT.oneOf([true]),

    preventDefaultVertical: PT.bool,
    preventDefaultHorizontal: PT.bool
  },
  defaultProps: {
    'data-display-name': DISPLAY_NAME,
    loadMask: true,

    virtualRendering: true, //FOR NOW, only true is supported
    scrollbarSize: 20,

    scrollTop: 0,
    scrollLeft: 0,

    minScrollStep: 10,

    minHorizontalScrollStep: IS_FIREFOX ? 40 : 1,

    //since FF goes back in browser history on scroll too soon
    //chrome and others also do this, but the normal preventDefault in syncScrollbar fn prevents this
    preventDefaultHorizontal: IS_FIREFOX
  },

  render: function render() {
    var props = this.p = this.prepareProps(this.props);

    var events = {};
    // 在window 8 以上版本的时候会认为有touch 事件这样就会走touch方法 但是我们没有做兼容性处理
    events.onScroll = this.handleWheel;

    var zTableLen = 0;
    if (document.getElementsByClassName('z-table')[0]) {
      var zTable = document.getElementsByClassName('z-table')[0].getAttribute("style");
      zTableLen = zTable ? Math.abs(parseInt(zTable.split(',')[0].split('(')[1])) : 0;
    }
    /*
      zhongjiahao  修正当数据列表无数据时 暂无数据的位置
     */
    var _tempStyle = props.children.props.className == 'z-empty-text' ? {} : { minWidth: props.scrollWidth };
    var content = _react2.default.createElement('div', { className: 'z-content-wrapper-fix', style: _tempStyle,
      children: props.children });

    // wuzhe----为兼容ie9，将DOM结构变为下方的样子  {horizontalScrollbar}
    var sty = {};
    if (props.nozScroll) {
      sty['overflowY'] = "hidden";
    }

    var allSty = {};
    allSty["width"] = props.tbodyWidth + "px";
    allSty["overflow"] = "auto";
    allSty["overflowX"] = "hidden";
    allSty["background"] = props.style.backgroundColor;
    if (props.marginLeft) {
      allSty["marginLeft"] = props.marginLeft + "px";
      allSty["position"] = "absolute";
      allSty["zIndex"] = 1;
      allSty["top"] = "0px";
    }

    return _react2.default.createElement(
      'div',
      (0, _extends3.default)({ className: 'TableWrapperMain', style: allSty }, events),
      content
    );
  },

  handleWheel: function handleWheel(e) {

    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, "main");
  },

  componentWillReceiveProps: function componentWillReceiveProps() {},

  componentDidMount: function componentDidMount() {
    (this.props.onMount || emptyFn)(this);
  },

  componentDidUpdate: function componentDidUpdate() {},

  componentWillUnmount: function componentWillUnmount() {},

  ////////////////////////////////////////////////
  //
  // PREPARE PROPS METHODS
  //
  ////////////////////////////////////////////////
  prepareProps: function prepareProps(thisProps) {
    var props = assign({}, thisProps);

    //diff
    props.className = this.props.className || "z-scroller";
    props.style = this.prepareStyle(props);

    return props;
  },

  prepareStyle: function prepareStyle(props) {
    var style = assign({}, props.style);

    if (props.height != null) {
      style.height = props.height;
    }

    if (props.width != null) {
      style.width = props.width;
    }

    if (props.normalizeStyles) {
      style = normalize(style);
    }

    return style;
  }
});