diff options
Diffstat (limited to 'ui/app/components/list_edit.js')
-rw-r--r-- | ui/app/components/list_edit.js | 122 |
1 files changed, 0 insertions, 122 deletions
diff --git a/ui/app/components/list_edit.js b/ui/app/components/list_edit.js deleted file mode 100644 index 0d557d22..00000000 --- a/ui/app/components/list_edit.js +++ /dev/null @@ -1,122 +0,0 @@ -// -// 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 |