diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/src/js/components/Header/OptionMenu.jsx | 6 | ||||
| -rw-r--r-- | web/src/js/components/common/ToggleInputButton.jsx | 28 |
2 files changed, 17 insertions, 17 deletions
diff --git a/web/src/js/components/Header/OptionMenu.jsx b/web/src/js/components/Header/OptionMenu.jsx index a338fed0..a11062f2 100644 --- a/web/src/js/components/Header/OptionMenu.jsx +++ b/web/src/js/components/Header/OptionMenu.jsx @@ -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 })} /> diff --git a/web/src/js/components/common/ToggleInputButton.jsx b/web/src/js/components/common/ToggleInputButton.jsx index 25d620ae..b019dfa3 100644 --- a/web/src/js/components/common/ToggleInputButton.jsx +++ b/web/src/js/components/common/ToggleInputButton.jsx @@ -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')}/> - {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> |