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

Merge and solve conflicts

old
Javi Velasco 2015-07-21 22:29:09 +02:00
parent 89fcc9afce 3912b92d5e
commit d008bf47f3
31 changed files with 439 additions and 146 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 : ""

48
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 : ""
@ -52,8 +52,17 @@ module.exports = React.createClass
@setState focus: false if Object.keys(suggestions).length is 0
onKeyPress: (event) ->
key_ascii = event.which
query = @refs.input.getValue().trim()
if event.which is 13 and query isnt ""
if @state.focus
children = @refs.suggestions.getDOMNode().children
for child, index in children when child.classList.contains "active"
child.classList.remove "active"
query = child.getAttribute "id"
break
if key_ascii is 13 and query isnt ""
for key, label of @state.suggestions when query.toLowerCase() is label.toLowerCase()
suggestion = {"#{key}": label}
break
@ -62,6 +71,13 @@ module.exports = React.createClass
else if suggestion
@_addValue suggestion
else if @state.focus and key_ascii in [40, 38]
if key_ascii is 40
index = if index >= children.length - 1 then 0 else index + 1
else
index = if index is 0 then children.length - 1 else index - 1
children[index].classList.add "active"
onBlur: (event) ->
setTimeout (=> @setState focus: false, suggestions: {}), 300
@ -69,6 +85,12 @@ module.exports = React.createClass
key = event.target.getAttribute "id"
@_addValue {"#{key}": @state.suggestions[key]}
onRefreshSelection: (event) ->
children = @refs.suggestions.getDOMNode().children
for child, index in children when child.classList.contains "active"
child.classList.remove "active"
break
onDelete: (event) ->
delete @state.values[event.target.getAttribute "id"]
@setState focus: false, values: @state.values
@ -76,21 +98,27 @@ module.exports = React.createClass
# -- Render
render: ->
<div data-component-autocomplete={@props.type}
className={"focus" if @state.focus}>
className = "focus" if @state.focus
<div data-component-autocomplete={@props.type} className={className}>
{ <label>{@props.label}</label> if @props.label }
{
if @props.multiple
<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}
<Input {...@props} ref="input" value="" label=""
onBlur={@onBlur}
onChange={@onChange}
onFocus={@onFocus}
onKeyDown={@onKeyPress}
/>
<ul ref="suggestions" data-role="suggestions"
onClick={@onSelect} onMouseEnter={@onRefreshSelection}>
{<li key={key} id={key}>{label}</li> for key, label of @state.suggestions}
</ul>
</div>

30
components/autocomplete/style.styl
View File

@ -2,9 +2,10 @@
[data-component-autocomplete]
position : relative
// -- Children
> label
font-size : FONT_SIZE_TINY
color : PRIMARY
> [data-role] > *
font-size : FONT_SIZE_SMALL
cursor : pointer
> [data-role="values"]
> *
@ -13,28 +14,33 @@
padding : (SPACE / 4) (SPACE / 2)
font-size : FONT_SIZE_SMALL
color : WHITE
background-color : THEME
background-color : PRIMARY
border-radius : (SPACE / 8)
> [data-role="suggestions"]
z-index : 10
z-index : 2
position : absolute
width : 100%
height : 0
max-height : 50vh
overflow-x : hidden
overflow-y : scroll
max-height : 0
margin-top : -(SPACE)
background-color : WHITE
visibility : hidden
box-shadow : ZDEPTH_SHADOW_1
transition max-height ANIMATION_DURATION ANIMATION_EASE
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
&:hover, &.active
color : WHITE
background-color : THEME
background-color : PRIMARY_LIGHT
// -- Styles
&.focus
> [data-role="suggestions"]
max-height : 25vh
visibility : visible
height : auto
opacity : 1
transform translateY(0%)
box-shadow ZDEPTH_SHADOW_1

4
components/button/button.md
View File

@ -5,12 +5,12 @@ var Button = require('react-toolbox/components/button');
<Button caption="Login" />
<Button caption="Primary" className="primary" icon="access_alarm" />
<Button caption="Secondary" className="secondary" />
<Button caption="Secondary" className="accent" />
<Button caption="Disabled" disabled />
<Button type="circle" icon="access_alarm" />
<Button type="circle" icon="explore" className="primary" />
<Button type="circle" icon="zoom_in" className="secondary" />
<Button type="circle" icon="zoom_in" className="accent" />
<Button type="circle" icon="input" disabled={true} />
```

32
components/button/style.styl
View File

@ -21,41 +21,40 @@
outline : 0
&:not(.transparent)
box-shadow ZDEPTH_SHADOW_1
&:not(.primary):not(.secondary)
color : COLOR
&:not(.primary):not(.accent)
color : TEXT
background-color : WHITE
&:hover
box-shadow ZDEPTH_SHADOW_2, inset 0 0 0 UNIT alpha(WHITE, 10%)
&.primary, &.secondary
&.primary, &.accent
color : WHITE
&.primary
background-color : PRIMARY
&.secondary
background-color : SECONDARY
&.accent
background-color : ACCENT
&.transparent
background-color : transparent
&:not(.primary):not(.secondary)
&:not(.primary):not(.accent)
&:hover
background-color : alpha(COLOR, 12.5%)
background-color : alpha(TEXT, 12.5%)
&.primary
color : PRIMARY
&:hover
background-color : alpha(PRIMARY, 12.5%)
&.secondary
color : SECONDARY
&.accent
color : ACCENT
&:hover
background-color : alpha(SECONDARY, 12.5%)
background-color : alpha(ACCENT, 12.5%)
&:not(.primary):not(.accent) > [data-component-ripple]
background-color : DIVIDER
&[disabled]
color : darken(DIVIDER, 25%)
&:not(.transparent)
color : darken(BACKGROUND, 35%)
background-color : darken(BACKGROUND, 7.5%)
background-color : DIVIDER
&.transparent
color : darken(BACKGROUND, 25%)
background-color : transparent
// -- Layout
&:not(.transparent) ~ &:not(:last-child)
margin-left : SPACE
@ -72,6 +71,9 @@
> .icon
font-size : FONT_SIZE_BIG
margin-right : (SPACE / 2)
> abbr
font-weight : FONT_WEIGHT_BOLD
&.anchor
width : 100%

28
components/card/card.md Normal file
View File

@ -0,0 +1,28 @@
# Card
```
var Card = require('react-toolbox/components/card');
<Card title="Default Card" />
<Card title="Default Card with text" text={text} />
<Card title="Default Card with legend" legend={legend} />
<Card title="Default Card with actions" actions={actions} />
<Card title="Defaulr Card with text & image" text={text} image="http://" />
<Card title="Default Card with text, color & onClick event" text={text}
color="#e91e63" onClick={@onClick} />
<Card type="small" title="Small Card with text & onClick event"
text={text} color="#00bcd4" onClick={@onClick} />
```
## Properties
| Name | Type | Default | Description|
|:- |:-: | :- |:-|
| **className** | String | | Sets the class-styles of the Component.|
| **color** | String | | Sets HEX of the Component.|
| **image** | String | | Sets a background image url.|
| **text** | String | | Sets a complementary text.|
| **legend** | String | | Sets a legend text.|
| **onClick** | Function | | Callback function that is fired when the components's is clicked.|
| **title** | String | "text" | Sets the title of the component.|
| **type** | String | "text" | Type of the component, overwrite this property if you need set a different stylesheet.|

62
components/card/index.cjsx Normal file
View File

@ -0,0 +1,62 @@
require './style'
Navigation = require "../navigation"
Ripple = require "../ripple"
module.exports = React.createClass
# -- States & Properties
propTypes:
className : React.PropTypes.string
color : React.PropTypes.string
image : React.PropTypes.string
text : React.PropTypes.string
legend : React.PropTypes.string
onClick : React.PropTypes.func
title : React.PropTypes.string
type : React.PropTypes.string
getDefaultProps: ->
className : ""
type : "default"
getInitialState: ->
loading : @props.loading
ripple : undefined
# -- Lifecycle
componentWillReceiveProps: ->
@setState ripple: undefined
# -- Events
onClick: (event) ->
event.preventDefault() if @props.onClick?
client = event.target.getBoundingClientRect?()
@setState ripple:
left : event.pageX - client?.left
top : event.pageY - client?.top
width : (client?.width * 2.5)
@props.onClick? event, @
# -- Render
render: ->
className = @props.className
className += " touch" if @props.onClick?
className += " image" if @props.image?
className += " color" if @props.color?
style = {}
style.backgroundImage = "url(#{@props.image})" if @props.image?
style.backgroundColor = @props.color if @props.color
<div data-component-card={@props.type} className={className} onClick={@onClick}>
{
if @props.title or @props.image
<figure style={style}>
{ <small>{@props.subtitle}</small> if @props.subtitle }
{ <h2>{@props.title}</h2> if @props.title }
</figure>
}
{ <p>{@props.text}</p> if @props.text }
{ <small>{@props.legend}</small> if @props.legend }
{ <Navigation actions={@props.actions} /> if @props.actions }
{ <Ripple origin={@state.ripple} loading={@state.loading} /> }
</div>

62
components/card/style.styl Normal file
View File

@ -0,0 +1,62 @@
@import "../constants.styl"
SIZE = (5 * UNIT)
OFFSET = (SPACE / 1.25)
[data-component-card]
display-flex()
flex-direction column
position : relative
overflow : hidden
width : SIZE
box-shadow : ZDEPTH_SHADOW_1
background : WHITE
// -- Children
*:not([data-component-button])
pointer-events : none
> *:not([data-component-ripple]):not([data-component-navigation])
padding : OFFSET
&:not(.color):not(.image) > [data-component-ripple]
background-color : DIVIDER
&:not(.color) > *:not(figure), > *:not(:last-child)
box-shadow : 0 1px darken(BACKGROUND, 5%)
> figure
display-flex()
flex-direction column
justify-content flex-end
flex-grow 2
min-height : (SIZE / 2)
background-size : cover
> *
font-weight : FONT_WEIGHT_NORMAL
> [data-component-navigation]
padding : OFFSET = (OFFSET / 2)
> *
pointer-events : all
padding-left : OFFSET
padding-right : OFFSET
box-shadow : none !important
&:hover
background-color : rgba(0,0,0,0.1) !important
// -- ClassNames
&.touch
cursor : pointer
&:hover, &:active
box-shadow : ZDEPTH_SHADOW_2
&.image
> figure
text-shadow : ZDEPTH_SHADOW_1
&.image, &.color
> figure
color : WHITE
// -- Extends
[data-component-card="small"]
> figure
min-height : 0px
[data-component-card="square"]
height : SIZE
[data-component-card="wide"]
width : (SIZE * 2)

23
components/constants.styl
View File

@ -1,17 +1,20 @@
@import './vendor.styl'
// -- Colors
COLOR = #222222
BACKGROUND = #f5f5f5
THEME = #cccccc
PRIMARY = #E91E63
PRIMARY_DARK = darken(PRIMARY, 25%)
PRIMARY_LIGHT = lighten(PRIMARY, 25%)
ACCENT = #03A9F4
TEXT = #212121
TEXT_ACCENT = #727272
DIVIDER = lighten(#B6B6B6, 75%)
BACKGROUND = #ffffff
WHITE = #ffffff
PRIMARY = #e91e63
SECONDARY = #00bcd4
SUCCESS = #259b24
CANCEL = #e51c23
WARNING = #ff9800
FORM_COLOR = COLOR
FORM_BORDER_COLOR = lighten(FORM_COLOR, 75%)
SUCCESS = #4CAF50
CANCEL = #F44336
WARNING = #FFC107
// -- Fonts
FONT_FAMILY = "Roboto", "Helvetica Neue", "Helvetica", "sans-serif"

9
components/dropdown/index.cjsx
View File

@ -13,9 +13,9 @@ 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
onChange : React.PropTypes.funca
template : React.PropTypes.func
type : React.PropTypes.string
value : React.PropTypes.string
@ -23,7 +23,6 @@ module.exports = React.createClass
getDefaultProps: ->
className : ""
dataSource : []
disabled : false
type : "normal"
getInitialState: ->
@ -69,8 +68,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>

13
components/dropdown/style.styl
View File

@ -4,8 +4,8 @@
position : relative
margin-bottom : SPACE
width : inherit
color : FORM_COLOR
border-bottom : 1px solid FORM_BORDER_COLOR
color : TEXT
border-bottom : 1px solid DIVIDER
// -- Class
&.active
@ -28,7 +28,7 @@
transition-delay ANIMATION_DURATION
&.disabled
color : FORM_BORDER_COLOR
color : TEXT_SECONDARY
border-bottom-style : dotted
> div:after
transform scale(0)
@ -46,7 +46,7 @@
position : relative
bottom : -(SPACE / 4)
font-size : FONT_SIZE_TINY
color : FORM_BORDER_COLOR
color : TEXT_SECONDARY
> ul
z-index : 2
position : absolute
@ -76,7 +76,7 @@
> *
pointer-events : none
> [data-component-ripple]
background-color : lighten(FORM_BORDER_COLOR, 50%)
background-color : DIVIDER
> div
display : block
> span
@ -95,6 +95,5 @@
height : 0
border-left : BORDER = SIZE solid transparent
border-right : BORDER
border-top : SIZE solid FORM_BORDER_COLOR
border-top : SIZE solid DIVIDER
transition transform ANIMATION_DURATION ANIMATION_EASE

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>

44
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,41 @@ 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 += ' disabled' if @props.disabled
className += ' error' if @state.error
className += ' touch' if @state.touch
className += ' radio' if @props.type is 'radio'
className += ' checked' if @state.checked
className += ' checked' if @state.checked
className += ' disabled' if @props.disabled
className += ' error' if @state.error
className += ' focus' if @state.focus
className += ' hidden' if @props.type is 'hidden'
className += ' touch' if @state.touch
className += ' radio' if @props.type is 'radio'
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 }

76
components/input/style.styl
View File

@ -28,7 +28,7 @@
height : SPACE
margin-right : (SPACE / 1.32)
border-radius : RADIUS
box-shadow : inset 0 0 0 RADIUS FORM_COLOR
box-shadow : inset 0 0 0 RADIUS TEXT
transition-property background-color, box-shadow
transition-duration ANIMATION_DURATION
transition-timing-function ANIMATION_EASE
@ -52,23 +52,23 @@
transition transform ANIMATION_DURATION ANIMATION_DELAY ANIMATION_EASE
label
font-size : FONT_SIZE_SMALL
color : FORM_COLOR
color : TEXT
// -- Style
&:not(.radio) .bar:after
content : "✓"
&.radio .bar
border-radius : 50%
&.disabled .bar
box-shadow inset 0 0 0 RADIUS FORM_BORDER_COLOR
box-shadow inset 0 0 0 RADIUS DIVIDER
&.checked
&.radio .bar
box-shadow : inset 0 0 0 RADIUS SECONDARY, inset 0 0 0 (RADIUS * 2.5) WHITE
box-shadow : inset 0 0 0 RADIUS ACCENT, inset 0 0 0 (RADIUS * 2.5) WHITE
&:not(.radio) .bar
box-shadow : none
.bar
background-color : SECONDARY
background-color : ACCENT
&:before
background-color : alpha(SECONDARY, .5)
background-color : alpha(ACCENT, .5)
animation-name ripple-touch
animation-iteration-count 1
animation-timing-function ANIMATION_EASE
@ -77,42 +77,59 @@
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 : PRIMARY
input[type="date"]
& ~ label
top : -(SPACE / 2)
font-size : FONT_SIZE_TINY
color : PRIMARY
&: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
width : 100%
color : FORM_COLOR
color : TEXT
background-color : transparent
border : none
border-bottom : 1px solid FORM_BORDER_COLOR
border-bottom : 1px solid DIVIDER
// -- 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
color : TEXT_SECONDARY
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
left : 0
top : (SPACE / 2)
color : FORM_BORDER_COLOR
color : TEXT_SECONDARY
transition-property top, font-size, color
transition-duration ANIMATION_DURATION
transition-timing-function ANIMATION_EASE
.bar
position : relative
display : block
@ -123,7 +140,7 @@
height : 2px
width : 0
bottom : 0
background-color : THEME
background-color : PRIMARY
transition-property width, background-color
transition-duration ANIMATION_DURATION
transition-timing-function ANIMATION_EASE
@ -132,11 +149,8 @@
&:after
right : 50%
&.error
input, textarea
border-bottom-color : CANCEL
&.hidden
display : none
// -- Children
label

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

2
components/list/style.styl
View File

@ -3,7 +3,7 @@
[data-component-list]
list-style : none
&, a
color : COLOR
color : TEXT
> li
overflow : hidden
background-color : WHITE

2
components/loading/style.styl
View File

@ -28,7 +28,7 @@
position : absolute
width : SIZE
height : SIZE
background-color : THEME
background-color : PRIMARY
transform scale(0.0)
&:nth-child(n+1)
margin-top : -(SIZE)

0
components/modules/mixins/touch.coffee Normal file
View File

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>

2
components/navigation/navigation.md
View File

@ -7,7 +7,7 @@ var routes = [
{route:'http://google.com', caption='Go to Google.com'},
];
var actions = [
{caption:"Primary", style:"primary", icon="access_alarm"}
{caption: "Primary", style: "primary", icon: "access_alarm"}
];
<Navigation routes={routes} actions={actions} />

6
components/progress_bar/style.styl
View File

@ -25,10 +25,10 @@ SCALE_RATIO = CIRCLE_RADIUS/20
transition-timing-function : ANIMATION_EASE
:local(.valueBar)
background-color : SECONDARY
background-color : ACCENT
:local(.bufferBar)
background-color : alpha(SECONDARY, 15%)
background-color : alpha(ACCENT, 15%)
:local(.linearBar).indeterminate :local(.valueBar)
transform-origin : center center
@ -52,7 +52,7 @@ SCALE_RATIO = CIRCLE_RADIUS/20
stroke-linecap : round
stroke-miterlimit : 20
stroke-width : 4
stroke : SECONDARY
stroke : ACCENT
fill : none
transition : stroke-dasharray ANIMATION_DURATION ANIMATION_EASE

6
components/slider/style.styl
View File

@ -27,7 +27,7 @@ RANGE_SIDE_SEPARATION = 20px
z-index : 5
:local(.knobInner)
background-color : SECONDARY
background-color : ACCENT
border-radius : 50%
height : 12px
transition-duration : 0.1s
@ -84,7 +84,7 @@ RANGE_SIDE_SEPARATION = 20px
// When its focused
:local(.root):focus :local(.knob):before
background-color : SECONDARY
background-color : ACCENT
border-radius : 50%
bottom : 0
content : ""
@ -106,7 +106,7 @@ RANGE_SIDE_SEPARATION = 20px
content : ""
position : absolute
top : 0
background-color : SECONDARY
background-color : ACCENT
left : 0
width : 26px
height : 26px

16
components/switch/style.styl
View File

@ -5,7 +5,7 @@
margin-bottom : SPACE
height : SIZE = (SPACE / 1.25)
width : WIDTH = (2.5 * SIZE)
background-color : FORM_BORDER_COLOR
background-color : DIVIDER
border-radius : SPACE
transition background-color ANIMATION_DURATION ANIMATION_EASE
@ -27,7 +27,7 @@
display : block
margin-left : WIDTH + (SPACE / 2)
font-size : FONT_SIZE_SMALL
color : FORM_COLOR
color : FORM_TEXT
> [data-component-ripple]
z-index : -1
overflow : hidden
@ -35,7 +35,7 @@
max-height : (SIZE * 2.7)
top : (SIZE / 2)
left : (SIZE * 2)
background-color : alpha(COLOR, 10%)
background-color : alpha(TEXT, 10%)
opacity : 0
animation-duration (1.0 * ANIMATION_DURATION)
@ -45,16 +45,16 @@
> span
box-shadow : ZDEPTH_SHADOW_1
&.disabled
background-color : lighten(FORM_BORDER_COLOR, 50%)
background-color : lighten(DIVIDER, 50%)
> span
background-color : FORM_BORDER_COLOR
background-color : DIVIDER
&.checked
background-color : alpha(THEME, 25%)
background-color : alpha(PRIMARY, 25%)
> span
background-color : THEME
background-color : PRIMARY
right : 0
box-shadow : ZDEPTH_SHADOW_2
> [data-component-ripple]
left : 0
background-color : alpha(THEME, 15%)
background-color : alpha(PRIMARY, 15%)

2
example/src/app.cjsx
View File

@ -26,7 +26,7 @@ App = React.createClass
<h1>Hello React-Toolbox</h1>
<Form attributes={@state.fields} />
<Button caption="Hello world!" type="square" style="primary"/>
<Button icon="adb" type="circle" style="secondary" />
<Button icon="adb" type="circle" style="accent" />
</app>
React.render <App/>, document.body

3
package.json
View File

@ -34,7 +34,8 @@
"postcss-loader" : "^0.4.3",
"style-loader" : "^0.12.3",
"stylus-loader" : "^1.2.0",
"webpack" : "^1.9.10"
"webpack" : "^1.9.10",
"webpack-dev-server" : "*"
},
"repository" : "github:soyjavi/react-toolbox"
}

1
spec/components/autocomplete.cjsx
View File

@ -30,6 +30,7 @@ module.exports = React.createClass
<p>lorem ipsum...</p>
<Autocomplete ref="autocomplete_multiple"
label="Choose a country"
placeholder="elements is up to you..."
dataSource={@state.countries}
value={countries_selected}/>

4
spec/components/button.cjsx
View File

@ -18,12 +18,12 @@ module.exports = React.createClass
<p>lorem ipsum...</p>
<Button caption="Login" disabled=false />
<Button caption="Primary" className="primary" icon="access_alarm" />
<Button caption="Secondary" className="secondary" />
<Button caption="Secondary" className="accent" />
<Button caption="Disabled" disabled={true} />
<Button type="circle" icon="access_alarm" />
<Button type="circle" icon="explore" className="primary" />
<Button type="circle" icon="zoom_in" className="secondary" />
<Button type="circle" icon="zoom_in" className="accent" />
<Button type="circle" icon="input" disabled={true} />
</section>

48
spec/components/card.cjsx Normal file
View File

@ -0,0 +1,48 @@
###
@todo
###
Card = require '../../components/card'
module.exports = React.createClass
# -- States & Properties
# -- Events
onClick: (event, card) ->
console.log "onClick", arguments
onActionClick: ->
console.log "onClick", arguments
# -- Render
render: ->
actions = [
caption: "Save", icon: "add", onClick: @onActionClick
,
caption: "Close", onClick: @onActionClick
]
text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
legend = "Lorem Ipsum is simply dummy text"
<section>
<h2>Cards</h2>
<h3>Basic properties</h3>
<Card title="Default Card" />
<Card title="Default Card with text" text={text} />
<Card title="Default Card with legend" legend={legend} />
<Card title="Default Card with actions" actions={actions} />
<Card title="Defaulr Card with text & image" text={text}
image="http://cdn.tapquo.com/photos/soyjavi.jpg" />
<Card title="Default Card with text, color & onClick event" text={text}
color="#e91e63" onClick={@onClick} />
<h3>Sizes using type property</h3>
<Card type="small" title="Small Card with text & onClick event"
text={text} color="#00bcd4" onClick={@onClick} />
<Card type="square" title="Square Card with text & onClick event"
text={text} color="#00bcd4" onClick={@onClick} />
<Card type="wide" title="Wide card with text & onClick event"
text={text} color="#00bcd4" onClick={@onClick} />
</section>

24
spec/components/font_icon.cjsx Normal file
View File

@ -0,0 +1,24 @@
###
@todo
###
FontIcon = require '../../components/font_icon'
module.exports = React.createClass
# -- Events
onEvent: (type, event, form) ->
console.log "[form.#{type}]", form.getValue()
# -- Render
render: ->
<section>
<h2>Font Icon</h2>
<p>lorem ipsum...</p>
<FontIcon value="add"/>
<FontIcon value="access_alarm"/>
<FontIcon value="explore"/>
<FontIcon value="zoom_in"/>
<FontIcon value="input"/>
</section>

15
spec/index.cjsx
View File

@ -4,35 +4,30 @@
Aside = require './components/aside'
Autocomplete = require './components/autocomplete'
Button = require './components/button'
Card = require './components/card'
Dialog = require './components/dialog'
Dropdown = require './components/dropdown'
FontIcon = require './components/font_icon'
Form = require './components/form'
Progress = require './components/progress'
Slider = require './components/slider'
Switch = require './components/switch'
# React = require('react/addons')
# TestUtils = React.addons.TestUtils
# shallowRenderer = TestUtils.createRenderer()
# shallowRenderer.render(React.createElement(MyComponent, { className: 'MyComponent' }, 'some child text'))
#
# component = shallowRenderer.getRenderOutput();
Test = React.createClass
# -- Render
render: ->
<app data-toolbox={true}>
<h1>React-Kit <small>New way for create</small></h1>
<h1>React-Toolbox <small>New way for create</small></h1>
<Card />
<Switch />
<Aside />
<Autocomplete />
<Button />
<Dialog />
<Dropdown />
<FontIcon />
<Form />
<Progress />
<Slider />

5
spec/index.html
View File

@ -15,7 +15,10 @@
<meta http-equiv="cleartype" content="on">
<link href="../build/react-toolbox.commons.css" rel='stylesheet' type='text/css'>
<link href="../build/react-toolbox.test.css" rel='stylesheet' type='text/css'>
<style> app > h1, app > section { margin: 2rem; } </style>
<style>
app > h1, app > section { margin: 2rem; }
app [data-component-card] { margin: 0 1rem 1rem 0;}
</style>
</head>
<body>
<script src="../node_modules/react/dist/react-with-addons.js"></script>