From 4c68f6bae4e8a57896c6d606b5551339119c2ccc Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Tue, 30 Jun 2015 21:11:46 +0200 Subject: [PATCH 1/7] Add linear progress bar --- components/constants.styl | 1 + components/index.coffee | 1 + components/progress_bar/index.cjsx | 47 ++++++++++++++++++++++++++++++ components/progress_bar/style.styl | 40 +++++++++++++++++++++++++ 4 files changed, 89 insertions(+) create mode 100644 components/progress_bar/index.cjsx create mode 100644 components/progress_bar/style.styl diff --git a/components/constants.styl b/components/constants.styl index 30d493ce..7374764c 100644 --- a/components/constants.styl +++ b/components/constants.styl @@ -33,6 +33,7 @@ INPUT_HEIGHT = (2 * SPACE) BUTTON_HEIGHT = (2.5 * SPACE) BUTTON_CIRCLE_HEIGHT = (2.75 * SPACE) LOADING_HEIGHT = (1.5 * UNIT) +PROGRESS_BAR_HEIGHT = (SPACE / 4) // -- Shadows ZDEPTH_SHADOW_1 = 0 1px 6px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.24) diff --git a/components/index.coffee b/components/index.coffee index 2d690e24..da40a088 100644 --- a/components/index.coffee +++ b/components/index.coffee @@ -14,5 +14,6 @@ module.exports = Loading : require "./loading" Navigation : require "./navigation" Ripple : require "./ripple" + ProgressBar : require "./progress_bar" # -- Tools Router : require "./router" diff --git a/components/progress_bar/index.cjsx b/components/progress_bar/index.cjsx new file mode 100644 index 00000000..959f28bd --- /dev/null +++ b/components/progress_bar/index.cjsx @@ -0,0 +1,47 @@ +### +@todo Add a circular progress variant +### + +require './style' + +module.exports = React.createClass + + # -- Properties + propTypes: + buffer : React.PropTypes.number + max : React.PropTypes.number + min : React.PropTypes.number + value : React.PropTypes.number + indeterminate : React.PropTypes.bool + + getDefaultProps: -> + buffer : 0 + indeterminate : false + max : 100 + min : 0 + value : 0 + + # -- Helper methods + calculateRatio: (value) -> + (value - @props.min) / (@props.max - @props.min) + + transformProgress: (ratio) -> + WebkitTransform: "scaleX(#{ratio})" + MsTransform: "scaleX(#{ratio})" + transform: "scaleX(#{ratio})" + + # -- Render + render: -> + className = 'indeterminate' if @props.indeterminate + primaryRatio = @calculateRatio(@props.value) + secondaryRatio = @calculateRatio(@props.buffer) + +
+ + +
diff --git a/components/progress_bar/style.styl b/components/progress_bar/style.styl new file mode 100644 index 00000000..a77a4c93 --- /dev/null +++ b/components/progress_bar/style.styl @@ -0,0 +1,40 @@ +@import '../constants.styl' + +// -- Main styles +[data-component-progressbar] + display : inline-block + 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 : lighten(SECONDARY, 70%) + + &.indeterminate > [data-component-progressbar-value] + transform-origin center center + animation indeterminate-bar 1s linear infinite + +// -- Animation for the indeterminate progress bar +@keyframes indeterminate-bar + 0% + transform: translate(-50%) scaleX(0) + 50% + transform: translate(0%) scaleX(0.3) + 100% + transform: translate(50%) scaleX(0) From abc19e1c3e0d5082370418dc990ec12ed5205ec8 Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Tue, 30 Jun 2015 21:58:32 +0200 Subject: [PATCH 2/7] Add spec with usage of progress bar component --- components/progress_bar/style.styl | 2 +- spec/components/progress.cjsx | 45 ++++++++++++++++++++++++++++++ spec/index.cjsx | 2 ++ 3 files changed, 48 insertions(+), 1 deletion(-) create mode 100644 spec/components/progress.cjsx diff --git a/components/progress_bar/style.styl b/components/progress_bar/style.styl index a77a4c93..eb8de5da 100644 --- a/components/progress_bar/style.styl +++ b/components/progress_bar/style.styl @@ -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 diff --git a/spec/components/progress.cjsx b/spec/components/progress.cjsx new file mode 100644 index 00000000..49a9ed93 --- /dev/null +++ b/spec/components/progress.cjsx @@ -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: -> +
+

Progress bars

+ +

Determinate

+ + +

Indeterminate...

+ +
diff --git a/spec/index.cjsx b/spec/index.cjsx index bea66306..77a99f9e 100644 --- a/spec/index.cjsx +++ b/spec/index.cjsx @@ -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