refactor dropdown menu, view selector

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 (
-        <li>
-            <a href="#" onClick={e => {e.preventDefault(); setContentView(name)}}>
-                {children}
-            </a>
-        </li>
-    )
-}
+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
-}*/
+    setContentView: PropTypes.func.isRequired
+}
 
+function ViewSelector ({contentViews, activeView, isEdit, setContentView}){
+    let edit = ContentViews.Edit.displayName
+    let inner = <span> <b>View:</b> {activeView}<span className="caret"></span> </span>
 
-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)
-    }
-
-    render() {
-        const {contentViews, activeView, isEdit, setContentView} = this.props
-        let edit = ContentViews.Edit.displayName
-
-        return (
-            <div className={classnames('dropup pull-left', { open: this.state.open })}>
-                <a className="btn btn-default btn-xs"
-                   onClick={ e => this.onDropdown(e) }
-                   href="#">
-                    <b>View:</b> {activeView}<span className="caret"></span>
+    return (
+        <Dropdown dropup className="pull-left" btnClass="btn btn-default btn-xs" text={inner}>
+            {contentViews.map(name =>
+                <a href="#" key={name} onClick={e => {e.preventDefault(); setContentView(name)}}>
+                    {name.toLowerCase().replace('_', ' ')}
                 </a>
-                <ul className="dropdown-menu" role="menu">
-                    {contentViews.map(name =>
-                        <ViewItem key={name} setContentView={setContentView} name={name}>
-                            {name.toLowerCase().replace('_', ' ')}
-                        </ViewItem>
-                    )}
-                    {isEdit &&
-                    <ViewItem key={edit} setContentView={setContentView} name={edit}>
-                        {edit.toLowerCase()}
-                    </ViewItem>
-                    }
-                </ul>
-            </div>
-        )
-    }
+                )
+            }
+            {isEdit &&
+                <a href="#" onClick={e => {e.preventDefault(); setContentView(edit)}}>
+                    {edit.toLowerCase()}
+                </a>
+            }
+        </Dropdown>
+    )
 }
 
 export default connect (

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 (
-            <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>
-                        <FileChooser
-                            icon="fa-folder-open"
-                            text="Open..."
-                            onOpenFile={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>
+            <Dropdown className="pull-left" btnClass="special" text="mitmproxy">
+                <a href="#" onClick={this.onNewClick}>
+                    <i className="fa fa-fw fa-file"></i>
+                    New
+                </a>
+                <FileChooser
+                    icon="fa-folder-open"
+                    text="Open..."
+                    onOpenFile={this.onOpenFile}
+                />
+                <a href="#" onClick={this.onSaveClick}>
+                    <i className="fa fa-fw fa-floppy-o"></i>
+                    Save...
+                </a>
+
+                <span name="divider"/>
+
+                <a href="http://mitm.it/" target="_blank">
+                        <i className="fa fa-fw fa-external-link"></i>
+                        Install Certificates...
+                </a>
+            </Dropdown>
         )
     }
 }

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 (
+            <div className={classnames( (dropup ? 'dropup' : 'dropdown'), className, { open: this.state.open })}>
+                <a href='#' className={btnClass}
+                   onClick={this.open}>
+                    {text}
+                </a>
+                <ul className="dropdown-menu" role="menu">
+                    {children.map(item =>
+                        item.name == "divider" ?
+                            <li role="presentation" className="divider"/>
+                        :
+                            <li> {item} </li>
+                    )}
+                </ul>
+            </div>
+        )
+    }
+}

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 (
-        <a onClick={() => fileInput.click()}
+        <a href='#' onClick={() => fileInput.click()}
            className={className}
            title={title}>
             <i className={'fa fa-fw ' + icon}></i>