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

beisencloud pc react components

'use strict';

var _stringify = require('babel-runtime/core-js/json/stringify');

var _stringify2 = _interopRequireDefault(_stringify);

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

var _extends3 = _interopRequireDefault(_extends2);

var _keys = require('babel-runtime/core-js/object/keys');

var _keys2 = _interopRequireDefault(_keys);

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

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

var _isEqual = require('lodash/isEqual');

var _isEqual2 = _interopRequireDefault(_isEqual);

var _index = require('./index.scss');

var _index2 = _interopRequireDefault(_index);

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

var React = require('react');
var ReactDOM = require('react-dom');
var assign = require('object-assign');
var Region = require('region');
var Column = require('./models/Column');
var PropTypes = require('./PropTypes');
var Wrapper = require('./Wrapper');
var Header = require('./Header');
var WrapperFactory = React.createFactory(Wrapper);
var HeaderFactory = React.createFactory(Header);
var ResizeProxy = require('./ResizeProxy');
var findIndexByName = require('./utils/findIndexByName');
var group = require('./utils/group');
var slice = require('./render/slice');
var _getTableProps = require('./render/getTableProps');
var getGroupedRows = require('./render/getGroupedRows');
var renderMenu = require('./render/renderMenu');


var isArray = Array.isArray;

var defaultTranslation = {
  totalCountText: '已选中{0}条，共{1}条',
  countText: '共{0}条',
  contentEmpty: '加载内容为空'
};

function getScrollBarWidth() {
  var inner = document.createElement('p');
  inner.style.width = "100%";
  inner.style.height = "200px";

  var outer = document.createElement('div');
  outer.style.position = "absolute";
  outer.style.top = "0px";
  outer.style.left = "0px";
  outer.style.visibility = "hidden";
  outer.style.width = "200px";
  outer.style.height = "150px";
  outer.style.overflow = "hidden";
  outer.className = "z-content-wrapper";
  outer.appendChild(inner);

  document.body.appendChild(outer);

  var w1 = inner.offsetWidth;
  outer.style.overflow = 'scroll';
  var w2 = inner.offsetWidth;
  if (w1 == w2) w2 = outer.clientWidth;

  document.body.removeChild(outer);

  return w1 - w2;
};

function clamp(value, min, max) {
  return value < min ? min : value > max ? max : value;
}

function emptyFn() {}

function getVisibleCount(props, state) {
  return getVisibleColumns(props, state).length;
}

function getVisibleColumns(props, state) {

  var visibility = state.visibility;
  var visibleColumns = props.columns.filter(function (c) {
    var name = c.name;
    var visible = c.visible;

    if (name in visibility) {
      visible = !!visibility[name];
    }

    return visible;
  });

  return visibleColumns;
}

function findColumn(columns, column) {

  var name = typeof column === 'string' ? column : column.name;
  var index = findIndexByName(columns, name);

  if (~index) {
    return {
      column: columns[index],
      index: index
    };
  }
}

module.exports = React.createClass({

  displayName: 'ReactDataGrid',
  translatY: 0,
  mixins: [require('./RowSelect'), require('./ColumnFilter')],
  oldScrollTop: 0,
  //wangyongning add
  hasScrollbar: false,
  propTypes: {
    loading: React.PropTypes.bool,
    virtualRendering: React.PropTypes.bool,

    //specify false if you don't want any column to be resizable
    resizableColumns: React.PropTypes.bool,
    filterable: React.PropTypes.bool,

    //specify false if you don't want column menus to be displayed
    withColumnMenu: React.PropTypes.bool,
    cellEllipsis: React.PropTypes.bool,
    sortable: React.PropTypes.bool,
    loadMaskOverHeader: React.PropTypes.bool,
    idProperty: React.PropTypes.string.isRequired,

    //you can customize the column menu by specifying a factory
    columnMenuFactory: React.PropTypes.func,
    onDataSourceResponse: React.PropTypes.func,
    onDataSourceSuccess: React.PropTypes.func,
    onDataSourceError: React.PropTypes.func,

    /**
     * @cfg {Number/String} columnMinWidth=50
     */
    columnMinWidth: PropTypes.numeric,
    scrollBy: PropTypes.numeric,
    rowHeight: PropTypes.numeric,
    sortInfo: PropTypes.sortInfo,
    columns: PropTypes.column,

    data: function data(props, name) {
      var value = props[name];
      if (isArray(value)) {
        return new Error('We are deprecating the "data" array prop. Use "dataSource" instead! It can either be an array (for local data) or a remote data source (string url, promise or function)');
      }
    }
  },
  getScrollTop: function getScrollTop() {
    var thisDom = (0, _reactDom.findDOMNode)(this);

    var MianBodyDom = thisDom.querySelector('.tableWrapper');
    var scrollTop = MianBodyDom.scrollTop;

    return scrollTop;
  },
  getDefaultProps: require('./getDefaultProps'),

  delectScrollTarget: function delectScrollTarget(e) {
    if (this.scrollTarget !== e.currentTarget) {
      this.scrollTarget = e.currntTarget;
    }
  },
  componentDidMount: function componentDidMount() {
    this.hasScroll();
    //wuzhe----判断是否传入了外层div的宽度
    if (this.props.outerWidth == undefined) {
      console.warn("'outerWidth' is required, or the table won't appear correctly. Read readme for more details.");
    }
    window.addEventListener('click', this.windowClickListener = this.onWindowClick);
    this.addRightWrapperShadow();
  },
  addRightWrapperShadow: function addRightWrapperShadow() {
    var fixedRightData = this.props.columns.filter(function (item) {
      return item.fixed == 'right' && item.name != 'operator';
    });
    if (fixedRightData.length > 0) {
      var thisDom = (0, _reactDom.findDOMNode)(this);
      var rightWrapper = thisDom.querySelector(".fixWrapperRight");
      var rightHead = thisDom.querySelector(".fixHeadRight");
      var scrollLeftDiv = thisDom.querySelector(".verticalScrollbarOuter");
      var isIE = !!window.ActiveXObject || "ActiveXObject" in window;
      var scrollWidth;
      if (scrollLeftDiv) {
        scrollWidth = isIE ? scrollLeftDiv.offsetWidth : scrollLeftDiv.clientWidth;
      }
      if (rightHead && scrollLeftDiv && rightWrapper && scrollLeftDiv.scrollLeft != scrollLeftDiv.scrollWidth - scrollWidth + (isIE ? 17 : 0)) {
        rightWrapper.style.boxShadow = "0 -2px 8px 0 rgba(0, 0, 0, 0.1)";
        rightHead.style.boxShadow = "-2px -2px 8px 0px rgba(0, 0, 0, 0.1)";
      } else if (rightHead && scrollLeftDiv && rightWrapper && scrollLeftDiv.scrollLeft == scrollLeftDiv.scrollWidth - scrollWidth + (isIE ? 17 : 0)) {
        rightWrapper.style.boxShadow = "";
        rightHead.style.boxShadow = "";
      }
    }
  },
  componentDidUpdate: function componentDidUpdate() {
    var _this = this;

    //重置后减去下方滚动条的高度，否则又出现竖向滚动条
    var domNode = (0, _reactDom.findDOMNode)(this);
    var rightMain = domNode.querySelector('.verticalScrollbarOuter');
    var oTableWrapper = this.refs.tableWrapper;
    if (rightMain && oTableWrapper) oTableWrapper.style.height = this.props.outHeight - 31 - 10 - 10 - 10 - 12 + 'px';

    this.hasScroll();
    if (this.props.scrollTop) {
      this.handleScrollTop(null, this.props.scrollTop, null, null);
    }

    if (this.scrollLeft) {
      this.scrollBarMoveRight();
    }
    //获取最新的款度 然后更新款度

    this.addRightWrapperShadow();

    if (!this.columnsWith) {
      this.updateAllWidth();
    }
    // 当为edge时，手动更新高度触发浏览器重绘，防止在edge下不显示滑块的问题
    if (navigator.userAgent.indexOf("Edge") !== -1 && rightMain && !this.edgeScrollBarFixTimer) {
      rightMain.style.height = this.scrollbarHeight + 1 + 'px';
      this.edgeScrollBarFixTimer = setTimeout(function () {
        rightMain.style.height = _this.scrollbarHeight + 'px';
      }, 10);
    }
  },
  findScrollWidth: function findScrollWidth(dom) {
    var self = this;
    var clength = dom.childElementCount;
    var thisScrollwidth = dom.scrollWidth;
    var tempscrollwidth = 0;
    if (dom.className.indexOf('z-content') != -1) {
      tempscrollwidth = 20;
    }

    if (clength > 0) {
      for (var i = 0; i < clength; i++) {
        var tep = dom.children[i];
        var childaw = self.findScrollWidth(tep);
        if (childaw > tep.scrollWidth) {
          tempscrollwidth = tempscrollwidth + childaw;
        } else {
          tempscrollwidth = tempscrollwidth + tep.scrollWidth;
        }
      }
    } else {
      tempscrollwidth = thisScrollwidth;
    }
    return tempscrollwidth;
  },
  updateAllWidth: function updateAllWidth() {

    var self = this;
    var thisDom = (0, _reactDom.findDOMNode)(this);
    thisDom.querySelectorAll('div[name="id"]');
    var props = assign({}, this.props);
    var singleWidth = props.singleWordWidth;
    var data = props.dataSource;
    var columns = props.columns;
    var hasDom = false;

    columns.map(function (column, index) {
      var columnName = column.name;
      var width = column.width;
      var textWidth = 0;
      if (column.fixed || !column.fixedWidth || column.dropWidth) {
        var tempArray = thisDom.querySelectorAll('div[name="' + columnName + '"]');
        if (tempArray.length > 0) {
          hasDom = true;
        }
        for (var i = tempArray.length - 1; i >= 0; i--) {
          var tempCell = tempArray[i];
          var tempW = tempCell.clientWidth;

          if (textWidth < tempW) {
            textWidth = tempW;
          }
        };

        textWidth = textWidth > 179 ? 179 : textWidth;
        column['width'] = textWidth + 0.001; //为了让表格宽度更新
      }
    });
    if (hasDom) {
      this.columnsWith = true;
      this.setState(this.state);
    }
  },
  componentWillUnmount: function componentWillUnmount() {
    this.scroller = null;
    // 清除edge触发重绘的定时器
    clearTimeout(this.edgeScrollBarFixTimer);
    window.removeEventListener('click', this.windowClickListener);
  },

  onWindowClick: function onWindowClick(event) {
    if (this.state.menu) {
      this.setState({
        menuColumn: null,
        menu: null
      });
    }
  },

  //juan add处理dataScorce，加isFold/isHover/shadowClass
  handleSourceData: function handleSourceData(data) {
    var expandAble = this.props.expandAble;

    if (!data || !isArray(data)) {
      return;
    }
    data.map(function (item, index) {
      item.isFold = expandAble ? false : true; //展开折叠状态 isFold:true收起
      item.isHover = false; //鼠标是否滑过
      item.hasShadowClass = false; //是否加阴影
    });
    return data;
  },

  getInitialState: function getInitialState() {
    var props = this.props;
    var defaultSelected = props.defaultSelected;
    var filterData = this.handleSourceData(props.dataSource);

    return {
      startIndex: 0,
      scrollLeft: 0,
      scrollTop: 0,
      menuColumn: null,
      defaultSelected: defaultSelected,
      visibility: {},
      defaultPageSize: props.defaultPageSize,
      defaultPage: props.defaultPage,
      //juan add
      filterData: filterData,
      expandShadowClass: {},
      //吴喆
      forRender: 0,
      hoverIndex: -1,
      inDataGrid: false,
      //wangyongning add
      showMianShadow: false
    };
  },

  updateStartIndex: function updateStartIndex() {
    this.handleScrollTop();
  },

  handleScrollLeft: function handleScrollLeft(scrollLeft) {
    this.setState({
      scrollLeft: scrollLeft,
      menuColumn: null
    });
  },

  handleWheel: function handleWheel(e) {
    var thisDom = (0, _reactDom.findDOMNode)(this);
    var scrollLeftDiv = thisDom.querySelector(".verticalScrollbarOuter");
    var scrollLeft = scrollLeftDiv && scrollLeftDiv.scrollLeft;

    var mainHeader = thisDom.querySelector(".z-hader-content");
    if (mainHeader) mainHeader.scrollLeft = scrollLeft;

    var mainContent = thisDom.querySelector(".TableWrapperMain");
    if (mainContent) mainContent.scrollLeft = scrollLeft;

    var rightMain = thisDom.querySelector('.fixWrapperRight');
    var leftMain = thisDom.querySelector('.fixWrapperLeft');
    var loadingDom = thisDom.querySelector('.loading');

    var headerContent = thisDom.querySelector('.z-header-wrapper');
    if (rightMain) {
      var rightHead = headerContent.querySelector(".fixHeadRight");
      var classHeadNames = rightHead.className;
      var rightClassBody = rightMain.querySelector('.z-table');
      var classNames = rightClassBody.className;
      if (scrollLeft == 0) {
        if (classNames.indexOf("fixRightShadow") == -1 && this.props.dataSource.length > 0) {
          classNames += " fixRightShadow";
          classHeadNames += " fixRightShadow";
          rightClassBody.className = classNames;
          rightHead.className = classHeadNames;
        }
      } else {
        var index = classNames.indexOf("fixRightShadow");
        var headerIndex = classHeadNames.indexOf("fixRightShadow");
        if (index != -1 && headerIndex != -1) {
          classNames = classNames.substr(0, index - 1);
          classHeadNames = classHeadNames.substr(0, headerIndex - 1);
          rightClassBody.className = classNames;
          rightHead.className = classHeadNames;
        }
        //判断右侧固定列是否出现阴影
        var fixedRightData = this.props.columns.filter(function (item) {
          return item.fixed == 'right' && item.name != 'operator';
        });
        if (fixedRightData.length > 0 && scrollLeftDiv) {
          var isIE = !!window.ActiveXObject || "ActiveXObject" in window;
          var scrollWidth = isIE ? scrollLeftDiv.offsetWidth : scrollLeftDiv.clientWidth;
          if (scrollLeftDiv.scrollLeft === scrollLeftDiv.scrollWidth - scrollWidth + (isIE ? 17 : 0)) {
            rightMain.style.boxShadow = "";
            rightHead.style.boxShadow = "";
          } else {
            rightMain.style.boxShadow = "0 -2px 8px 0 rgba(0, 0, 0, 0.1)";
            rightHead.style.boxShadow = "-2px -2px 8px 0px rgba(0, 0, 0, 0.1)";
          }
        }
      }
    }
    if (leftMain) {
      var mainClassBody = mainContent;
      var classNames = mainClassBody && mainClassBody.className;

      var leftHead = headerContent.querySelector(".fixHeadLeft");
      var classHeadNames = leftHead && leftHead.className;

      if (scrollLeft == 0 || scrollLeft == null) {
        if (classHeadNames) {
          var index = classNames.indexOf("MianShadow");
          var headerIndex = classHeadNames.indexOf("fixLeftShadow");
          if (index != -1) {
            this.setState({ showMianShadow: false });
            classNames = classNames.substr(0, index - 1);
            classHeadNames = classHeadNames.substr(0, headerIndex - 1);
            mainClassBody.className = classNames;
            leftHead.className = classHeadNames;
          }
        }
        if (loadingDom) {
          this.setState({ showMianShadow: false });
        }
      } else {
        // 当数据不为空时才增加拖拽后的阴影
        if (classNames.indexOf("MianShadow") == -1 && this.props.dataSource.length > 0) {
          this.setState({ showMianShadow: true });
          classHeadNames += " fixLeftShadow";
          classNames += " MianShadow";
          mainClassBody.className = classNames;
          leftHead.className = classHeadNames;
        }
      }
    }
  },

  handleScrollTop: function handleScrollTop(e, scroll, scrollLeft, from) {
    var thisDom = (0, _reactDom.findDOMNode)(this);
    var fixedLeftDom = thisDom.querySelector('.fixWrapperLeft');
    if (from != "left") {
      if (fixedLeftDom) {
        fixedLeftDom.scrollTop = scroll;
      }
    }
    var fixedRightDom = thisDom.querySelector('.fixWrapperRight');
    if (from != "right") {
      if (fixedRightDom) {
        fixedRightDom.scrollTop = scroll;
      }
    }
    if (from != "main") {
      var MianBodyDom = thisDom.querySelector('.tableWrapper');
      MianBodyDom.scrollTop = scroll;
    }
  },

  getRenderEndIndex: function getRenderEndIndex(props, state, datas) {
    var startIndex = state.startIndex;
    var rowCount = props.rowCountBuffer;
    var data = props.data ? props.data : datas;
    var length = data.length;

    if (state.groupData) {
      length += state.groupData.groupsCount;
    }

    if (!rowCount) {
      var maxHeight;
      if (props.style && typeof props.style.height === 'number') {
        maxHeight = props.style.height;
      } else {
        maxHeight = window.screen.height;
      }
      rowCount = Math.floor(maxHeight / props.rowHeight);
    }

    var endIndex = startIndex + rowCount;

    if (endIndex > length - 1) {
      endIndex = length;
    }

    return endIndex;
  },

  onDropColumn: function onDropColumn(index, dropIndex) {
    (this.props.onColumnOrderChange || emptyFn)(index, dropIndex);
  },

  toggleColumn: function toggleColumn(props, column) {

    var visible = column.visible;
    var visibility = this.state.visibility;

    if (column.name in visibility) {
      visible = visibility[column.name];
    }

    column = findColumn(this.props.columns, column).column;

    if (visible && getVisibleCount(props, this.state) === 1) {
      return;
    }

    var onHide = this.props.onColumnHide || emptyFn;
    var onShow = this.props.onColumnShow || emptyFn;

    visible ? onHide(column) : onShow(column);

    var onChange = this.props.onColumnVisibilityChange || emptyFn;

    onChange(column, !visible);

    if (column.visible == null && column.hidden == null) {
      var visibility = this.state.visibility;

      visibility[column.name] = !visible;

      this.cleanCache();
      this.setState({});
    }
  },

  cleanCache: function cleanCache() {
    //so grouped rows are re-rendered
    delete this.groupedRows;

    //clear row cache
    this.rowCache = {};
  },

  showMenu: function showMenu(menu, state) {

    state = state || {};
    state.menu = menu;

    if (this.state.menu) {
      this.setState({
        menu: null,
        menuColumn: null
      });
    }

    setTimeout(function () {
      //since menu is hidden on click on window,
      //show it in a timeout, after the click event has reached the window
      this.setState(state);
    }.bind(this), 0);
  },
  showLine: function showLine(offset) {
    //直接通过dom去操作拖拽
  },
  prepareHeader: function prepareHeader(props, state) {
    var allColumns = props.columns;
    var columns = getVisibleColumns(props, state);

    var curSumWidth = 0;
    props.columns.map(function (col, index) {
      if (col.width && col.visible) {
        curSumWidth += parseInt(col.width);
      }
    });
    //wuzhe----横向滚动条滚到最右时的值，控制右固定列阴影的显示与隐藏
    var scrollDiff = curSumWidth - this.props.outerWidth;
    this.scrollDiff = scrollDiff;

    //wuzhe----为兼容ie9，给表头设定宽度
    var headWidth = props.minRowWidth + props.scrollbarSize;

    return (props.headerFactory || HeaderFactory)({
      scrollLeft: state.scrollLeft,
      resizing: state.resizing,
      columns: columns,
      haspadding: props.haspadding,
      hasMover: props.hasMover,
      allColumns: allColumns,
      columnVisibility: state.visibility,
      cellPadding: props.headerPadding || props.cellPadding,
      filterIconColor: props.filterIconColor,
      menuIconColor: props.menuIconColor,
      menuIcon: props.menuIcon,
      filterIcon: props.filterIcon,
      scrollbarSize: props.scrollbarSize,
      sortInfo: props.sortInfo,
      resizableColumns: props.resizableColumns,
      reorderColumns: props.reorderColumns,
      filterable: props.filterable,
      withColumnMenu: props.withColumnMenu,
      sortable: props.sortable,
      showLine: this.showLine,
      onDropColumn: this.onDropColumn,
      onSortChange: props.onSortChange,
      onColumnResizeDragStart: this.onColumnResizeDragStart,
      onColumnResizeDrag: this.onColumnResizeDrag,
      onColumnResizeDrop: this.onColumnResizeDrop,

      toggleColumn: this.toggleColumn.bind(this, props),
      showMenu: this.showMenu,
      filterMenuFactory: this.filterMenuFactory,
      menuColumn: state.menuColumn,
      columnMenuFactory: props.columnMenuFactory,

      titleStyle: props.titleStyle, //header自定义属性titleStyle
      //juan add 大名片滚动条样式
      expandShadowClass: this.expandShadowClass,
      //wuzhe
      scrollDiff: scrollDiff,
      headWidth: headWidth, //wuzhe----为兼容ie9新增
      outerWidth: props.outerWidth,
      backStyle: props.style,
      isLookUpv1: props.isLookUpv1,
      isLookUpV2: props.isLookUpV2,
      rightCornerComp: props.rightCornerComp
    });
  },

  prepareFooter: function prepareFooter(props, state) {
    return (props.footerFactory || React.DOM.div)({
      className: 'z-footer-wrapper'
    });
  },

  prepareRenderProps: function prepareRenderProps(props) {
    var result = {};
    var list = {
      className: true,
      style: true
    };

    (0, _keys2.default)(props).forEach(function (name) {
      if (list[name]) {
        result[name] = props[name];
      }
    });
    result.style['width'] = props.outerWidth + "px";
    return result;
  },
  getAllHeaderWidth: function getAllHeaderWidth(columns) {
    var sum = 0;
    for (var i = columns.length - 1; i >= 0; i--) {
      var column = columns[i];
      sum = sum + column.with;
    };
    return sum;
  },

  render: function render() {
    //wuzhe----依据表头标题的字数获得相应宽度
    var length = this.props.columns ? this.props.columns.length : 0;
    var newpro = this.getInitWidth();
    var s = 0;
    if (this.props.rowType) {
      switch (this.props.rowType) {
        case "small":
          s = 30;
          break;
        case "medium":
          s = 50;
          break;
        case "big":
          s = 80;
          break;
        default:
          s = 20;
      }
    }

    var props = this.prepareProps(newpro, this.state);
    var allHeaderWidth = this.getAllHeaderWidth(this.props.columns);
    this.p = props;
    this.data = props.data;
    this.dataSource = props.dataSource;
    var height = this.props.paddingSize * 2 + s + 1;
    var haspadding = 0;
    var allhegith = 0;
    if (this.data) {
      allhegith = height * this.data.length + 1 * this.data.length;
      if (this.hasScroll) {
        haspadding = this.getScrollBarWidth - 3;
      }
    }
    var curSumWidth = 0;
    props.columns.map(function (col, index) {
      if (col.width && (col.visible || col.visible == undefined)) {
        curSumWidth += parseInt(col.width);
      }
    });
    this.curSumWidth = curSumWidth;
    var hasMover = 0;
    if (this.curSumWidth < this.props.outerWidth) {
      hasMover = this.props.outerWidth - this.curSumWidth;
    }
    props.hasMover = hasMover;
    props.haspadding = haspadding;

    var header = this.prepareHeader(props, this.state);

    //wuzhe----左固定列的表体
    var fixLeftWrapper = "";
    var leftMargin = 0;
    var rightMargin = 0;
    var fixLeftColumns = props.columns.filter(function (item) {
      if (item.fixed == "left" || item.fixed === true || item.fixed === "") {
        leftMargin = item.width + leftMargin;
        return item;
      }
    });
    //wuzhe----右固定列的表体
    var fixRightWrapper = "";
    var fixRightColumns = props.columns.filter(function (item) {
      if (item.fixed == "right") {
        rightMargin = item.width + rightMargin;
        return item;
      }
    });

    var allRowWidth = props.minRowWidth;
    props.bodyWidth = props.outerWidth - leftMargin - rightMargin;
    props.minRowWidth = props.minRowWidth - leftMargin - rightMargin;
    var left = leftMargin + props.bodyWidth;

    if (rightMargin > 0) {
      props.bodyWidth = props.bodyWidth;
    }

    if (fixLeftColumns.length != 0) {
      var fixLeftProps = assign({}, props);
      fixLeftProps.columns = fixLeftColumns;
      fixLeftProps.width = leftMargin;
      fixLeftProps.height = props.rollHeight;

      fixLeftWrapper = this.prepareWrapper(fixLeftProps, this.state, "fixLeftWrapper", "left");
    }
    if (fixRightColumns.length != 0) {
      var fixRightProps = assign({}, props);
      fixRightProps.columns = fixRightColumns;
      fixRightProps.width = rightMargin;
      fixRightProps.height = props.rollHeight;
      fixRightProps.left = left - 3;
      fixRightProps.haspadding = haspadding;
      fixRightProps.hasMover = hasMover;
      //wangyongning add 
      fixRightProps.hasScroll = this.hasScrollbar;
      fixRightProps.scrollWidth = this.getScrollBarWidth;

      fixRightWrapper = this.prepareWrapper(fixRightProps, this.state, "fixRightWrapper", "right");
    }

    var normalColumns = "";
    var normalColumns = props.columns.filter(function (item) {
      return !item.fixed || item.fixed === false;
    });
    props.columns = normalColumns;

    props.marginLeft = leftMargin;
    var backColor = "#fff";
    if (props.style) {
      backColor = props.style.backgroundColor || "#fff";
    } else {
      props.style = {};
    }
    props.style.backgroundColor = backColor;

    var wrapper = this.prepareWrapper(props, this.state, "wrapper", "no");
    var footer = this.prepareFooter(props, this.state);
    var resizeProxy = this.prepareResizeProxy(props, this.state, allhegith);
    if (props.data) {
      if (props.rollHeight < props.rowHeight * props.data.length) {
        props.style.paddingBottom = '1px';
      }
    }
    var renderProps = this.prepareRenderProps(props);
    var menuProps = {
      columns: props.columns,
      menu: this.state.menu
    };
    var loadMask;

    //是否使用默认的loading,默认为true
    var loadDefault = props.loadDefault != null ? props.loadDefault : true;

    if (props.loadMaskOverHeader && loadDefault) {
      loadMask = React.createElement(
        'div',
        null,
        'loading'
      );
    } else {
      loadMask = this.props.customLoading;
    }

    //wuzhe----横向滚动条滚到最右时的值，由于尝试内部控制的时候出现问题，因此从外部控制右固定列阴影的显示与隐藏
    //加的15+2是由于纵向滚动条造成的偏差，15这个值目前是src/getDefaultProps.js里的scrollbarSize的值

    var scrollDiff = this.scrollDiff;
    var innerClass = "z-inner " + props.sizeClass;
    if (scrollDiff == this.state.scrollLeft || scrollDiff <= 0) {
      innerClass += " hideRightShadow";
    }
    if (this.state.scrollLeft == 0) {
      innerClass += " hideLeftShadow";
    }

    var tableWrapClass = "tableWrapper";
    if (!this.state.vScrollShow) {
      tableWrapClass += " vScrollHide";
      tableWrapClass += this.state.showMianShadow ? " shadowShow" : "";
    }
    // wuzhe----当纵向滚动到最底部时，修正样式
    if (this.state.atBottom) {
      innerClass += " atBottom";
    }

    var scrollBar = "";
    var events = {};
    events.onScroll = this.handleWheel;

    if (this.scrollDiff > 0 || this.state.showMianShadow) {
      //wangyongning add:如果左侧固定列盖住了非固定列的显示，应出现x轴的滚动条
      scrollBar = React.createElement(
        'div',
        (0, _extends3.default)({ className: 'verticalScrollbarOuter' }, events, { style: { width: props.outerWidth + "px", height: this.scrollbarHeight + "px", overflow: "auto" } }),
        React.createElement('div', { className: 'verticalScrollbarInner', style: { width: allRowWidth - this.scrollbarHeight + "px", height: "1px" } })
      );
    }
    var content = "";
    if (!props.data.length) {
      var screenWidth = window.screen.width;
      var emptyTextStyle = (0, _extends3.default)({ 'position': 'absolute', zIndex: 998 }, props.emptyTextStyle);
      var content = React.createElement(
        'div',
        { className: 'z-empty-text', style: emptyTextStyle },
        props.emptyText
      );
    }
    var isShowTotalNum = props.data && props.data.length > 0 && props.currentPaging && props.currentPaging.total < Math.min.apply(null, props.currentPaging.capacityList);
    var isIE = !!window.ActiveXObject || "ActiveXObject" in window;
    var translation = (0, _extends3.default)({}, defaultTranslation, this.props.translation);
    var totalNumSrc = props.selectedCount && props.selectedCount > 0 ? (0, _commonFunc.transFormat)(translation.totalCountText, props.selectedCount, props.currentPaging && props.currentPaging.total) : (0, _commonFunc.transFormat)(translation.countText, props.currentPaging && props.currentPaging.total);
    var result = React.createElement(
      'div',
      (0, _extends3.default)({}, renderProps, { ref: 'tableAll'
      }),
      React.createElement(
        'div',
        { className: innerClass, ref: 'zInner' },
        React.createElement(
          'div',
          { onMouseEnter: this.handleHeadEnter },
          header
        ),
        React.createElement(
          'div',
          { ref: 'tableWrapper', className: tableWrapClass, onMouseEnter: this.handleMouseEnter,
            onScroll: this.clearLocalStage, style: { minHeight: props.data.length > 0 ? "auto" : "90px", height: props.rollHeight < 0 ? "auto" : props.rollHeight - 1 + "px", "overflowY": "auto", "overflowX": "hidden" } },
          !props.loading ? React.createElement(
            'div',
            { className: 'table-container', onMouseLeave: this.handleMouseLeave },
            fixLeftWrapper,
            fixRightWrapper,
            wrapper,
            footer,
            content,
            isShowTotalNum ? React.createElement(
              'div',
              { className: 'totalNum' },
              totalNumSrc
            ) : null
          ) : null
        ),
        loadMask,
        isIE && props.loading ? null : scrollBar,
        resizeProxy
      ),
      renderMenu(menuProps)
    );

    var hidden = this.props.hidden;

    if (hidden && hidden === "true") {
      return React.createElement('div', null);
    } else {
      return result;
    }
  },
  clearLocalStage: function clearLocalStage() {
    this.props.clearLocalStage && this.props.clearLocalStage();
  },

  getTableProps: function getTableProps(props, state, fixStatus, scrollDiff) {
    var table;
    var rows;
    if (props.groupBy) {
      rows = this.groupedRows = this.groupedRows || getGroupedRows(props, state.groupData);
      rows = slice(rows, props);
    }
    //wuzhe----将hover相关的处理函数通过props传入下层
    props.onRowMouseEnter = this.onRowMouseEnter;
    props.onRowMouseLeave = this.onRowMouseLeave;
    props.columnsWith = this.columnsWith;
    props.translation = props.translation;
    var maxHeight;

    table = _getTableProps.call(this, props, rows, fixStatus);
    return table;
  },

  onRowMouseEnter: function onRowMouseEnter(hoverRowInfo) {
    //wuzhe----获得当前hover的行的index值
    //hoverRowInfo中同时也包含hover行的的event对象。
    //本函数通过props向下传到src/Row/index.js中调用
    var hoverRowIndex = hoverRowInfo.rowIdx;
    var thisDom = (0, _reactDom.findDOMNode)(this);
    var tables = thisDom.querySelectorAll(".z-table");

    var length = tables.length;
    for (var i = 0; i < length; i++) {
      var item = tables[i];
      var zrows = item.querySelectorAll(".z-row");
      var templength = zrows.length;

      for (var j = 0; j < templength; j++) {
        var row = zrows[j];

        var classNames = row.className;
        var index = classNames.indexOf("z-over");
        if (j == hoverRowIndex) {
          if (index == -1) {
            classNames += " z-over";
            row.className = classNames;
          }
        } else {
          if (index != -1) {
            classNames = classNames.substr(0, index - 1);
            row.className = classNames;
          }
        }
      }
    }
  },

  removeAllhover: function removeAllhover(objDiv) {
    var classNames = objDiv.className;
    var index = classNames.indexOf("z-over");
    classNames = classNames.substr(0, index - 1);
    objDiv.className = classNames;
  },

  //wuzhe----判断是否在表格区域内
  //目的：在鼠标离开表格区域时清除hover效果
  handleMouseEnter: function handleMouseEnter(index) {},

  //wuzhe----判断是否在表格区域内
  handleMouseLeave: function handleMouseLeave(event) {
    // wuzhe----ie10兼容
    if (event.stopPropagation) {
      // this code is for Mozilla and Opera
      event.stopPropagation();
    } else if (window.event) {
      // this code is for IE
      window.event.cancelBubble = true;
    }
    var thisDom = (0, _reactDom.findDOMNode)(this);
    var overDiv = thisDom.querySelectorAll(".z-over");
    if (overDiv) {
      for (var i = overDiv.length - 1; i >= 0; i--) {
        var item = overDiv[i];
        var classNames = item.className;
        var index = classNames.indexOf("z-over");
        classNames = classNames.substr(0, index - 1);
        item.className = classNames;
      };
    }
  },

  //wuzhe----判断是否在表头区域内
  //目的：在鼠标离开表体区域时清除hover效果
  handleHeadEnter: function handleHeadEnter(event) {
    // wuzhe----ie10兼容
    if (event.stopPropagation) {
      // this code is for Mozilla and Opera
      event.stopPropagation();
    } else if (window.event) {
      // this code is for IE
      window.event.cancelBubble = true;
    }
  },

  // wuzhe----在纵向滚动时清除hover效果
  hoverClear: function hoverClear() {
    this.setState({ hoverIndex: -1 });
  },

  fixHorizontalScrollbar: function fixHorizontalScrollbar() {
    var scroller = this.scroller;
    if (scroller) {
      scroller.fixHorizontalScrollbar();
    }
  },

  onWrapperMount: function onWrapperMount(wrapper, scroller) {
    this.scroller = scroller;
  },

  prepareWrapper: function prepareWrapper(props, state, refName, fixStatus) {
    var virtualRendering = props.virtualRendering;

    var data = props.data;
    var scrollTop = state.scrollTop;
    var startIndex = state.startIndex;
    var endIndex = virtualRendering ? this.getRenderEndIndex(props, state) : 0;
    var totalLength = state.groupData ? data.length + state.groupData.groupsCount : data.length;

    this.state.totalLength = totalLength;

    if (props.virtualRendering) {
      scrollTop = startIndex * props.rowHeight;
    }
    var hasRowScroll = false;
    var rowHeight = props.rowHeight;
    var scrollbarHeight = this.getScrollBarWidth;
    if (scrollbarHeight < 12) {
      scrollbarHeight = this.scrollbarHeight = 12;
    } else {
      this.scrollbarHeight = scrollbarHeight;
    }
    if (navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") < 1) {
      this.scrollbarHeight += 8;
    }
    var wrapperProps = assign({
      ref: refName,
      onMount: this.onWrapperMount,
      scrollLeft: state.scrollLeft,
      scrollTop: scrollTop,
      topOffset: state.topOffset,
      startIndex: startIndex,
      totalLength: totalLength,
      // renderCount: renderCount,
      endIndex: endIndex,
      hasRowScroll: hasRowScroll,
      allColumns: props.columns,
      height: props.rollHeight,
      onScrollLeft: this.handleScrollLeft,
      onScrollTop: this.handleScrollTop,
      style: props.style,
      //holly
      addRightWrapperShadow: this.addRightWrapperShadow,
      handleExpand: this.handleExpand,
      handleHover: this.handleHover,
      handleMouseOut: this.handleMouseOut,
      handleExpandScroll: this.handleExpandScroll,
      menu: state.menu,
      menuColumn: state.menuColumn,
      showMenu: this.showMenu,
      selected: props.selected == null ? state.defaultSelected : props.selected,

      //wuzhe----记录是左固定列还是右固定列还是非固定列
      fixStatus: fixStatus,
      translation: defaultTranslation
    }, props);

    wrapperProps.columns = getVisibleColumns(props, state);
    wrapperProps.tableProps = this.getTableProps(wrapperProps, state, fixStatus);

    wrapperProps.hoverClear = this.hoverClear;

    return (props.WrapperFactory || WrapperFactory)(wrapperProps);
  },

  handleRowClick: function handleRowClick(rowProps, event) {
    if (this.props.onRowClick) {
      this.props.onRowClick(rowProps.data, rowProps, event);
    }

    this.handleSelection(rowProps, event);
  },
  componentWillUpdate: function componentWillUpdate(nextProps, nextState) {
    var self = this;

    if (nextProps.columns) {
      for (var i = nextProps.columns.length - 1; i >= 0; i--) {
        var temp = nextProps.columns[i];
        for (var j = self.props.columns.length - 1; j >= 0; j--) {
          var oldtemp = self.props.columns[j];
          if (oldtemp.name === temp.name) {
            temp['width'] = oldtemp['width'];
          }
        };
      };
    }
  },
  prepareProps: function prepareProps(thisProps, state) {
    var self = this;

    //wuzhe----用localStorage里面存的数据更新props里的宽度值
    this.updateColsWidth();

    var props = assign({}, thisProps);

    if (props.rowType) {
      switch (props.rowType) {
        case "small":
          props.rowHeight = 51;
          props.sizeClass = "smallType";
          break;
        case "medium":
          props.rowHeight = 71;
          props.sizeClass = "mediumType";
          break;
        case "big":
          props.rowHeight = 101;
          props.sizeClass = "bigType";
          break;
        default:
          props.rowHeight = 41;
          props.sizeClass = "";
      }
    } else {
      props.rowHeight = 41;
      props.sizeClass = "";
    }

    //wuzhe----将当前hover行的index向下层传递
    props.hoverIndex = state.hoverIndex;
    props.inDataGrid = state.inDataGrid;

    //wuzhe----减去表头高度31px，减去外框上边距10px，下边距10px。rollHeight为纵向滚动的区域的真实高度
    var rollHeight = props.outHeight - 31 - 10 - 10 - 10;

    if (this.scrollDiff > 0) {
      rollHeight = rollHeight - this.scrollbarHeight;
    }

    props.rollHeight = rollHeight;
    props.loading = this.prepareLoading(props);
    props.data = this.prepareData(props);
    props.dataSource = this.prepareDataSource(props);
    props.empty = !props.data.length;
    props.virtualRendering = props.virtualRendering;
    props.filterable = this.prepareFilterable(props);
    props.resizableColumns = this.prepareResizableColumns(props);
    props.reorderColumns = this.prepareReorderColumns(props);
    this.prepareClassName(props);
    props.style = this.prepareStyle(props);
    this.prepareColumns(props, state);

    //wuzhe----verticalScrollbar
    props.minRowWidth = props.totalColumnWidth + props.scrollbarSize;
    //wuzhe----无纵向滚动条时为下方代码
    return props;
  },

  prepareLoading: function prepareLoading(props) {
    var showLoadMask = props.showLoadMask || !this.isMounted(); //ismounted check for initial load
    return props.loading == null ? showLoadMask && this.state.defaultLoading : props.loading;
  },

  prepareDataSourceCount: function prepareDataSourceCount(props) {
    return props.dataSourceCount == null ? this.state.defaultDataSourceCount : props.dataSourceCount;
  },

  /**
   * Returns true if in the current configuration,
   * the datagrid should load its data remotely.
   *
   * @param  {Object}  [props] Optional. If not given, this.props will be used
   * @return {Boolean}
   */
  isRemoteDataSource: function isRemoteDataSource(props) {
    props = props || this.props;

    return props.dataSource && !isArray(props.dataSource);
  },

  prepareDataSource: function prepareDataSource(props) {
    var dataSource = props.dataSource;

    if (isArray(dataSource)) {
      dataSource = null;
    }

    return dataSource;
  },

  prepareData: function prepareData(props) {

    var data = null;

    if (isArray(props.data)) {
      data = props.data;
    }

    if (isArray(props.dataSource)) {
      data = props.dataSource;
    }

    data = data == null ? this.state.defaultData : data;

    if (!isArray(data)) {
      data = [];
    }

    return data;
  },

  prepareFilterable: function prepareFilterable(props) {
    if (props.filterable === false) {
      return false;
    }

    return props.filterable || !!props.onFilter;
  },

  prepareResizableColumns: function prepareResizableColumns(props) {
    if (props.resizableColumns === false) {
      return false;
    }

    return props.resizableColumns || !!props.onColumnResize;
  },

  prepareReorderColumns: function prepareReorderColumns(props) {
    if (props.reorderColumns === false) {
      return false;
    }

    return props.reorderColumns || !!props.onColumnOrderChange;
  },

  isVirtualRendering: function isVirtualRendering(props) {
    props = props || this.props;
    /*
        zhongjiahao 干掉垂直滚动条
     */
    return props.virtualRendering || props.rowHeight != null;
    // wuzhe----无纵向滚动条是为下方代码
  },

  prepareRowHeight: function prepareRowHeight() {
    return this.props.rowHeight == null ? this.state.rowHeight : this.props.rowHeight;
  },

  groupData: function groupData(props) {
    if (props.groupBy) {
      var data = this.prepareData(props);

      this.setState({
        groupData: group(data, props.groupBy)
      });

      delete this.groupedRows;
    }
  },

  reload: function reload() {
    if (this.dataSource) {
      return this.loadDataSource(this.dataSource, this.props);
    }
  },

  /**
   * Loads remote data
   *
   * @param  {String/Function/Promise} [dataSource]
   * @param  {Object} [props]
   */
  loadDataSource: function loadDataSource(dataSource, props) {
    props = props || this.props;

    if (!arguments.length) {
      dataSource = props.dataSource;
    }

    var dataSourceQuery = {};

    if (props.sortInfo) {
      dataSourceQuery.sortInfo = props.sortInfo;
    }

    if (typeof dataSource == 'function') {
      dataSource = dataSource(dataSourceQuery, props);
    }

    if (typeof dataSource == 'string') {
      var fetch = this.props.fetch || global.fetch;

      var keys = (0, _keys2.default)(dataSourceQuery);
      if (props.appendDataSourceQueryParams && keys.length) {
        //dataSource was initially passed as a string
        //so we append quey params
        dataSource += '?' + keys.map(function (param) {
          return param + '=' + (0, _stringify2.default)(dataSourceQuery[param]);
        }).join('&');
      }

      dataSource = fetch(dataSource);
    }

    if (dataSource && dataSource.then) {

      if (props.onDataSourceResponse) {
        dataSource.then(props.onDataSourceResponse, props.onDataSourceResponse);
      } else {
        this.setState({
          defaultLoading: true
        });

        var errorFn = function (err) {
          if (props.onDataSourceError) {
            props.onDataSourceError(err);
          }

          this.setState({
            defaultLoading: false
          });
        }.bind(this);

        var noCatchFn = dataSource['catch'] ? null : errorFn;

        dataSource = dataSource.then(function (response) {
          return response && typeof response.json == 'function' ? response.json() : response;
        }).then(function (json) {

          if (props.onDataSourceSuccess) {
            props.onDataSourceSuccess(json);
            this.setState({
              defaultLoading: false
            });
            return;
          }

          var info;
          if (typeof props.getDataSourceInfo == 'function') {
            info = props.getDataSourceInfo(json);
          }

          var data = info ? info.data : Array.isArray(json) ? json : json.data;

          var count = info ? info.count : json.count != null ? json.count : null;

          var newState = {
            defaultData: data,
            defaultLoading: false
          };
          if (props.groupBy) {
            newState.groupData = group(data, props.groupBy);
            delete this.groupedRows;
          }

          if (count != null) {
            newState.defaultDataSourceCount = count;
          }

          this.setState(newState);
        }.bind(this), noCatchFn);

        if (dataSource['catch']) {
          dataSource['catch'](errorFn);
        }
      }

      if (props.onDataSourceLoaded) {
        dataSource.then(props.onDataSourceLoaded);
      }
    }

    return dataSource;
  },

  componentWillMount: function componentWillMount() {
    this.getScrollBarWidth = getScrollBarWidth();
    this.rowCache = {};
    this.groupData(this.props);

    if (this.isRemoteDataSource(this.props)) {
      this.loadDataSource(this.props.dataSource, this.props);
    }
  },

  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {

    this.rowCache = {};
    this.groupData(nextProps);
    this.setState(this.state);

    if (this.isRemoteDataSource(nextProps)) {
      var otherPage = this.props.page != nextProps.page;
      var otherPageSize = this.props.pageSize != nextProps.pageSize;

      if (nextProps.reload || otherPage || otherPageSize) {
        this.loadDataSource(nextProps.dataSource, nextProps);
      }
    }
    var self = this;
    if (nextProps.outerWidth != this.props.outerWidth) {
      self.correctLastColWidth(nextProps);
      this.columnsWith = false;
    }
    var thisDom = (0, _reactDom.findDOMNode)(this);
    // 当进行数据增减或者筛选后，将滚动条移回最左侧，以保持交互一致
    if (!(0, _isEqual2.default)(this.props.dataSource, nextProps.dataSource) || this.props.dataSource.length != 0 && nextProps.dataSource.length == 0) {
      this.columnsWith = false;

      var scrollLeftDiv = thisDom.querySelector(".verticalScrollbarOuter");
      if (scrollLeftDiv) {
        scrollLeftDiv.scrollLeft = 0;
      }

      var mainHeader = thisDom.querySelector(".z-hader-content");
      if (mainHeader) {
        mainHeader.scrollLeft = 0;
      }

      var mainContent = thisDom.querySelector(".TableWrapperMain");
      if (mainContent) {
        mainContent.scrollLeft = 0;
      }
      //当删除或增加时，调用该方法用于移除阴影
      this.handleWheel();
      this.setState({ showMianShadow: false });
      var headerLeft = thisDom.querySelector('.fixLeftShadow');
      var wrapper = thisDom.querySelector('.shadowShow');
      if (headerLeft) {
        var headerLeftClassName = headerLeft.className;
        var hedaerIndex = headerLeftClassName.indexOf('fixLeftShadow');
        headerLeftClassName = headerLeftClassName.substr(0, hedaerIndex - 1);
        headerLeft.className = headerLeftClassName;
      }
      if (wrapper) {
        var wrapperClassName = wrapper.className;
        var wrapperIndex = wrapperClassName.indexOf('shadowShow');
        wrapperClassName = wrapperClassName.substr(0, wrapperIndex - 1);
        wrapper.className = wrapperClassName;
      }
    }

    // 当页数或者单页条数变更时重置滚动条
    if (this.props.currentPaging && nextProps.currentPaging && (this.props.currentPaging.page != nextProps.currentPaging.page || this.props.currentPaging.capacity != nextProps.currentPaging.capacity)) {
      var fixedLeftDom = thisDom.querySelector('.fixWrapperLeft');

      if (fixedLeftDom) {
        fixedLeftDom.scrollTop = 0;
      }

      var fixedRightDom = thisDom.querySelector('.fixWrapperRight');

      if (fixedRightDom) {
        fixedRightDom.scrollTop = 0;
      }

      var MianBodyDom = thisDom.querySelector('.TableWrapperMain');
      if (MianBodyDom) MianBodyDom.scrollTop = 0;

      var MianWrapper = thisDom.querySelector('.tableWrapper');
      if (MianWrapper) MianWrapper.scrollTop = 0;
    }
    var oTableWrapper = thisDom.querySelector('.tableWrapper');
    this.addRightWrapperShadow();
  },

  hasScroll: function hasScroll() {
    //判断是否有滚动条
    var oTableWrapper = this.refs.tableWrapper;
    var tmphasScrollbar = this.hasScrollbar;
    this.hasScrollbar = oTableWrapper.scrollHeight > oTableWrapper.clientHeight ? true : false;
    if (tmphasScrollbar != this.hasScrollbar) this.setState({});
  },

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

    assign(style, props.defaultStyle, props.style);

    return style;
  },

  prepareClassName: function prepareClassName(props) {
    props.className = props.className || '';
    props.className += ' ' + props.defaultClassName;

    //当有分页显示时，才显示滚动条下边那根线
    var isShowTotalNum = props.data && props.data.length > 0 && props.currentPaging && props.currentPaging.total < Math.min.apply(null, props.currentPaging.capacityList);
    var isEmpty = props.data && props.data.length == 0;
    if (props.cellEllipsis) {
      if (!isShowTotalNum && !isEmpty) {
        props.className += ' ' + props.cellEllipsisCls;
      }
    }

    if (props.styleAlternateRows) {
      props.className += ' ' + props.styleAlternateRowsCls;
    }

    if (props.showCellBorders) {
      var cellBordersCls = props.showCellBorders === true ? props.showCellBordersCls + '-horizontal ' + props.showCellBordersCls + '-vertical' : props.showCellBordersCls + '-' + props.showCellBorders;

      props.className += ' ' + cellBordersCls;
    }

    if (props.withColumnMenu) {
      props.className += ' ' + props.withColumnMenuCls;
    }

    if (props.empty) {
      props.className += ' ' + props.emptyCls;
    }
  },

  ///////////////////////////////////////
  ///
  /// Code dealing with preparing columns
  ///
  ///////////////////////////////////////
  prepareColumns: function prepareColumns(props, state) {
    props.columns = props.columns.map(function (col, index) {
      col = Column(col, props);
      col.index = index;
      return col;
    }, this);

    this.prepareColumnSizes(props, state);

    props.columns.forEach(this.prepareColumnStyle.bind(this, props));
  },

  prepareColumnStyle: function prepareColumnStyle(props, column) {
    var style = column.sizeStyle = {};
    column.style = assign({}, column.style);
    column.textAlign = column.textAlign || column.style.textAlign;
    if (!column.fixedWidth) {
      var minWidth = column.minWidth || props.columnMinWidth;
    }
  },

  prepareColumnSizes: function prepareColumnSizes(props, state) {
    var visibleColumns = getVisibleColumns(props, state);
    var totalWidth = 0;
    var flexCount = 0;

    visibleColumns.forEach(function (column) {
      column.minWidth = column.minWidth || props.columnMinWidth;

      if (!column.flexible) {
        totalWidth += column.width;
        return 0;
      } else if (column.minWidth) {
        totalWidth += column.minWidth;
      }

      flexCount++;
    }, this);

    props.columnFlexCount = flexCount;
    props.totalColumnWidth = totalWidth;
  },

  prepareResizeProxy: function prepareResizeProxy(props, state, height) {
    return React.createElement(ResizeProxy, { ref: 'resizeProxy', active: state.resizing, height: height });
  },

  onColumnResizeDragStart: function onColumnResizeDragStart(config) {

    var domNode = ReactDOM.findDOMNode(this);
    var region = Region.from(domNode);

    this.resizeProxyLeft = config.resizeProxyLeft - region.left;

    this.setState({
      resizing: true,
      resizeOffset: this.resizeProxyLeft
    });
  },

  onColumnResizeDrag: function onColumnResizeDrag(config) {
    this.refs.resizeProxy.setState({
      offset: this.resizeProxyLeft + config.resizeProx