diff options
Diffstat (limited to 'web/src/js/components/common.js')
-rw-r--r-- | web/src/js/components/common.js | 56 |
1 files changed, 49 insertions, 7 deletions
diff --git a/web/src/js/components/common.js b/web/src/js/components/common.js index b257b82c..87c34ffc 100644 --- a/web/src/js/components/common.js +++ b/web/src/js/components/common.js @@ -1,5 +1,6 @@ import React from "react" import ReactDOM from "react-dom" +import {Key} from "../utils.js"; import _ from "lodash" export var Splitter = React.createClass({ @@ -107,14 +108,55 @@ export var Splitter = React.createClass({ } }); -export const ToggleComponent = (props) => - <div - className={"btn " + (props.checked ? "btn-primary" : "btn-default")} - onClick={props.onToggleChanged}> - <span><i className={"fa " + (props.checked ? "fa-check-square-o" : "fa-square-o")}></i> {props.name}</span> - </div> +export const ToggleButton = (props) => + <div className="input-group toggle-btn"> + <div + className={"btn " + (props.checked ? "btn-primary" : "btn-default")} + onClick={props.onToggleChanged}> + <span className={"fa " + (props.checked ? "fa-check-square-o" : "fa-square-o")}> {props.name}</span> + </div> + </div>; -ToggleComponent.propTypes = { +ToggleButton.propTypes = { name: React.PropTypes.string.isRequired, onToggleChanged: React.PropTypes.func.isRequired +}; + +export class ToggleInputButton extends React.Component { + constructor(props) { + super(props); + this.state = {txt: props.txt}; + } + + render() { + return ( + <div className="input-group toggle-input-btn"> + <span + className="input-group-btn" + onClick={() => this.props.onToggleChanged(this.state.txt)}> + <div className={"btn " + (this.props.checked ? "btn-primary" : "btn-default")}> + <span className={"fa " + (this.props.checked ? "fa-check-square-o" : "fa-square-o")}/> + {this.props.name} + </div> + </span> + <input + className="form-control" + placeholder={this.props.placeholder} + disabled={this.props.checked} + value={this.state.txt} + type={this.props.inputType} + onChange={e => this.setState({txt: e.target.value})} + onKeyDown={e => {if (e.keyCode === Key.ENTER) this.props.onToggleChanged(this.state.txt); e.stopPropagation()}}/> + </div> + ); + } } + +ToggleInputButton.propTypes = { + name: React.PropTypes.string.isRequired, + txt: React.PropTypes.string.isRequired, + onToggleChanged: React.PropTypes.func.isRequired +}; + + + |