Add spec with usage of progress bar component
parent
4c68f6bae4
commit
abc19e1c3e
|
@ -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
|
||||
|
|
|
@ -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>
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue