mirror of
https://github.com/Grasscutters/mitmproxy.git
synced 2024-11-22 07:08:10 +00:00
refactor header_options
This commit is contained in:
parent
17c65e46cb
commit
57fafd3281
@ -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 })}
|
||||
/>
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user