git.iko.soy/bridge
on dffcebf help sign in
bridge/src/components/old/HorizontalSelector.js
51 lines 1.1 kB history raw
1import React from 'react';
2import PropTypes from 'prop-types';
4class HorizontalSelector extends React.Component {
5 constructor(props) {
6 super(props);
8 this.state = {
9 option: this.props.options[0].value,
10 };
12 this.selectOption = this.selectOption.bind(this);
13 }
15 selectOption(opt) {
16 this.props.onChange(opt);
17 this.setState({ option: opt });
18 }
20 getOptionElems() {
21 return this.props.options.map(opt => {
22 let active = opt.value === this.state.option ? 'btn-primary active' : '';
23 return (
24 <button
25 key={opt.value.toString()}
26 className={`btn ${active} h-10 ph-4 flex sans ${this.props.className}`}
27 onClick={() => this.selectOption(opt.value)}>
28 {opt.title}
29 </button>
30 );
31 });
32 }
34 render() {
35 const optionElems = this.getOptionElems();
37 return <div className="btn-group">{optionElems}</div>;
38 }
41HorizontalSelector.propTypes = {
42 className: PropTypes.string,
43 options: PropTypes.array,
44};
46HorizontalSelector.defaultProps = {
47 className: '',
48 options: [],
49};
51export default HorizontalSelector;