aboutsummaryrefslogtreecommitdiffstats
path: root/web
diff options
context:
space:
mode:
authorMatthew Shao <me@matshao.com>2017-07-17 15:32:52 +0800
committerMaximilian Hils <git@maximilianhils.com>2017-07-17 13:59:25 +0200
commit21b3f9c02956c625c576c6787ab10409aab0618d (patch)
treebb27f534277d10c56e5057b1fcff935b9f2d87b9 /web
parentec5061327f56c8154a0a5e2ab169a1f371ec62b7 (diff)
downloadmitmproxy-21b3f9c02956c625c576c6787ab10409aab0618d.tar.gz
mitmproxy-21b3f9c02956c625c576c6787ab10409aab0618d.tar.bz2
mitmproxy-21b3f9c02956c625c576c6787ab10409aab0618d.zip
[web] Update OptionMaster.
Diffstat (limited to 'web')
-rw-r--r--web/src/js/components/Modal/OptionMaster.jsx86
-rw-r--r--web/src/js/ducks/options.js31
2 files changed, 44 insertions, 73 deletions
diff --git a/web/src/js/components/Modal/OptionMaster.jsx b/web/src/js/components/Modal/OptionMaster.jsx
index 32f5bb4b..5befc34a 100644
--- a/web/src/js/components/Modal/OptionMaster.jsx
+++ b/web/src/js/components/Modal/OptionMaster.jsx
@@ -10,14 +10,12 @@ PureBooleanOption.PropTypes = {
}
function PureBooleanOption({ value, onChange, ...props}) {
- let onMouseEnter = () => { props.onMouseEnter() },
- onMouseLeave = () => { props.onMouseLeave() }
return (
<input type="checkbox"
checked={value}
onChange={onChange}
- onMouseOver={onMouseEnter}
- onMouseLeave={onMouseLeave}
+ onMouseOver={props.onMouseEnter}
+ onMouseLeave={props.onMouseLeave}
/>
)
}
@@ -28,11 +26,7 @@ PureStringOption.PropTypes = {
}
function PureStringOption( { value, onChange, ...props }) {
- let onKeyDown = (e) => {e.stopPropagation()},
- onFocus = () => { props.onFocus() },
- onBlur = () => { props.onBlur() },
- onMouseEnter = () => { props.onMouseEnter() },
- onMouseLeave = () => { props.onMouseLeave() }
+ let onKeyDown = (e) => {e.stopPropagation()}
return (
<div className={classnames('input-group', {'has-error': props.error})}>
<input type="text"
@@ -40,10 +34,10 @@ function PureStringOption( { value, onChange, ...props }) {
className='form-control'
onChange={onChange}
onKeyDown={onKeyDown}
- onFocus={onFocus}
- onBlur={onBlur}
- onMouseOver={onMouseEnter}
- onMouseLeave={onMouseLeave}
+ onFocus={props.onFocus}
+ onBlur={props.onBlur}
+ onMouseOver={props.onMouseEnter}
+ onMouseLeave={props.onMouseLeave}
/>
</div>
)
@@ -55,11 +49,7 @@ PureNumberOption.PropTypes = {
}
function PureNumberOption( {value, onChange, ...props }) {
- let onKeyDown = (e) => {e.stopPropagation()},
- onFocus = () => { props.onFocus() },
- onBlur = () => { props.onBlur() },
- onMouseEnter = () => { props.onMouseEnter() },
- onMouseLeave = () => { props.onMouseLeave() }
+ let onKeyDown = (e) => {e.stopPropagation()}
return (
<input type="number"
@@ -67,10 +57,10 @@ function PureNumberOption( {value, onChange, ...props }) {
value={value}
onChange={onChange}
onKeyDown={onKeyDown}
- onFocus={onFocus}
- onBlur={onBlur}
- onMouseOver={onMouseEnter}
- onMouseLeave={onMouseLeave}
+ onFocus={props.onFocus}
+ onBlur={props.onBlur}
+ onMouseOver={props.onMouseEnter}
+ onMouseLeave={props.onMouseLeave}
/>
)
}
@@ -81,20 +71,16 @@ PureChoicesOption.PropTypes = {
}
function PureChoicesOption( { value, onChange, name, choices, ...props}) {
- let onFocus = () => { props.onFocus() },
- onBlur = () => { props.onBlur() },
- onMouseEnter = () => { props.onMouseEnter() },
- onMouseLeave = () => { props.onMouseLeave() }
return (
<select
name={name}
className="form-control"
onChange={onChange}
selected={value}
- onFocus={onFocus}
- onBlur={onBlur}
- onMouseOver={onMouseEnter}
- onMouseLeave={onMouseLeave}
+ onFocus={props.onFocus}
+ onBlur={props.onBlur}
+ onMouseOver={props.onMouseEnter}
+ onMouseLeave={props.onMouseLeave}
>
{ choices.map((choice, index) => (
<option key={index} value={choice}> {choice} </option>
@@ -112,8 +98,6 @@ class PureStringSequenceOption extends Component {
this.onBlur = this.onBlur.bind(this)
this.onKeyDown = this.onKeyDown.bind(this)
this.onChange = this.onChange.bind(this)
- this.onMouseEnter = this.onMouseEnter.bind(this)
- this.onMouseLeave = this.onMouseLeave.bind(this)
}
onFocus() {
@@ -126,14 +110,6 @@ class PureStringSequenceOption extends Component {
this.props.onBlur()
}
- onMouseEnter() {
- this.props.onMouseEnter()
- }
-
- onMouseLeave() {
- this.props.onMouseLeave()
- }
-
onKeyDown(e) {
e.stopPropagation()
}
@@ -146,7 +122,7 @@ class PureStringSequenceOption extends Component {
render() {
const {height, value} = this.state
- const {error} = this.props
+ const {error, onMouseEnter, onMouseLeave} = this.props
return (
<div className={classnames('input-group', {'has-error': error})}>
<textarea
@@ -157,8 +133,8 @@ class PureStringSequenceOption extends Component {
onKeyDown={this.onKeyDown}
onFocus={this.onFocus}
onBlur={this.onBlur}
- onMouseEnter={this.onMouseEnter}
- onMouseLeave={this.onMouseLeave}
+ onMouseEnter={onMouseEnter}
+ onMouseLeave={onMouseLeave}
/>
</div>
)
@@ -183,7 +159,6 @@ class OptionMaster extends Component {
mousefocus: false,
focus: false,
error: false,
-
}
if (props.option.choices) {
this.WrappedComponent = PureChoicesOption
@@ -198,17 +173,12 @@ class OptionMaster extends Component {
}
componentWillReceiveProps(nextProps) {
- if (nextProps.option.value !== this.state.option.value){
- this.setState({ error: true })
- }
- else{
- this.setState({ option: nextProps.option, error: false })
- }
+ this.setState({ option: nextProps.option })
}
onChange(e) {
const { option, name } = this.state
- this.setState({ option: {...option, value: e.target.value}})
+ const { updateOptions } = this.props
switch (option.type) {
case 'bool' :
updateOptions({[name]: !option.value})
@@ -242,9 +212,11 @@ class OptionMaster extends Component {
}
render() {
- const { name, children } = this.props
- const { option, focus, mousefocus, error } = this.state
+ const { name, children, client_options } = this.props
+ const { option, focus, mousefocus } = this.state
const WrappedComponent = this.WrappedComponent
+ let error = (name in client_options) ? client_options[name].error : false,
+ value = (name in client_options) ? client_options[name].value : option.value
return (
<div className="row">
<div className="col-sm-8">
@@ -253,7 +225,7 @@ class OptionMaster extends Component {
<div className="col-sm-4">
<WrappedComponent
children={children}
- value={option.value}
+ value={value}
onChange={this.onChange}
name={name}
choices={option.choices}
@@ -276,8 +248,10 @@ class OptionMaster extends Component {
}
export default connect(
- null,
+ state => ({
+ client_options: state.ui.option
+ }),
{
- updateOptions: updateOptions
+ updateOptions
}
)(OptionMaster)
diff --git a/web/src/js/ducks/options.js b/web/src/js/ducks/options.js
index ed82d7f3..48e3708b 100644
--- a/web/src/js/ducks/options.js
+++ b/web/src/js/ducks/options.js
@@ -1,10 +1,10 @@
import { fetchApi } from '../utils'
+import * as optionActions from './ui/option'
export const RECEIVE = 'OPTIONS_RECEIVE'
export const UPDATE = 'OPTIONS_UPDATE'
export const REQUEST_UPDATE = 'REQUEST_UPDATE'
export const UNKNOWN_CMD = 'OPTIONS_UNKNOWN_CMD'
-export const ERROR = 'OPTIONS_ERROR'
const defaultState = {
@@ -22,26 +22,23 @@ export default function reducer(state = defaultState, action) {
...action.data,
}
- case ERROR:
- return {
- ...state,
- ...action.data,
- }
-
default:
return state
}
}
export function update(options) {
- let error = ''
- fetchApi.put('/options', options).then(
- (response) => {
- response.text().then(errorMsg => {
- error = errorMsg
- console.log(error)
- })
- }
- )
- return {type: ERROR, error}
+ return dispatch => {
+ let option = Object.keys(options)[0]
+ dispatch({ type: optionActions.OPTION_UPDATE_START, option, value: options[option] })
+ fetchApi.put('/options', options).then(response => {
+ if (response.status === 200) {
+ dispatch({ type: optionActions.OPTION_UPDATE_SUCCESS, option})
+ } else {
+ response.text().then( text => {
+ dispatch({type: optionActions.OPTION_UPDATE_ERROR, error: text, option})
+ })
+ }
+ })
+ }
}