refactor header_options

This commit is contained in:
Clemens 2016-08-16 11:57:12 +02:00
parent 17c65e46cb
commit 57fafd3281
2 changed files with 17 additions and 17 deletions

View File

@ -41,17 +41,17 @@ function OptionMenu({ settings, updateSettings }) {
/>
<ToggleInputButton name="stickyauth" placeholder="Sticky auth filter"
checked={!!settings.stickyauth}
txt={settings.stickyauth || ''}
txt={settings.stickyauth}
onToggleChanged={txt => updateSettings({ stickyauth: !settings.stickyauth ? txt : null })}
/>
<ToggleInputButton name="stickycookie" placeholder="Sticky cookie filter"
checked={!!settings.stickycookie}
txt={settings.stickycookie || ''}
txt={settings.stickycookie}
onToggleChanged={txt => updateSettings({ stickycookie: !settings.stickycookie ? txt : null })}
/>
<ToggleInputButton name="stream" placeholder="stream..."
checked={!!settings.stream}
txt={settings.stream || ''}
txt={settings.stream}
inputType="number"
onToggleChanged={txt => updateSettings({ stream: !settings.stream ? txt : null })}
/>

View File

@ -7,7 +7,10 @@ export default class ToggleInputButton extends Component {
static propTypes = {
name: PropTypes.string.isRequired,
txt: PropTypes.string.isRequired,
onToggleChanged: PropTypes.func.isRequired
onToggleChanged: PropTypes.func.isRequired,
checked: PropTypes.bool.isRequired,
placeholder: PropTypes.string.isRequired,
inputType: PropTypes.string
}
constructor(props) {
@ -15,10 +18,6 @@ export default class ToggleInputButton extends Component {
this.state = { txt: props.txt }
}
onChange(e) {
this.setState({ txt: e.target.value })
}
onKeyDown(e) {
e.stopPropagation()
if (e.keyCode === Key.ENTER) {
@ -27,23 +26,24 @@ export default class ToggleInputButton extends Component {
}
render() {
const {checked, onToggleChanged, name, inputType, placeholder} = this.props
return (
<div className="input-group toggle-input-btn">
<span className="input-group-btn"
onClick={() => this.props.onToggleChanged(this.state.txt)}>
<div className={classnames('btn', this.props.checked ? 'btn-primary' : 'btn-default')}>
<span className={classnames('fa', this.props.checked ? 'fa-check-square-o' : 'fa-square-o')}/>
onClick={() => onToggleChanged(this.state.txt)}>
<div className={classnames('btn', checked ? 'btn-primary' : 'btn-default')}>
<span className={classnames('fa', checked ? 'fa-check-square-o' : 'fa-square-o')}/>
&nbsp;
{this.props.name}
{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.onChange(e)}
placeholder={placeholder}
disabled={checked}
value={this.state.txt || ''}
type={inputType || 'text'}
onChange={e => this.setState({ txt: e.target.value })}
onKeyDown={e => this.onKeyDown(e)}
/>
</div>