rc-progress - npm Package Compare versions

Comparing version 3.2.4 to 3.3.0

es/Circle.js

@@ -20,48 +20,40 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 
-function getPathStyles(offset, percent, strokeColor, strokeWidth) {
+var VIEW_BOX_SIZE = 100;
+
+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 radius = 50 - strokeWidth / 2;
-  var beginPositionX = 0;
-  var beginPositionY = -radius;
-  var endPositionX = 0;
-  var endPositionY = -2 * radius;
+  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 offsetDeg = offset / 100 * 360 * ((360 - gapDegree) / 360);
+  var positionDeg = {
+    bottom: 0,
+    top: 180,
+    left: 90,
+    right: -90
+  }[gapPosition];
+  var strokeDashoffset = (100 - percent) / 100 * perimeterWithoutGap; // Fix percent accuracy when strokeLinecap is round
+  // https://github.com/ant-design/ant-design/issues/35009
 
-  switch (gapPosition) {
-    case 'left':
-      beginPositionX = -radius;
-      beginPositionY = 0;
-      endPositionX = 2 * radius;
-      endPositionY = 0;
-      break;
+  if (strokeLinecap === 'round' && percent !== 100) {
+    strokeDashoffset += strokeWidth / 2; // when percent is small enough (<= 1%), keep smallest value to avoid it's disapperance
 
-    case 'right':
-      beginPositionX = radius;
-      beginPositionY = 0;
-      endPositionX = -2 * radius;
-      endPositionY = 0;
-      break;
-
-    case 'bottom':
-      beginPositionY = radius;
-      endPositionY = 2 * radius;
-      break;
-
-    default:
+    if (strokeDashoffset >= perimeterWithoutGap) {
+      strokeDashoffset = perimeterWithoutGap - 0.01;
+    }
   }
 
-  var pathString = "M 50,50 m ".concat(beginPositionX, ",").concat(beginPositionY, "\n   a ").concat(radius, ",").concat(radius, " 0 1 1 ").concat(endPositionX, ",").concat(-endPositionY, "\n   a ").concat(radius, ",").concat(radius, " 0 1 1 ").concat(-endPositionX, ",").concat(endPositionY);
-  var len = Math.PI * 2 * radius;
-  var pathStyle = {
+  return {
     stroke: typeof strokeColor === 'string' ? strokeColor : undefined,
-    strokeDasharray: "".concat(percent / 100 * (len - gapDegree), "px ").concat(len, "px"),
-    strokeDashoffset: "-".concat(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, opacity .3s ease 0s' // eslint-disable-line
-
+    strokeDasharray: "".concat(perimeterWithoutGap, "px ").concat(perimeter),
+    strokeDashoffset: strokeDashoffset,
+    transform: "rotate(".concat(rotateDeg + offsetDeg + positionDeg, "deg)"),
+    transformOrigin: '50% 50%',
+    transition: 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s',
+    fillOpacity: 0
   };
-  return {
-    pathString: pathString,
-    pathStyle: pathStyle
-  };
-}
+};
 
@@ -85,7 +77,4 @@ var Circle = function Circle(_ref) {
   var gradientId = "".concat(mergedId, "-gradient");
-
-  var _getPathStyles = getPathStyles(0, 100, trailColor, strokeWidth, gapDegree, gapPosition),
-      pathString = _getPathStyles.pathString,
-      pathStyle = _getPathStyles.pathStyle;
-
+  var radius = VIEW_BOX_SIZE / 2 - strokeWidth / 2;
+  var circleStyle = getCircleStyle(radius, 0, 100, trailColor, gapDegree, gapPosition, strokeLinecap, strokeWidth);
   var percentList = toArray(percent);
@@ -105,9 +94,11 @@ var strokeColorList = toArray(strokeColor);
       var color = strokeColorList[index] || strokeColorList[strokeColorList.length - 1];
-      var stroke = color && _typeof(color) === 'object' ? "url(#".concat(gradientId, ")") : '';
-      var pathStyles = getPathStyles(stackPtg, ptg, color, strokeWidth, gapDegree, gapPosition);
+      var stroke = color && _typeof(color) === 'object' ? "url(#".concat(gradientId, ")") : undefined;
+      var circleStyleForStack = getCircleStyle(radius, stackPtg, ptg, color, gapDegree, gapPosition, strokeLinecap, strokeWidth);
       stackPtg += ptg;
-      return /*#__PURE__*/React.createElement("path", {
+      return /*#__PURE__*/React.createElement("circle", {
         key: index,
         className: "".concat(prefixCls, "-circle-path"),
-        d: pathStyles.pathString,
+        r: radius,
+        cx: VIEW_BOX_SIZE / 2,
+        cy: VIEW_BOX_SIZE / 2,
         stroke: stroke,
@@ -117,7 +108,6 @@ strokeLinecap: strokeLinecap,
         opacity: ptg === 0 ? 0 : 1,
-        fillOpacity: "0",
-        style: pathStyles.pathStyle,
+        style: circleStyleForStack,
         ref: paths[index]
       });
-    });
+    }).reverse();
   };
@@ -127,3 +117,3 @@
     className: classNames("".concat(prefixCls, "-circle"), className),
-    viewBox: "0 0 100 100",
+    viewBox: "0 0 ".concat(VIEW_BOX_SIZE, " ").concat(VIEW_BOX_SIZE),
     style: style,
@@ -145,11 +135,12 @@ id: id
     });
-  }))), /*#__PURE__*/React.createElement("path", {
+  }))), /*#__PURE__*/React.createElement("circle", {
     className: "".concat(prefixCls, "-circle-trail"),
-    d: pathString,
+    r: radius,
+    cx: VIEW_BOX_SIZE / 2,
+    cy: VIEW_BOX_SIZE / 2,
     stroke: trailColor,
     strokeLinecap: strokeLinecap,
     strokeWidth: trailWidth || strokeWidth,
-    fillOpacity: "0",
-    style: pathStyle
-  }), getStokeList().reverse());
+    style: circleStyle
+  }), getStokeList());
 };
@@ -156,0 +147,0 @@

es/common.d.ts

@@ -1,3 +0,3 @@
-import { ProgressProps } from './interface';
+import type { ProgressProps } from './interface';
 export declare const defaultProps: Partial<ProgressProps>;
 export declare const useTransitionDuration: (percentList: number[]) => import("react").MutableRefObject<undefined>[][];

es/common.js

@@ -11,3 +11,4 @@ import { useRef, useEffect } from 'react';
   trailColor: '#D9D9D9',
-  trailWidth: 1
+  trailWidth: 1,
+  gapPosition: 'bottom'
 };
@@ -14,0 +15,0 @@ export var useTransitionDuration = function useTransitionDuration(percentList) {

es/index.d.ts

 import Line from './Line';
 import Circle from './Circle';
-import { ProgressProps } from './interface';
-export { Line, Circle, ProgressProps };
+export type { ProgressProps } from './interface';
+export { Line, Circle };
 declare const _default: {
-    Line: import("react").FC<ProgressProps>;
-    Circle: import("react").FC<ProgressProps>;
+    Line: import("react").FC<import("./interface").ProgressProps>;
+    Circle: import("react").FC<import("./interface").ProgressProps>;
 };
 export default _default;

es/Line.d.ts

 import * as React from 'react';
-import { ProgressProps } from './interface';
+import type { ProgressProps } from './interface';
 declare const Line: React.FC<ProgressProps>;
 export default Line;

lib/Circle.js

@@ -39,48 +39,40 @@ "use strict";
 
-function getPathStyles(offset, percent, strokeColor, strokeWidth) {
+var VIEW_BOX_SIZE = 100;
+
+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 radius = 50 - strokeWidth / 2;
-  var beginPositionX = 0;
-  var beginPositionY = -radius;
-  var endPositionX = 0;
-  var endPositionY = -2 * radius;
+  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 offsetDeg = offset / 100 * 360 * ((360 - gapDegree) / 360);
+  var positionDeg = {
+    bottom: 0,
+    top: 180,
+    left: 90,
+    right: -90
+  }[gapPosition];
+  var strokeDashoffset = (100 - percent) / 100 * perimeterWithoutGap; // Fix percent accuracy when strokeLinecap is round
+  // https://github.com/ant-design/ant-design/issues/35009
 
-  switch (gapPosition) {
-    case 'left':
-      beginPositionX = -radius;
-      beginPositionY = 0;
-      endPositionX = 2 * radius;
-      endPositionY = 0;
-      break;
+  if (strokeLinecap === 'round' && percent !== 100) {
+    strokeDashoffset += strokeWidth / 2; // when percent is small enough (<= 1%), keep smallest value to avoid it's disapperance
 
-    case 'right':
-      beginPositionX = radius;
-      beginPositionY = 0;
-      endPositionX = -2 * radius;
-      endPositionY = 0;
-      break;
-
-    case 'bottom':
-      beginPositionY = radius;
-      endPositionY = 2 * radius;
-      break;
-
-    default:
+    if (strokeDashoffset >= perimeterWithoutGap) {
+      strokeDashoffset = perimeterWithoutGap - 0.01;
+    }
   }
 
-  var pathString = "M 50,50 m ".concat(beginPositionX, ",").concat(beginPositionY, "\n   a ").concat(radius, ",").concat(radius, " 0 1 1 ").concat(endPositionX, ",").concat(-endPositionY, "\n   a ").concat(radius, ",").concat(radius, " 0 1 1 ").concat(-endPositionX, ",").concat(endPositionY);
-  var len = Math.PI * 2 * radius;
-  var pathStyle = {
+  return {
     stroke: typeof strokeColor === 'string' ? strokeColor : undefined,
-    strokeDasharray: "".concat(percent / 100 * (len - gapDegree), "px ").concat(len, "px"),
-    strokeDashoffset: "-".concat(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, opacity .3s ease 0s' // eslint-disable-line
-
+    strokeDasharray: "".concat(perimeterWithoutGap, "px ").concat(perimeter),
+    strokeDashoffset: strokeDashoffset,
+    transform: "rotate(".concat(rotateDeg + offsetDeg + positionDeg, "deg)"),
+    transformOrigin: '50% 50%',
+    transition: 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s',
+    fillOpacity: 0
   };
-  return {
-    pathString: pathString,
-    pathStyle: pathStyle
-  };
-}
+};
 
@@ -103,7 +95,4 @@ var Circle = function Circle(_ref) {
   var gradientId = "".concat(mergedId, "-gradient");
-
-  var _getPathStyles = getPathStyles(0, 100, trailColor, strokeWidth, gapDegree, gapPosition),
-      pathString = _getPathStyles.pathString,
-      pathStyle = _getPathStyles.pathStyle;
-
+  var radius = VIEW_BOX_SIZE / 2 - strokeWidth / 2;
+  var circleStyle = getCircleStyle(radius, 0, 100, trailColor, gapDegree, gapPosition, strokeLinecap, strokeWidth);
   var percentList = toArray(percent);
@@ -123,9 +112,11 @@ var strokeColorList = toArray(strokeColor);
       var color = strokeColorList[index] || strokeColorList[strokeColorList.length - 1];
-      var stroke = color && (0, _typeof2.default)(color) === 'object' ? "url(#".concat(gradientId, ")") : '';
-      var pathStyles = getPathStyles(stackPtg, ptg, color, strokeWidth, gapDegree, gapPosition);
+      var stroke = color && (0, _typeof2.default)(color) === 'object' ? "url(#".concat(gradientId, ")") : undefined;
+      var circleStyleForStack = getCircleStyle(radius, stackPtg, ptg, color, gapDegree, gapPosition, strokeLinecap, strokeWidth);
       stackPtg += ptg;
-      return /*#__PURE__*/React.createElement("path", {
+      return /*#__PURE__*/React.createElement("circle", {
         key: index,
         className: "".concat(prefixCls, "-circle-path"),
-        d: pathStyles.pathString,
+        r: radius,
+        cx: VIEW_BOX_SIZE / 2,
+        cy: VIEW_BOX_SIZE / 2,
         stroke: stroke,
@@ -135,7 +126,6 @@ strokeLinecap: strokeLinecap,
         opacity: ptg === 0 ? 0 : 1,
-        fillOpacity: "0",
-        style: pathStyles.pathStyle,
+        style: circleStyleForStack,
         ref: paths[index]
       });
-    });
+    }).reverse();
   };
@@ -145,3 +135,3 @@
     className: (0, _classnames.default)("".concat(prefixCls, "-circle"), className),
-    viewBox: "0 0 100 100",
+    viewBox: "0 0 ".concat(VIEW_BOX_SIZE, " ").concat(VIEW_BOX_SIZE),
     style: style,
@@ -163,11 +153,12 @@ id: id
     });
-  }))), /*#__PURE__*/React.createElement("path", {
+  }))), /*#__PURE__*/React.createElement("circle", {
     className: "".concat(prefixCls, "-circle-trail"),
-    d: pathString,
+    r: radius,
+    cx: VIEW_BOX_SIZE / 2,
+    cy: VIEW_BOX_SIZE / 2,
     stroke: trailColor,
     strokeLinecap: strokeLinecap,
     strokeWidth: trailWidth || strokeWidth,
-    fillOpacity: "0",
-    style: pathStyle
-  }), getStokeList().reverse());
+    style: circleStyle
+  }), getStokeList());
 };
@@ -174,0 +165,0 @@

lib/common.d.ts

@@ -1,3 +0,3 @@
-import { ProgressProps } from './interface';
+import type { ProgressProps } from './interface';
 export declare const defaultProps: Partial<ProgressProps>;
 export declare const useTransitionDuration: (percentList: number[]) => import("react").MutableRefObject<undefined>[][];

lib/common.js

@@ -19,3 +19,4 @@ "use strict";
   trailColor: '#D9D9D9',
-  trailWidth: 1
+  trailWidth: 1,
+  gapPosition: 'bottom'
 };
@@ -22,0 +23,0 @@ exports.defaultProps = defaultProps;

lib/index.d.ts

 import Line from './Line';
 import Circle from './Circle';
-import { ProgressProps } from './interface';
-export { Line, Circle, ProgressProps };
+export type { ProgressProps } from './interface';
+export { Line, Circle };
 declare const _default: {
-    Line: import("react").FC<ProgressProps>;
-    Circle: import("react").FC<ProgressProps>;
+    Line: import("react").FC<import("./interface").ProgressProps>;
+    Circle: import("react").FC<import("./interface").ProgressProps>;
 };
 export default _default;

lib/Line.d.ts

 import * as React from 'react';
-import { ProgressProps } from './interface';
+import type { ProgressProps } from './interface';
 declare const Line: React.FC<ProgressProps>;
 export default Line;

package.json

 {
   "name": "rc-progress",
-  "version": "3.2.4",
+  "version": "3.3.0",
   "description": "progress ui component for react",
@@ -36,2 +36,3 @@ "keywords": [
     "test": "father test",
+    "tsc": "tsc --noEmit",
     "coverage": "father test --coverage",
@@ -51,6 +52,7 @@ "now-build": "npm run docs:build"
     "@types/classnames": "^2.2.9",
-    "@types/jest": "^26.0.0",
-    "@types/react": "^16.9.2",
-    "@types/react-dom": "^16.9.0",
+    "@types/jest": "^27.5.0",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.3",
     "@umijs/fabric": "^2.0.0",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
     "cross-env": "^7.0.0",
@@ -61,11 +63,11 @@ "dumi": "^1.1.0",
     "enzyme-to-json": "^3.1.2",
-    "eslint": "^7.6.0",
+    "eslint": "^7.1.0",
     "father": "^2.29.6",
-    "glob": "^7.1.6",
+    "glob": "^8.0.1",
     "np": "^7.2.0",
     "prettier": "^2.1.1",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "typescript": "^4.0.2"
   }
 }

README.md

@@ -47,4 +47,4 @@ # rc-progress
   <>
-     <Line percent="10" strokeWidth="4" strokeColor="#D3D3D3" />
-     <Circle percent="10" strokeWidth="4" strokeColor="#D3D3D3" /> 
+     <Line percent={10} strokeWidth={4} strokeColor="#D3D3D3" />
+     <Circle percent={10} strokeWidth={4} strokeColor="#D3D3D3" /> 
   </>
@@ -51,0 +51,0 @@ );

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

36678

increased by1.5%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

19

increased by5.56%

Lines of code

705

decreased by-1.4%

No dependency changes