else
-
+
}
{ @props.children }
diff --git a/components/input/index.cjsx b/components/input/index.cjsx
index 5267fca8..cf7bc5e1 100644
--- a/components/input/index.cjsx
+++ b/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
{
if @props.multiline
+ onFocus={@onFocus}
+ onKeyPress={@onKeyPress} />
else
-
+ onFocus={@onFocus}
+ onKeyPress={@onKeyPress} />
}
{ {@props.label} if @props.label }
diff --git a/components/input/style.styl b/components/input/style.styl
index ff69bf97..9549fb6f 100644
--- 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
diff --git a/components/list/index.cjsx b/components/list/index.cjsx
index 4e9f15ae..70badf9b 100644
--- a/components/list/index.cjsx
+++ b/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
diff --git a/components/navigation/index.cjsx b/components/navigation/index.cjsx
index eaf348e7..ef610af0 100644
--- a/components/navigation/index.cjsx
+++ b/components/navigation/index.cjsx
@@ -20,7 +20,7 @@ module.exports = React.createClass
# -- Render
render: ->
- { for route in @props.routes }
- { for action in @props.actions }
+ { for route, index in @props.routes }
+ { for action, index in @props.actions }
{ @props.children }