zent/lib/grid/Grid.js

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

'use strict';

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

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

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

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _loading = require('../loading');

var _loading2 = _interopRequireDefault(_loading);

var _classnames2 = require('classnames');

var _classnames3 = _interopRequireDefault(_classnames2);

var _has = require('lodash/has');

var _has2 = _interopRequireDefault(_has);

var _get = require('lodash/get');

var _get2 = _interopRequireDefault(_get);

var _every = require('lodash/every');

var _every2 = _interopRequireDefault(_every);

var _assign = require('lodash/assign');

var _assign2 = _interopRequireDefault(_assign);

var _debounce = require('lodash/debounce');

var _debounce2 = _interopRequireDefault(_debounce);

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

var _isEqual2 = _interopRequireDefault(_isEqual);

var _indexOf = require('lodash/indexOf');

var _indexOf2 = _interopRequireDefault(_indexOf);

var _forEach = require('lodash/forEach');

var _forEach2 = _interopRequireDefault(_forEach);

var _noop = require('lodash/noop');

var _noop2 = _interopRequireDefault(_noop);

var _size = require('lodash/size');

var _size2 = _interopRequireDefault(_size);

var _some = require('lodash/some');

var _some2 = _interopRequireDefault(_some);

var _isFunction = require('lodash/isFunction');

var _isFunction2 = _interopRequireDefault(_isFunction);

var _filter = require('lodash/filter');

var _filter2 = _interopRequireDefault(_filter);

var _cloneDeep = require('lodash/cloneDeep');

var _cloneDeep2 = _interopRequireDefault(_cloneDeep);

var _includes = require('lodash/includes');

var _includes2 = _interopRequireDefault(_includes);

var _WindowResizeHandler = require('../utils/component/WindowResizeHandler');

var _WindowResizeHandler2 = _interopRequireDefault(_WindowResizeHandler);

var _Store = require('./Store');

var _Store2 = _interopRequireDefault(_Store);

var _ColGroup = require('./ColGroup');

var _ColGroup2 = _interopRequireDefault(_ColGroup);

var _Header = require('./Header');

var _Header2 = _interopRequireDefault(_Header);

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

var _Body2 = _interopRequireDefault(_Body);

var _Footer = require('./Footer');

var _Footer2 = _interopRequireDefault(_Footer);

var _SelectionCheckbox = require('./SelectionCheckbox');

var _SelectionCheckbox2 = _interopRequireDefault(_SelectionCheckbox);

var _SelectionCheckboxAll = require('./SelectionCheckboxAll');

var _SelectionCheckboxAll2 = _interopRequireDefault(_SelectionCheckboxAll);

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

function stopPropagation(e) {
  e.stopPropagation();
  if (e.nativeEvent.stopImmediatePropagation) {
    e.nativeEvent.stopImmediatePropagation();
  }
}

var Grid = function (_ref) {
  (0, _inherits3['default'])(Grid, _ref);

  function Grid(props) {
    (0, _classCallCheck3['default'])(this, Grid);

    var _this = (0, _possibleConstructorReturn3['default'])(this, (Grid.__proto__ || Object.getPrototypeOf(Grid)).call(this, props));

    _initialiseProps.call(_this);

    _this.checkboxPropsCache = {};
    _this.store = new _Store2['default'](props);
    _this.store.setState({
      columns: _this.getColumns(props, props.columns),
      selectedRowKeys: (0, _get2['default'])(props, 'selection.selectedRowKeys')
    });
    _this.setScrollPosition('left');

    _this.state = {
      fixedColumnsBodyRowsHeight: []
    };
    return _this;
  }

  (0, _createClass3['default'])(Grid, [{
    key: 'setScrollPosition',
    value: function setScrollPosition(position) {
      this.scrollPosition = position;

      if (this.tableNode) {
        var prefix = this.props.prefix;

        if (position === 'both') {
          this.tableNode.className = this.tableNode.className.replace(new RegExp(prefix + '-grid-scroll-position-.+$', 'gi'), ' ');
          this.tableNode.classList.add(prefix + '-grid-scroll-position-left');
          this.tableNode.classList.add(prefix + '-grid-scroll-position-right');
        } else {
          this.tableNode.className = this.tableNode.className.replace(new RegExp(prefix + '-grid-scroll-position-.+$', 'gi'), ' ');
          this.tableNode.classList.add(prefix + '-grid-scroll-position-' + position);
        }
      }
    }
  }, {
    key: 'componentDidMount',
    value: function componentDidMount() {
      if (this.isAnyColumnsFixed()) {
        this.syncFixedTableRowHeight();
      }
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (nextProps.selection && (0, _has2['default'])(nextProps.selection, 'selectedRowKeys')) {
        this.store.setState({
          selectedRowKeys: nextProps.selection.selectedRowKeys || [],
          columns: this.getColumns(nextProps)
        });

        var selection = this.props.selection;

        if (selection && nextProps.selection.getCheckboxProps !== selection.getCheckboxProps) {
          this.CheckboxPropsCache = {};
        }
      }

      if (nextProps.columns && nextProps.columns !== this.props.columns) {
        this.store.setState({
          columns: this.getColumns(nextProps, nextProps.columns)
        });
      }

      if ((0, _has2['default'])(nextProps, 'datasets') && nextProps.datasets !== this.props.datasets) {
        this.CheckboxPropsCache = {};
      }
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate() {
      if (this.isAnyColumnsFixed()) {
        this.syncFixedTableRowHeight();
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          prefix = _props.prefix,
          loading = _props.loading,
          pageInfo = _props.pageInfo;

      var className = prefix + '-grid';
      className = (0, _classnames3['default'])(className, this.props.className);

      if (this.scrollPosition === 'both') {
        className = (0, _classnames3['default'])(className, prefix + '-grid-scroll-position-left', prefix + '-grid-scroll-position-right');
      } else {
        className = (0, _classnames3['default'])(className, prefix + '-grid-scroll-position-left', prefix + '-grid-scroll-position-' + this.scrollPosition);
      }

      var content = [this.getTable(), this.getEmpty(), _react2['default'].createElement(_Footer2['default'], {
        key: 'footer',
        prefix: prefix,
        pageInfo: pageInfo,
        onChange: this.onChange
      })];

      var scrollTable = this.isAnyColumnsFixed() ? _react2['default'].createElement(
        'div',
        { className: prefix + '-grid-scroll' },
        content
      ) : content;

      return _react2['default'].createElement(
        'div',
        { className: className, ref: function ref(node) {
            return _this2.tableNode = node;
          } },
        _react2['default'].createElement(
          _loading2['default'],
          { show: loading },
          scrollTable,
          this.isAnyColumnsLeftFixed() && _react2['default'].createElement(
            'div',
            { className: prefix + '-grid-fixed-left' },
            this.getLeftFixedTable()
          ),
          this.isAnyColumnsRightFixed() && _react2['default'].createElement(
            'div',
            { className: prefix + '-grid-fixed-right' },
            this.getRightFixedTable()
          )
        ),
        _react2['default'].createElement(_WindowResizeHandler2['default'], {
          onResize: (0, _debounce2['default'])(this.syncFixedTableRowHeight, 500)
        })
      );
    }
  }]);
  return Grid;
}(_react.PureComponent || _react.Component);

var _initialiseProps = function _initialiseProps() {
  var _this3 = this;

  this.syncFixedTableRowHeight = function () {
    var tableRect = _this3.tableNode.getBoundingClientRect();

    if (tableRect.height !== undefined && tableRect.height <= 0) {
      return;
    }

    var prefix = _this3.props.prefix;


    var bodyRows = _this3.bodyTable.querySelectorAll('tbody .' + prefix + '-grid-tr') || [];

    var fixedColumnsBodyRowsHeight = [].map.call(bodyRows, function (row) {
      return row.getBoundingClientRect().height || 'auto';
    });
    if ((0, _isEqual2['default'])(_this3.state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight)) {
      return;
    }

    _this3.setState({
      fixedColumnsBodyRowsHeight: fixedColumnsBodyRowsHeight
    });
  };

  this.onChange = function (conf) {
    var params = (0, _assign2['default'])({}, _this3.store.getState('conf'), conf);
    _this3.store.setState('conf', params);
    _this3.props.onChange(params);
  };

  this.getDataKey = function (data, rowIndex) {
    var rowKey = _this3.props.rowKey;

    return rowKey ? (0, _get2['default'])(data, rowKey) : rowIndex;
  };

  this.isAnyColumnsFixed = function () {
    return _this3.store.getState('isAnyColumnsFixed', function () {
      return (0, _some2['default'])(_this3.store.getState('columns'), function (column) {
        return !!column.fixed;
      });
    });
  };

  this.isAnyColumnsLeftFixed = function () {
    return _this3.store.getState('isAnyColumnsLeftFixed', function () {
      return (0, _some2['default'])(_this3.store.getState('columns'), function (column) {
        return column.fixed === 'left' || column.fixed === true;
      });
    });
  };

  this.isAnyColumnsRightFixed = function () {
    return _this3.store.getState('isAnyColumnsRightFixed', function () {
      return (0, _some2['default'])(_this3.store.getState('columns'), function (column) {
        return column.fixed === 'right';
      });
    });
  };

  this.getLeftColumns = function () {
    return (0, _filter2['default'])(_this3.store.getState('columns'), function (column) {
      return column.fixed === 'left' || column.fixed === true;
    });
  };

  this.getRightColumns = function () {
    return (0, _filter2['default'])(_this3.store.getState('columns'), function (column) {
      return column.fixed === 'right';
    });
  };

  this.getColumns = function (props, columns) {
    var _ref2 = props || _this3.props,
        selection = _ref2.selection,
        datasets = _ref2.datasets;

    columns = (0, _cloneDeep2['default'])(columns || _this3.store.getState('columns'));

    if (selection) {
      var data = (0, _filter2['default'])(datasets, function (item, index) {
        var rowIndex = _this3.getDataKey(item, index);

        if (selection.getCheckboxProps) {
          return !(0, _get2['default'])(_this3.getCheckboxPropsByItem(item, rowIndex), 'disabled');
        }
        return true;
      });

      var selectionColumn = {
        key: 'selection-column',
        width: '20px',
        bodyRender: _this3.renderSelectionCheckbox(selection.type)
      };

      var checkboxAllDisabled = (0, _every2['default'])(data, function (item, index) {
        var rowIndex = _this3.getDataKey(item, index);
        return (0, _get2['default'])(_this3.getCheckboxPropsByItem(item, rowIndex), 'disabled');
      });

      selectionColumn.title = _react2['default'].createElement(_SelectionCheckboxAll2['default'], {
        store: _this3.store,
        datasets: data,
        getDataKey: _this3.getDataKey,
        onSelect: _this3.handleBatchSelect,
        disabled: checkboxAllDisabled
      });

      if (columns.some(function (column) {
        return column.fixed === 'left' || column.fixed === true;
      })) {
        selectionColumn.fixed = 'left';
      }

      if (columns[0] && columns[0].key === 'selection-column') {
        columns[0] = selectionColumn;
      } else {
        columns.unshift(selectionColumn);
      }
    }

    return columns;
  };

  this.getLeftFixedTable = function () {
    return _this3.getTable({
      columns: _this3.getLeftColumns(),
      fixed: 'left'
    });
  };

  this.getRightFixedTable = function () {
    return _this3.getTable({
      columns: _this3.getRightColumns(),
      fixed: 'right'
    });
  };

  this.handleBodyScroll = function (e) {
    if (e.currentTarget !== e.target) {
      return;
    }
    var target = e.target;
    var _props$scroll = _this3.props.scroll,
        scroll = _props$scroll === undefined ? {} : _props$scroll;


    if (target.scrollLeft !== _this3.lastScrollLeft && scroll.x) {
      var node = target || _this3.bodyTable;
      var scrollToLeft = node.scrollLeft === 0;
      var scrollToRight = node.scrollLeft + 1 >= node.children[0].getBoundingClientRect().width - node.getBoundingClientRect().width;
      if (scrollToLeft && scrollToRight) {
        _this3.setScrollPosition('both');
      } else if (scrollToLeft) {
        _this3.setScrollPosition('left');
      } else if (scrollToRight) {
        _this3.setScrollPosition('right');
      } else if (_this3.scrollPosition !== 'middle') {
        _this3.setScrollPosition('middle');
      }
    }
    _this3.lastScrollLeft = target.scrollLeft;
  };

  this.getTable = function () {
    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
    var _props2 = _this3.props,
        prefix = _props2.prefix,
        datasets = _props2.datasets,
        scroll = _props2.scroll,
        sortType = _props2.sortType,
        sortBy = _props2.sortBy,
        rowClassName = _props2.rowClassName,
        onRowClick = _props2.onRowClick,
        ellipsis = _props2.ellipsis;
    var fixed = options.fixed;

    var columns = options.columns || _this3.store.getState('columns');
    var tableClassName = '';
    var bodyStyle = {};
    var tableStyle = {};

    if (fixed || scroll.x) {
      tableClassName = prefix + '-grid-fixed';
      bodyStyle.overflowX = 'auto';
    }

    if (!fixed && scroll.x) {
      tableStyle.width = scroll.x;
    }

    return _react2['default'].createElement(
      'div',
      {
        style: bodyStyle,
        ref: function ref(_ref3) {
          if (!fixed) _this3.bodyTable = _ref3;
        },
        onScroll: _this3.handleBodyScroll,
        key: 'table'
      },
      _react2['default'].createElement(
        'table',
        {
          className: (0, _classnames3['default'])(prefix + '-grid-table', tableClassName, (0, _defineProperty3['default'])({}, prefix + '-grid-table-ellipsis', ellipsis)),
          style: tableStyle
        },
        _react2['default'].createElement(_ColGroup2['default'], { columns: columns }),
        _react2['default'].createElement(_Header2['default'], {
          prefix: prefix,
          columns: columns,
          store: _this3.store,
          onChange: _this3.onChange,
          sortType: sortType,
          sortBy: sortBy
        }),
        _react2['default'].createElement(_Body2['default'], {
          prefix: prefix,
          columns: columns,
          datasets: datasets,
          rowClassName: rowClassName,
          onRowClick: onRowClick,
          fixed: fixed,
          fixedColumnsBodyRowsHeight: _this3.state.fixedColumnsBodyRowsHeight
        })
      )
    );
  };

  this.getEmpty = function () {
    var _props3 = _this3.props,
        datasets = _props3.datasets,
        prefix = _props3.prefix,
        emptyLabel = _props3.emptyLabel;


    if ((0, _size2['default'])(datasets) === 0) {
      return _react2['default'].createElement(
        'div',
        { className: prefix + '-grid-empty', key: 'empty' },
        emptyLabel
      );
    }
    return null;
  };

  this.getCheckboxPropsByItem = function (data, rowIndex) {
    var selection = _this3.props.selection;


    if (!(0, _get2['default'])(selection, 'getCheckboxProps')) {
      return {};
    }

    if (!_this3.checkboxPropsCache[rowIndex]) {
      _this3.checkboxPropsCache[rowIndex] = selection.getCheckboxProps(data);
    }
    return _this3.checkboxPropsCache[rowIndex];
  };

  this.onSelectChange = function (selectedRowKeys, data) {
    var _props4 = _this3.props,
        datasets = _props4.datasets,
        selection = _props4.selection;

    var onSelect = (0, _get2['default'])(selection, 'onSelect');

    if ((0, _isFunction2['default'])(onSelect)) {
      var selectedRows = (0, _filter2['default'])(datasets, function (row, i) {
        return (0, _includes2['default'])(selectedRowKeys, _this3.getDataKey(row, i));
      });
      onSelect(selectedRowKeys, selectedRows, data);
    }
  };

  this.handleSelect = function (data, rowIndex, e) {
    var checked = e.target.checked;

    var selectedRowKeys = _this3.store.getState('selectedRowKeys');

    if (checked) {
      selectedRowKeys.push(rowIndex);
    } else {
      selectedRowKeys = (0, _filter2['default'])(selectedRowKeys, function (i) {
        return rowIndex !== i;
      });
    }

    _this3.store.setState({ selectedRowKeys: selectedRowKeys });

    _this3.onSelectChange(selectedRowKeys, data);
  };

  this.handleBatchSelect = function (type, data) {
    var selectedRowKeys = (0, _cloneDeep2['default'])(_this3.store.getState('selectedRowKeys'));

    var changeRowKeys = [];

    switch (type) {
      case 'selectAll':
        (0, _forEach2['default'])(data, function (key, index) {
          var rowIndex = _this3.getDataKey(key, index);
          if (!(0, _includes2['default'])(selectedRowKeys, rowIndex)) {
            selectedRowKeys.push(rowIndex);
            changeRowKeys.push(rowIndex);
          }
        });
        break;
      case 'removeAll':
        (0, _forEach2['default'])(data, function (key, index) {
          var rowIndex = _this3.getDataKey(key, index);
          if ((0, _includes2['default'])(selectedRowKeys, rowIndex)) {
            selectedRowKeys.splice((0, _indexOf2['default'])(selectedRowKeys, rowIndex), 1);
            changeRowKeys.push(key);
          }
        });
        break;
      default:
        break;
    }

    _this3.store.setState({ selectedRowKeys: selectedRowKeys });

    var changeRow = (0, _filter2['default'])(data, function (row, i) {
      return (0, _includes2['default'])(changeRowKeys, _this3.getDataKey(row, i));
    });

    _this3.onSelectChange(selectedRowKeys, changeRow);
  };

  this.renderSelectionCheckbox = function () {
    return function (data, _ref4) {
      var row = _ref4.row;

      var rowIndex = _this3.getDataKey(data, row);
      var props = _this3.getCheckboxPropsByItem(data, rowIndex);

      return _react2['default'].createElement(
        'span',
        { onClick: stopPropagation },
        _react2['default'].createElement(_SelectionCheckbox2['default'], {
          disabled: props.disabled,
          rowIndex: rowIndex,
          store: _this3.store,
          onChange: function onChange(e) {
            return _this3.handleSelect(data, _this3.getDataKey(data, row), e);
          }
        })
      );
    };
  };
};

Grid.propTypes = {
  className: _propTypes2['default'].string,
  rowClassName: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].func]),
  prefix: _propTypes2['default'].string,
  datasets: _propTypes2['default'].array,
  columns: _propTypes2['default'].array,
  loading: _propTypes2['default'].bool,
  pageInfo: _propTypes2['default'].oneOfType([_propTypes2['default'].object, _propTypes2['default'].bool]),
  onChange: _propTypes2['default'].func,
  selection: _propTypes2['default'].object,
  rowKey: _propTypes2['default'].string,
  scroll: _propTypes2['default'].object,
  sortBy: _propTypes2['default'].string,
  sortType: _propTypes2['default'].string,
  onRowClick: _propTypes2['default'].func,
  ellipsis: _propTypes2['default'].bool
};

Grid.defaultProps = {
  className: '',
  prefix: 'zent',
  datasets: [],
  columns: [],
  loading: false,
  pageInfo: false,
  onChange: _noop2['default'],
  selection: null,
  rowKey: 'id',
  emptyLabel: '没有更多数据了',
  scroll: {},
  onRowClick: _noop2['default'],
  ellipsis: false
};

exports['default'] = Grid;