diff options
Diffstat (limited to 'web/src/js/components/Header')
-rw-r--r-- | web/src/js/components/Header/MainMenu.jsx | 120 | ||||
-rw-r--r-- | web/src/js/components/Header/OptionMenu.jsx | 27 |
2 files changed, 52 insertions, 95 deletions
diff --git a/web/src/js/components/Header/MainMenu.jsx b/web/src/js/components/Header/MainMenu.jsx index 27a4be60..7236d31f 100644 --- a/web/src/js/components/Header/MainMenu.jsx +++ b/web/src/js/components/Header/MainMenu.jsx @@ -1,92 +1,50 @@ import React, { Component, PropTypes } from 'react' import { connect } from 'react-redux' import FilterInput from './FilterInput' -import { Query } from '../../actions.js' import { update as updateSettings } from '../../ducks/settings' -import { updateQuery, setSelectedInput } from '../../ducks/ui' +import { updateFilter, updateHighlight } from '../../ducks/flowView' -class MainMenu extends Component { +MainMenu.title = "Start" - static title = 'Start' - static route = 'flows' - - static propTypes = { - query: PropTypes.object.isRequired, - settings: PropTypes.object.isRequired, - updateSettings: PropTypes.func.isRequired, - updateQuery: PropTypes.func.isRequired, - } - - constructor(props, context) { - super(props, context) - this.onSearchChange = this.onSearchChange.bind(this) - this.onHighlightChange = this.onHighlightChange.bind(this) - } - - componentWillReceiveProps(nextProps) { - if(this.refs[nextProps.selectedInput]) { - this.refs[nextProps.selectedInput].select() - } - this.props.setSelectedInput(undefined) - } - - onSearchChange(val) { - this.props.updateQuery({ [Query.SEARCH]: val }) - } - - onHighlightChange(val) { - this.props.updateQuery({ [Query.HIGHLIGHT]: val }) - } - - render() { - const { query, settings, updateSettings } = this.props - - return ( - <div> - <div className="menu-row"> - <FilterInput - ref="search" - placeholder="Search" - type="search" - color="black" - value={query[Query.SEARCH] || ''} - onChange={this.onSearchChange} - /> - <FilterInput - ref="highlight" - placeholder="Highlight" - type="tag" - color="hsl(48, 100%, 50%)" - value={query[Query.HIGHLIGHT] || ''} - onChange={this.onHighlightChange} - /> - <FilterInput - ref="intercept" - placeholder="Intercept" - type="pause" - color="hsl(208, 56%, 53%)" - value={settings.intercept || ''} - onChange={intercept => updateSettings({ intercept })} - /> - </div> - <div className="clearfix"></div> +export default function MainMenu() { + return ( + <div> + <div className="menu-row"> + <FlowFilterInput/> + <HighlightInput/> + <InterceptInput/> </div> - ) - } + <div className="clearfix"></div> + </div> + ) } -export default connect( +const InterceptInput = connect( + state => ({ + value: state.settings.intercept || '', + placeholder: 'Intercept', + type: 'pause', + color: 'hsl(208, 56%, 53%)' + }), + { onChange: intercept => updateSettings({ intercept }) } +)(FilterInput); + +const FlowFilterInput = connect( + state => ({ + value: state.flowView.filter || '', + placeholder: 'Search', + type: 'search', + color: 'black' + }), + { onChange: updateFilter } +)(FilterInput); + +const HighlightInput = connect( state => ({ - settings: state.settings.settings, - selectedInput: state.ui.selectedInput + value: state.flowView.highlight || '', + placeholder: 'Highlight', + type: 'tag', + color: 'hsl(48, 100%, 50%)' }), - { - updateSettings, - updateQuery, - setSelectedInput - }, - null, - { - withRef: true, - } -)(MainMenu); + { onChange: updateHighlight } +)(FilterInput); diff --git a/web/src/js/components/Header/OptionMenu.jsx b/web/src/js/components/Header/OptionMenu.jsx index 4a487cc9..a338fed0 100644 --- a/web/src/js/components/Header/OptionMenu.jsx +++ b/web/src/js/components/Header/OptionMenu.jsx @@ -8,53 +8,52 @@ OptionMenu.title = 'Options' OptionMenu.propTypes = { settings: PropTypes.object.isRequired, - onSettingsChange: PropTypes.func.isRequired, + updateSettings: PropTypes.func.isRequired, } -function OptionMenu({ settings, onSettingsChange }) { - // @todo use settings.map +function OptionMenu({ settings, updateSettings }) { return ( <div> <div className="menu-row"> <ToggleButton text="showhost" checked={settings.showhost} - onToggle={() => onSettingsChange({ showhost: !settings.showhost })} + onToggle={() => updateSettings({ showhost: !settings.showhost })} /> <ToggleButton text="no_upstream_cert" checked={settings.no_upstream_cert} - onToggle={() => onSettingsChange({ no_upstream_cert: !settings.no_upstream_cert })} + onToggle={() => updateSettings({ no_upstream_cert: !settings.no_upstream_cert })} /> <ToggleButton text="rawtcp" checked={settings.rawtcp} - onToggle={() => onSettingsChange({ rawtcp: !settings.rawtcp })} + onToggle={() => updateSettings({ rawtcp: !settings.rawtcp })} /> <ToggleButton text="http2" checked={settings.http2} - onToggle={() => onSettingsChange({ http2: !settings.http2 })} + onToggle={() => updateSettings({ http2: !settings.http2 })} /> <ToggleButton text="anticache" checked={settings.anticache} - onToggle={() => onSettingsChange({ anticache: !settings.anticache })} + onToggle={() => updateSettings({ anticache: !settings.anticache })} /> <ToggleButton text="anticomp" checked={settings.anticomp} - onToggle={() => onSettingsChange({ anticomp: !settings.anticomp })} + onToggle={() => updateSettings({ anticomp: !settings.anticomp })} /> <ToggleInputButton name="stickyauth" placeholder="Sticky auth filter" checked={!!settings.stickyauth} txt={settings.stickyauth || ''} - onToggleChanged={txt => onSettingsChange({ stickyauth: !settings.stickyauth ? txt : null })} + onToggleChanged={txt => updateSettings({ stickyauth: !settings.stickyauth ? txt : null })} /> <ToggleInputButton name="stickycookie" placeholder="Sticky cookie filter" checked={!!settings.stickycookie} txt={settings.stickycookie || ''} - onToggleChanged={txt => onSettingsChange({ stickycookie: !settings.stickycookie ? txt : null })} + onToggleChanged={txt => updateSettings({ stickycookie: !settings.stickycookie ? txt : null })} /> <ToggleInputButton name="stream" placeholder="stream..." checked={!!settings.stream} txt={settings.stream || ''} inputType="number" - onToggleChanged={txt => onSettingsChange({ stream: !settings.stream ? txt : null })} + onToggleChanged={txt => updateSettings({ stream: !settings.stream ? txt : null })} /> </div> <div className="clearfix"/> @@ -64,9 +63,9 @@ function OptionMenu({ settings, onSettingsChange }) { export default connect( state => ({ - settings: state.settings.settings, + settings: state.settings, }), { - onSettingsChange: updateSettings, + updateSettings, } )(OptionMenu) |