Grasscutters/mitmproxy
3
0
Fork 0
mirror of https://github.com/Grasscutters/mitmproxy.git synced 2024-11-22 07:08:10 +00:00
Code Issues Projects Releases Wiki Activity

[web] Add PureStringSequenceOption type to OptionMaster.jsx

Browse Source
This commit is contained in:
Matthew Shao 2017-07-07 10:18:29 +08:00
parent 37fea267c1
commit 30fbcfa355
2 changed files with 82 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
web/src/js/components/Modal/OptionMaster.jsx
View File

@ -1,3 +1,4 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
PureBooleanOption.PropTypes = {
@ -5,16 +6,13 @@ PureBooleanOption.PropTypes = {
onChange: PropTypes.func.isRequired,
}
function PureBooleanOption({ value, onChange, name, help}) {
function PureBooleanOption({ value, onChange, help}) {
return (
<label>
{ name }
<input type="checkbox"
checked={value}
onChange={onChange}
title={help}
/>
</label>
<input type="checkbox"
checked={value}
onChange={onChange}
title={help}
/>
)
}
@ -23,18 +21,15 @@ PureStringOption.PropTypes = {
onChange: PropTypes.func.isRequired,
}
function PureStringOption( { value, onChange, name, help }) {
function PureStringOption( { value, onChange, help }) {
let onKeyDown = (e) => {e.stopPropagation()}
return (
<label>
{ name }
<input type="text"
value={value}
onChange={onChange}
title={help}
onKeyDown={onKeyDown}
/>
</label>
<input type="text"
value={value}
onChange={onChange}
title={help}
onKeyDown={onKeyDown}
/>
)
}
@ -43,18 +38,15 @@ PureNumberOption.PropTypes = {
onChange: PropTypes.func.isRequired,
}
function PureNumberOption( {value, onChange, name, help }) {
function PureNumberOption( {value, onChange, help }) {
let onKeyDown = (e) => {e.stopPropagation()}
return (
<label>
{ name }
<input type="number"
value={value}
onChange={onChange}
title={help}
onKeyDown={onKeyDown}
/>
</label>
<input type="number"
value={value}
onChange={onChange}
title={help}
onKeyDown={onKeyDown}
/>
)
}
@ -65,23 +57,59 @@ PureChoicesOption.PropTypes = {
function PureChoicesOption( { value, onChange, name, help, choices }) {
return (
<label htmlFor="">
{ name }
<select name={name} onChange={onChange} title={help} selected={value}>
{ choices.map((choice, index) => (
<option key={index} value={choice}> {choice} </option>
))}
</select>
</label>
<select name={name} onChange={onChange} title={help} selected={value}>
{ choices.map((choice, index) => (
<option key={index} value={choice}> {choice} </option>
))}
</select>
)
}
class PureStringSequenceOption extends Component {
constructor(props, context) {
super(props, context)
this.state = { height: 1, focus: false }
this.onFocus = this.onFocus.bind(this)
this.onBlur = this.onBlur.bind(this)
this.onKeyDown = this.onKeyDown.bind(this)
}
onFocus() {
this.setState( {focus: true, height: 3 })
}
onBlur() {
this.setState( {focus: false, height: 1})
}
onKeyDown(e) {
e.stopPropagation()
}
render() {
const {value, onChange, help} = this.props
const {height, focus} = this.state
return (
<textarea
rows={height}
value={value}
onChange={onChange}
title={help}
onKeyDown={this.onKeyDown}
onFocus={this.onFocus}
onBlur={this.onBlur}
/>
)
}
}
const OptionTypes = {
bool: PureBooleanOption,
str: PureStringOption,
int: PureNumberOption,
"optional str": PureStringOption,
"sequence of str": PureStringOption,
"sequence of str": PureStringSequenceOption,
}
export default function OptionMaster({option, name, updateOptions, ...props}) {
@ -105,15 +133,20 @@ export default function OptionMaster({option, name, updateOptions, ...props}) {
}
}
return (
<div className="menu-entry">
<WrappedComponent
children={props.children}
value={option.value}
onChange={onChange}
name={name}
help={option.help}
choices={option.choices}
/>
<div className="row">
<div className="col-sm-8">
{name}
</div>
<div className="col-sm-4">
<WrappedComponent
children={props.children}
value={option.value}
onChange={onChange}
name={name}
help={option.help}
choices={option.choices}
/>
</div>
</div>
)
}

3
web/src/js/components/Modal/OptionModal.jsx
View File

@ -28,6 +28,7 @@ class PureOptionModal extends Component {
</div>
<div className="modal-body">
<div className="container-fluid">
{
Object.keys(options).sort()
.map((key, index) => {
@ -41,10 +42,10 @@ class PureOptionModal extends Component {
/>)
})
}
</div>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-primary">Save Changes</button>
</div>
</div>
)