vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Merge pull request #7 from soyjavi/font-icon 

Font icon
old
Javi Jiménez 2015-07-15 21:20:39 +07:00
parent f99996182d d99c275300
commit 21a95bd999
8 changed files with 76 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/aside/index.cjsx
View File

@ -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 : ""

8
components/autocomplete/index.cjsx
View File

@ -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>

7
components/dropdown/index.cjsx
View File

@ -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
<li id={item.value} className={"selected" if item.value is @state.selected.value}>
for item, index in @props.dataSource
<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>

10
components/form/index.cjsx
View File

@ -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>

35
components/input/index.cjsx
View File

@ -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={@props.onFocus}
onBlur={@props.onBlur}>{@state.value}</textarea>
onFocus={@onFocus}
onKeyPress={@onKeyPress} />
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={@props.onFocus}
onBlur={@props.onBlur}/>
onFocus={@onFocus}
onKeyPress={@onKeyPress} />
}
<span className='bar'></span>
{ <label>{@props.label}</label> if @props.label }

54
components/input/style.styl
View File

@ -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

2
components/list/index.cjsx
View File

@ -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

4
components/navigation/index.cjsx
View File

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