From a416732665aa7a0fb56e20f9888fd9488750a4df Mon Sep 17 00:00:00 2001
From: Clemens <cle1000.cb@gmail.com>
Date: Thu, 18 Aug 2016 16:44:49 +0200
Subject: refactor dropdown menu, view selector

---
 web/src/js/components/common/Dropdown.jsx    | 56 ++++++++++++++++++++++++++++
 web/src/js/components/common/FileChooser.jsx |  2 +-
 2 files changed, 57 insertions(+), 1 deletion(-)
 create mode 100644 web/src/js/components/common/Dropdown.jsx

(limited to 'web/src/js/components/common')

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>
-- 
cgit v1.2.3