diff options
author | Maximilian Hils <git@maximilianhils.com> | 2016-12-11 17:37:11 +0100 |
---|---|---|
committer | Maximilian Hils <git@maximilianhils.com> | 2016-12-11 17:37:11 +0100 |
commit | 795e76eee298e23079f7e979119defc4c187b833 (patch) | |
tree | 64bf62c1c00d5857d57af6e802567d1875aa3bd8 /web/src/js/components/Header/MenuToggle.jsx | |
parent | b92980efeca831c879c969e673cd60f93d0e3ace (diff) | |
download | mitmproxy-795e76eee298e23079f7e979119defc4c187b833.tar.gz mitmproxy-795e76eee298e23079f7e979119defc4c187b833.tar.bz2 mitmproxy-795e76eee298e23079f7e979119defc4c187b833.zip |
[web] style options menu
The other menus are WIP.
Diffstat (limited to 'web/src/js/components/Header/MenuToggle.jsx')
-rw-r--r-- | web/src/js/components/Header/MenuToggle.jsx | 69 |
1 files changed, 69 insertions, 0 deletions
diff --git a/web/src/js/components/Header/MenuToggle.jsx b/web/src/js/components/Header/MenuToggle.jsx new file mode 100644 index 00000000..726db7bd --- /dev/null +++ b/web/src/js/components/Header/MenuToggle.jsx @@ -0,0 +1,69 @@ +import { PropTypes } from "react" +import { connect } from "react-redux" +import { update as updateSettings } from "../../ducks/settings" +import { toggleVisibility } from "../../ducks/eventLog" + +MenuToggle.propTypes = { + value: PropTypes.bool.isRequired, + onChange: PropTypes.func.isRequired, + children: PropTypes.node.isRequired, +} + +export function MenuToggle({ value, onChange, children }) { + return ( + <div className="entry"> + <label> + <input type="checkbox" + value={value} + onChange={onChange}/> + {children} + </label> + </div> + ) +} + + +SettingsToggle.propTypes = { + setting: PropTypes.string.isRequired, + children: PropTypes.node.isRequired, +} + +export function SettingsToggle({ setting, children, settings, updateSettings }) { + return ( + <MenuToggle + value={settings[setting] || false} // we don't have settings initially, so just pass false. + onChange={() => updateSettings({ [setting]: !settings[setting] })} + > + {children} + </MenuToggle> + ) +} +SettingsToggle = connect( + state => ({ + settings: state.settings, + }), + { + updateSettings, + } +)(SettingsToggle) + + +export function EventlogToggle({ toggleVisibility, eventLogVisible }) { + return ( + <MenuToggle + value={eventLogVisible} + onChange={toggleVisibility} + > + Display Event Log + </MenuToggle> + ) +} +EventlogToggle = connect( + state => ({ + eventLogVisible: state.eventLog.visible, + }), + { + toggleVisibility, + } +)(EventlogToggle) + |