Code coverage report for components/sortable_table/header.js

Statements: 100% (24 / 24)      Branches: 87.5% (7 / 8)      Functions: 100% (7 / 7)      Lines: 100% (24 / 24)      Ignored: none     

All files » components/sortable_table/ » header.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 1131 1 1 1                       1                           1                 15 102   15                   4 4 4   4 4   4                   20   20         20 20                   20                     20   20 110                       1
var React = window.React || require('react/addons');
var _ = require('lodash');
var Expander = require('../expander');
var Styles = require('../../styles/sortable_table');
 
/*
 * Renders header bar where cells are clickable elements that trigger a
 * sort on that column. Also responsible for proxying Expander events.
 * Property 'tableType' describes the data described by the table: ie,
 * might be 'backlog', if the table shows just backlog items. This property
 * is passed back through the label click callback so that you may take
 * action on that table's data alone (if rendering multiple tables in a view.)
 */
 
 
var TableHeader = React.createClass({
 
  propTypes: {
    tableType: React.PropTypes.string,
    columns: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
    expanded: React.PropTypes.string,
    isBulkEditable: React.PropTypes.bool,
    onExpanderClick: React.PropTypes.func,
    onLabelClick: React.PropTypes.func.isRequired
  },
 
  mixins: [Styles],
 
  getDefaultProps: function() {
    return {
      expanded: 'condensed'
    };
  },
 
  getInitialState: function() {
    /*
     * Keeps track of sort direction on each column.
     */
    var directionHash = _.zipObject(this.props.columns,
      _.times(this.props.columns.length, function() { return 'ascending'; }));
 
    return {
      directionHash: directionHash
    };
  },
 
  onLabelClick: function(ev) {
    /*
     * Grabs table type and sort option and passes to sort callback.
     * Flips direction in direction hash.
     */
    var column = ev.target.textContent.toLowerCase();
    var direction = this.state.directionHash[column] === 'ascending' ? 'descending' : 'ascending';
    var hashCopy = _.cloneDeep(this.state.directionHash);
 
    this.props.onLabelClick(this.props.tableType, column, direction);
    hashCopy[column] = direction;
 
    this.setState({
      directionHash: hashCopy
    });
  },
 
  render: function() {
    /*
     * Render column labels and optionally render an expander element that proxies click events
     * to table (Note: we'll only render this if we have a control column to render it into).
     */
    var hasProductColumn = _.contains(this.props.columns, 'product');
 
    var control = this.props.isBulkEditable ?
      (
        <th key="control" className="control" style={Styles.head.label}></th>
      ) : null;
 
    var expander = null;
    var expander = hasProductColumn ?
      (
        <th key="expander" style={Styles.head.label}>
          <Expander
            expanded={this.props.expanded}
            onClick={this.props.onExpanderClick}
          />
        </th>
      ) : null;
 
    return (
      <tr style={Styles.head.row}>
        {control}
        {expander}
        {this.buildColumnLabels()}
      </tr>
    );
  },
 
  buildColumnLabels: function() {
    // We don't want to render a label for the 'Control' column, so pop it off the list.
    var columns = _.without(this.props.columns, 'product');
 
    return _.map(columns, function(column) {
      return (
        <th key={column} title="click to sort" style={Styles.head.label}>
          <button className={column.replace(' ', '-')} style={Styles.head.button} key={column}
            onClick={this.onLabelClick}>
            {column}
          </button>
        </th>
      );
    }, this);
  }
});
 
module.exports = TableHeader;