Classes for different states

react-toolbox · Jul 15, 2015 · d99c275 · d99c275
1 parent d227181
commit d99c275
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 28 deletions.
diff --git a/components/input/index.cjsx b/components/input/index.cjsx
@@ -30,39 +30,55 @@ module.exports = React.createClass
     error       : @props.error
     touch       : @props.type in ['checkbox', 'radio']
     value       : @props.value
+    focus       : false
+    valid       : false
 
   # -- Events
+  onBlur: (event) ->
+    @setState focus: false
+    @props.onBlur? event, @
+
   onChange: (event) ->
     if @state.touch
       @setState checked: event.target.checked, error: undefined
     else
       @setState value: event.target.value, error: undefined
     @props.onChange? event, @
 
+  onFocus: (event) ->
+    @setState focus: true
+    @props.onFocus? event, @
+
+  onKeyPress: (event) ->
+    @setState focus: true
+    @props.onKeyPress? event, @
+
   # -- Render
   render: ->
     className = @props.className
+    className += ' checked' if @state.checked
     className += ' disabled' if @props.disabled
     className += ' error' if @state.error
+    className += ' focus' if @state.focus
     className += ' touch' if @state.touch
     className += ' radio' if @props.type is 'radio'
-    className += ' checked' if @state.checked
+    className += ' valid' if @state.value? and @state.value.length > 0
 
     <div data-component-input={@props.type} className={className}>
       {
         if @props.multiline
           <textarea ref='input' {...@props} value={@state.value}
+                    onBlur={@onBlur}
                     onChange={@onChange}
-                    onKeyPress={@props.onKeyPress}
-                    onFocus={@props.onFocus}
-                    onBlur={@props.onBlur} />
+                    onFocus={@onFocus}
+                    onKeyPress={@onKeyPress} />
         else
           <input ref='input' {...@props} value={@state.value}
                  checked={@state.checked} 
+                 onBlur={@onBlur}
                  onChange={@onChange}
-                 onKeyPress={@props.onKeyPress}
-                 onFocus={@props.onFocus}
-                 onBlur={@props.onBlur}/>
+                 onFocus={@onFocus}
+                 onKeyPress={@onKeyPress} />
       }
       <span className='bar'></span>
       { <label>{@props.label}</label> if @props.label }

diff --git a/components/input/style.styl b/components/input/style.styl
@@ -77,6 +77,38 @@
           transform                       scale(1)
 
   &:not(.touch)
+
+    // -- Stylesheets
+    &.focus
+      input, textarea
+        outline                       : none
+        ~ .bar:before, ~ .bar:after
+          width                       : 50%
+        &:invalid
+          &  ~ label
+            color                     : CANCEL
+          & ~ .bar:before, & ~ .bar:after
+            background-color          : CANCEL
+    &.focus , &.valid
+      input, textarea
+        & ~ label
+          top                         : -(SPACE / 2)
+          font-size                   : FONT_SIZE_TINY
+          color                       : THEME
+    input[type="date"]
+      & ~ label
+          top                         : -(SPACE / 2)
+          font-size                   : FONT_SIZE_TINY
+          color                       : THEME
+    &:not(.focus)
+      input, textarea
+          &:invalid:not(:required)
+            border-bottom-color       : CANCEL
+    &.error
+      input, textarea
+        border-bottom-color           : CANCEL
+
+    // -- Children
     input, textarea
       display                         : block
       padding                         : (SPACE / 2) 0
@@ -86,24 +118,9 @@
       border                          : none
       border-bottom                   : 1px solid FORM_BORDER_COLOR
       // -- Attributes
-      &:focus
-        outline                       : none
-        ~ .bar:before, ~ .bar:after
-          width                       : 50%
-      &:focus ~ label, &:valid ~ label
-        top                           : -(SPACE / 2)
-        font-size                     : FONT_SIZE_TINY
-        // color                         : THEME
       &:disabled
         color                         : FORM_BORDER_COLOR
         border-bottom-style           : dotted
-      &:invalid
-        &:not(:required):not(:focus)
-          border-bottom-color         : CANCEL
-        &:focus  ~ label
-          color                       : CANCEL
-        ~ .bar:before, ~ .bar:after
-          background-color            : CANCEL
 
     label
       position                        : absolute
@@ -113,6 +130,7 @@
       transition-property               top, font-size, color
       transition-duration               ANIMATION_DURATION
       transition-timing-function        ANIMATION_EASE
+
     .bar
       position                        : relative
       display                         : block
@@ -132,12 +150,6 @@
       &:after
         right                         : 50%
 
-  &.error
-    input, textarea
-      border-bottom-color             : CANCEL
-
-
-
   // -- Children
   label
     pointer-events                    : none