diff options
author | Clemens <cle1000.cb@gmail.com> | 2016-08-18 16:44:49 +0200 |
---|---|---|
committer | Clemens <cle1000.cb@gmail.com> | 2016-08-18 16:44:49 +0200 |
commit | a416732665aa7a0fb56e20f9888fd9488750a4df (patch) | |
tree | 0e1a3f85022569900ff5a71dead73359a857d34a /web/src/js/components/common | |
parent | 0f4eb24a8dbe552d1b3b61481fea37c52c27da9f (diff) | |
download | mitmproxy-a416732665aa7a0fb56e20f9888fd9488750a4df.tar.gz mitmproxy-a416732665aa7a0fb56e20f9888fd9488750a4df.tar.bz2 mitmproxy-a416732665aa7a0fb56e20f9888fd9488750a4df.zip |
refactor dropdown menu, view selector
Diffstat (limited to 'web/src/js/components/common')
-rw-r--r-- | web/src/js/components/common/Dropdown.jsx | 56 | ||||
-rw-r--r-- | web/src/js/components/common/FileChooser.jsx | 2 |
2 files changed, 57 insertions, 1 deletions
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 ( + <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> + ) + } +} 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 ( - <a onClick={() => fileInput.click()} + <a href='#' onClick={() => fileInput.click()} className={className} title={title}> <i className={'fa fa-fw ' + icon}></i> |