zent/table/lib/Table.js

一套前端设计语言和基于React的实现

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _reactDom2 = _interopRequireDefault(_reactDom);

var _Head = require('./modules/Head');

var _Head2 = _interopRequireDefault(_Head);

var _Body = require('./modules/Body');

var _Body2 = _interopRequireDefault(_Body);

var _zentPagination = require('zent-pagination');

var _zentPagination2 = _interopRequireDefault(_zentPagination);

var _zentLoading = require('zent-loading');

var _zentLoading2 = _interopRequireDefault(_zentLoading);

var _isBrowser = require('zent-utils/isBrowser');

var _isBrowser2 = _interopRequireDefault(_isBrowser);

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

var _React$PropTypes = _react2['default'].PropTypes,
    func = _React$PropTypes.func,
    bool = _React$PropTypes.bool,
    string = _React$PropTypes.string,
    array = _React$PropTypes.array,
    oneOf = _React$PropTypes.oneOf,
    object = _React$PropTypes.object;


var relativeTop = void 0;

var Table = _react2['default'].createClass({
  displayName: 'Table',

  propTypes: {
    className: string,
    prefix: string,
    columns: array,
    datasets: array,
    onChange: func,
    sortBy: string,
    sortType: oneOf(['desc', 'asc']),
    pageInfo: object,
    rowKey: string,
    loading: bool,
    autoScroll: bool,
    autoStick: bool,
    selection: object
  },

  getDefaultProps: function getDefaultProps() {
    return {
      prefix: 'zent',
      pageSize: 10,
      className: '',
      datasets: [],
      columns: [],
      emptyLabel: '没有更多数据了',
      rowKey: 'id',
      sortType: 'desc',
      loading: false,
      autoScroll: false,
      autoStick: false,
      selection: null
    };
  },
  getInitialState: function getInitialState() {
    return {
      current: this.props.pageInfo ? this.props.pageInfo.current : 1,
      placeHolderHeight: false,
      fixStyle: {}
    };
  },
  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
    this.setState({
      current: nextProps.pageInfo ? nextProps.pageInfo.current : 1
    });
  },
  componentDidMount: function componentDidMount() {
    var tableRectTop = _reactDom2['default'].findDOMNode(this).getBoundingClientRect().top;
    relativeTop = tableRectTop - document.body.getBoundingClientRect().top;
  },


  // 对外部传进来的onChange进行封装
  wrapPropsOnChange: function wrapPropsOnChange(conf) {
    if (typeof this.props.onChange !== 'function') {
      throw new Error('请传入一个onChange方法');
    }
    this.props.onChange(conf);
  },
  onChange: function onChange(conf) {
    this.setState(conf);

    this.wrapPropsOnChange(conf);
  },
  onSort: function onSort(conf) {
    // 排序的时候也要触发
    this.wrapPropsOnChange(conf);
  },
  onPageChange: function onPageChange(current) {
    this.wrapPropsOnChange({
      current: current
    });
    if (this.props.autoScroll) {
      this.scrollToTop(400);
    }
  },


  /*
   * Head上的选中会全选所有的行
   * @param isSelect {Boolean} 表示是否全选
   */
  onSelectAllRows: function onSelectAllRows(isSelect) {
    var allRowKeys = [];
    var allRows = [];
    var _props = this.props,
        rowKey = _props.rowKey,
        datasets = _props.datasets,
        selection = _props.selection,
        _props$getRowConf = _props.getRowConf,
        getRowConf = _props$getRowConf === undefined ? function () {
      return { canSelect: true };
    } : _props$getRowConf;


    if (isSelect) {
      // 找出所有canSelect为true的row，才能选中
      for (var i = 0, len = datasets.length; i < len; i++) {
        var _getRowConf = getRowConf(datasets[i], i),
            _getRowConf$canSelect = _getRowConf.canSelect,
            canSelect = _getRowConf$canSelect === undefined ? true : _getRowConf$canSelect;

        if (canSelect) {
          allRowKeys.push(datasets[i][rowKey]);
          allRows.push(datasets[i]);
        }
      }
    }

    selection.onSelect(allRowKeys, allRows);
  },


  /**
   * 选了一行
   * @param rowKey {String} 某一行的key
   * @param isSelect {Boolean} 是否被选中
   */
  onSelectOneRow: function onSelectOneRow(rowKey, isSelect) {
    var selectedRowKeys = this.props.selection.selectedRowKeys.slice(0); // copy 一份数组
    var index = selectedRowKeys.indexOf(rowKey);

    if (isSelect) {
      if (index === -1) {
        selectedRowKeys.push(rowKey);
      }
    } else {
      if (index !== -1) {
        selectedRowKeys.splice(index, 1);
      }
    }

    var selectedRows = this.getSelectedRowsByKeys(selectedRowKeys);

    this.props.selection.onSelect(selectedRowKeys, selectedRows);
  },


  /**
   * 根据选择的keys拼装一个选好的列
   * @param rowKeys Array 一个keys的数组
   * @return rows Array 一个每行的数据的数组
   */
  getSelectedRowsByKeys: function getSelectedRowsByKeys(rowKeys) {
    var rows = [];
    var self = this;

    this.props.datasets.forEach(function (item) {
      if (rowKeys.indexOf(item[self.props.rowKey]) >= 0) {
        rows.push(item);
      }
    });

    return rows;
  },
  scrollToTop: function scrollToTop(scrollDuration) {
    if (!_isBrowser2['default']) return;

    var scrollHeight = window.scrollY;
    var scrollStep = Math.PI / (scrollDuration / 15);
    var cosParameter = scrollHeight / 2;

    var scrollCount = 0;
    var scrollMargin = void 0;
    var scrollInterval = setInterval(function () {
      if (window.scrollY > relativeTop) {
        scrollCount = scrollCount + 1;
        scrollMargin = cosParameter - cosParameter * Math.cos(scrollCount * scrollStep);
        window.scrollTo(0, scrollHeight - scrollMargin);
      } else {
        clearInterval(scrollInterval);
      }
    }, 15);
  },
  render: function render() {
    var _this = this;

    var _props2 = this.props,
        selection = _props2.selection,
        prefix = _props2.prefix,
        columns = _props2.columns,
        className = _props2.className,
        sortBy = _props2.sortBy,
        autoStick = _props2.autoStick,
        sortType = _props2.sortType,
        datasets = _props2.datasets,
        rowKey = _props2.rowKey,
        pageInfo = _props2.pageInfo,
        emptyLabel = _props2.emptyLabel,
        _props2$getRowConf = _props2.getRowConf,
        getRowConf = _props2$getRowConf === undefined ? function () {
      return { canSelect: true, rowClass: '' };
    } : _props2$getRowConf;

    var needSelect = selection !== null;
    var selectedRowKeys = [];

    var isSelectAll = false;
    var isSelectPart = false;

    if (needSelect) {
      var canSelectRowsCount = 0;

      datasets.forEach(function (item, index) {
        var _getRowConf2 = getRowConf(item, index),
            _getRowConf2$canSelec = _getRowConf2.canSelect,
            canSelect = _getRowConf2$canSelec === undefined ? true : _getRowConf2$canSelec;

        if (canSelect) {
          canSelectRowsCount += 1;
        }
      });

      isSelectAll = canSelectRowsCount > 0 && selection.selectedRowKeys.length === canSelectRowsCount;
      isSelectPart = canSelectRowsCount > 0 && selection.selectedRowKeys.length > 0 && !isSelectAll;
      selectedRowKeys = selection.selectedRowKeys;
    }

    return _react2['default'].createElement(
      'div',
      { className: prefix + '-table-container' },
      _react2['default'].createElement(
        _zentLoading2['default'],
        { show: this.props.loading, 'static': true },
        columns && _react2['default'].createElement(
          'div',
          { className: prefix + '-table ' + className },
          this.state.placeHolderHeight && _react2['default'].createElement(
            'div',
            { className: 'thead place-holder' },
            _react2['default'].createElement(
              'div',
              { className: 'tr' },
              this.cloneHeaderContent()
            )
          ),
          _react2['default'].createElement(_Head2['default'], {
            ref: function ref(c) {
              return _this.head = c;
            },
            columns: columns,
            sortBy: sortBy,
            sortType: sortType,
            onSort: this.onSort,
            selection: {
              needSelect: needSelect,
              onSelectAll: this.onSelectAllRows,
              isSelectAll: isSelectAll,
              isSelectPart: isSelectPart
            },
            autoStick: autoStick,
            style: this.state.fixStyle
          }),
          _react2['default'].createElement(_Body2['default'], {
            datasets: datasets,
            columns: columns,
            emptyLabel: emptyLabel,
            rowKey: rowKey,
            getRowConf: getRowConf,
            selection: {
              needSelect: needSelect,
              selectedRowKeys: selectedRowKeys,
              onSelect: this.onSelectOneRow
            }
          })
        )
      ),
      pageInfo && _react2['default'].createElement(_zentPagination2['default'], {
        current: this.state.current,
        totalItem: pageInfo.total,
        pageSize: pageInfo.limit,
        maxPageToShow: pageInfo.maxPageToShow,
        onChange: this.onPageChange
      })
    );
  }
});

exports['default'] = Table;
module.exports = exports['default'];