diff options
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> |