@@ -0,0 +1,57 @@
1+import React from 'react'
2+import PropTypes from 'prop-types';
3+
4+class HorizontalSelector extends React.Component {
5+ constructor(props) {
6+ super(props);
7+
8+ this.state = {
9+ option: this.props.options[0].value
10+ };
11+
12+ this.selectOption = this.selectOption.bind(this);
13+ }
14+
15+ selectOption(opt) {
16+ this.props.onChange(opt);
17+ this.setState({option: opt});
18+ }
19+
20+ getOptionElems() {
21+ return this.props.options.map(opt => {
22+ let active = (opt.value === this.state.option)
23+ ? 'btn-primary active'
24+ : '';
25+ return (
26+ <button
27+ className={`btn ${active} h-10 ph-4 flex sans ${this.props.className}`}
28+ value={opt.value}
29+ onClick={() => this.selectOption(opt.value)}>
30+ { opt.title }
31+ </button>
32+ )
33+ })
34+ }
35+
36+ render() {
37+ const optionElems = this.getOptionElems();
38+
39+ return (
40+ <div className='btn-group'>
41+ { optionElems }
42+ </div>
43+ )
44+ }
45+}
46+
47+HorizontalSelector.propTypes = {
48+ className: PropTypes.string,
49+ options: PropTypes.array
50+};
51+
52+HorizontalSelector.defaultProps = {
53+ className: '',
54+ options: []
55+};
56+
57+export default HorizontalSelector