commit
a786df1880
|
@ -34,6 +34,7 @@ INPUT_HEIGHT = (2 * SPACE)
|
||||||
BUTTON_HEIGHT = (2.5 * SPACE)
|
BUTTON_HEIGHT = (2.5 * SPACE)
|
||||||
BUTTON_CIRCLE_HEIGHT = (2.75 * SPACE)
|
BUTTON_CIRCLE_HEIGHT = (2.75 * SPACE)
|
||||||
LOADING_HEIGHT = (1.5 * UNIT)
|
LOADING_HEIGHT = (1.5 * UNIT)
|
||||||
|
PROGRESS_BAR_HEIGHT = (SPACE / 4)
|
||||||
|
|
||||||
// -- Shadows
|
// -- Shadows
|
||||||
ZDEPTH_SHADOW_1 = 0 1px 6px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.24)
|
ZDEPTH_SHADOW_1 = 0 1px 6px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.24)
|
||||||
|
|
|
@ -14,5 +14,6 @@ module.exports =
|
||||||
Loading : require "./loading"
|
Loading : require "./loading"
|
||||||
Navigation : require "./navigation"
|
Navigation : require "./navigation"
|
||||||
Ripple : require "./ripple"
|
Ripple : require "./ripple"
|
||||||
|
ProgressBar : require "./progress_bar"
|
||||||
# -- Tools
|
# -- Tools
|
||||||
Router : require "./router"
|
Router : require "./router"
|
||||||
|
|
|
@ -0,0 +1,69 @@
|
||||||
|
###
|
||||||
|
@todo
|
||||||
|
v2
|
||||||
|
- can set different sizes for circular progress
|
||||||
|
- maybe a multicolor indeterminate circular progress bar
|
||||||
|
- refactor vendor prefixes adding to a module
|
||||||
|
###
|
||||||
|
|
||||||
|
require './style'
|
||||||
|
|
||||||
|
module.exports = React.createClass
|
||||||
|
|
||||||
|
# -- Properties
|
||||||
|
propTypes:
|
||||||
|
buffer : React.PropTypes.number
|
||||||
|
className : React.PropTypes.string
|
||||||
|
max : React.PropTypes.number
|
||||||
|
min : React.PropTypes.number
|
||||||
|
mode : React.PropTypes.string
|
||||||
|
type : React.PropTypes.string
|
||||||
|
value : React.PropTypes.number
|
||||||
|
|
||||||
|
getDefaultProps: ->
|
||||||
|
buffer : 0
|
||||||
|
className : ''
|
||||||
|
max : 100
|
||||||
|
min : 0
|
||||||
|
mode : 'indeterminate'
|
||||||
|
type : 'linear'
|
||||||
|
value : 0
|
||||||
|
|
||||||
|
# -- Helper methods
|
||||||
|
calculateRatio: (value) ->
|
||||||
|
(value - @props.min) / (@props.max - @props.min)
|
||||||
|
|
||||||
|
# -- Render
|
||||||
|
render: ->
|
||||||
|
className = "#{@props.type} #{@props.className} #{@props.mode}"
|
||||||
|
<div data-component-progressbar role="progressbar"
|
||||||
|
className={className}
|
||||||
|
aria-valuenow={@props.value}
|
||||||
|
aria-valuemin={@props.min}
|
||||||
|
aria-valuemax={@props.max}>
|
||||||
|
{ if @props.type == 'circular' then @renderCircular() else @renderLinear() }
|
||||||
|
</div>
|
||||||
|
|
||||||
|
renderCircular: ->
|
||||||
|
style = transformDasharray(@calculateRatio(@props.value)) unless @props.mode == 'indeterminate'
|
||||||
|
<svg data-component-progressbar-circle>
|
||||||
|
<circle style={style} data-component-progressbar-circle-path cx="50" cy="50" r="45"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
renderLinear: ->
|
||||||
|
unless @props.mode == 'indeterminate'
|
||||||
|
bufferStyle = transformProgress(@calculateRatio(@props.buffer))
|
||||||
|
valueStyle = transformProgress(@calculateRatio(@props.value))
|
||||||
|
<div>
|
||||||
|
<span data-component-progressbar-buffer style={bufferStyle}></span>
|
||||||
|
<span data-component-progressbar-value style={valueStyle}></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
# -- Private methods
|
||||||
|
transformDasharray = (ratio) ->
|
||||||
|
strokeDasharray: "#{2 * Math.PI * 45 * ratio}, 400"
|
||||||
|
|
||||||
|
transformProgress = (ratio) ->
|
||||||
|
WebkitTransform: "scaleX(#{ratio})"
|
||||||
|
MsTransform: "scaleX(#{ratio})"
|
||||||
|
transform: "scaleX(#{ratio})"
|
|
@ -0,0 +1,27 @@
|
||||||
|
# Progress Bar
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
var ProgressBar = require('react-toolbox/components/progress_bar');
|
||||||
|
|
||||||
|
// Circular indeterminate progress bar
|
||||||
|
<ProgressBar type="circular" mode="indeterminate" />
|
||||||
|
|
||||||
|
// Linear determinate progress bar with buffer
|
||||||
|
<ProgressBar type="linear" mode="determinate" value={83} buffer={90}/>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Properties
|
||||||
|
|
||||||
|
| Name | Type | Default | Description|
|
||||||
|
| ------------- |:-------:|:--------------- |:---------- |
|
||||||
|
| **type** | String | `linear` | Type of the component, it can be *circular* or *linear*.|
|
||||||
|
| **mode** | String | `indeterminate` | Mode of the progress bar, it can be *determinate* or *indeterminate*.|
|
||||||
|
| **value** | Number | `0` | Value of the current progress.|
|
||||||
|
| **min** | Number | `0` | Minimum value permitted.|
|
||||||
|
| **max** | Number | `100` | Maximum value permitted.|
|
||||||
|
| **buffer** | Number | `0` | Value of a secondary progress bar useful for buffering.|
|
||||||
|
| **className** | String | `''` | Additional class name to provide custom styling.|
|
||||||
|
|
||||||
|
## Methods
|
||||||
|
|
||||||
|
This component has no methods.
|
|
@ -0,0 +1,89 @@
|
||||||
|
@import '../constants.styl'
|
||||||
|
|
||||||
|
// -- NOTE: Parameters depend on the component SVG Markup too
|
||||||
|
CIRCLE_WRAPPER_WIDTH = 100
|
||||||
|
CIRCLE_RADIUS = 45
|
||||||
|
SCALE_RATIO = CIRCLE_RADIUS/20
|
||||||
|
|
||||||
|
[data-component-progressbar]
|
||||||
|
display : inline-block
|
||||||
|
|
||||||
|
&.linear
|
||||||
|
position : relative
|
||||||
|
height : PROGRESS_BAR_HEIGHT
|
||||||
|
width : 100%
|
||||||
|
background : darken(BACKGROUND, 7.5%)
|
||||||
|
overflow : hidden
|
||||||
|
|
||||||
|
[data-component-progressbar-value], [data-component-progressbar-buffer]
|
||||||
|
position : absolute
|
||||||
|
bottom : 0
|
||||||
|
left : 0
|
||||||
|
right : 0
|
||||||
|
top : 0
|
||||||
|
transform scaleX(0)
|
||||||
|
transform-origin left center
|
||||||
|
transition-duration ANIMATION_DURATION
|
||||||
|
transition-timing-function ANIMATION_EASE
|
||||||
|
|
||||||
|
[data-component-progressbar-value]
|
||||||
|
background-color : SECONDARY
|
||||||
|
|
||||||
|
[data-component-progressbar-buffer]
|
||||||
|
background-color : alpha(SECONDARY, 15%)
|
||||||
|
|
||||||
|
&.indeterminate [data-component-progressbar-value]
|
||||||
|
transform-origin center center
|
||||||
|
animation linear-indeterminate-bar 1s linear infinite
|
||||||
|
|
||||||
|
&.circular
|
||||||
|
position : relative
|
||||||
|
height : CIRCLE_WRAPPER_WIDTH * 1px
|
||||||
|
width : CIRCLE_WRAPPER_WIDTH * 1px
|
||||||
|
transform rotate(-90deg)
|
||||||
|
|
||||||
|
[data-component-progressbar-circle]
|
||||||
|
height : 100%
|
||||||
|
width : 100%
|
||||||
|
|
||||||
|
[data-component-progressbar-circle-path]
|
||||||
|
stroke-dasharray : 0, SCALE_RATIO * 200
|
||||||
|
stroke-dashoffset : 0
|
||||||
|
stroke-linecap : round
|
||||||
|
stroke-miterlimit : 20
|
||||||
|
stroke-width : 4
|
||||||
|
stroke : SECONDARY
|
||||||
|
fill : none
|
||||||
|
transition stroke-dasharray ANIMATION_DURATION ANIMATION_EASE
|
||||||
|
|
||||||
|
&.indeterminate
|
||||||
|
[data-component-progressbar-circle]
|
||||||
|
animation circular-indeterminate-bar-rotate 2s linear infinite
|
||||||
|
|
||||||
|
[data-component-progressbar-circle-path]
|
||||||
|
stroke-dasharray : SCALE_RATIO * 1, SCALE_RATIO * 200
|
||||||
|
stroke-dashoffset : 0
|
||||||
|
animation circular-indeterminate-bar-dash 1.5s ease-in-out infinite
|
||||||
|
|
||||||
|
@keyframes linear-indeterminate-bar
|
||||||
|
0%
|
||||||
|
transform translate(-50%) scaleX(0)
|
||||||
|
50%
|
||||||
|
transform translate(-0%) scaleX(0.3)
|
||||||
|
100%
|
||||||
|
transform translate(50%) scaleX(0)
|
||||||
|
|
||||||
|
@keyframes circular-indeterminate-bar-rotate
|
||||||
|
100%
|
||||||
|
transform : rotate(360deg)
|
||||||
|
|
||||||
|
@keyframes circular-indeterminate-bar-dash
|
||||||
|
0%
|
||||||
|
stroke-dasharray : SCALE_RATIO * 1, SCALE_RATIO * 200
|
||||||
|
stroke-dashoffset : SCALE_RATIO * 0
|
||||||
|
50%
|
||||||
|
stroke-dasharray : SCALE_RATIO * 89, SCALE_RATIO * 200
|
||||||
|
stroke-dashoffset : SCALE_RATIO * -35
|
||||||
|
100%
|
||||||
|
stroke-dasharray : SCALE_RATIO * 89, SCALE_RATIO * 200
|
||||||
|
stroke-dashoffset : SCALE_RATIO * -124
|
|
@ -0,0 +1,48 @@
|
||||||
|
###
|
||||||
|
@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>
|
|
@ -7,6 +7,7 @@ Button = require './components/button'
|
||||||
Dialog = require './components/dialog'
|
Dialog = require './components/dialog'
|
||||||
Dropdown = require './components/dropdown'
|
Dropdown = require './components/dropdown'
|
||||||
Form = require './components/form'
|
Form = require './components/form'
|
||||||
|
Progress = require './components/progress'
|
||||||
|
|
||||||
# React = require('react/addons')
|
# React = require('react/addons')
|
||||||
# TestUtils = React.addons.TestUtils
|
# TestUtils = React.addons.TestUtils
|
||||||
|
@ -30,6 +31,7 @@ Test = React.createClass
|
||||||
<Button />
|
<Button />
|
||||||
<Dialog />
|
<Dialog />
|
||||||
<Dropdown />
|
<Dropdown />
|
||||||
|
<Progress />
|
||||||
</app>
|
</app>
|
||||||
|
|
||||||
React.render <Test/>, document.body
|
React.render <Test/>, document.body
|
||||||
|
|
Loading…
Reference in New Issue