diff options
author | Maximilian Hils <git@maximilianhils.com> | 2017-07-17 20:46:28 +0200 |
---|---|---|
committer | Maximilian Hils <git@maximilianhils.com> | 2017-07-17 21:04:01 +0200 |
commit | babd967eb8ac62c4a6ff6734ff57e46faaa5bab6 (patch) | |
tree | c44148fd3fc96f94f76442d1c8bcb97e117e169b /web/src/js/components/Modal/Option.jsx | |
parent | 21b3f9c02956c625c576c6787ab10409aab0618d (diff) | |
download | mitmproxy-babd967eb8ac62c4a6ff6734ff57e46faaa5bab6.tar.gz mitmproxy-babd967eb8ac62c4a6ff6734ff57e46faaa5bab6.tar.bz2 mitmproxy-babd967eb8ac62c4a6ff6734ff57e46faaa5bab6.zip |
[web] options: make help and err permanently visible, improve perf
Diffstat (limited to 'web/src/js/components/Modal/Option.jsx')
-rw-r--r-- | web/src/js/components/Modal/Option.jsx | 121 |
1 files changed, 121 insertions, 0 deletions
diff --git a/web/src/js/components/Modal/Option.jsx b/web/src/js/components/Modal/Option.jsx new file mode 100644 index 00000000..1aca23c2 --- /dev/null +++ b/web/src/js/components/Modal/Option.jsx @@ -0,0 +1,121 @@ +import React, { Component } from "react" +import PropTypes from "prop-types" +import { connect } from "react-redux" +import { update as updateOptions } from "../../ducks/options" +import { Key } from "../../utils" + +const stopPropagation = e => { + if (e.keyCode !== Key.ESC) { + e.stopPropagation() + } +} + +BooleanOption.PropTypes = { + value: PropTypes.bool.isRequired, + onChange: PropTypes.func.isRequired, +} +function BooleanOption({ value, onChange, ...props }) { + return ( + <input type="checkbox" + checked={value} + onChange={e => onChange(e.target.checked)} + {...props} + /> + ) +} + +StringOption.PropTypes = { + value: PropTypes.string.isRequired, + onChange: PropTypes.func.isRequired, +} +function StringOption({ value, onChange, ...props }) { + return ( + <input type="text" + value={value || ""} + onChange={e => onChange(e.target.value)} + {...props} + /> + ) +} + +NumberOption.PropTypes = { + value: PropTypes.number.isRequired, + onChange: PropTypes.func.isRequired, +} +function NumberOption({ value, onChange, ...props }) { + return ( + <input type="number" + value={value} + onChange={(e) => onChange(parseInt(e.target.value))} + {...props} + /> + ) +} + +ChoicesOption.PropTypes = { + value: PropTypes.string.isRequired, + onChange: PropTypes.func.isRequired, +} +function ChoicesOption({ value, onChange, choices, ...props }) { + return ( + <select + onChange={(e) => onChange(e.target.value)} + selected={value} + {...props} + > + { choices.map( + choice => ( + <option key={choice} value={choice}>{choice}</option> + ) + )} + </select> + ) +} + +StringSequenceOption.PropTypes = { + value: PropTypes.string.isRequired, + onChange: PropTypes.func.isRequired, +} +function StringSequenceOption({ value, onChange, ...props }) { + const height = Math.max(value.length, 1) + return <textarea + rows={height} + value={value.join("\n")} + onChange={e => onChange(e.target.value.split("\n"))} + {...props} + /> +} + +const Options = { + "bool": BooleanOption, + "str": StringOption, + "int": NumberOption, + "optional str": StringOption, + "sequence of str": StringSequenceOption, +} + +function PureOption({ choices, type, value, onChange }) { + if (choices) { + return <ChoicesOption + value={value} + onChange={onChange} + choices={choices} + onKeyDown={stopPropagation} + /> + } + const Opt = Options[type] + return <Opt + value={value} + onChange={onChange} + onKeyDown={stopPropagation} + /> +} +export default connect( + (state, { name }) => ({ + ...state.options[name], + ...state.ui.optionsEditor[name] + }), + (dispatch, { name }) => ({ + onChange: value => dispatch(updateOptions(name, value)) + }) +)(PureOption) |