zent/lib/grid/Header.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 _classnames2 = require('classnames');

var _classnames3 = _interopRequireDefault(_classnames2);

var _map = require('lodash/map');

var _map2 = _interopRequireDefault(_map);

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

var _forEach2 = _interopRequireDefault(_forEach);

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

var _filter2 = _interopRequireDefault(_filter);

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

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

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

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

    _initialiseProps.call(_this);

    _this.state = {
      rows: _this.getHeaderRows(props)
    };
    return _this;
  }

  (0, _createClass3['default'])(Header, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.subscribe();
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (nextProps.columns !== this.props.columns || nextProps.sortType !== this.props.sortType || nextProps.sortBy !== this.props.sortBy) {
        this.setState({
          rows: this.getHeaderRows(nextProps)
        });
      }
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      if (this.unsubscribe) {
        this.unsubscribe();
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var prefix = this.props.prefix;


      return _react2['default'].createElement(
        'thead',
        { className: prefix + '-grid-thead' },
        (0, _map2['default'])(this.state.rows, function (row, index) {
          return _react2['default'].createElement(
            'tr',
            { key: index, className: prefix + '-grid-tr' },
            row.map(function (props) {
              return _react2['default'].createElement('th', props);
            })
          );
        })
      );
    }
  }]);
  return Header;
}(_react.PureComponent || _react.Component);

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

  this.onSort = function (column, props) {
    var sortBy = props.sortBy;

    var name = column.name;
    var sortType = '';

    if (name === sortBy) {
      if (_this2.props.sortType === '') {
        sortType = 'desc';
      }
      if (_this2.props.sortType === 'desc') {
        sortType = 'asc';
      }
      if (_this2.props.sortType === 'asc') {
        sortType = '';
      }
    }

    if (name !== sortBy) {
      sortType = 'desc';
    }

    _this2.props.onChange({
      sortBy: name,
      sortType: sortType
    });
  };

  this.getChildren = function (column, props) {
    var prefix = props.prefix,
        sortBy = props.sortBy,
        sortType = props.sortType;


    if (column.needSort) {
      return _react2['default'].createElement(
        'a',
        {
          onClick: function onClick() {
            return _this2.onSort(column, props);
          },
          className: prefix + '-grid-thead-sort-btn'
        },
        column.title,
        column.name === sortBy && _react2['default'].createElement('span', {
          className: sortType ? prefix + '-grid-thead-sort-' + sortType : prefix + '-grid-thead-sort'
        })
      );
    }
    return column.title;
  };

  this.getHeaderRows = function (props) {
    var currentRow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
    var rows = arguments[2];

    props = props || _this2.props;
    var _props = props,
        prefix = _props.prefix,
        columns = _props.columns;


    rows = rows || [];
    rows[currentRow] = rows[currentRow] || [];

    (0, _forEach2['default'])(columns, function (column, index) {
      var _classnames;

      var name = column.name,
          key = column.key,
          className = column.className,
          colSpan = column.colSpan,
          nowrap = column.nowrap,
          textAlign = column.textAlign;

      var cell = {
        key: name || key || index,
        className: (0, _classnames3['default'])(prefix + '-grid-th', className, (_classnames = {}, (0, _defineProperty3['default'])(_classnames, prefix + '-grid-text-align-' + textAlign, textAlign), (0, _defineProperty3['default'])(_classnames, prefix + '-grid-nowrap', nowrap), _classnames)),
        children: _this2.getChildren(column, props)
      };

      if (typeof colSpan === 'number') {
        cell.colSpan = colSpan;
      }

      if (cell.colSpan !== 0) {
        rows[currentRow].push(cell);
      }
    });

    return (0, _filter2['default'])(rows, function (row) {
      return row.length > 0;
    });
  };

  this.subscribe = function () {
    var store = _this2.props.store;

    _this2.unsubscribe = store.subscribe('columns', function () {
      _this2.setState({ rows: _this2.getHeaderRows() });
    });
  };
};

Header.propTypes = {
  prefix: _propTypes2['default'].string,
  columns: _propTypes2['default'].array
};

exports['default'] = Header;