All files / javascripts/explorev2/components Filter.jsx

68.42% Statements 13/19
25% Branches 2/8
100% Functions 3/3
68.42% Lines 13/19
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 931x   1x 1x   1x             1x           6x   2x   2x                                     2x               2x                       4x                                                         1x 1x  
import React from 'react';
// import { Tab, Row, Col, Nav, NavItem } from 'react-bootstrap';
import Select from 'react-select';
import { Button } from 'react-bootstrap';
 
const propTypes = {
  actions: React.PropTypes.object.isRequired,
  filterColumnOpts: React.PropTypes.array,
  prefix: React.PropTypes.string,
  filter: React.PropTypes.object.isRequired,
};
 
const defaultProps = {
  filterColumnOpts: [],
  prefix: 'flt',
};
 
export default class Filter extends React.Component {
  constructor(props) {
    super(props);
    const opChoices = this.props.prefix === 'flt' ?
      ['in', 'not in'] : ['==', '!=', '>', '<', '>=', '<='];
    this.state = {
      opChoices,
    };
  }
  changeCol(filter, colOpt) {
    const val = (colOpt) ? colOpt.value : null;
    this.props.actions.changeFilter(filter, 'col', val);
  }
  changeOp(filter, opOpt) {
    const val = (opOpt) ? opOpt.value : null;
    this.props.actions.changeFilter(filter, 'op', val);
  }
  changeValue(filter, event) {
    this.props.actions.changeFilter(filter, 'value', event.target.value);
  }
  removeFilter(filter) {
    this.props.actions.removeFilter(filter);
  }
  render() {
    return (
      <div>
        <div className="row space-1">
          <Select
            className="col-lg-12"
            multi={false}
            name="select-column"
            placeholder="Select column"
            options={this.props.filterColumnOpts.map((o) => ({ value: o, label: o }))}
            value={this.props.filter.col}
            autosize={false}
            onChange={this.changeCol.bind(this, this.props.filter)}
          />
        </div>
        <div className="row space-1">
          <Select
            className="col-lg-4"
            multi={false}
            name="select-op"
            placeholder="Select operator"
            options={this.state.opChoices.map((o) => ({ value: o, label: o }))}
            value={this.props.filter.op}
            autosize={false}
            onChange={this.changeOp.bind(this, this.props.filter)}
          />
          <div className="col-lg-6">
            <input
              type="text"
              onChange={this.changeValue.bind(this, this.props.filter)}
              value={this.props.filter.value}
              className="form-control input-sm"
              placeholder="Filter value"
            />
          </div>
          <div className="col-lg-2">
            <Button
              id="remove-button"
              bsSize="small"
              onClick={this.removeFilter.bind(this, this.props.filter)}
            >
              <i className="fa fa-minus" />
            </Button>
          </div>
        </div>
      </div>
    );
  }
}
 
Filter.propTypes = propTypes;
Filter.defaultProps = defaultProps;