3 files changed, 95 insertions, 15 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..cc95a6dc
--- /dev/null
+++ b/web/src/js/components/common/Dropdown.jsx
@@ -0,0 +1,53 @@
+import React, { Component, PropTypes } from 'react'
+import classnames from 'classnames'
+
+export const Divider = () => <hr className="divider"/>
+
+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, i) =>  <li key={i}> {item} </li> )}
+                </ul>
+            </div>
+        )
+    }
+}
diff --git a/web/src/js/components/common/FileChooser.jsx b/web/src/js/components/common/FileChooser.jsx
new file mode 100644
index 00000000..d59d2d6d
--- /dev/null
+++ b/web/src/js/components/common/FileChooser.jsx
@@ -0,0 +1,27 @@
+import React, { PropTypes } from 'react'
+
+FileChooser.propTypes = {
+    icon: PropTypes.string,
+    text: PropTypes.string,
+    className: PropTypes.string,
+    title: PropTypes.string,
+    onOpenFile: PropTypes.func.isRequired
+}
+
+export default function FileChooser({ icon, text, className, title, onOpenFile }) {
+    let fileInput;
+    return (
+        <a href='#' onClick={() => fileInput.click()}
+           className={className}
+           title={title}>
+            <i className={'fa fa-fw ' + icon}></i>
+            {text}
+             <input
+                ref={ref => fileInput = ref}
+                className="hidden"
+                type="file"
+                onChange={e => { e.preventDefault(); if(e.target.files.length > 0) onOpenFile(e.target.files[0]); fileInput = "";}}
+            />
+        </a>
+    )
+}
diff --git a/web/src/js/components/common/ToggleInputButton.jsx b/web/src/js/components/common/ToggleInputButton.jsx
index 25d620ae..5fa24c10 100644
--- a/web/src/js/components/common/ToggleInputButton.jsx
+++ b/web/src/js/components/common/ToggleInputButton.jsx
@@ -6,17 +6,16 @@ export default class ToggleInputButton extends Component {
 
     static propTypes = {
         name: PropTypes.string.isRequired,
-        txt: PropTypes.string.isRequired,
-        onToggleChanged: PropTypes.func.isRequired
+        txt: PropTypes.string,
+        onToggleChanged: PropTypes.func.isRequired,
+        checked: PropTypes.bool.isRequired,
+        placeholder: PropTypes.string.isRequired,
+        inputType: PropTypes.string
     }
 
     constructor(props) {
         super(props)
-        this.state = { txt: props.txt }
-    }
-
-    onChange(e) {
-        this.setState({ txt: e.target.value })
+        this.state = { txt: props.txt || '' }
     }
 
     onKeyDown(e) {
@@ -27,23 +26,24 @@ export default class ToggleInputButton extends Component {
     }
 
     render() {
+        const {checked, onToggleChanged, name, inputType, placeholder} = this.props
         return (
             <div className="input-group toggle-input-btn">
                 <span className="input-group-btn"
-                      onClick={() => this.props.onToggleChanged(this.state.txt)}>
-                    <div className={classnames('btn', this.props.checked ? 'btn-primary' : 'btn-default')}>
-                        <span className={classnames('fa', this.props.checked ? 'fa-check-square-o' : 'fa-square-o')}/>
+                      onClick={() => onToggleChanged(this.state.txt)}>
+                    <div className={classnames('btn', checked ? 'btn-primary' : 'btn-default')}>
+                        <span className={classnames('fa', checked ? 'fa-check-square-o' : 'fa-square-o')}/>
                         &nbsp;
-                        {this.props.name}
+                        {name}
                     </div>
                 </span>
                 <input
                     className="form-control"
-                    placeholder={this.props.placeholder}
-                    disabled={this.props.checked}
+                    placeholder={placeholder}
+                    disabled={checked}
                     value={this.state.txt}
-                    type={this.props.inputType}
-                    onChange={e => this.onChange(e)}
+                    type={inputType || 'text'}
+                    onChange={e => this.setState({ txt: e.target.value })}
                     onKeyDown={e => this.onKeyDown(e)}
                 />
             </div>