mirror of
https://github.com/Grasscutters/mitmproxy.git
synced 2024-11-22 15:37:45 +00:00
[web] Add PureStringSequenceOption type to OptionMaster.jsx
This commit is contained in:
parent
37fea267c1
commit
30fbcfa355
@ -1,3 +1,4 @@
|
|||||||
|
import React, { Component } from 'react'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
|
|
||||||
PureBooleanOption.PropTypes = {
|
PureBooleanOption.PropTypes = {
|
||||||
@ -5,16 +6,13 @@ PureBooleanOption.PropTypes = {
|
|||||||
onChange: PropTypes.func.isRequired,
|
onChange: PropTypes.func.isRequired,
|
||||||
}
|
}
|
||||||
|
|
||||||
function PureBooleanOption({ value, onChange, name, help}) {
|
function PureBooleanOption({ value, onChange, help}) {
|
||||||
return (
|
return (
|
||||||
<label>
|
<input type="checkbox"
|
||||||
{ name }
|
checked={value}
|
||||||
<input type="checkbox"
|
onChange={onChange}
|
||||||
checked={value}
|
title={help}
|
||||||
onChange={onChange}
|
/>
|
||||||
title={help}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -23,18 +21,15 @@ PureStringOption.PropTypes = {
|
|||||||
onChange: PropTypes.func.isRequired,
|
onChange: PropTypes.func.isRequired,
|
||||||
}
|
}
|
||||||
|
|
||||||
function PureStringOption( { value, onChange, name, help }) {
|
function PureStringOption( { value, onChange, help }) {
|
||||||
let onKeyDown = (e) => {e.stopPropagation()}
|
let onKeyDown = (e) => {e.stopPropagation()}
|
||||||
return (
|
return (
|
||||||
<label>
|
<input type="text"
|
||||||
{ name }
|
value={value}
|
||||||
<input type="text"
|
onChange={onChange}
|
||||||
value={value}
|
title={help}
|
||||||
onChange={onChange}
|
onKeyDown={onKeyDown}
|
||||||
title={help}
|
/>
|
||||||
onKeyDown={onKeyDown}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -43,18 +38,15 @@ PureNumberOption.PropTypes = {
|
|||||||
onChange: PropTypes.func.isRequired,
|
onChange: PropTypes.func.isRequired,
|
||||||
}
|
}
|
||||||
|
|
||||||
function PureNumberOption( {value, onChange, name, help }) {
|
function PureNumberOption( {value, onChange, help }) {
|
||||||
let onKeyDown = (e) => {e.stopPropagation()}
|
let onKeyDown = (e) => {e.stopPropagation()}
|
||||||
return (
|
return (
|
||||||
<label>
|
<input type="number"
|
||||||
{ name }
|
value={value}
|
||||||
<input type="number"
|
onChange={onChange}
|
||||||
value={value}
|
title={help}
|
||||||
onChange={onChange}
|
onKeyDown={onKeyDown}
|
||||||
title={help}
|
/>
|
||||||
onKeyDown={onKeyDown}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -65,23 +57,59 @@ PureChoicesOption.PropTypes = {
|
|||||||
|
|
||||||
function PureChoicesOption( { value, onChange, name, help, choices }) {
|
function PureChoicesOption( { value, onChange, name, help, choices }) {
|
||||||
return (
|
return (
|
||||||
<label htmlFor="">
|
<select name={name} onChange={onChange} title={help} selected={value}>
|
||||||
{ name }
|
{ choices.map((choice, index) => (
|
||||||
<select name={name} onChange={onChange} title={help} selected={value}>
|
<option key={index} value={choice}> {choice} </option>
|
||||||
{ choices.map((choice, index) => (
|
))}
|
||||||
<option key={index} value={choice}> {choice} </option>
|
</select>
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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 = {
|
const OptionTypes = {
|
||||||
bool: PureBooleanOption,
|
bool: PureBooleanOption,
|
||||||
str: PureStringOption,
|
str: PureStringOption,
|
||||||
int: PureNumberOption,
|
int: PureNumberOption,
|
||||||
"optional str": PureStringOption,
|
"optional str": PureStringOption,
|
||||||
"sequence of str": PureStringOption,
|
"sequence of str": PureStringSequenceOption,
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function OptionMaster({option, name, updateOptions, ...props}) {
|
export default function OptionMaster({option, name, updateOptions, ...props}) {
|
||||||
@ -105,15 +133,20 @@ export default function OptionMaster({option, name, updateOptions, ...props}) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<div className="menu-entry">
|
<div className="row">
|
||||||
<WrappedComponent
|
<div className="col-sm-8">
|
||||||
children={props.children}
|
{name}
|
||||||
value={option.value}
|
</div>
|
||||||
onChange={onChange}
|
<div className="col-sm-4">
|
||||||
name={name}
|
<WrappedComponent
|
||||||
help={option.help}
|
children={props.children}
|
||||||
choices={option.choices}
|
value={option.value}
|
||||||
/>
|
onChange={onChange}
|
||||||
|
name={name}
|
||||||
|
help={option.help}
|
||||||
|
choices={option.choices}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -28,6 +28,7 @@ class PureOptionModal extends Component {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="modal-body">
|
<div className="modal-body">
|
||||||
|
<div className="container-fluid">
|
||||||
{
|
{
|
||||||
Object.keys(options).sort()
|
Object.keys(options).sort()
|
||||||
.map((key, index) => {
|
.map((key, index) => {
|
||||||
@ -41,10 +42,10 @@ class PureOptionModal extends Component {
|
|||||||
/>)
|
/>)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="modal-footer">
|
<div className="modal-footer">
|
||||||
<button type="button" className="btn btn-primary">Save Changes</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
Loading…
Reference in New Issue
Block a user