From a416732665aa7a0fb56e20f9888fd9488750a4df Mon Sep 17 00:00:00 2001 From: Clemens Date: Thu, 18 Aug 2016 16:44:49 +0200 Subject: refactor dropdown menu, view selector --- web/src/js/components/ContentView/ViewSelector.jsx | 80 ++++++---------------- web/src/js/components/Header/FileMenu.jsx | 80 +++++++--------------- web/src/js/components/common/Dropdown.jsx | 56 +++++++++++++++ web/src/js/components/common/FileChooser.jsx | 2 +- 4 files changed, 103 insertions(+), 115 deletions(-) create mode 100644 web/src/js/components/common/Dropdown.jsx (limited to 'web/src/js') diff --git a/web/src/js/components/ContentView/ViewSelector.jsx b/web/src/js/components/ContentView/ViewSelector.jsx index f879dbc5..ab433ea3 100644 --- a/web/src/js/components/ContentView/ViewSelector.jsx +++ b/web/src/js/components/ContentView/ViewSelector.jsx @@ -1,72 +1,36 @@ import React, { PropTypes, Component } from 'react' -import classnames from 'classnames' import { connect } from 'react-redux' import * as ContentViews from './ContentViews' -import { setContentView } from "../../ducks/ui/flow"; - -function ViewItem({ name, setContentView, children }) { - return ( -
  • - {e.preventDefault(); setContentView(name)}}> - {children} - -
    • - ) -} +import { setContentView } from '../../ducks/ui/flow'; +import Dropdown from '../common/Dropdown' -/*ViewSelector.propTypes = { +ViewSelector.propTypes = { contentViews: PropTypes.array.isRequired, activeView: PropTypes.string.isRequired, isEdit: PropTypes.bool.isRequired, - isContentViewSelectorOpen: PropTypes.bool.isRequired, - setContentViewSelectorOpen: PropTypes.func.isRequired -}*/ - - -class ViewSelector extends Component { - constructor(props, context) { - super(props, context) - this.close = this.close.bind(this) - this.state = {open: false} - } - close() { - this.setState({open: false}) - document.removeEventListener('click', this.close) - } - - onDropdown(e){ - e.preventDefault() - this.setState({open: !this.state.open}) - document.addEventListener('click', this.close) - } + setContentView: PropTypes.func.isRequired +} - render() { - const {contentViews, activeView, isEdit, setContentView} = this.props - let edit = ContentViews.Edit.displayName +function ViewSelector ({contentViews, activeView, isEdit, setContentView}){ + let edit = ContentViews.Edit.displayName + let inner = View: {activeView} - return ( -
    - this.onDropdown(e) } - href="#"> - View: {activeView} + return ( + + {contentViews.map(name => + {e.preventDefault(); setContentView(name)}}> + {name.toLowerCase().replace('_', ' ')} - -
    - ) - } + ) + } + {isEdit && + {e.preventDefault(); setContentView(edit)}}> + {edit.toLowerCase()} + + } + + ) } export default connect ( diff --git a/web/src/js/components/Header/FileMenu.jsx b/web/src/js/components/Header/FileMenu.jsx index 392cc163..6053b2d3 100644 --- a/web/src/js/components/Header/FileMenu.jsx +++ b/web/src/js/components/Header/FileMenu.jsx @@ -2,6 +2,7 @@ import React, { Component, PropTypes } from 'react' import { connect } from 'react-redux' import classnames from 'classnames' import FileChooser from '../common/FileChooser' +import Dropdown from '../common/Dropdown' import * as flowsActions from '../../ducks/flows' @@ -16,44 +17,20 @@ 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(file) { this.props.loadFlows(file) } @@ -65,37 +42,28 @@ class FileMenu extends Component { render() { return ( -
    - mitmproxy - -
    + + + + New + + + + + Save... + + + + + + + Install Certificates... + + ) } } diff --git a/web/src/js/components/common/Dropdown.jsx b/web/src/js/components/common/Dropdown.jsx new file mode 100644 index 00000000..9180767f --- /dev/null +++ b/web/src/js/components/common/Dropdown.jsx @@ -0,0 +1,56 @@ +import React, { Component, PropTypes } from 'react' +import classnames from 'classnames' + +export default class Dropdown extends Component { + + static propTypes = { + dropup: PropTypes.bool, + className: PropTypes.string, + btnClass: PropTypes.string.isRequired + } + + static defaultProps = { + dropup: false + } + + constructor(props, context) { + super(props, context) + this.state = { open: false } + this.close = this.close.bind(this) + this.open = this.open.bind(this) + } + + close() { + this.setState({ open: false }) + document.removeEventListener('click', this.close) + } + + open(e){ + e.preventDefault() + if (this.state.open) { + return + } + this.setState({open: !this.state.open}) + document.addEventListener('click', this.close) + } + + render() { + const {dropup, className, btnClass, text, children} = this.props + return ( +
    + + {text} + + +
    + ) + } +} diff --git a/web/src/js/components/common/FileChooser.jsx b/web/src/js/components/common/FileChooser.jsx index d8a80ad7..d59d2d6d 100644 --- a/web/src/js/components/common/FileChooser.jsx +++ b/web/src/js/components/common/FileChooser.jsx @@ -11,7 +11,7 @@ FileChooser.propTypes = { export default function FileChooser({ icon, text, className, title, onOpenFile }) { let fileInput; return ( - fileInput.click()} + fileInput.click()} className={className} title={title}> -- cgit v1.2.3