Autocomplete

react-toolbox · Jul 28, 2015 · d9774f5 · d9774f5
1 parent b35e34e
commit d9774f5
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 48 deletions.
diff --git a/components/autocomplete/index.cjsx b/components/autocomplete/index.cjsx
@@ -1,5 +1,5 @@
-require './style'
-Input = require '../input'
+localCSS  = require './style'
+Input     = require '../input'
 
 module.exports = React.createClass
 
@@ -98,12 +98,15 @@ module.exports = React.createClass
 
   # -- Render
   render: ->
-    className = "focus" if @state.focus
-    <div data-component-autocomplete={@props.type} className={className}>
+    className  = "#{localCSS.root} #{@props.className}"
+    className += " #{@props.type}"  if @props.type
+    className += " focus"           if @state.focus
+    <div data-react-toolbox='autocomplete' className={className}>
       { <label>{@props.label}</label> if @props.label }
       {
         if @props.multiple
-          <ul data-role="values" data-flex="horizontal wrap" onClick={@onDelete}>
+          <ul className={localCSS.values} data-flex="horizontal wrap"
+              onClick={@onDelete}>
             {
               for key, label of @state.values
                 <li key={key} id={key} style={backgroundColor: @props.colors[key]}>{label}</li>
@@ -116,7 +119,7 @@ module.exports = React.createClass
              onFocus={@onFocus}
              onKeyDown={@onKeyPress}
              />
-      <ul ref="suggestions" data-role="suggestions"
+      <ul ref="suggestions" className={localCSS.suggestions}
         onClick={@onSelect} onMouseEnter={@onRefreshSelection}>
         {<li key={key} id={key}>{label}</li> for key, label of @state.suggestions}
       </ul>

diff --git a/components/autocomplete/style.styl b/components/autocomplete/style.styl
@@ -1,46 +1,47 @@
 @import "../constants.styl"
 
-[data-component-autocomplete]
-  position                                      : relative
-  > label
-    font-size                                   : FONT_SIZE_TINY
-    color                                       : PRIMARY
-  > [data-role] > *
-    cursor                                      : pointer
-  > [data-role="values"]
-    > *
-      display                                   : inline-block
-      margin                                    : 0 (SPACE / 2) (SPACE / 2) 0
-      padding                                   : (SPACE / 4) (SPACE / 2)
-      font-size                                 : FONT_SIZE_SMALL
-      color                                     : WHITE
-      background-color                          : PRIMARY
-      border-radius                             : (SPACE / 8)
-  > [data-role="suggestions"]
-    z-index                                     : 2
-    position                                    : absolute
-    width                                       : 100%
-    height                                      : 0
-    max-height                                  : 50vh
-    overflow-x                                  : hidden
-    overflow-y                                  : scroll
-    margin-top                                  : -(SPACE)
-    background-color                            : WHITE
-    opacity                                     : 0
-    transform                                     translateY(-(INPUT_HEIGHT / 2))
-    transition-property                           height, box-shadow, opacity, transform
-    transition-duration                           ANIMATION_DURATION
-    transition-timing-function                    ANIMATION_EASE
-    > *
-      padding                                   : (SPACE / 2)
-      &:hover, &.active
-        color                                   : WHITE
-        background-color                        : PRIMARY_LIGHT
+:local(.values)
+  > *
+    display                                   : inline-block
+    margin                                    : 0 (SPACE / 2) (SPACE / 2) 0
+    padding                                   : (SPACE / 4) (SPACE / 2)
+    font-size                                 : FONT_SIZE_SMALL
+    color                                     : WHITE
+    background-color                          : PRIMARY
+    border-radius                             : (SPACE / 8)
+    cursor                                    : pointer
+
+:local(.suggestions)
+  z-index                                     : 2
+  position                                    : absolute
+  width                                       : 100%
+  height                                      : 0
+  max-height                                  : 50vh
+  overflow-x                                  : hidden
+  overflow-y                                  : scroll
+  margin-top                                  : -(SPACE)
+  background-color                            : WHITE
+  opacity                                     : 0
+  transform                                   : translateY(-(INPUT_HEIGHT / 2))
+  transition-property                         : height, box-shadow, opacity, transform
+  transition-duration                         : ANIMATION_DURATION
+  transition-timing-function                  : ANIMATION_EASE
+  > *
+    cursor                                    : pointer
+    padding                                   : (SPACE / 2)
+    &:hover, &.active
+      color                                   : WHITE
+      background-color                        : PRIMARY_LIGHT
 
-  // -- Styles
+:local(.root)
+  position                                    : relative
+  > label
+    font-size                                 : FONT_SIZE_TINY
+    color                                     : PRIMARY
+  // -- Overrides
   &.focus
-    > [data-role="suggestions"]
-      height                      : auto
-      opacity                     : 1
-      transform                     translateY(0%)
-      box-shadow                    ZDEPTH_SHADOW_1
+    > :local(.suggestions)
+      height                                  : auto
+      opacity                                 : 1
+      transform                               : translateY(0%)
+      box-shadow                              : ZDEPTH_SHADOW_1