| import React, { PropTypes } from 'react'; |
| import { FormGroup, FormControl } from 'react-bootstrap'; |
| import ControlLabelWithTooltip from './ControlLabelWithTooltip'; |
| import { slugify } from '../../modules/utils'; |
| |
| const propTypes = { |
| name: PropTypes.string.isRequired, |
| choices: PropTypes.array, |
| label: PropTypes.string, |
| description: PropTypes.string, |
| onChange: PropTypes.func, |
| }; |
| |
| const defaultProps = { |
| label: null, |
| description: null, |
| onChange: () => {}, |
| }; |
| |
| export default class SelectField extends React.Component { |
| onChange(opt) { |
| this.props.onChange(this.props.name, opt.target.value); |
| } |
| |
| render() { |
| return ( |
| <FormGroup controlId={`formControlsSelect-${slugify(this.props.label)}`}> |
| <ControlLabelWithTooltip |
| label={this.props.label} |
| description={this.props.description} |
| /> |
| <FormControl |
| componentClass="select" |
| placeholder="select" |
| onChange={this.onChange.bind(this)} |
| > |
| {this.props.choices.map((c) => <option key={c[0]} value={c[0]}>{c[1]}</option>)} |
| </FormControl> |
| </FormGroup> |
| ); |
| } |
| } |
| |
| SelectField.propTypes = propTypes; |
| SelectField.defaultProps = defaultProps; |