Merge pull request #7 from soyjavi/font-icon

Font icon

components/aside/index.cjsx

@@ -7,7 +7,7 @@ module.exports = React.createClass
     active      : React.PropTypes.bool
     className   : React.PropTypes.string
     hideable    : React.PropTypes.bool
-    type        : React.PropTypes.string.required
+    type        : React.PropTypes.string
 
   getDefaultProps: ->
     className   : ""

components/autocomplete/index.cjsx

@@ -7,7 +7,7 @@ module.exports = React.createClass
   propTypes:
     className   : React.PropTypes.string
     colors      : React.PropTypes.object
-    dataSource  : React.PropTypes.object
+    dataSource  : React.PropTypes.any
     disabled    : React.PropTypes.bool
     error       : React.PropTypes.string
     exact       : React.PropTypes.bool
@@ -16,7 +16,7 @@ module.exports = React.createClass
     onChange    : React.PropTypes.func
     required    : React.PropTypes.bool
     type        : React.PropTypes.string
-    value       : React.PropTypes.string
+    value       : React.PropTypes.any
 
   getDefaultProps: ->
     className   : ""
@@ -83,14 +83,14 @@ module.exports = React.createClass
           <ul data-role="values" data-flex="horizontal wrap" onClick={@onDelete}>
             {
               for key, label of @state.values
-                <li id={key} style={backgroundColor: @props.colors[key]}>{label}</li>
+                <li key={key} id={key} style={backgroundColor: @props.colors[key]}>{label}</li>
             }
           </ul>
       }
       <Input {...@props} value="" ref="input" onFocus={@onFocus}
              onChange={@onChange} onKeyPress={@onKeyPress} onBlur={@onBlur}/>
       <ul ref="suggestions" data-role="suggestions" onClick={@onSelect}>
-        {<li id={key}>{label}</li> for key, label of @state.suggestions}
+        {<li key={key} id={key}>{label}</li> for key, label of @state.suggestions}
       </ul>
     </div>
 

components/dropdown/index.cjsx

@@ -13,7 +13,7 @@ module.exports = React.createClass
   propTypes:
     className   : React.PropTypes.string
     dataSource  : React.PropTypes.array
-    disabled    : React.PropTypes.disabled
+    disabled    : React.PropTypes.bool
     label       : React.PropTypes.string
     onChange    : React.PropTypes.func
     template    : React.PropTypes.func
@@ -25,6 +25,7 @@ module.exports = React.createClass
     dataSource  : []
     disabled    : false
     type        : "normal"
+    value       : undefined
 
   getInitialState: ->
     active      : false
@@ -69,8 +70,8 @@ module.exports = React.createClass
       { <label>{@props.label}</label> if @props.label }
       <ul ref="values" style={stylesheet} onClick={@onItem}>
       {
-        for item in @props.dataSource
+        for item, index in @props.dataSource
-          <li id={item.value} className={"selected" if item.value is @state.selected.value}>
+          <li id={item.value} key={index} className={"selected" if item.value is @state.selected.value}>
             { if @props.template then @props.template item else item.label }
             { <Ripple origin={@state.ripple}/> if item.value is @state.selected.value }
           </li>

components/form/index.cjsx

@@ -59,15 +59,15 @@ module.exports = React.createClass
       {
         for attribute, index in @state.attributes
           if attribute.type is "submit"
-            <Button {...attribute} type="square" ref="submit" onClick={@onSubmit}/>
+            <Button key={index} {...attribute} type="square" ref="submit" onClick={@onSubmit}/>
           else if attribute.type is "autocomplete"
-            <Autocomplete {...attribute} onChange={@onChange}/>
+            <Autocomplete key={index} {...attribute} onChange={@onChange}/>
           else if attribute.type is "dropdown"
-            <Dropdown {...attribute} onChange={@onChange}/>
+            <Dropdown key={index} {...attribute} onChange={@onChange}/>
           else if attribute.type is "switch"
-            <Switch {...attribute} onChange={@onChange}/>
+            <Switch key={index} {...attribute} onChange={@onChange}/>
           else
-            <Input {...attribute} />
+            <Input key={index} {...attribute} />
       }
       { @props.children }
     </form>

components/input/index.cjsx

@@ -16,7 +16,7 @@ module.exports = React.createClass
     onBlur      : React.PropTypes.func
     required    : React.PropTypes.bool
     type        : React.PropTypes.string
-    value       : React.PropTypes.string
+    value       : React.PropTypes.any
 
   getDefaultProps: ->
     className   : ''
@@ -30,8 +30,14 @@ 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
@@ -39,29 +45,40 @@ module.exports = React.createClass
       @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={@onFocus}
-                    onFocus={@props.onFocus}
+                    onKeyPress={@onKeyPress} />
-                    onBlur={@props.onBlur}>{@state.value}</textarea>
         else
-          <input ref='input' {...@props} value={@state.value} checked={@state.checked} 
+          <input ref='input' {...@props} value={@state.value}
+                 checked={@state.checked} 
+                 onBlur={@onBlur}
                  onChange={@onChange}
-                 onKeyPress={@props.onKeyPress}
+                 onFocus={@onFocus}
-                 onFocus={@props.onFocus}
+                 onKeyPress={@onKeyPress} />
-                 onBlur={@props.onBlur}/>
       }
       <span className='bar'></span>
       { <label>{@props.label}</label> if @props.label }

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

components/list/index.cjsx

@@ -5,7 +5,7 @@ module.exports = React.createClass
   # -- States & Properties
   propTypes:
     className   : React.PropTypes.string
-    dataSource  : React.PropTypes.Array
+    dataSource  : React.PropTypes.array
     ItemFactory : React.PropTypes.func
     onClick     : React.PropTypes.func
     type        : React.PropTypes.string

components/navigation/index.cjsx

@@ -20,7 +20,7 @@ module.exports = React.createClass
   # -- Render
   render: ->
     <nav data-component-navigation={@props.type}>
-      { <Link {...route} /> for route in @props.routes }
+      { <Link key={index} {...route} /> for route, index in @props.routes }
-      { <Button {...action} /> for action in @props.actions }
+      { <Button key={index} {...action} /> for action, index in @props.actions }
       { @props.children }
     </nav>