Improved height for dataSource container & fixed typos.

components/dropdown/index.cjsx

@@ -24,7 +24,6 @@ module.exports = React.createClass
 
   # -- Events
   onSelect: (event) ->
-    console.log "onSelect", event.target
     @setState active: true
 
   onItem: (event) ->
@@ -33,17 +32,17 @@ module.exports = React.createClass
   # -- Render
   render: ->
     className = @props.className
-    className += " active" if @state.active is true
+    if @state.active is true
-
+      className += " active"
-    console.log "render.className", className
+      stylesheet = height: @getDOMNode().offsetHeight * Object.keys(@props.dataSource).length
-
+    <div data-component-dropdown={@props.type}
-    <div data-component-dropdown={@props.type} className={className}>
+         className={className}>
       <span onClick={@onSelect}>{@props.dataSource[@state.value]}</span>
-      <ul onClick={@onItem}>
+      <ul onClick={@onItem} style={stylesheet}>
-        {
+      {
-          for key, label of @props.dataSource
+        for key, label of @props.dataSource
-            <li id={key} className={"selected" if key is @state.value}>{label}</li>
+          <li id={key} className={"selected" if key is @state.value}>{label}</li>
-        }
+      }
       </ul>
     </div>
 

components/dropdown/style.styl

@@ -3,36 +3,38 @@
 [data-component-dropdown]
   position                        : relative
   margin-bottom                   : SPACE
-  width                           : (4 * UNIT)
   height                          : INPUT_HEIGHT
+  width                           : inherit
   color                           : COLOR
   border-bottom                   : 1px solid lighten(COLOR, 75%)
+
   // -- Class
   &.active
     > span
       opacity                     : 0
-      transform                     translateY(25%)
+      transform                     translateY((INPUT_HEIGHT / 4))
       &:after
         transform                   scale(0)
     > ul
-      z-index                     : 2
-      visibility                  : visible
-      height                      : auto
       opacity                     : 1
       transform                     translateY(0%)
       box-shadow                    ZDEPTH_SHADOW_1
+      > li
+        opacity                   : 1
+        transition                  opacity ANIMATION_DURATION ANIMATION_EASE
+  &:not(.active) > ul
+    pointer-events                :none
 
   // -- Children
   > *
     width                         : 100%
-    transition-property             opacity, transform, box-shadow, height
-    transition-duration             ANIMATION_DURATION
-    transition-timing-function      ANIMATION_EASE
   > span
     display                       : block
-    // padding                       : (SPACE / 2) 0
     line-height                   : INPUT_HEIGHT
     font-size                     : FONT_SIZE_NORMAL
+    transition-property             opacity, transform
+    transition-duration             ANIMATION_DURATION
+    transition-timing-function      ANIMATION_EASE
     &:after
       SIZE = (INPUT_HEIGHT / 7)
       position                    : absolute
@@ -41,30 +43,33 @@
       top                         : SPACE
       width                       : 0
       height                      : 0
-      border-left                 : SIZE solid transparent
+      border-left                 : BORDER = SIZE solid transparent
-      border-right                : SIZE solid transparent
+      border-right                : BORDER
       border-top                  : SIZE solid lighten(COLOR, 75%)
       transition                    transform ANIMATION_DURATION ANIMATION_EASE
 
   > ul
-    z-index                       : -1
+    z-index                       : 2
     position                      : absolute
-    overflow                      : hidden
     top                           : 0
     left                          : -(OFFSET = (SPACE / 1.25))
     right                         : -(OFFSET)
     width                         : auto
     height                        : 0
+    max-height                    : 50vh
     list-style                    : none
     opacity                       : 0
     background-color              : WHITE
     border-radius                 : BORDER_RADIUS
-    transform                       translateY(-(INPUT_HEIGHT))
+    transform                       translateY(-(INPUT_HEIGHT / 2))
+    transition-property             height, box-shadow, opacity, transform
+    transition-duration             ANIMATION_DURATION
+    transition-timing-function      ANIMATION_EASE
     > li
       padding                     : (SPACE / 2) OFFSET
-      font-size                   : FONT_SIZE_SMALL
+      opacity                     : 0
       &:hover
         background-color          : BACKGROUND
         cursor                    : pointer
       &.selected
-        color                     : THEME
+        color                     : PRIMARY

spec/components/dropdown.cjsx

@@ -14,6 +14,7 @@ module.exports = React.createClass
       "TH-th"   : "Thailand"
       "EN-gb"   : "England"
       "EN-en"   : "USA"
+      "FR-fr"   : "France"
 
   # -- Events
   onAutocompleteValues: (ref, method) ->
@@ -28,10 +29,7 @@ module.exports = React.createClass
     <section>
       <h2>Dropdown</h2>
       <p>lorem ipsum...</p>
-
       <Dropdown ref="dropdown" dataSource={@state.countries_obj} />
-
       <Dropdown ref="dropdown" dataSource={@state.countries_obj}
                 value={countries_obj_selected} />
-
     </section>