From eb2877c19e93c6e6dd4efccc6b17b7b7fa4cfd9b Mon Sep 17 00:00:00 2001 From: Kevin Qi Date: Fri, 13 Oct 2017 22:56:45 -0700 Subject: [PATCH] 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 --- README.md | 1 + docs/demo.jsx | 5 +++-- docs/index.html | 14 -------------- docs/index.js | 32 ++++++++++++++++++++++++-------- docs/styles.css | 27 ++++++++++++++++++++++++++- src/index.jsx | 38 ++++++++++++++++++++++++++++---------- src/styles.css | 27 ++++++++++++++++++++++++++- 7 files changed, 108 insertions(+), 36 deletions(-) diff --git a/README.md b/README.md index 966c82b..0c57c93 100644 --- a/README.md +++ b/README.md @@ -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'`. | diff --git a/docs/demo.jsx b/docs/demo.jsx index b01e418..6d89eb4 100644 --- a/docs/demo.jsx +++ b/docs/demo.jsx @@ -92,8 +92,9 @@ class Demo extends React.Component { description="Add a background color for that inverted look." > diff --git a/docs/index.html b/docs/index.html index 746cdaa..cfc307e 100644 --- a/docs/index.html +++ b/docs/index.html @@ -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; - } diff --git a/docs/index.js b/docs/index.js index 11ff453..4b62b02 100644 --- a/docs/index.js +++ b/docs/index.js @@ -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 }) diff --git a/docs/styles.css b/docs/styles.css index a862146..9165fd8 100644 --- a/docs/styles.css +++ b/docs/styles.css @@ -32,5 +32,30 @@ } .CircularProgressbar .CircularProgressbar-background { - fill: transparent; + fill: #255b77; +} + +/* + * Sample inverted styles. Use these with e.g.: + * + * + */ +.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; } diff --git a/src/index.jsx b/src/index.jsx index 6d8b1b5..ed9b622 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -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" > - + { + this.props.background ? ( + + ) : null + } `${percentage}%`, }; diff --git a/src/styles.css b/src/styles.css index a862146..947089b 100644 --- a/src/styles.css +++ b/src/styles.css @@ -32,5 +32,30 @@ } .CircularProgressbar .CircularProgressbar-background { - fill: transparent; + fill: #255b77; +} + +/* + * Sample background styles. Use these with e.g.: + * + * + */ +.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; }