diff options
Diffstat (limited to 'web/src/js/components/Header')
| -rw-r--r-- | web/src/js/components/Header/FileMenu.jsx | 133 | ||||
| -rw-r--r-- | web/src/js/components/Header/FlowMenu.jsx | 6 | ||||
| -rw-r--r-- | web/src/js/components/Header/OptionMenu.jsx | 6 |
3 files changed, 46 insertions, 99 deletions
diff --git a/web/src/js/components/Header/FileMenu.jsx b/web/src/js/components/Header/FileMenu.jsx index d3786475..53c63ea1 100644 --- a/web/src/js/components/Header/FileMenu.jsx +++ b/web/src/js/components/Header/FileMenu.jsx @@ -1,103 +1,46 @@ -import React, { Component } from 'react' +import React, { Component, PropTypes } from 'react' import { connect } from 'react-redux' -import classnames from 'classnames' +import FileChooser from '../common/FileChooser' +import Dropdown, {Divider} from '../common/Dropdown' import * as flowsActions from '../../ducks/flows' -class FileMenu extends Component { - - constructor(props, context) { - super(props, context) - this.state = { show: false } - - this.close = this.close.bind(this) - this.onFileClick = this.onFileClick.bind(this) - this.onNewClick = this.onNewClick.bind(this) - this.onOpenClick = this.onOpenClick.bind(this) - this.onOpenFile = this.onOpenFile.bind(this) - this.onSaveClick = this.onSaveClick.bind(this) - } - - close() { - this.setState({ show: false }) - document.removeEventListener('click', this.close) - } - - onFileClick(e) { - e.preventDefault() - - if (this.state.show) { - return - } - - document.addEventListener('click', this.close) - this.setState({ show: true }) - } - - onNewClick(e) { - e.preventDefault() - if (confirm('Delete all flows?')) { - this.props.clearFlows() - } - } - - onOpenClick(e) { - e.preventDefault() - this.fileInput.click() - } - - onOpenFile(e) { - e.preventDefault() - if (e.target.files.length > 0) { - this.props.loadFlows(e.target.files[0]) - this.fileInput.value = '' - } - } +FileMenu.propTypes = { + clearFlows: PropTypes.func.isRequired, + loadFlows: PropTypes.func.isRequired, + saveFlows: PropTypes.func.isRequired +} - onSaveClick(e) { - e.preventDefault() - this.props.saveFlows() - } +FileMenu.onNewClick = (e, clearFlows) => { + e.preventDefault(); + if (confirm('Delete all flows?')) + clearFlows() +} - render() { - return ( - <div className={classnames('dropdown pull-left', { open: this.state.show })}> - <a href="#" className="special" onClick={this.onFileClick}>mitmproxy</a> - <ul className="dropdown-menu" role="menu"> - <li> - <a href="#" onClick={this.onNewClick}> - <i className="fa fa-fw fa-file"></i> - New - </a> - </li> - <li> - <a href="#" onClick={this.onOpenClick}> - <i className="fa fa-fw fa-folder-open"></i> - Open... - </a> - <input - ref={ref => this.fileInput = ref} - className="hidden" - type="file" - onChange={this.onOpenFile} - /> - </li> - <li> - <a href="#" onClick={this.onSaveClick}> - <i className="fa fa-fw fa-floppy-o"></i> - Save... - </a> - </li> - <li role="presentation" className="divider"></li> - <li> - <a href="http://mitm.it/" target="_blank"> - <i className="fa fa-fw fa-external-link"></i> - Install Certificates... - </a> - </li> - </ul> - </div> - ) - } +function FileMenu ({clearFlows, loadFlows, saveFlows}) { + return ( + <Dropdown className="pull-left" btnClass="special" text="mitmproxy"> + <a href="#" onClick={e => FileMenu.onNewClick(e, clearFlows)}> + <i className="fa fa-fw fa-file"></i> + New + </a> + <FileChooser + icon="fa-folder-open" + text="Open..." + onOpenFile={file => loadFlows(file)} + /> + <a href="#" onClick={e =>{ e.preventDefault(); saveFlows();}}> + <i className="fa fa-fw fa-floppy-o"></i> + Save... + </a> + + <Divider/> + + <a href="http://mitm.it/" target="_blank"> + <i className="fa fa-fw fa-external-link"></i> + Install Certificates... + </a> + </Dropdown> + ) } export default connect( diff --git a/web/src/js/components/Header/FlowMenu.jsx b/web/src/js/components/Header/FlowMenu.jsx index bdd30d5e..e78a49aa 100644 --- a/web/src/js/components/Header/FlowMenu.jsx +++ b/web/src/js/components/Header/FlowMenu.jsx @@ -8,10 +8,14 @@ FlowMenu.title = 'Flow' FlowMenu.propTypes = { flow: PropTypes.object.isRequired, + acceptFlow: PropTypes.func.isRequired, + replayFlow: PropTypes.func.isRequired, + duplicateFlow: PropTypes.func.isRequired, + removeFlow: PropTypes.func.isRequired, + revertFlow: PropTypes.func.isRequired } function FlowMenu({ flow, acceptFlow, replayFlow, duplicateFlow, removeFlow, revertFlow }) { - return ( <div> <div className="menu-row"> diff --git a/web/src/js/components/Header/OptionMenu.jsx b/web/src/js/components/Header/OptionMenu.jsx index a338fed0..a11062f2 100644 --- a/web/src/js/components/Header/OptionMenu.jsx +++ b/web/src/js/components/Header/OptionMenu.jsx @@ -41,17 +41,17 @@ function OptionMenu({ settings, updateSettings }) { /> <ToggleInputButton name="stickyauth" placeholder="Sticky auth filter" checked={!!settings.stickyauth} - txt={settings.stickyauth || ''} + txt={settings.stickyauth} onToggleChanged={txt => updateSettings({ stickyauth: !settings.stickyauth ? txt : null })} /> <ToggleInputButton name="stickycookie" placeholder="Sticky cookie filter" checked={!!settings.stickycookie} - txt={settings.stickycookie || ''} + txt={settings.stickycookie} onToggleChanged={txt => updateSettings({ stickycookie: !settings.stickycookie ? txt : null })} /> <ToggleInputButton name="stream" placeholder="stream..." checked={!!settings.stream} - txt={settings.stream || ''} + txt={settings.stream} inputType="number" onToggleChanged={txt => updateSettings({ stream: !settings.stream ? txt : null })} /> |