diff options
author | Matthew Shao <me@matshao.com> | 2017-07-05 18:55:56 +0800 |
---|---|---|
committer | Matthew Shao <me@matshao.com> | 2017-07-05 18:55:56 +0800 |
commit | 7516f706b41de0c10c2bf9b88278afb6e3edcd4a (patch) | |
tree | cf75e203be428adac4f7c2e3b64aa278170fdf3f /web/src | |
parent | e8f3b740c944401a01d3c57e8d1c6051e92b8236 (diff) | |
download | mitmproxy-7516f706b41de0c10c2bf9b88278afb6e3edcd4a.tar.gz mitmproxy-7516f706b41de0c10c2bf9b88278afb6e3edcd4a.tar.bz2 mitmproxy-7516f706b41de0c10c2bf9b88278afb6e3edcd4a.zip |
[web] Update Option Modal UI and its tests.
Diffstat (limited to 'web/src')
-rw-r--r-- | web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap | 79 | ||||
-rw-r--r-- | web/src/js/__tests__/ducks/tutils.js | 30 | ||||
-rw-r--r-- | web/src/js/components/Modal/OptionMaster.jsx | 65 | ||||
-rw-r--r-- | web/src/js/components/Modal/OptionModal.jsx | 20 |
4 files changed, 147 insertions, 47 deletions
diff --git a/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap b/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap index 4fe163d1..af587ae4 100644 --- a/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap +++ b/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap @@ -46,7 +46,84 @@ exports[`Modal Component should render correctly 2`] = ` <div className="modal-body" > - ... + <div + className="menu-entry" + > + <label> + booleanOption + <input + checked={false} + onChange={[Function]} + title="foo" + type="checkbox" + /> + </label> + </div> + <div + className="menu-entry" + > + <label + htmlFor="" + > + choiceOption + <select + name="choiceOption" + onChange={[Function]} + selected="b" + title="foo" + > + <option + value="a" + > + + a + + </option> + <option + value="b" + > + + b + + </option> + <option + value="c" + > + + c + + </option> + </select> + </label> + </div> + <div + className="menu-entry" + > + <label> + intOption + <input + onChange={[Function]} + onKeyDown={[Function]} + title="foo" + type="number" + value={1} + /> + </label> + </div> + <div + className="menu-entry" + > + <label> + strOption + <input + onChange={[Function]} + onKeyDown={[Function]} + title="foo" + type="text" + value="str content" + /> + </label> + </div> </div> <div className="modal-footer" diff --git a/web/src/js/__tests__/ducks/tutils.js b/web/src/js/__tests__/ducks/tutils.js index 9b92e676..a3e9c168 100644 --- a/web/src/js/__tests__/ducks/tutils.js +++ b/web/src/js/__tests__/ducks/tutils.js @@ -42,6 +42,36 @@ export function TStore(){ anticache: true, anticomp: false }, + options: { + booleanOption: { + choices: null, + default: false, + help: "foo", + type: "bool", + value: false + }, + strOption: { + choices: null, + default: null, + help: "foo", + type: "str", + value: "str content" + }, + intOption: { + choices: null, + default: 0, + help: "foo", + type: "int", + value: 1 + }, + choiceOption: { + choices: ['a', 'b', 'c'], + default: 'a', + help: "foo", + type: "str", + value: "b" + }, + }, flows: { selected: ["d91165be-ca1f-4612-88a9-c0f8696f3e29"], byId: {"d91165be-ca1f-4612-88a9-c0f8696f3e29": tflow}, diff --git a/web/src/js/components/Modal/OptionMaster.jsx b/web/src/js/components/Modal/OptionMaster.jsx index e16319fb..c25dda72 100644 --- a/web/src/js/components/Modal/OptionMaster.jsx +++ b/web/src/js/components/Modal/OptionMaster.jsx @@ -1,6 +1,4 @@ import PropTypes from 'prop-types' -import { connect } from 'react-redux' -import { update as updateOptions } from '../../ducks/options' PureBooleanOption.PropTypes = { value: PropTypes.bool.isRequired, @@ -9,16 +7,14 @@ PureBooleanOption.PropTypes = { function PureBooleanOption({ value, onChange, name, help}) { return ( - <div className="menu-entry"> <label> + { name } <input type="checkbox" checked={value} onChange={onChange} title={help} /> - { name } </label> - </div> ) } @@ -30,7 +26,6 @@ PureStringOption.PropTypes = { function PureStringOption( { value, onChange, name, help }) { let onKeyDown = (e) => {e.stopPropagation()} return ( - <div className="menu-entry"> <label> { name } <input type="text" @@ -40,7 +35,6 @@ function PureStringOption( { value, onChange, name, help }) { onKeyDown={onKeyDown} /> </label> - </div> ) } @@ -52,7 +46,6 @@ PureNumberOption.PropTypes = { function PureNumberOption( {value, onChange, name, help }) { let onKeyDown = (e) => {e.stopPropagation()} return ( - <div className="menu-entry"> <label> { name } <input type="number" @@ -62,7 +55,6 @@ function PureNumberOption( {value, onChange, name, help }) { onKeyDown={onKeyDown} /> </label> - </div> ) } @@ -73,16 +65,14 @@ PureChoicesOption.PropTypes = { function PureChoicesOption( { value, onChange, name, help, choices }) { return ( - <div className="menu-entry"> <label htmlFor=""> { name } <select name={name} onChange={onChange} title={help} selected={value}> - { choices.map(choice => ( - <option value={choice}> {choice} </option> + { choices.map((choice, index) => ( + <option key={index} value={choice}> {choice} </option> ))} </select> </label> - </div> ) } @@ -94,45 +84,36 @@ const OptionTypes = { "sequence of str": PureStringOption, } -Wrapper.displayName = 'OptionWrapper' - - -function Wrapper({option, options, updateOptions, ...props}) { - let optionObj = options[option], - WrappedComponent = null - if (optionObj.choices) { +export default function OptionMaster({option, name, updateOptions, ...props}) { + let WrappedComponent = null + if (option.choices) { WrappedComponent = PureChoicesOption } else { - WrappedComponent = OptionTypes[optionObj.type] + WrappedComponent = OptionTypes[option.type] } let onChange = (e) => { - switch (optionObj.type) { + switch (option.type) { case 'bool' : - updateOptions({[option]: !optionObj.value}) + updateOptions({[name]: !option.value}) break case 'int': - updateOptions({[option]: parseInt(e.target.value)}) + updateOptions({[name]: parseInt(e.target.value)}) break default: - updateOptions({[option]: e.target.value}) + updateOptions({[name]: e.target.value}) } } - return <WrappedComponent - children={props.children} - value={optionObj.value} - onChange={onChange} - name={option} - help={optionObj.help} - choices={optionObj.choices} - /> + return ( + <div className="menu-entry"> + <WrappedComponent + children={props.children} + value={option.value} + onChange={onChange} + name={name} + help={option.help} + choices={option.choices} + /> + </div> + ) } - -export default connect( - state => ({ - options: state.options, - }), - { - updateOptions, - } -)(Wrapper) diff --git a/web/src/js/components/Modal/OptionModal.jsx b/web/src/js/components/Modal/OptionModal.jsx index 582ac55f..ef3a224a 100644 --- a/web/src/js/components/Modal/OptionModal.jsx +++ b/web/src/js/components/Modal/OptionModal.jsx @@ -1,6 +1,7 @@ import React, { Component } from 'react' import { connect } from 'react-redux' import * as modalAction from '../../ducks/ui/modal' +import { update as updateOptions } from '../../ducks/options' import Option from './OptionMaster' class PureOptionModal extends Component { @@ -28,9 +29,17 @@ class PureOptionModal extends Component { <div className="modal-body"> { - Object.keys(options).sort().map((key) => ( - <Option option={key}/> - )) + Object.keys(options).sort() + .map((key, index) => { + let option = options[key]; + return ( + <Option + key={index} + name={key} + updateOptions={updateOptions} + option={option} + />) + }) } </div> @@ -46,5 +55,8 @@ export default connect( state => ({ options: state.options }), - { hideModal: modalAction.hideModal } + { + hideModal: modalAction.hideModal, + updateOptions: updateOptions, + } )(PureOptionModal) |