All files / javascripts/explorev2/components/controls VizTypeControl.jsx

0% Statements 0/23
0% Branches 0/8
0% Functions 0/5
0% Lines 0/23
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                                                                                                                                                                                               
import React from 'react';
import PropTypes from 'prop-types';
import { Button, Label, FormControl, Modal } from 'react-bootstrap';
import visTypes from '../../stores/visTypes';
 
const IMG_SIZE = 150;
 
const propTypes = {
  description: PropTypes.string,
  label: PropTypes.string,
  name: PropTypes.string.isRequired,
  onChange: PropTypes.func,
  value: PropTypes.string.isRequired,
};
 
const defaultProps = {
  onChange: () => {},
};
 
export default class VizTypeControl extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false,
      filter: '',
    };
    this.toggleModal = this.toggleModal.bind(this);
    this.changeSearch = this.changeSearch.bind(this);
  }
  onChange(vizType) {
    this.props.onChange(vizType);
    this.setState({ showModal: false });
  }
  toggleModal() {
    this.setState({ showModal: !this.state.showModal });
  }
  changeSearch(event) {
    this.setState({ filter: event.target.value });
  }
  render() {
    const filter = this.state.filter;
    return (
      <div>
        <Label>{visTypes[this.props.value].label}</Label>
        <Button onClick={this.toggleModal} bsSize="sm" className="l-m-5">
          <i className="fa fa-line-chart l-m-2" />
          <i className="fa fa-area-chart l-m-2" />
          <i className="fa fa-bar-chart l-m-2" />
          <i className="fa fa-pie-chart l-m-2" />
        </Button>
        <Modal show={this.state.showModal} onHide={this.toggleModal} bsSize="lg">
          <Modal.Header closeButton>
            <Modal.Title>Select a visualization type</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <div>
              <FormControl
                id="formControlsText"
                type="text"
                bsSize="sm"
                value={this.state.filter}
                placeholder="Search / Filter"
                onChange={this.changeSearch}
              />
            </div>
            <div className="clearfix">
              {Object.keys(visTypes)
                .filter(vt => (
                  filter.length === 0 || visTypes[vt].label.toLowerCase().includes(filter)))
                .map(vt => (
                  <div
                    className={`viztype-selector-container ${vt === this.props.value ? 'selected' : ''}`}
                    onClick={this.onChange.bind(this, vt)}
                    key={`viztype-img-${vt}`}
                  >
                    <img
                      alt={`viz-type-${vt}`}
                      width={IMG_SIZE}
                      height={IMG_SIZE}
                      className={`viztype-selector ${this.props.value === vt ? 'selected' : ''}`}
                      src={`/static/assets/images/viz_thumbnails/${vt}.png`}
                    />
                    <div className="viztype-label">
                      <Label>{visTypes[vt].label}</Label>
                    </div>
                  </div>))}
            </div>
          </Modal.Body>
        </Modal>
      </div>);
  }
}
 
VizTypeControl.propTypes = propTypes;
VizTypeControl.defaultProps = defaultProps;