aboutsummaryrefslogtreecommitdiffstats
path: root/web/src/js/components/Modal
diff options
context:
space:
mode:
authorMatthew Shao <me@matshao.com>2017-07-10 20:42:24 +0800
committerMatthew Shao <me@matshao.com>2017-07-10 20:42:24 +0800
commit89a300fe3e3fb3bdbd91e5e4f75d3047665a25e5 (patch)
tree08a5097a926001ac46ad8c7e503016160ca6d972 /web/src/js/components/Modal
parent1cc143d502ac515b418427636fca895b5381053c (diff)
downloadmitmproxy-89a300fe3e3fb3bdbd91e5e4f75d3047665a25e5.tar.gz
mitmproxy-89a300fe3e3fb3bdbd91e5e4f75d3047665a25e5.tar.bz2
mitmproxy-89a300fe3e3fb3bdbd91e5e4f75d3047665a25e5.zip
[web] Try StringSequence update logic and add tooltip.
Diffstat (limited to 'web/src/js/components/Modal')
-rw-r--r--web/src/js/components/Modal/OptionMaster.jsx176
1 files changed, 138 insertions, 38 deletions
diff --git a/web/src/js/components/Modal/OptionMaster.jsx b/web/src/js/components/Modal/OptionMaster.jsx
index 3b4bae80..ac65a22a 100644
--- a/web/src/js/components/Modal/OptionMaster.jsx
+++ b/web/src/js/components/Modal/OptionMaster.jsx
@@ -6,12 +6,19 @@ PureBooleanOption.PropTypes = {
onChange: PropTypes.func.isRequired,
}
-function PureBooleanOption({ value, onChange, help}) {
+function PureBooleanOption({ value, onChange, ...props}) {
+ let onFocus = () => { props.onFocus() },
+ onBlur = () => { props.onBlur() },
+ onMouseEnter = () => { props.onMouseEnter() },
+ onMouseLeave = () => { props.onMouseLeave() }
return (
<input type="checkbox"
checked={value}
onChange={onChange}
- title={help}
+ onFocus={onFocus}
+ onBlur={onBlur}
+ onMouseOver={onMouseEnter}
+ onMouseLeave={onMouseLeave}
/>
)
}
@@ -21,14 +28,21 @@ PureStringOption.PropTypes = {
onChange: PropTypes.func.isRequired,
}
-function PureStringOption( { value, onChange, help }) {
- let onKeyDown = (e) => {e.stopPropagation()}
+function PureStringOption( { value, onChange, ...props }) {
+ let onKeyDown = (e) => {e.stopPropagation()},
+ onFocus = () => { props.onFocus() },
+ onBlur = () => { props.onBlur() },
+ onMouseEnter = () => { props.onMouseEnter() },
+ onMouseLeave = () => { props.onMouseLeave() }
return (
<input type="text"
value={value}
onChange={onChange}
- title={help}
onKeyDown={onKeyDown}
+ onFocus={onFocus}
+ onBlur={onBlur}
+ onMouseOver={onMouseEnter}
+ onMouseLeave={onMouseLeave}
/>
)
}
@@ -38,14 +52,22 @@ PureNumberOption.PropTypes = {
onChange: PropTypes.func.isRequired,
}
-function PureNumberOption( {value, onChange, help }) {
- let onKeyDown = (e) => {e.stopPropagation()}
+function PureNumberOption( {value, onChange, ...props }) {
+ let onKeyDown = (e) => {e.stopPropagation()},
+ onFocus = () => { props.onFocus() },
+ onBlur = () => { props.onBlur() },
+ onMouseEnter = () => { props.onMouseEnter() },
+ onMouseLeave = () => { props.onMouseLeave() }
+
return (
<input type="number"
value={value}
onChange={onChange}
- title={help}
onKeyDown={onKeyDown}
+ onFocus={onFocus}
+ onBlur={onBlur}
+ onMouseOver={onMouseEnter}
+ onMouseLeave={onMouseLeave}
/>
)
}
@@ -55,9 +77,21 @@ PureChoicesOption.PropTypes = {
onChange: PropTypes.func.isRequired,
}
-function PureChoicesOption( { value, onChange, name, help, choices }) {
+function PureChoicesOption( { value, onChange, name, choices, ...props}) {
+ let onFocus = () => { props.onFocus() },
+ onBlur = () => { props.onBlur() },
+ onMouseEnter = () => { props.onMouseEnter() },
+ onMouseLeave = () => { props.onMouseLeave() }
return (
- <select name={name} onChange={onChange} title={help} selected={value}>
+ <select
+ name={name}
+ onChange={onChange}
+ selected={value}
+ onFocus={onFocus}
+ onBlur={onBlur}
+ onMouseOver={onMouseEnter}
+ onMouseLeave={onMouseLeave}
+ >
{ choices.map((choice, index) => (
<option key={index} value={choice}> {choice} </option>
))}
@@ -68,34 +102,42 @@ function PureChoicesOption( { value, onChange, name, help, choices }) {
class PureStringSequenceOption extends Component {
constructor(props, context) {
super(props, context)
- this.state = { height: 1, focus: false }
+ this.state = { height: 1, focus: false, value: this.props.value}
this.onFocus = this.onFocus.bind(this)
this.onBlur = this.onBlur.bind(this)
this.onKeyDown = this.onKeyDown.bind(this)
+ this.onChange = this.onChange.bind(this)
}
onFocus() {
this.setState( {focus: true, height: 3 })
+ this.props.onFocus()
}
onBlur() {
this.setState( {focus: false, height: 1})
+ this.props.onBlur()
}
onKeyDown(e) {
e.stopPropagation()
}
+ onChange(e) {
+ const value = e.target.value.split("\n")
+ console.log(value)
+ this.props.onChange(e)
+ this.setState({ value })
+ }
+
render() {
- const {value, onChange, help} = this.props
- const {height, focus} = this.state
+ const {height, value} = this.state
return (
<textarea
rows={height}
value={value}
- onChange={onChange}
- title={help}
+ onChange={this.onChange}
onKeyDown={this.onKeyDown}
onFocus={this.onFocus}
onBlur={this.onBlur}
@@ -112,15 +154,36 @@ const OptionTypes = {
"sequence of str": PureStringSequenceOption,
}
-export default function OptionMaster({option, name, updateOptions, ...props}) {
- let WrappedComponent = null
- if (option.choices) {
- WrappedComponent = PureChoicesOption
- } else {
- WrappedComponent = OptionTypes[option.type]
+export default class OptionMaster extends Component {
+
+ constructor(props, context) {
+ super(props, context)
+ this.state = {
+ updateOptions: this.props.updateOptions,
+ option: this.props.option,
+ name: this.props.name,
+ mousefocus: false,
+ focus: false,
+
+ }
+ if (props.option.choices) {
+ this.WrappedComponent = PureChoicesOption
+ } else {
+ this.WrappedComponent = OptionTypes[props.option.type]
+ }
+ this.onChange = this.onChange.bind(this)
+ this.onMouseEnter = this.onMouseEnter.bind(this)
+ this.onMouseLeave = this.onMouseLeave.bind(this)
+ this.onFocus = this.onFocus.bind(this)
+ this.onBlur = this.onBlur.bind(this)
}
- let onChange = (e) => {
+ componentWillReceiveProps(nextProps) {
+ this.setState({ option: nextProps.option })
+ }
+
+ onChange(e) {
+ const { updateOptions, option, name } = this.state
switch (option.type) {
case 'bool' :
updateOptions({[name]: !option.value})
@@ -128,25 +191,62 @@ export default function OptionMaster({option, name, updateOptions, ...props}) {
case 'int':
updateOptions({[name]: parseInt(e.target.value)})
break
+ case 'sequence of str':
+ const value = e.target.value.split('\n')
+ updateOptions({[name]: value})
+ break
default:
updateOptions({[name]: e.target.value})
}
}
- return (
- <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}
- />
+
+ onMouseEnter() {
+ console.log(this.state)
+ this.setState({ mousefocus: true })
+ }
+
+ onMouseLeave() {
+ this.setState({ mousefocus: false })
+ }
+
+ onFocus() {
+ console.log(this.state)
+ this.setState({ focus: true })
+ }
+
+ onBlur() {
+ this.setState({ focus: false })
+ }
+
+ render() {
+ const { name, children } = this.props
+ const { option, focus, mousefocus } = this.state
+ const WrappedComponent = this.WrappedComponent
+ return (
+ <div className="row">
+ <div className="col-sm-8">
+ {name}
+ </div>
+ <div className="col-sm-4">
+ <WrappedComponent
+ children={children}
+ value={option.value}
+ onChange={this.onChange}
+ name={name}
+ choices={option.choices}
+ onFocus={this.onFocus}
+ onBlur={this.onBlur}
+ onMouseEnter={this.onMouseEnter}
+ onMouseLeave={this.onMouseLeave}
+ />
+ {(focus || mousefocus) && (
+ <div className="tooltip tooltip-bottom" role="tooltip" style={{opacity: 1}}>
+ <div className="tooltip-inner">
+ {option.help}
+ </div>
+ </div>)}
+ </div>
</div>
- </div>
- )
+ )
+ }
}