Grasscutters/mitmproxy
3
0
Fork 0
mirror of https://github.com/Grasscutters/mitmproxy.git synced 2024-11-25 18:03:50 +00:00
Code Issues Projects Releases Wiki Activity

refactor header_options

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/js/components/Header/OptionMenu.jsx
View File

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

28
web/src/js/components/common/ToggleInputButton.jsx
View File

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