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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
//
// A simple list of items, with minus and plus buttons to add and remove
// items.
//
import React from 'react'
import {Button, ButtonGroup, ButtonToolbar, Glyphicon, FormControl} from 'react-bootstrap'
const CONTAINER_CSS = {
display: "flex",
flexDirection: "column"
}
const SELECT_CSS = {
padding: "0px",
flex: "1 1 1000px",
overflowY: "scroll"
}
const OPTION_CSS = {
padding: "10px"
}
const TOOLBAR_CSS = {
paddingTop: "10px",
flex: "0 0 auto"
}
class ListEdit extends React.Component {
static get defaultProps() {return{
width: null,
items: [
'aaaaaaa',
'bbbbbbb',
'ccccccc'
],
selected: null,
onRemove: null,
onAdd: null,
}}
constructor(props) {
super(props)
let index = 0
if (props.selected) {
index = props.items.indexOf(props.selected)
}
this.state = {
selected: index
}
this.click = this.click.bind(this)
this.add = this.add.bind(this)
this.remove = this.remove.bind(this)
}
setSelected(index) {
this.setState({
selected: index
})
}
click(e) {
let row = parseInt(e.target.value)
if (row >= 0) {
this.setState({selected: row})
}
}
add() {
if (this.props.onAdd) {
this.props.onAdd()
}
}
remove() {
if (this.state.selected >= 0 && this.props.onRemove) {
if (this.props.items.length == this.state.selected + 1) {
// if we remove the last item, set the selected item
// to the one right before it.
this.setState({selected: (this.state.selected - 1)})
}
this.props.onRemove(this.props.items[this.state.selected])
}
}
render() {
let options = null
if (this.props.items) {
options = this.props.items.map((item, i) => {
return <option style={OPTION_CSS} key={i} value={i}>{item}</option>
}, this)
}
return(
<div style={CONTAINER_CSS}>
<FormControl
value={this.state.selected}
style={SELECT_CSS} className="select-list"
componentClass="select" size="5" onChange={this.click}>
{options}
</FormControl>
<ButtonToolbar className="pull-right" style={TOOLBAR_CSS}>
<ButtonGroup>
<Button onClick={this.add}>
<Glyphicon glyph="plus" />
</Button>
<Button disabled={this.state.selected < 0} onClick={this.remove}>
<Glyphicon glyph="minus" />
</Button>
</ButtonGroup>
</ButtonToolbar>
</div>
)
}
}
ListEdit.propTypes = {
children: React.PropTypes.oneOfType([
React.PropTypes.element,
React.PropTypes.arrayOf(React.PropTypes.element)
])
}
export default ListEdit
|
