-
Line Progress {this.state.percent}%
+
Line Progress {percent}%
-
+
+
-
Circle Progress {this.state.percent}%
+
Circle Progress {percent}%
diff --git a/src/Circle.js b/src/Circle.js
index cd110ed..c3f3663 100644
--- a/src/Circle.js
+++ b/src/Circle.js
@@ -5,8 +5,7 @@ import enhancer from './enhancer';
import { propTypes, defaultProps } from './types';
class Circle extends Component {
- getPathStyles() {
- const { percent, strokeWidth, strokeColor, gapDegree = 0, gapPosition } = this.props;
+ getPathStyles(offset, percent, strokeColor, strokeWidth, gapDegree = 0, gapPosition) {
const radius = 50 - (strokeWidth / 2);
let beginPositionX = 0;
let beginPositionY = -radius;
@@ -35,29 +34,66 @@ class Circle extends Component {
a ${radius},${radius} 0 1 1 ${endPositionX},${-endPositionY}
a ${radius},${radius} 0 1 1 ${-endPositionX},${endPositionY}`;
const len = Math.PI * 2 * radius;
- const trailPathStyle = {
- strokeDasharray: `${len - gapDegree}px ${len}px`,
- strokeDashoffset: `-${gapDegree / 2}px`,
- transition: 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s',
- };
- const strokePathStyle = {
+
+ const pathStyle = {
stroke: strokeColor,
strokeDasharray: `${(percent / 100) * (len - gapDegree)}px ${len}px`,
- strokeDashoffset: `-${gapDegree / 2}px`,
+ strokeDashoffset: `-${gapDegree / 2 + offset / 100 * (len - gapDegree)}px`,
transition: 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s', // eslint-disable-line
};
- return { pathString, trailPathStyle, strokePathStyle };
+
+ return {
+ pathString,
+ pathStyle,
+ };
}
+ getStokeList() {
+ const {
+ prefixCls, percent, strokeColor, strokeWidth, strokeLinecap,
+ gapDegree, gapPosition,
+ } = this.props;
+ const percentList = Array.isArray(percent) ? percent : [percent];
+ const strokeColorList = Array.isArray(strokeColor) ? strokeColor : [strokeColor];
+
+ let stackPtg = 0;
+ return percentList.map((ptg, index) => {
+ const color = strokeColorList[index] || strokeColorList[strokeColorList.length - 1];
+ const { pathString, pathStyle } = this.getPathStyles(
+ stackPtg, ptg, color, strokeWidth, gapDegree, gapPosition
+ );
+
+ stackPtg += ptg;
+
+ return (
+ {
+ this.paths[index] = path;
+ }}
+ />
+ );
+ });
+ }
+
+ paths = {};
+
render() {
const {
- prefixCls, strokeWidth, trailWidth, percent,
+ prefixCls, strokeWidth, trailWidth,
+ gapDegree, gapPosition,
trailColor, strokeLinecap, style, className, ...restProps,
} = this.props;
- const { pathString, trailPathStyle, strokePathStyle } = this.getPathStyles();
+ const { pathString, pathStyle } = this.getPathStyles(
+ 0, 100, trailColor, strokeWidth, gapDegree, gapPosition
+ );
delete restProps.percent;
- delete restProps.gapDegree;
- delete restProps.gapPosition;
delete restProps.strokeColor;
return (
- { this.path = path; }}
- style={strokePathStyle}
+ style={pathStyle}
/>
+ {this.getStokeList()}
);
}
diff --git a/src/Line.js b/src/Line.js
index 747e0d7..35c0d70 100644
--- a/src/Line.js
+++ b/src/Line.js
@@ -3,6 +3,8 @@ import enhancer from './enhancer';
import { propTypes, defaultProps } from './types';
class Line extends Component {
+ paths = {};
+
render() {
const {
className,
@@ -19,11 +21,8 @@ class Line extends Component {
delete restProps.gapPosition;
- const pathStyle = {
- strokeDasharray: '100px, 100px',
- strokeDashoffset: `${(100 - percent)}px`,
- transition: 'stroke-dashoffset 0.3s ease 0s, stroke 0.3s linear',
- };
+ const percentList = Array.isArray(percent) ? percent : [percent];
+ const strokeColorList = Array.isArray(strokeColor) ? strokeColor : [strokeColor];
const center = strokeWidth / 2;
const right = 100 - (strokeWidth / 2);
@@ -32,6 +31,8 @@ class Line extends Component {
L ${strokeLinecap === 'round' ? right : 100},${center}`;
const viewBoxString = `0 0 100 ${strokeWidth}`;
+ let stackPtg = 0;
+
return (
- { this.path = path; }}
- style={pathStyle}
- />
+ {percentList.map((ptg, index) => {
+ const pathStyle = {
+ strokeDasharray: `${ptg}px, 100px`,
+ strokeDashoffset: `-${stackPtg}px`,
+ transition:
+ 'stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear',
+ };
+ const color = strokeColorList[index] || strokeColorList[strokeColorList.length - 1];
+
+ stackPtg += ptg;
+
+ return (
+ {
+ this.paths[index] = path;
+ }}
+ style={pathStyle}
+ />
+ );
+ })}
);
}
diff --git a/src/enhancer.js b/src/enhancer.js
index 00b33a2..71272ff 100644
--- a/src/enhancer.js
+++ b/src/enhancer.js
@@ -1,15 +1,27 @@
const enhancer = WrappedComponent => class Progress extends WrappedComponent {
componentDidUpdate() {
- if (!this.path) {
- return;
- }
- const pathStyle = this.path.style;
- pathStyle.transitionDuration = '.3s, .3s, .3s, .06s';
const now = Date.now();
- if (this.prevTimeStamp && now - this.prevTimeStamp < 100) {
- pathStyle.transitionDuration = '0s, 0s';
+ let updated = false;
+
+ Object.keys(this.paths).forEach((key) => {
+ const path = this.paths[key];
+
+ if (!path) {
+ return;
+ }
+
+ updated = true;
+ const pathStyle = path.style;
+ pathStyle.transitionDuration = '.3s, .3s, .3s, .06s';
+
+ if (this.prevTimeStamp && now - this.prevTimeStamp < 100) {
+ pathStyle.transitionDuration = '0s, 0s';
+ }
+ });
+
+ if (updated) {
+ this.prevTimeStamp = Date.now();
}
- this.prevTimeStamp = Date.now();
}
render() {
diff --git a/src/types.js b/src/types.js
index 4a44dcc..d447ad3 100644
--- a/src/types.js
+++ b/src/types.js
@@ -12,14 +12,16 @@ export const defaultProps = {
trailWidth: 1,
};
+const mixedType = PropTypes.oneOfType([PropTypes.number, PropTypes.string]);
+
export const propTypes = {
className: PropTypes.string,
- percent: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+ percent: PropTypes.oneOfType([mixedType, PropTypes.arrayOf(mixedType)]),
prefixCls: PropTypes.string,
- strokeColor: PropTypes.string,
+ strokeColor: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
strokeLinecap: PropTypes.oneOf(['butt', 'round', 'square']),
- strokeWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+ strokeWidth: mixedType,
style: PropTypes.object,
trailColor: PropTypes.string,
- trailWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+ trailWidth: mixedType,
};