From bbc8bba178ed1e073dff8f3277657166d573d95f Mon Sep 17 00:00:00 2001 From: Kevin Qi Date: Mon, 29 Jan 2018 23:04:39 -0800 Subject: [PATCH] add styles prop to README and demo --- README.md | 3 ++- docs/demo.jsx | 26 +++++++++++++++++++++++++- docs/index.js | 14 +++++++++++++- src/index.jsx | 13 ++++++++++--- 4 files changed, 50 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 07f0c73..2f15829 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,8 @@ For more in-depth examples, take a look at the [demo code](docs/demo.jsx) to see | `counterClockwise` | Toggle whether to rotate progressbar in counterclockwise direction. 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'`. | | `textForPercentage` | Function which returns text to display, can be configured based on percentage. Example: ``(pct) => `${pct}%` ``. | -| `classes` | Object mapping to override classNames of each svg element (root, trail, path, text, background). Enables styling with react-jss. See [this PR](https://github.com/iqnivek/react-circular-progressbar/pull/25) for more detail. | +| `classes` | Object allowing overrides of classNames of each svg subcomponent (root, trail, path, text, background). Enables styling with react-jss. See [this PR](https://github.com/iqnivek/react-circular-progressbar/pull/25) for more detail. | +| `styles` | Object allowing customization of styles of each svg subcomponent (root, trail, path, text, background). | ## Customizing styles diff --git a/docs/demo.jsx b/docs/demo.jsx index bd6317e..b446716 100644 --- a/docs/demo.jsx +++ b/docs/demo.jsx @@ -34,8 +34,24 @@ class ChangingProgressbar extends React.Component { }, this.props.interval); } + getStyles() { + return this.props.stylesForPercentage ? ( + this.props.stylesForPercentage(this.getCurrentPercentage()) + ) : {}; + } + + getCurrentPercentage() { + return this.props.percentages[this.state.currentPercentageIndex]; + } + render() { - return ; + return ( + + ); } } ChangingProgressbar.defaultProps = { @@ -59,6 +75,14 @@ class Demo extends React.Component {
{ + const alpha = (100 + percentage) / 200; + return { + path: { + stroke: `rgba(62, 152, 199, ${alpha})`, + }, + }; + }} />
diff --git a/docs/index.js b/docs/index.js index 2f6d3c4..44656bd 100644 --- a/docs/index.js +++ b/docs/index.js @@ -6584,6 +6584,7 @@ var CircularProgressbar = function (_React$Component) { textForPercentage = _props.textForPercentage, className = _props.className, classes = _props.classes, + styles = _props.styles, strokeWidth = _props.strokeWidth; var classForPercentage = this.props.classForPercentage ? this.props.classForPercentage(percentage) : ''; @@ -6598,12 +6599,14 @@ var CircularProgressbar = function (_React$Component) { }, this.props.background ? _react2.default.createElement('circle', { className: classes.background, + style: styles.background, cx: CENTER_X, cy: CENTER_Y, r: FULL_RADIUS }) : null, _react2.default.createElement('path', { className: classes.trail, + style: styles.trail, d: pathDescription, strokeWidth: strokeWidth, fillOpacity: 0 @@ -6613,12 +6616,13 @@ var CircularProgressbar = function (_React$Component) { d: pathDescription, strokeWidth: strokeWidth, fillOpacity: 0, - style: this.getProgressStyle() + style: Object.assign({}, styles.path, this.getProgressStyle()) }), text ? _react2.default.createElement( 'text', { className: classes.text, + style: styles.text, x: CENTER_X, y: CENTER_Y }, @@ -6635,6 +6639,7 @@ CircularProgressbar.propTypes = { percentage: _propTypes2.default.number.isRequired, className: _propTypes2.default.string, classes: _propTypes2.default.objectOf(_propTypes2.default.string), + styles: _propTypes2.default.objectOf(_propTypes2.default.object), strokeWidth: _propTypes2.default.number, background: _propTypes2.default.bool, backgroundPadding: _propTypes2.default.number, @@ -6654,6 +6659,13 @@ CircularProgressbar.defaultProps = { text: 'CircularProgressbar-text', background: 'CircularProgressbar-background' }, + styles: { + root: {}, + trail: {}, + path: {}, + text: {}, + background: {} + }, background: false, backgroundPadding: null, initialAnimation: false, diff --git a/src/index.jsx b/src/index.jsx index 3518c26..0283bd7 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -70,7 +70,7 @@ class CircularProgressbar extends React.Component { `; } - getProgressStyle() { + getPathStyles() { const diameter = Math.PI * 2 * this.getPathRadius(); const truncatedPercentage = Math.min(Math.max(this.state.percentage, MIN_PERCENTAGE), MAX_PERCENTAGE); const dashoffset = ((100 - truncatedPercentage) / 100) * diameter; @@ -88,7 +88,14 @@ class CircularProgressbar extends React.Component { } render() { - const { percentage, textForPercentage, className, classes, styles, strokeWidth } = this.props; + const { + percentage, + textForPercentage, + className, + classes, + styles, + strokeWidth, + } = this.props; const classForPercentage = this.props.classForPercentage ? this.props.classForPercentage(percentage) : ''; const pathDescription = this.getPathDescription(); const text = textForPercentage ? textForPercentage(percentage) : null; @@ -123,7 +130,7 @@ class CircularProgressbar extends React.Component { d={pathDescription} strokeWidth={strokeWidth} fillOpacity={0} - style={Object.assign({}, styles.path, this.getProgressStyle())} + style={Object.assign({}, styles.path, this.getPathStyles())} /> {