49 lines
1.1 KiB
CoffeeScript
49 lines
1.1 KiB
CoffeeScript
###
|
|
@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 mode="determinate" value={@state.progress} buffer={@state.buffer}/>
|
|
|
|
<p>Indeterminate...</p>
|
|
<ProgressBar mode="indeterminate"/>
|
|
|
|
<p>Circular</p>
|
|
<ProgressBar type="circular" mode="indeterminate"/>
|
|
</section>
|