rc-progress - npm Package Compare versions

Comparing version 3.5.0 to 3.5.1

es/Circle/index.js

@@ -10,5 +10,4 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import useId from '../hooks/useId';
-import ColorGradient from './ColorGradient';
 import PtgCircle from './PtgCircle';
-import { VIEW_BOX_SIZE, getCircleStyle, isConicColor } from './util';
+import { VIEW_BOX_SIZE, getCircleStyle } from './util';
 function toArray(value) {
@@ -53,3 +52,3 @@ var mergedValue = value !== null && value !== void 0 ? value : [];
   });
-  var isConicGradient = isConicColor(gradient);
+  var isConicGradient = gradient && _typeof(gradient) === 'object';
   var mergedStrokeLinecap = isConicGradient ? 'butt' : strokeLinecap;
@@ -74,3 +73,2 @@ var circleStyle = getCircleStyle(perimeter, perimeterWithoutGap, 0, 100, rotateDeg, gapDegree, gapPosition, trailColor, mergedStrokeLinecap, strokeWidth);
         strokeWidth: strokeWidth,
-        conic: isConicGradient,
         gapDegree: gapDegree,
@@ -120,6 +118,3 @@ ref: function ref(elem) {
     role: "presentation"
-  }, restProps), gradient && !isConicGradient && /*#__PURE__*/React.createElement(ColorGradient, {
-    gradientId: gradientId,
-    gradient: gradient
-  }), !stepCount && /*#__PURE__*/React.createElement("circle", {
+  }, restProps), !stepCount && /*#__PURE__*/React.createElement("circle", {
     className: "".concat(prefixCls, "-circle-trail"),
@@ -126,0 +121,0 @@ r: radius,

es/Circle/PtgCircle.d.ts

 import * as React from 'react';
 import type { ProgressProps } from '..';
-import type { StrokeColorType } from '../interface';
+import type { StrokeColorObject } from '../interface';
 export interface ColorGradientProps {
@@ -13,4 +13,3 @@ prefixCls: string;
     size: number;
-    color: StrokeColorType;
-    conic: boolean;
+    color: string | StrokeColorObject;
     gapDegree: number;
@@ -17,0 +16,0 @@ }

es/Circle/PtgCircle.js

 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import * as React from 'react';
+var Block = function Block(_ref) {
+  var bg = _ref.bg,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: '100%',
+      height: '100%',
+      background: bg
+    }
+  }, children);
+};
+function getPtgColors(color, scale) {
+  return Object.keys(color).map(function (key) {
+    var parsedKey = parseFloat(key);
+    var ptgKey = "".concat(Math.floor(parsedKey * scale), "%");
+    return "".concat(color[key], " ").concat(ptgKey);
+  });
+}
 var PtgCircle = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -13,11 +31,5 @@ var prefixCls = props.prefixCls,
     size = props.size,
-    conic = props.conic,
     gapDegree = props.gapDegree;
   var isGradient = color && _typeof(color) === 'object';
-  var stroke = React.useMemo(function () {
-    if (conic) {
-      return '#FFF';
-    }
-    return isGradient ? "url(#".concat(gradientId, ")") : undefined;
-  }, [gradientId, isGradient, conic]);
+  var stroke = isGradient ? "#FFF" : undefined;
   // ========================== Circle ==========================
@@ -38,16 +50,11 @@ var halfSize = size / 2;
   // ========================== Render ==========================
-  if (!conic) {
+  if (!isGradient) {
     return circleNode;
   }
   var maskId = "".concat(gradientId, "-conic");
-  var conicColorKeys = Object.keys(color).filter(function (key) {
-    return key !== 'conic';
-  });
   var fromDeg = gapDegree ? "".concat(180 + gapDegree / 2, "deg") : '0deg';
-  var conicColors = conicColorKeys.map(function (key) {
-    var parsedKey = parseFloat(key);
-    var ptgKey = "".concat(gapDegree ? Math.floor(parsedKey * (360 - gapDegree) / 360) : parsedKey, "%");
-    return "".concat(color[key], " ").concat(ptgKey);
-  });
+  var conicColors = getPtgColors(color, (360 - gapDegree) / 360);
+  var linearColors = getPtgColors(color, 1);
   var conicColorBg = "conic-gradient(from ".concat(fromDeg, ", ").concat(conicColors.join(', '), ")");
+  var linearColorBg = "linear-gradient(to ".concat(gapDegree ? 'bottom' : 'top', ", ").concat(linearColors.join(', '), ")");
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("mask", {
@@ -61,9 +68,7 @@ id: maskId
     mask: "url(#".concat(maskId, ")")
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      width: '100%',
-      height: '100%',
-      background: conicColorBg
-    }
-  })));
+  }, /*#__PURE__*/React.createElement(Block, {
+    bg: linearColorBg
+  }, /*#__PURE__*/React.createElement(Block, {
+    bg: conicColorBg
+  }))));
 });
@@ -70,0 +75,0 @@ if (process.env.NODE_ENV !== 'production') {

es/Circle/util.d.ts

@@ -1,5 +0,4 @@
-import type { StrokeColorObject, StrokeColorType } from '../interface';
+import type { StrokeColorType } from '../interface';
 import type { ProgressProps } from '..';
 export declare const VIEW_BOX_SIZE = 100;
-export declare function isConicColor(gradient: StrokeColorObject): boolean;
 export declare const getCircleStyle: (perimeter: number, perimeterWithoutGap: number, offset: number, percent: number, rotateDeg: number, gapDegree: any, gapPosition: ProgressProps['gapPosition'] | undefined, strokeColor: StrokeColorType, strokeLinecap: ProgressProps['strokeLinecap'], strokeWidth: any, stepSpace?: number) => {
@@ -6,0 +5,0 @@ stroke: string;

es/Circle/util.js

 export var VIEW_BOX_SIZE = 100;
-export function isConicColor(gradient) {
-  return gradient && gradient.conic;
-}
 export var getCircleStyle = function getCircleStyle(perimeter, perimeterWithoutGap, offset, percent, rotateDeg, gapDegree, gapPosition, strokeColor, strokeLinecap, strokeWidth) {
@@ -6,0 +3,0 @@ var stepSpace = arguments.length > 10 && arguments[10] !== undefined ? arguments[10] : 0;

es/interface.d.ts

@@ -22,5 +22,3 @@ /// <reference types="react" />
 }
-export type StrokeColorObject = Partial<Record<`${number}%` | 'from' | 'to', string>> & {
-    conic?: boolean;
-};
+export type StrokeColorObject = Record<string, string>;
 export type BaseStrokeColorType = string | StrokeColorObject;
@@ -27,0 +25,0 @@ export type StrokeColorType = BaseStrokeColorType | BaseStrokeColorType[];

lib/Circle/index.js

@@ -17,3 +17,2 @@ "use strict";
 var _useId = _interopRequireDefault(require("../hooks/useId"));
-var _ColorGradient = _interopRequireDefault(require("./ColorGradient"));
 var _PtgCircle = _interopRequireDefault(require("./PtgCircle"));
@@ -63,3 +62,3 @@ var _util = require("./util");
   });
-  var isConicGradient = (0, _util.isConicColor)(gradient);
+  var isConicGradient = gradient && (0, _typeof2.default)(gradient) === 'object';
   var mergedStrokeLinecap = isConicGradient ? 'butt' : strokeLinecap;
@@ -84,3 +83,2 @@ var circleStyle = (0, _util.getCircleStyle)(perimeter, perimeterWithoutGap, 0, 100, rotateDeg, gapDegree, gapPosition, trailColor, mergedStrokeLinecap, strokeWidth);
         strokeWidth: strokeWidth,
-        conic: isConicGradient,
         gapDegree: gapDegree,
@@ -130,6 +128,3 @@ ref: function ref(elem) {
     role: "presentation"
-  }, restProps), gradient && !isConicGradient && /*#__PURE__*/React.createElement(_ColorGradient.default, {
-    gradientId: gradientId,
-    gradient: gradient
-  }), !stepCount && /*#__PURE__*/React.createElement("circle", {
+  }, restProps), !stepCount && /*#__PURE__*/React.createElement("circle", {
     className: "".concat(prefixCls, "-circle-trail"),
@@ -136,0 +131,0 @@ r: radius,

lib/Circle/PtgCircle.d.ts

 import * as React from 'react';
 import type { ProgressProps } from '..';
-import type { StrokeColorType } from '../interface';
+import type { StrokeColorObject } from '../interface';
 export interface ColorGradientProps {
@@ -13,4 +13,3 @@ prefixCls: string;
     size: number;
-    color: StrokeColorType;
-    conic: boolean;
+    color: string | StrokeColorObject;
     gapDegree: number;
@@ -17,0 +16,0 @@ }

lib/Circle/PtgCircle.js

@@ -13,2 +13,20 @@ "use strict";
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var Block = function Block(_ref) {
+  var bg = _ref.bg,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: '100%',
+      height: '100%',
+      background: bg
+    }
+  }, children);
+};
+function getPtgColors(color, scale) {
+  return Object.keys(color).map(function (key) {
+    var parsedKey = parseFloat(key);
+    var ptgKey = "".concat(Math.floor(parsedKey * scale), "%");
+    return "".concat(color[key], " ").concat(ptgKey);
+  });
+}
 var PtgCircle = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -24,11 +42,5 @@ var prefixCls = props.prefixCls,
     size = props.size,
-    conic = props.conic,
     gapDegree = props.gapDegree;
   var isGradient = color && (0, _typeof2.default)(color) === 'object';
-  var stroke = React.useMemo(function () {
-    if (conic) {
-      return '#FFF';
-    }
-    return isGradient ? "url(#".concat(gradientId, ")") : undefined;
-  }, [gradientId, isGradient, conic]);
+  var stroke = isGradient ? "#FFF" : undefined;
   // ========================== Circle ==========================
@@ -49,16 +61,11 @@ var halfSize = size / 2;
   // ========================== Render ==========================
-  if (!conic) {
+  if (!isGradient) {
     return circleNode;
   }
   var maskId = "".concat(gradientId, "-conic");
-  var conicColorKeys = Object.keys(color).filter(function (key) {
-    return key !== 'conic';
-  });
   var fromDeg = gapDegree ? "".concat(180 + gapDegree / 2, "deg") : '0deg';
-  var conicColors = conicColorKeys.map(function (key) {
-    var parsedKey = parseFloat(key);
-    var ptgKey = "".concat(gapDegree ? Math.floor(parsedKey * (360 - gapDegree) / 360) : parsedKey, "%");
-    return "".concat(color[key], " ").concat(ptgKey);
-  });
+  var conicColors = getPtgColors(color, (360 - gapDegree) / 360);
+  var linearColors = getPtgColors(color, 1);
   var conicColorBg = "conic-gradient(from ".concat(fromDeg, ", ").concat(conicColors.join(', '), ")");
+  var linearColorBg = "linear-gradient(to ".concat(gapDegree ? 'bottom' : 'top', ", ").concat(linearColors.join(', '), ")");
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("mask", {
@@ -72,9 +79,7 @@ id: maskId
     mask: "url(#".concat(maskId, ")")
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      width: '100%',
-      height: '100%',
-      background: conicColorBg
-    }
-  })));
+  }, /*#__PURE__*/React.createElement(Block, {
+    bg: linearColorBg
+  }, /*#__PURE__*/React.createElement(Block, {
+    bg: conicColorBg
+  }))));
 });
@@ -81,0 +86,0 @@ if (process.env.NODE_ENV !== 'production') {

lib/Circle/util.d.ts

@@ -1,5 +0,4 @@
-import type { StrokeColorObject, StrokeColorType } from '../interface';
+import type { StrokeColorType } from '../interface';
 import type { ProgressProps } from '..';
 export declare const VIEW_BOX_SIZE = 100;
-export declare function isConicColor(gradient: StrokeColorObject): boolean;
 export declare const getCircleStyle: (perimeter: number, perimeterWithoutGap: number, offset: number, percent: number, rotateDeg: number, gapDegree: any, gapPosition: ProgressProps['gapPosition'] | undefined, strokeColor: StrokeColorType, strokeLinecap: ProgressProps['strokeLinecap'], strokeWidth: any, stepSpace?: number) => {
@@ -6,0 +5,0 @@ stroke: string;

lib/Circle/util.js

@@ -7,8 +7,4 @@ "use strict";
 exports.getCircleStyle = exports.VIEW_BOX_SIZE = void 0;
-exports.isConicColor = isConicColor;
 var VIEW_BOX_SIZE = 100;
 exports.VIEW_BOX_SIZE = VIEW_BOX_SIZE;
-function isConicColor(gradient) {
-  return gradient && gradient.conic;
-}
 var getCircleStyle = function getCircleStyle(perimeter, perimeterWithoutGap, offset, percent, rotateDeg, gapDegree, gapPosition, strokeColor, strokeLinecap, strokeWidth) {
@@ -15,0 +11,0 @@ var stepSpace = arguments.length > 10 && arguments[10] !== undefined ? arguments[10] : 0;

lib/interface.d.ts

@@ -22,5 +22,3 @@ /// <reference types="react" />
 }
-export type StrokeColorObject = Partial<Record<`${number}%` | 'from' | 'to', string>> & {
-    conic?: boolean;
-};
+export type StrokeColorObject = Record<string, string>;
 export type BaseStrokeColorType = string | StrokeColorObject;
@@ -27,0 +25,0 @@ export type StrokeColorType = BaseStrokeColorType | BaseStrokeColorType[];

package.json

 {
   "name": "rc-progress",
-  "version": "3.5.0",
+  "version": "3.5.1",
   "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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

53688

decreased by-6.46%

Number of package files

35

decreased by-10.26%

Lines of code

1016

decreased by-7.47%

No dependency changes