git.iko.soy/bridge
on master help sign in
Implement HorizontalSelector
5e5f912Fang
src/bridge/components/Base.js+5
compare with master
unifiedsplit
@@ -37,6 +37,9 @@ import DropdownItem from './DropdownItem';
37import DropdownDivider from './DropdownDivider';
37import DropdownDivider from './DropdownDivider';
38import InnerLabelDropdown from './InnerLabelDropdown';
38import InnerLabelDropdown from './InnerLabelDropdown';
39
39
40+// Option selectors
41+import HorizontalSelector from './HorizontalSelector';
42+
40// Path Control
43// Path Control
41import Breadcrumb from './Breadcrumb';
44import Breadcrumb from './Breadcrumb';
42import BreadcrumbItem from './BreadcrumbItem';
45import BreadcrumbItem from './BreadcrumbItem';
@@ -183,6 +186,8 @@ export {
183 DropdownDivider,
186 DropdownDivider,
184 InnerLabelDropdown,
187 InnerLabelDropdown,
185
188
189+ HorizontalSelector,
190+
186 Breadcrumb,
191 Breadcrumb,
187 BreadcrumbItem,
192 BreadcrumbItem,
188
193
src/bridge/components/HorizontalSelector.jsnew file+57
@@ -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