refactor dropdown menu, view selector

1 files changed, 56 insertions, 0 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>
+        )
+    }
+}