Code coverage report for components/expander.js

Statements: 100% (23 / 23)      Branches: 100% (6 / 6)      Functions: 100% (4 / 4)      Lines: 100% (23 / 23)      Ignored: none     

All files » components/ » expander.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 721 1 1             1                   1             19           4   4 1     3 3       26   26 26 26 26   26 25 25   1 1     26                         1
var React = window.React || require('react/addons');
var _ = require('lodash');
var Styles = require('../styles/expander');
 
/*
 * Buttons for toggling the expanded/condensed state of
 * column items and table rows.
 */
 
var Expander = React.createClass({
 
  propTypes: {
    expanded: React.PropTypes.string,
    onClick: React.PropTypes.func.isRequired
  },
 
  mixins: [Styles],
 
  getDefaultProps: function() {
    return {
      expanded: 'condensed'
    };
  },
 
  getInitialState: function() {
    // We'll use state to dump repeat clicks on the same button
    return {
      expandOrCondense: this.props.expanded
    };
  },
 
  onExpanderClick: function(expandOrCondense, ev) {
    ev.stopPropagation();
 
    if (expandOrCondense === this.state.expandOrCondense) {
      return;
    }
 
    this.setState({expandOrCondense: expandOrCondense});
    this.props.onClick(expandOrCondense);
  },
 
  render: function() {
    var className = "expander " + this.props.expanded;
 
    var condenseButton = Styles.condense;
    var condenseIcon = Styles.condenseIcon;
    var expandButton = Styles.expand;
    var expandIcon = Styles.expandIcon;
 
    if (this.props.expanded === 'condensed') {
      condenseButton = _.extend({}, condenseButton, Styles.active);
      condenseIcon = _.extend({}, condenseIcon, Styles.condenseIconActive);
    } else {
      expandButton = _.extend({}, expandButton, Styles.active);
      expandIcon = _.extend({}, expandIcon, Styles.expandIconActive);
    }
 
    return (
      <div className={className}>
        <button className="expanded" style={expandButton} onClick={_.partial(this.onExpanderClick, 'expanded')}>
          <i style={expandIcon}></i>
        </button>
        <button className="condensed" style={condenseButton} onClick={_.partial(this.onExpanderClick, 'condensed')}>
          <i style={condenseIcon}></i>
        </button>
      </div>
    );
  }
});
 
module.exports = Expander;