Code coverage report for components/sortable_table/index.js

Statements: 95% (19 / 20)      Branches: 66.67% (4 / 6)      Functions: 100% (5 / 5)      Lines: 95% (19 / 20)      Ignored: none     

All files » components/sortable_table/ » index.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 1101 1 1 1 1                           1                                 1               15             1           16 16   16 36 36                     36           36         16                   16                               1
var React = window.React || require('react/addons');
var _ = require('lodash');
var TableHeader = require('./header');
var TableRow = require('./row');
var Styles = require('../../styles/sortable_table');
 
 
/*
 * Takes an array of json objects (for example, a Backbone.Collection.toJSON())
 * and an array of attributes to serve as column header labels and creates a sortable table from the data.
 * Column header labels are clickable and will call an external sort method, passing
 * 'ascending' or 'descending' based on which option is currently active.
 *
 * Responsible for managing the expanded/condensed state of rows and for proxying sort
 * events up to parent view for processing.
 */
 
 
var SortableTable = React.createClass({
 
  propTypes: {
    tableType: React.PropTypes.string,
    label: React.PropTypes.string,
    collection: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
    columnNames: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
    onSortCollection: React.PropTypes.func.isRequired,
    isBulkEditable: React.PropTypes.bool,
    onBulkSelect: React.PropTypes.func,
    modelChangerUtilities: React.PropTypes.object,
    navigatorUtility: React.PropTypes.object
  },
 
  mixins: [Styles],
 
  getDefaultProps: function() {
    return {
      isBulkEditable: false,
      onBulkSelect: _.noop(),
      modelChangerUtilities: {}
    };
  },
 
  getInitialState: function() {
    return {
      expanded: 'condensed',
      sortBy: 'number'
    };
  },
 
  onExpandClicked: function(expandOrCondense) {
    this.setState({
      expanded: expandOrCondense
    });
  },
 
  render: function() {
    var tableClass = "sortable-table " + this.props.label;
    var rows = [];
 
    _.each(this.props.collection, function(model) {
      var modelId = [model.product.id, model.number];
      var rowProps = {
        key: modelId,
        model: model,
        columns: this.props.columnNames,
        expanded: this.state.expanded,
        modelChangerUtilities: this.props.modelChangerUtilities,
        navigatorUtility: this.props.navigatorUtility,
        isBulkEditable: this.props.isBulkEditable,
        onBulkSelect: this.props.onBulkSelect
      };
 
      Iif (model.isMatched && !model.parent) {
        // Add a spacer row above matched parents.
        rows.push(
          <tr key={modelId + ':spacer'} className="spacer" style={Styles.row.spacer} />
        );
      }
      rows.push(
        <TableRow {...rowProps} />
      );
    }, this);
 
    var headerProps = {
      tableType: this.props.tableType,
      columns: this.props.columnNames,
      sortedBy: this.state.sortBy,
      expanded: this.state.expanded,
      isBulkEditable: this.props.isBulkEditable,
      onExpanderClick: this.onExpandClicked,
      onLabelClick: this.props.onSortCollection
    };
 
    return (
      <div className={tableClass} style={Styles.table.wrapper}>
        <h2 className="sortable-title" style={Styles.table.title}>{this.props.label}</h2>
        <table style={Styles.table.table}>
          <thead style={Styles.table.thead}>
            <TableHeader {...headerProps} />
          </thead>
          <tbody>
            {rows}
          </tbody>
        </table>
      </div>
    );
  }
});
 
module.exports = SortableTable;