refactor header_options

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')}/>
                         &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>