summaryrefslogtreecommitdiff
path: root/www/app/components/list_edit.js
diff options
context:
space:
mode:
Diffstat (limited to 'www/app/components/list_edit.js')
-rw-r--r--www/app/components/list_edit.js122
1 files changed, 122 insertions, 0 deletions
diff --git a/www/app/components/list_edit.js b/www/app/components/list_edit.js
new file mode 100644
index 0000000..0d557d2
--- /dev/null
+++ b/www/app/components/list_edit.js
@@ -0,0 +1,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