From b054381bb1377b530267245d3beffb279ab17ce3 Mon Sep 17 00:00:00 2001
From: Ivan Diaz <ivan@opensupports.com>
Date: Sat, 17 Oct 2015 20:25:23 -0300
Subject: [PATCH] [Ivan Diaz] - Update dropdown component

---
 src/core-components/drop-down.js   | 38 ++++++++++++++----------------
 src/core-components/drop-down.scss |  7 ++++--
 2 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/src/core-components/drop-down.js b/src/core-components/drop-down.js
index 86247fa3..248fc775 100644
--- a/src/core-components/drop-down.js
+++ b/src/core-components/drop-down.js
@@ -48,7 +48,7 @@ var DropDown = React.createClass({
         var animation = this.getAnimationStyles();
 
         return (
-            <div className="drop-down">
+            <div className={this.getClass()}>
                 <div className="drop-down--current" onClick={this.getClickCallback(this.getSelectedIndex())}>
                     {this.props.items[this.getSelectedIndex()]}
                 </div>
@@ -72,17 +72,21 @@ var DropDown = React.createClass({
     },
 
     renderItem(item, index) {
-        var render = null;
+        return (
+            <li className="drop-down--list-item" onClick={this.getClickCallback(index)}>
+                {item}
+            </li>
+        );
+    },
 
-        if (index !== this.state.selectedIndex) {
-            render = (
-                <li className="drop-down--list-item" onClick={this.getClickCallback(index)}>
-                    {item}
-                </li>
-            );
-        }
+    getClass() {
+        var classes = {
+            'drop-down': true,
 
-        return render;
+            [this.props.className]: (this.props.className)
+        };
+
+        return classNames(classes);
     },
 
     getClickCallback(index) {
@@ -90,16 +94,10 @@ var DropDown = React.createClass({
     },
 
     handleClick(index) {
-        if (this.getSelectedIndex() === index) {
-            this.setState({
-                opened: !this.state.opened
-            });
-        }
-        else {
-            this.setState({
-                selectedIndex: index
-            });
-        }
+        this.setState({
+            opened: !this.state.opened,
+            selectedIndex: index
+        });
     },
 
     getSelectedIndex() {
diff --git a/src/core-components/drop-down.scss b/src/core-components/drop-down.scss
index 34862ddb..8b45ad67 100644
--- a/src/core-components/drop-down.scss
+++ b/src/core-components/drop-down.scss
@@ -8,13 +8,16 @@
     cursor: pointer;
 
     &--current {
-        color: $primary-black;
         background-color: $light-grey;
-        padding: 8px;
+        border-radius: 4px 4px 0 0;
+        color: $primary-black;
+        padding: 6px;
     }
 
     &--list-container {
         background-color: white;
+        position: absolute;
+        width: 150px;
     }
 
     &--list {