summaryrefslogtreecommitdiff
path: root/ui/app/components/list_edit.js
blob: 0d557d22ef3aab31ff6415839a958b657a46c3fe (plain)
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