diff options
author | Maximilian Hils <git@maximilianhils.com> | 2017-07-17 21:13:24 +0200 |
---|---|---|
committer | Maximilian Hils <git@maximilianhils.com> | 2017-07-17 21:13:24 +0200 |
commit | 183079f7312dc812d7b70a01e490ef3827b2890c (patch) | |
tree | a5e23cc021868e130f0fca4e1e8e3f3e37ad27e8 /web/src/js/components/Modal/Option.jsx | |
parent | babd967eb8ac62c4a6ff6734ff57e46faaa5bab6 (diff) | |
download | mitmproxy-183079f7312dc812d7b70a01e490ef3827b2890c.tar.gz mitmproxy-183079f7312dc812d7b70a01e490ef3827b2890c.tar.bz2 mitmproxy-183079f7312dc812d7b70a01e490ef3827b2890c.zip |
[web] options: add some styling, minor fixes
Diffstat (limited to 'web/src/js/components/Modal/Option.jsx')
-rw-r--r-- | web/src/js/components/Modal/Option.jsx | 47 |
1 files changed, 32 insertions, 15 deletions
diff --git a/web/src/js/components/Modal/Option.jsx b/web/src/js/components/Modal/Option.jsx index 1aca23c2..e2f6708f 100644 --- a/web/src/js/components/Modal/Option.jsx +++ b/web/src/js/components/Modal/Option.jsx @@ -16,11 +16,16 @@ BooleanOption.PropTypes = { } function BooleanOption({ value, onChange, ...props }) { return ( - <input type="checkbox" - checked={value} - onChange={e => onChange(e.target.checked)} - {...props} - /> + <div className="checkbox"> + <label> + <input type="checkbox" + checked={value} + onChange={e => onChange(e.target.checked)} + {...props} + /> + Enable + </label> + </div> ) } @@ -37,6 +42,14 @@ function StringOption({ value, onChange, ...props }) { /> ) } +function Optional(Component) { + return function ({ onChange, ...props }) { + return <Component + onChange={x => onChange(x ? x : null)} + {...props} + /> + } +} NumberOption.PropTypes = { value: PropTypes.number.isRequired, @@ -81,7 +94,7 @@ function StringSequenceOption({ value, onChange, ...props }) { return <textarea rows={height} value={value.join("\n")} - onChange={e => onChange(e.target.value.split("\n"))} + onChange={e => onChange(e.target.value.split("\n").filter(x => x.trim()))} {...props} /> } @@ -90,24 +103,28 @@ const Options = { "bool": BooleanOption, "str": StringOption, "int": NumberOption, - "optional str": StringOption, + "optional str": Optional(StringOption), "sequence of str": StringSequenceOption, } -function PureOption({ choices, type, value, onChange }) { +function PureOption({ choices, type, value, onChange, name }) { + let Opt, props = {} if (choices) { - return <ChoicesOption - value={value} - onChange={onChange} - choices={choices} - onKeyDown={stopPropagation} - /> + Opt = ChoicesOption; + props.choices = choices + } else { + Opt = Options[type] + } + if (Opt !== BooleanOption) { + props.className = "form-control" } - const Opt = Options[type] + return <Opt + name={name} value={value} onChange={onChange} onKeyDown={stopPropagation} + {...props} /> } export default connect( |