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

Merge pull request #25 from jedwards1211/classes

Browse Source 
support classes prop
This commit is contained in:
Kevin Qi 2017-10-14 00:48:35 -07:00 committed by GitHub
commit 380baebf08
1 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/index.jsx
View File

@ -74,20 +74,20 @@ class CircularProgressbar extends React.Component {
}
render() {
const { percentage, textForPercentage, className, strokeWidth } = this.props;
const { percentage, textForPercentage, className, classes, strokeWidth } = this.props;
const classForPercentage = this.props.classForPercentage ? this.props.classForPercentage(percentage) : '';
const pathDescription = this.getPathDescription();
const text = textForPercentage ? textForPercentage(percentage) : null;
return (
<svg
className={`CircularProgressbar ${className} ${classForPercentage}`}
className={`${classes.root} ${className} ${classForPercentage}`}
viewBox="0 0 100 100"
>
{
this.props.background ? (
<circle
className="CircularProgressbar-background"
className={classes.background}
cx={50}
cy={50}
r={50}
@ -96,14 +96,14 @@ class CircularProgressbar extends React.Component {
}
<path
className="CircularProgressbar-trail"
className={classes.trail}
d={pathDescription}
strokeWidth={strokeWidth}
fillOpacity={0}
/>
<path
className="CircularProgressbar-path"
className={classes.path}
d={pathDescription}
strokeWidth={strokeWidth}
fillOpacity={0}
@ -113,7 +113,7 @@ class CircularProgressbar extends React.Component {
{
text ? (
<text
className="CircularProgressbar-text"
className={classes.text}
x={50}
y={50}
>
@ -129,6 +129,7 @@ class CircularProgressbar extends React.Component {
CircularProgressbar.propTypes = {
percentage: PropTypes.number.isRequired,
className: PropTypes.string,
classes: PropTypes.objectOf(PropTypes.string),
strokeWidth: PropTypes.number,
background: PropTypes.bool,
backgroundPadding: PropTypes.number,
@ -140,6 +141,13 @@ CircularProgressbar.propTypes = {
CircularProgressbar.defaultProps = {
strokeWidth: 8,
className: '',
classes: {
root: 'CircularProgressbar',
trail: 'CircularProgressbar-trail',
path: 'CircularProgressbar-path',
text: 'CircularProgressbar-text',
background: 'CircularProgressbar-background',
},
background: false,
backgroundPadding: null,
initialAnimation: false,