diff options
Diffstat (limited to 'www/app/components/list_edit.js')
-rw-r--r-- | www/app/components/list_edit.js | 122 |
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 00000000..0d557d22 --- /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 |