@scrnhq/eurovision-elements/oldTable/index.js

'use strict';

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

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _style = require('./style.css');

var _style2 = _interopRequireDefault(_style);

var _sortBy = require('lodash/sortBy');

var _sortBy2 = _interopRequireDefault(_sortBy);

var _tableItem = require('../table-item');

var _tableItem2 = _interopRequireDefault(_tableItem);

var _tableHeader = require('../table-header');

var _tableHeader2 = _interopRequireDefault(_tableHeader);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Table = function (_Component) {
  _inherits(Table, _Component);

  function Table() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, Table);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Table.__proto__ || Object.getPrototypeOf(Table)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      orderByDesc: true,
      sortBy: _this.props.headers[0]
    }, _this.onHeaderClick = function (header) {
      if (_this.state.sortBy === header.props.id) {
        return _this.setState({ orderByDesc: !_this.state.orderByDesc });
      }

      return _this.setState({
        sortBy: header.props.id,
        orderByDesc: true
      });
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  /**
   * Define the types of props the component accepts.
   *
   * @type {Object}
   */


  /**
   * Describe the state of the component.
   *
   * @type {Object}
   */


  /**
   * Invoked when a header is clicked.
   * When the same header is clicked as it's currently ordered by we reverse
   * the other, otherwise we order by the header & set the default of DESC as
   * order.
   *
   * @param  {String} header
   * @return {void}
   */


  _createClass(Table, [{
    key: 'getEntries',


    /**
     * Get the entries for the table, ordered & sorted by as defined by the state.
     *
     * @return {Array}
     */
    value: function getEntries() {
      var _this2 = this;

      var entries = (0, _sortBy2.default)(this.props.entries, function (entry) {
        var sorter = entry[_this2.state.sortBy];
        return (0, _react.isValidElement)(sorter) ? sorter.props[sorter.props.sortBy] : sorter;
      });
      return this.state.orderByDesc ? entries : entries.reverse();
    }

    /**
     * Render the headers of the table.
     *
     * @return {ReactElement}
     */

  }, {
    key: 'renderHeaders',
    value: function renderHeaders() {
      var _this3 = this;

      return this.props.headers.map(function (header) {
        return _react2.default.createElement(
          _tableHeader2.default,
          {
            id: header,
            key: header,
            onClick: _this3.onHeaderClick,
            active: _this3.state.sortBy === header,
            orderBy: _this3.state.orderByDesc ? 'DESC' : 'ASC'
          },
          header
        );
      });
    }

    /**
     * Render the entries of the table.
     *
     * @return {ReactElement}
     */

  }, {
    key: 'renderEntries',
    value: function renderEntries() {
      var headers = this.props.headers;


      return this.getEntries().map(function (entry) {
        return _react2.default.createElement(
          'tr',
          { key: entry.id, className: _style2.default.row },
          headers.map(function (header) {
            return _react2.default.createElement(
              _tableItem2.default,
              { key: header },
              entry[header]
            );
          })
        );
      });
    }

    /**
     * Render the component
     *
     * @return {ReactElement}
     */

  }, {
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        'table',
        { className: _style2.default.component },
        _react2.default.createElement(
          'thead',
          { className: _style2.default.head },
          _react2.default.createElement(
            'tr',
            null,
            this.renderHeaders()
          )
        ),
        _react2.default.createElement(
          'tbody',
          null,
          this.renderEntries()
        )
      );
    }
  }]);

  return Table;
}(_react.Component);

Table.propTypes = {
  headers: _react.PropTypes.array.isRequired,
  entries: _react.PropTypes.array.isRequired
};
exports.default = Table;