archive-gh-me/react-circular-progressbar
1
0
Fork 0
mirror of https://github.com/kevinsqi/react-circular-progressbar.git synced 2026-01-18 15:55:06 +00:00
Code Issues Projects Releases Wiki Activity

Add option to animate to percentage upon mounting

Browse Source
This commit is contained in:
Kevin Qi 2016-05-30 17:08:05 -04:00
parent ccfa8feb25
commit 72b2c6f23a
2 changed files with 50 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
demo/demo.jsx
View File

@ -20,6 +20,17 @@ const DemoItem = (props) => (
</div>
);
const Example = (props) => (
<div className="col-xs-12 col-md-4">
<div className="row">
<div className="col-xs-6 offset-xs-3">
{props.children}
</div>
</div>
<p>{props.description}</p>
</div>
);
class ChangingProgressbar extends React.Component {
constructor(props) {
super(props);
@ -73,20 +84,24 @@ class Demo extends React.Component {
</div>
<hr />
<div className="row">
<div className="col-xs-12 col-md-4">
<div className="row">
<div className="col-xs-6 offset-xs-3">
<ChangingProgressbar
percentages={[75, 100]}
classForPercentage={(percentage) => {
return percentage === 100 ? 'complete' : 'incomplete';
}}
/>
</div>
</div>
<p>Configure color/styling based on percentage using plain old CSS classes.</p>
</div>
<Example
description="Configure color/styling based on percentage using plain old CSS classes."
>
<ChangingProgressbar
percentages={[75, 100]}
classForPercentage={(percentage) => {
return percentage === 100 ? 'complete' : 'incomplete';
}}
/>
</Example>
<Example
description="Show animation upon mounting"
>
<CircularProgressbar percentage={100} initialAnimation={true} />
</Example>
</div>
<hr />

23
src/index.jsx
View File

@ -3,6 +3,26 @@ import React, { PropTypes } from 'react';
class CircularProgressbar extends React.Component {
constructor(props) {
super(props);
this.state = {
percentage: props.initialAnimation ? 0 : props.percentage,
};
}
componentDidMount() {
if (this.props.initialAnimation) {
setTimeout(() => {
this.setState({
percentage: this.props.percentage,
});
}, 10);
}
}
componentWillReceiveProps(nextProps) {
this.setState({
percentage: this.props.percentage,
});
}
render() {
@ -16,7 +36,7 @@ class CircularProgressbar extends React.Component {
const diameter = Math.PI * 2 * radius;
const progressStyle = {
strokeDasharray: `${diameter}px ${diameter}px`,
strokeDashoffset: `${((100 - this.props.percentage) / 100 * diameter)}px`,
strokeDashoffset: `${((100 - this.state.percentage) / 100 * diameter)}px`,
};
return (
@ -58,6 +78,7 @@ CircularProgressbar.propTypes = {
CircularProgressbar.defaultProps = {
strokeWidth: 8,
textForPercentage: (percentage) => `${percentage}%`,
initialAnimation: false,
};
export default CircularProgressbar;