rc-progress - npm Package Compare versions

Comparing version 3.3.3 to 3.4.0

es/Circle.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id", "prefixCls", "strokeWidth", "trailWidth", "gapDegree", "gapPosition", "trailColor", "strokeLinecap", "style", "className", "strokeColor", "percent"];
+var _excluded = ["id", "prefixCls", "steps", "strokeWidth", "trailWidth", "gapDegree", "gapPosition", "trailColor", "strokeLinecap", "style", "className", "strokeColor", "percent"];
 import * as React from 'react';
 import classNames from 'classnames';
-import { useTransitionDuration, defaultProps } from './common';
+import { defaultProps, useTransitionDuration } from './common';
 import useId from './hooks/useId';
@@ -21,10 +21,4 @@
 
-var getCircleStyle = function getCircleStyle(radius, offset, percent, strokeColor) {
-  var gapDegree = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
-  var gapPosition = arguments.length > 5 ? arguments[5] : undefined;
-  var strokeLinecap = arguments.length > 6 ? arguments[6] : undefined;
-  var strokeWidth = arguments.length > 7 ? arguments[7] : undefined;
-  var rotateDeg = gapDegree > 0 ? 90 + gapDegree / 2 : -90;
-  var perimeter = Math.PI * 2 * radius;
-  var perimeterWithoutGap = perimeter * ((360 - gapDegree) / 360);
+var getCircleStyle = function getCircleStyle(perimeter, perimeterWithoutGap, offset, percent, rotateDeg, gapDegree, gapPosition, strokeColor, strokeLinecap, strokeWidth) {
+  var stepSpace = arguments.length > 10 && arguments[10] !== undefined ? arguments[10] : 0;
   var offsetDeg = offset / 100 * 360 * ((360 - gapDegree) / 360);
@@ -41,3 +35,3 @@ var positionDeg = gapDegree === 0 ? 0 : {
   if (strokeLinecap === 'round' && percent !== 100) {
-    strokeDashoffset += strokeWidth / 2; // when percent is small enough (<= 1%), keep smallest value to avoid it's disapperance
+    strokeDashoffset += strokeWidth / 2; // when percent is small enough (<= 1%), keep smallest value to avoid it's disappearance
 
@@ -52,3 +46,3 @@ if (strokeDashoffset >= perimeterWithoutGap) {
     strokeDasharray: "".concat(perimeterWithoutGap, "px ").concat(perimeter),
-    strokeDashoffset: strokeDashoffset,
+    strokeDashoffset: strokeDashoffset + stepSpace,
     transform: "rotate(".concat(rotateDeg + offsetDeg + positionDeg, "deg)"),
@@ -64,5 +58,7 @@ transformOrigin: '50% 50%',
       prefixCls = _ref.prefixCls,
+      steps = _ref.steps,
       strokeWidth = _ref.strokeWidth,
       trailWidth = _ref.trailWidth,
-      gapDegree = _ref.gapDegree,
+      _ref$gapDegree = _ref.gapDegree,
+      gapDegree = _ref$gapDegree === void 0 ? 0 : _ref$gapDegree,
       gapPosition = _ref.gapPosition,
@@ -80,3 +76,14 @@ trailColor = _ref.trailColor,
   var radius = VIEW_BOX_SIZE / 2 - strokeWidth / 2;
-  var circleStyle = getCircleStyle(radius, 0, 100, trailColor, gapDegree, gapPosition, strokeLinecap, strokeWidth);
+  var perimeter = Math.PI * 2 * radius;
+  var rotateDeg = gapDegree > 0 ? 90 + gapDegree / 2 : -90;
+  var perimeterWithoutGap = perimeter * ((360 - gapDegree) / 360);
+
+  var _ref2 = _typeof(steps) === 'object' ? steps : {
+    count: steps,
+    space: 2
+  },
+      stepCount = _ref2.count,
+      stepSpace = _ref2.space;
+
+  var circleStyle = getCircleStyle(perimeter, perimeterWithoutGap, 0, 100, rotateDeg, gapDegree, gapPosition, trailColor, strokeLinecap, strokeWidth);
   var percentList = toArray(percent);
@@ -94,3 +101,3 @@ var strokeColorList = toArray(strokeColor);
       var stroke = color && _typeof(color) === 'object' ? "url(#".concat(gradientId, ")") : undefined;
-      var circleStyleForStack = getCircleStyle(radius, stackPtg, ptg, color, gapDegree, gapPosition, strokeLinecap, strokeWidth);
+      var circleStyleForStack = getCircleStyle(perimeter, perimeterWithoutGap, stackPtg, ptg, rotateDeg, gapDegree, gapPosition, color, strokeLinecap, strokeWidth);
       stackPtg += ptg;
@@ -119,2 +126,30 @@ return /*#__PURE__*/React.createElement("circle", {
 
+  var getStepStokeList = function getStepStokeList() {
+    // only show the first percent when pass steps
+    var current = Math.round(stepCount * (percentList[0] / 100));
+    var stepPtg = 100 / stepCount;
+    var stackPtg = 0;
+    return new Array(stepCount).fill(null).map(function (_, index) {
+      var color = index <= current - 1 ? strokeColorList[0] : trailColor;
+      var stroke = color && _typeof(color) === 'object' ? "url(#".concat(gradientId, ")") : undefined;
+      var circleStyleForStack = getCircleStyle(perimeter, perimeterWithoutGap, stackPtg, stepPtg, rotateDeg, gapDegree, gapPosition, color, 'butt', strokeWidth, stepSpace);
+      stackPtg += (perimeterWithoutGap - circleStyleForStack.strokeDashoffset + stepSpace) * 100 / perimeterWithoutGap;
+      return /*#__PURE__*/React.createElement("circle", {
+        key: index,
+        className: "".concat(prefixCls, "-circle-path"),
+        r: radius,
+        cx: VIEW_BOX_SIZE / 2,
+        cy: VIEW_BOX_SIZE / 2,
+        stroke: stroke // strokeLinecap={strokeLinecap}
+        ,
+        strokeWidth: strokeWidth,
+        opacity: 1,
+        style: circleStyleForStack,
+        ref: function ref(elem) {
+          paths[index] = elem;
+        }
+      });
+    });
+  };
+
   return /*#__PURE__*/React.createElement("svg", _extends({
@@ -139,3 +174,3 @@ className: classNames("".concat(prefixCls, "-circle"), className),
     });
-  }))), /*#__PURE__*/React.createElement("circle", {
+  }))), !stepCount && /*#__PURE__*/React.createElement("circle", {
     className: "".concat(prefixCls, "-circle-trail"),
@@ -149,3 +184,3 @@ r: radius,
     style: circleStyle
-  }), getStokeList());
+  }), stepCount ? getStepStokeList() : getStokeList());
 };
@@ -152,0 +187,0 @@

es/interface.d.ts

@@ -17,2 +17,6 @@ /// <reference types="react" />
     onClick?: React.MouseEventHandler;
+    steps?: number | {
+        count: number;
+        space: number;
+    };
 }
@@ -19,0 +23,0 @@ export declare type BaseStrokeColorType = string | Record<string, string>;

lib/Circle.js

@@ -26,3 +26,3 @@ "use strict";
 
-var _excluded = ["id", "prefixCls", "strokeWidth", "trailWidth", "gapDegree", "gapPosition", "trailColor", "strokeLinecap", "style", "className", "strokeColor", "percent"];
+var _excluded = ["id", "prefixCls", "steps", "strokeWidth", "trailWidth", "gapDegree", "gapPosition", "trailColor", "strokeLinecap", "style", "className", "strokeColor", "percent"];
 
@@ -40,10 +40,4 @@ function stripPercentToNumber(percent) {
 
-var getCircleStyle = function getCircleStyle(radius, offset, percent, strokeColor) {
-  var gapDegree = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
-  var gapPosition = arguments.length > 5 ? arguments[5] : undefined;
-  var strokeLinecap = arguments.length > 6 ? arguments[6] : undefined;
-  var strokeWidth = arguments.length > 7 ? arguments[7] : undefined;
-  var rotateDeg = gapDegree > 0 ? 90 + gapDegree / 2 : -90;
-  var perimeter = Math.PI * 2 * radius;
-  var perimeterWithoutGap = perimeter * ((360 - gapDegree) / 360);
+var getCircleStyle = function getCircleStyle(perimeter, perimeterWithoutGap, offset, percent, rotateDeg, gapDegree, gapPosition, strokeColor, strokeLinecap, strokeWidth) {
+  var stepSpace = arguments.length > 10 && arguments[10] !== undefined ? arguments[10] : 0;
   var offsetDeg = offset / 100 * 360 * ((360 - gapDegree) / 360);
@@ -60,3 +54,3 @@ var positionDeg = gapDegree === 0 ? 0 : {
   if (strokeLinecap === 'round' && percent !== 100) {
-    strokeDashoffset += strokeWidth / 2; // when percent is small enough (<= 1%), keep smallest value to avoid it's disapperance
+    strokeDashoffset += strokeWidth / 2; // when percent is small enough (<= 1%), keep smallest value to avoid it's disappearance
 
@@ -71,3 +65,3 @@ if (strokeDashoffset >= perimeterWithoutGap) {
     strokeDasharray: "".concat(perimeterWithoutGap, "px ").concat(perimeter),
-    strokeDashoffset: strokeDashoffset,
+    strokeDashoffset: strokeDashoffset + stepSpace,
     transform: "rotate(".concat(rotateDeg + offsetDeg + positionDeg, "deg)"),
@@ -83,5 +77,7 @@ transformOrigin: '50% 50%',
       prefixCls = _ref.prefixCls,
+      steps = _ref.steps,
       strokeWidth = _ref.strokeWidth,
       trailWidth = _ref.trailWidth,
-      gapDegree = _ref.gapDegree,
+      _ref$gapDegree = _ref.gapDegree,
+      gapDegree = _ref$gapDegree === void 0 ? 0 : _ref$gapDegree,
       gapPosition = _ref.gapPosition,
@@ -98,3 +94,14 @@ trailColor = _ref.trailColor,
   var radius = VIEW_BOX_SIZE / 2 - strokeWidth / 2;
-  var circleStyle = getCircleStyle(radius, 0, 100, trailColor, gapDegree, gapPosition, strokeLinecap, strokeWidth);
+  var perimeter = Math.PI * 2 * radius;
+  var rotateDeg = gapDegree > 0 ? 90 + gapDegree / 2 : -90;
+  var perimeterWithoutGap = perimeter * ((360 - gapDegree) / 360);
+
+  var _ref2 = (0, _typeof2.default)(steps) === 'object' ? steps : {
+    count: steps,
+    space: 2
+  },
+      stepCount = _ref2.count,
+      stepSpace = _ref2.space;
+
+  var circleStyle = getCircleStyle(perimeter, perimeterWithoutGap, 0, 100, rotateDeg, gapDegree, gapPosition, trailColor, strokeLinecap, strokeWidth);
   var percentList = toArray(percent);
@@ -112,3 +119,3 @@ var strokeColorList = toArray(strokeColor);
       var stroke = color && (0, _typeof2.default)(color) === 'object' ? "url(#".concat(gradientId, ")") : undefined;
-      var circleStyleForStack = getCircleStyle(radius, stackPtg, ptg, color, gapDegree, gapPosition, strokeLinecap, strokeWidth);
+      var circleStyleForStack = getCircleStyle(perimeter, perimeterWithoutGap, stackPtg, ptg, rotateDeg, gapDegree, gapPosition, color, strokeLinecap, strokeWidth);
       stackPtg += ptg;
@@ -137,2 +144,30 @@ return /*#__PURE__*/React.createElement("circle", {
 
+  var getStepStokeList = function getStepStokeList() {
+    // only show the first percent when pass steps
+    var current = Math.round(stepCount * (percentList[0] / 100));
+    var stepPtg = 100 / stepCount;
+    var stackPtg = 0;
+    return new Array(stepCount).fill(null).map(function (_, index) {
+      var color = index <= current - 1 ? strokeColorList[0] : trailColor;
+      var stroke = color && (0, _typeof2.default)(color) === 'object' ? "url(#".concat(gradientId, ")") : undefined;
+      var circleStyleForStack = getCircleStyle(perimeter, perimeterWithoutGap, stackPtg, stepPtg, rotateDeg, gapDegree, gapPosition, color, 'butt', strokeWidth, stepSpace);
+      stackPtg += (perimeterWithoutGap - circleStyleForStack.strokeDashoffset + stepSpace) * 100 / perimeterWithoutGap;
+      return /*#__PURE__*/React.createElement("circle", {
+        key: index,
+        className: "".concat(prefixCls, "-circle-path"),
+        r: radius,
+        cx: VIEW_BOX_SIZE / 2,
+        cy: VIEW_BOX_SIZE / 2,
+        stroke: stroke // strokeLinecap={strokeLinecap}
+        ,
+        strokeWidth: strokeWidth,
+        opacity: 1,
+        style: circleStyleForStack,
+        ref: function ref(elem) {
+          paths[index] = elem;
+        }
+      });
+    });
+  };
+
   return /*#__PURE__*/React.createElement("svg", (0, _extends2.default)({
@@ -157,3 +192,3 @@ className: (0, _classnames.default)("".concat(prefixCls, "-circle"), className),
     });
-  }))), /*#__PURE__*/React.createElement("circle", {
+  }))), !stepCount && /*#__PURE__*/React.createElement("circle", {
     className: "".concat(prefixCls, "-circle-trail"),
@@ -167,3 +202,3 @@ r: radius,
     style: circleStyle
-  }), getStokeList());
+  }), stepCount ? getStepStokeList() : getStokeList());
 };
@@ -170,0 +205,0 @@

lib/interface.d.ts

@@ -17,2 +17,6 @@ /// <reference types="react" />
     onClick?: React.MouseEventHandler;
+    steps?: number | {
+        count: number;
+        space: number;
+    };
 }
@@ -19,0 +23,0 @@ export declare type BaseStrokeColorType = string | Record<string, string>;

package.json

 {
   "name": "rc-progress",
-  "version": "3.3.3",
+  "version": "3.4.0",
   "description": "progress ui component for react",
@@ -5,0 +5,0 @@ "keywords": [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

40097

increased by8.67%

Lines of code

781

increased by10.16%

No dependency changes