Add spec with usage of progress bar component

old
Javi Velasco 2015-06-30 21:58:32 +02:00
parent 4c68f6bae4
commit abc19e1c3e
3 changed files with 48 additions and 1 deletions

View File

@ -24,7 +24,7 @@
background-color : SECONDARY
[data-component-progressbar-buffer]
background-color : lighten(SECONDARY, 70%)
background-color : alpha(SECONDARY, 15%)
&.indeterminate > [data-component-progressbar-value]
transform-origin center center

View File

@ -0,0 +1,45 @@
###
@todo
###
ProgressBar = require '../../components/progress_bar'
module.exports = React.createClass
# -- States & Properties
getInitialState: ->
progress: 0
buffer: 10
# -- Lifecycle
componentWillMount: ->
@simulateProgress()
# -- Simulate kind of a progress async function
simulateProgress: ->
setTimeout =>
if @state.progress < 100
@increaseProgress()
@increaseBuffer() if @state.progress > @state.buffer
else
@replaceState @getInitialState()
@simulateProgress()
, (Math.random() * 1 + 1) * 1000
increaseProgress: ->
@setState progress: Math.random() * 30 + @state.progress
increaseBuffer: ->
@setState buffer: Math.random() * (100 - @state.progress) + @state.progress
# -- Render
render: ->
<section>
<h2>Progress bars</h2>
<p>Determinate</p>
<ProgressBar value={@state.progress} buffer={@state.buffer}/>
<p>Indeterminate...</p>
<ProgressBar indeterminate={true}/>
</section>

View File

@ -7,6 +7,7 @@ Button = require './components/button'
Dialog = require './components/dialog'
Dropdown = require './components/dropdown'
Form = require './components/form'
Progress = require './components/progress'
# React = require('react/addons')
# TestUtils = React.addons.TestUtils
@ -30,6 +31,7 @@ Test = React.createClass
<Button />
<Dialog />
<Dropdown />
<Progress />
</app>
React.render <Test/>, document.body