#111: Draft dropdown events

src/components/contact/ContactForm.jsx

@@ -11,6 +11,8 @@ import popupStyles from 'components/ui/popup/popup.scss';
 import styles from './contactForm.scss';
 import messages from './contactForm.intl.json';
 
+const CONTACT_CATEGORIES = ['Foo', 'Bar', 'Baz'];
+
 export default class ContactForm extends Component {
     static displayName = 'ContactForm';
 
@@ -65,7 +67,7 @@ export default class ContactForm extends Component {
                         </div>
 
                         <div className={styles.formMargin}>
-                            <Dropdown label={messages.whichQuestion} block />
+                            <Dropdown label={messages.whichQuestion} items={CONTACT_CATEGORIES} block />
                         </div>
 
                         <TextArea

src/components/ui/form/Dropdown.jsx

@@ -1,9 +1,9 @@
 import React, { PropTypes } from 'react';
+import ReactDOM from 'react-dom';
 
 import classNames from 'classnames';
 
-import styles from 'components/ui/dropdown.scss';
+import styles from './dropdown.scss';
-
 import FormComponent from './FormComponent';
 
 export default class Dropdown extends FormComponent {
@@ -16,26 +16,81 @@ export default class Dropdown extends FormComponent {
             }),
             PropTypes.string
         ]).isRequired,
+        items: PropTypes.arrayOf(PropTypes.string).isRequired,
         block: PropTypes.bool,
         color: PropTypes.oneOf(['green', 'blue', 'red', 'lightViolet', 'darkBlue', 'violet'])
     };
 
+    state = {
+        isActive: false,
+        activeItem: this.props.label
+    };
+
+    componentDidMount() {
+        document.addEventListener('click', this.onBodyClick);
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('click', this.onBodyClick);
+    }
+
     render() {
-        const { color = 'green', block } = this.props;
+        const { color = 'green', block, items } = this.props;
+        const {isActive, activeItem} = this.state;
 
-        const props = {
+        const label = this.formatMessage(activeItem);
-            ...this.props
-        };
-
-        props.label = this.formatMessage(props.label);
 
         return (
             <div className={classNames(styles[color], {
                 [styles.block]: block
-            })} {...props}>
+            })} {...this.props} onClick={this.onToggle}>
-                {props.label}
+                {label}
                 <span className={styles.toggleIcon} />
+
+                <div className={classNames(styles.menu, {
+                    [styles.menuActive]: isActive
+                })}>
+                    {items.map((item, key) => (
+                        <div className={styles.menuItem} key={key} onClick={this.onSelectItem(item)}>
+                            {item}
+                        </div>
+                    ))}
+                </div>
             </div>
         );
     }
+
+    toggle() {
+        this.setState({
+            isActive: !this.state.isActive
+        });
+    }
+
+    onSelectItem(item) {
+        return (event) => {
+            event.preventDefault();
+
+            this.setState({
+                activeItem: item
+            });
+        };
+    }
+
+    onToggle = (event) => {
+        event.preventDefault();
+
+        this.toggle();
+    };
+
+    onBodyClick = (event) => {
+        if (this.state.isActive) {
+            const el = ReactDOM.findDOMNode(this);
+
+            if (!el.contains(event.target) && el !== event.taget) {
+                event.preventDefault();
+
+                this.toggle();
+            }
+        }
+    };
 }

src/components/ui/form/dropdown.scss

@@ -9,6 +9,7 @@ $dropdownPadding: 15px;
 
         background-color: $backgroundColor;
 
+        .menuItem:hover,
         &:hover {
             background-color: lighter($backgroundColor);
         }
@@ -42,7 +43,7 @@ $dropdownPadding: 15px;
 }
 
 .toggleIcon {
-    composes: selecter from './icons.scss';
+    composes: selecter from 'components/ui/icons.scss';
 
     position: absolute;
     right: $dropdownPadding;
@@ -62,6 +63,53 @@ $dropdownPadding: 15px;
 .block {
     display: block;
     width: 100%;
+
+    .menu {
+        width: 100%;
+    }
+}
+
+.menu {
+    position: absolute;
+    top: 60px;
+    left: 0;
+    z-index: 10;
+
+    width: 120%;
+
+    background: #fff;
+    border: 1px solid #ddd;
+
+    transition: 0.5s ease;
+    transition-property: opacity, visibility;
+    opacity: 0;
+    visibility: hidden;
+}
+
+.menuActive {
+    opacity: 1;
+    visibility: visible;
+}
+
+.menuItem {
+    height: 50px;
+    padding: 0 13px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    color: #444;
+    line-height: 50px;
+    font-size: 18px;
+    font-family: $font-family-title;
+
+    border-bottom: 1px solid #ebe8df;
+    cursor: pointer;
+
+    transition: .25s;
+
+    &:hover {
+        color: #fff;
+    }
 }
 
 @include dropdown-theme('green', $green);