archive-gh-me/react-circular-progressbar
1
0
Fork 0
mirror of https://github.com/kevinsqi/react-circular-progressbar.git synced 2025-12-08 20:25:50 +00:00
Code Issues Projects Releases Wiki Activity

add background prop defaulting to false, fixing issue wehre existing users upgrading to 0.3.0 would see a black circle shape if they don't update CSS

Browse Source
This commit is contained in:
Kevin Qi 2017-10-13 22:56:45 -07:00
parent 06888e2b58
commit eb2877c19e
7 changed files with 108 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -38,6 +38,7 @@ import CircularProgressbar from 'react-circular-progressbar';
| `percentage` | Numeric percentage to display, from 0-100. Required. |
| `className` | Classes to apply to the svg element |
| `strokeWidth` | Width of circular line as a percentage relative to total width of component. Default: `8`. |
| `background` | Whether to display background color. Default: `false`. |
| `backgroundPadding` | Padding between background and edge of svg as a percentage relative to total width of component. Default: `0`. |
| `initialAnimation` | Toggle whether to animate progress starting from 0% on initial mount. Default: `false`. |
| `classForPercentage` | Function which returns an additional class to apply to top-level svg element, which can be used for coloring/styling percentage ranges differently. Example: `(percent) => percent < 100 ? 'incomplete' : 'complete'`. |

5
docs/demo.jsx
View File

@ -92,8 +92,9 @@ class Demo extends React.Component {
description="Add a background color for that inverted look."
>
<CircularProgressbar
className="background"
backgroundPadding={4}
className="CircularProgressbar-inverted"
background
backgroundPadding={5}
strokeWidth={6}
percentage={33}
/>

14
docs/index.html
View File

@ -32,20 +32,6 @@
.CircularProgressbar.complete .CircularProgressbar-text {
fill: #99f;
}
/* demo - background styles */
.CircularProgressbar.background .CircularProgressbar-background {
fill: #3e98c7;
}
.CircularProgressbar.background .CircularProgressbar-text {
fill: #fff;
}
.CircularProgressbar.background .CircularProgressbar-path {
stroke: #fff;
}
.CircularProgressbar.background .CircularProgressbar-trail {
stroke: transparent;
}
</style>
</head>
<body>

32
docs/index.js
View File

@ -6527,6 +6527,20 @@ var CircularProgressbar = function (_React$Component) {
clearTimeout(this.initialTimeout);
window.cancelAnimationFrame(this.requestAnimationFrame);
}
}, {
key: 'getBackgroundPadding',
value: function getBackgroundPadding() {
if (this.props.background) {
// default padding to be the same as strokeWidth
// compare to null because 0 is falsy
if (this.props.backgroundPadding == null) {
return this.props.strokeWidth;
}
return this.props.backgroundPadding;
}
// don't add padding if not displaying background
return 0;
}
}, {
key: 'getPathDescription',
value: function getPathDescription() {
@ -6548,7 +6562,7 @@ var CircularProgressbar = function (_React$Component) {
value: function getPathRadius() {
// the radius of the path is defined to be in the middle, so in order for the path to
// fit perfectly inside the 100x100 viewBox, need to subtract half the strokeWidth
return 50 - this.props.strokeWidth / 2 - this.props.backgroundPadding;
return 50 - this.props.strokeWidth / 2 - this.getBackgroundPadding();
}
}, {
key: 'render',
@ -6562,12 +6576,12 @@ var CircularProgressbar = function (_React$Component) {
className: 'CircularProgressbar ' + this.props.className + ' ' + classForPercentage,
viewBox: '0 0 100 100'
},
_react2.default.createElement('circle', {
this.props.background ? _react2.default.createElement('circle', {
className: 'CircularProgressbar-background',
cx: 50,
cy: 50,
r: 50
}),
}) : null,
_react2.default.createElement('path', {
className: 'CircularProgressbar-trail',
d: pathDescription,
@ -6599,8 +6613,9 @@ var CircularProgressbar = function (_React$Component) {
CircularProgressbar.propTypes = {
percentage: _propTypes2.default.number.isRequired,
strokeWidth: _propTypes2.default.number,
className: _propTypes2.default.string,
strokeWidth: _propTypes2.default.number,
background: _propTypes2.default.bool,
backgroundPadding: _propTypes2.default.number,
initialAnimation: _propTypes2.default.bool,
classForPercentage: _propTypes2.default.func,
@ -6610,7 +6625,7 @@ CircularProgressbar.propTypes = {
CircularProgressbar.defaultProps = {
strokeWidth: 8,
className: '',
backgroundPadding: 0,
background: false,
initialAnimation: false,
textForPercentage: function textForPercentage(percentage) {
return percentage + '%';
@ -10314,7 +10329,7 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
console.log('react-circular-progressbar v' + "0.2.1");
console.log('react-circular-progressbar v' + "0.3.0");
var githubURL = 'https://github.com/iqnivek/react-circular-progressbar';
@ -10468,8 +10483,9 @@ var Demo = function (_React$Component2) {
description: 'Add a background color for that inverted look.'
},
_react2.default.createElement(_src2.default, {
className: 'background',
backgroundPadding: 4,
className: 'CircularProgressbar-inverted',
background: true,
backgroundPadding: 5,
strokeWidth: 6,
percentage: 33
})

27
docs/styles.css
View File

@ -32,5 +32,30 @@
}
.CircularProgressbar .CircularProgressbar-background {
fill: transparent;
fill: #255b77;
}
/*
* Sample inverted styles. Use these with e.g.:
*
* <CircularProgressbar
* className="CircularProgressbar-inverted"
* background
* percentage={50}
* />
*/
.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-background {
fill: #3e98c7;
}
.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-text {
fill: #fff;
}
.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-path {
stroke: #fff;
}
.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-trail {
stroke: transparent;
}

38
src/index.jsx
View File

@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
const MIN_PERCENTAGE = 0;
const MAX_PERCENTAGE = 100;
const BACKGROUND_OFFSET = 7;
class CircularProgressbar extends React.Component {
constructor(props) {
@ -37,6 +36,19 @@ class CircularProgressbar extends React.Component {
window.cancelAnimationFrame(this.requestAnimationFrame);
}
getBackgroundPadding() {
if (this.props.background) {
// default padding to be the same as strokeWidth
// compare to null because 0 is falsy
if (this.props.backgroundPadding == null) {
return this.props.strokeWidth;
}
return this.props.backgroundPadding;
}
// don't add padding if not displaying background
return 0;
}
getPathDescription() {
const radius = this.getPathRadius();
return `
@ -58,7 +70,7 @@ class CircularProgressbar extends React.Component {
getPathRadius() {
// the radius of the path is defined to be in the middle, so in order for the path to
// fit perfectly inside the 100x100 viewBox, need to subtract half the strokeWidth
return 50 - (this.props.strokeWidth / 2) - this.props.backgroundPadding;
return 50 - (this.props.strokeWidth / 2) - this.getBackgroundPadding();
}
render() {
@ -70,12 +82,16 @@ class CircularProgressbar extends React.Component {
className={`CircularProgressbar ${this.props.className} ${classForPercentage}`}
viewBox="0 0 100 100"
>
<circle
className="CircularProgressbar-background"
cx={50}
cy={50}
r={50}
/>
{
this.props.background ? (
<circle
className="CircularProgressbar-background"
cx={50}
cy={50}
r={50}
/>
) : null
}
<path
className="CircularProgressbar-trail"
@ -106,8 +122,9 @@ class CircularProgressbar extends React.Component {
CircularProgressbar.propTypes = {
percentage: PropTypes.number.isRequired,
strokeWidth: PropTypes.number,
className: PropTypes.string,
strokeWidth: PropTypes.number,
background: PropTypes.bool,
backgroundPadding: PropTypes.number,
initialAnimation: PropTypes.bool,
classForPercentage: PropTypes.func,
@ -117,7 +134,8 @@ CircularProgressbar.propTypes = {
CircularProgressbar.defaultProps = {
strokeWidth: 8,
className: '',
backgroundPadding: 0,
background: false,
backgroundPadding: null,
initialAnimation: false,
textForPercentage: (percentage) => `${percentage}%`,
};

27
src/styles.css
View File

@ -32,5 +32,30 @@
}
.CircularProgressbar .CircularProgressbar-background {
fill: transparent;
fill: #255b77;
}
/*
* Sample background styles. Use these with e.g.:
*
* <CircularProgressbar
* className="CircularProgressbar-inverted"
* background
* percentage={50}
* />
*/
.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-background {
fill: #3e98c7;
}
.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-text {
fill: #fff;
}
.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-path {
stroke: #fff;
}
.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-trail {
stroke: transparent;
}