rc-progress - npm Package Compare versions

Comparing version 2.4.1 to 2.5.0

es/Circle.js

@@ -118,2 +118,3 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
       var strokeColorList = Array.isArray(strokeColor) ? strokeColor : [strokeColor];
+      var stroke = Object.prototype.toString.call(strokeColor) === '[object Object]' ? 'url(#gradient)' : '';
       var stackPtg = 0;
@@ -132,2 +133,3 @@ return percentList.map(function (ptg, index) {
           d: pathString,
+          stroke: stroke,
           strokeLinecap: strokeLinecap,
@@ -156,3 +158,4 @@ strokeWidth: ptg === 0 ? 0 : strokeWidth,
           className = _this$props2.className,
-          restProps = _objectWithoutProperties(_this$props2, ["prefixCls", "strokeWidth", "trailWidth", "gapDegree", "gapPosition", "trailColor", "strokeLinecap", "style", "className"]);
+          strokeColor = _this$props2.strokeColor,
+          restProps = _objectWithoutProperties(_this$props2, ["prefixCls", "strokeWidth", "trailWidth", "gapDegree", "gapPosition", "trailColor", "strokeLinecap", "style", "className", "strokeColor"]);
 
@@ -164,3 +167,3 @@ var _getPathStyles2 = getPathStyles(0, 100, trailColor, strokeWidth, gapDegree, gapPosition),
       delete restProps.percent;
-      delete restProps.strokeColor;
+      var isGradient = Object.prototype.toString.call(strokeColor) === '[object Object]';
       return React.createElement("svg", _extends({
@@ -170,3 +173,15 @@ className: "".concat(prefixCls, "-circle ").concat(className),
         style: style
-      }, restProps), React.createElement("path", {
+      }, restProps), isGradient && React.createElement("defs", null, React.createElement("linearGradient", {
+        id: "gradient",
+        x1: "100%",
+        y1: "0%",
+        x2: "0%",
+        y2: "0%"
+      }, Object.keys(strokeColor).map(function (key, index) {
+        return React.createElement("stop", {
+          key: index,
+          offset: key,
+          stopColor: strokeColor[key]
+        });
+      }))), React.createElement("path", {
         className: "".concat(prefixCls, "-circle-trail"),
@@ -173,0 +188,0 @@ d: pathString,

es/types.js

@@ -18,3 +18,3 @@ import PropTypes from 'prop-types';
   prefixCls: PropTypes.string,
-  strokeColor: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  strokeColor: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string), PropTypes.object]),
   strokeLinecap: PropTypes.oneOf(['butt', 'round', 'square']),
@@ -21,0 +21,0 @@ strokeWidth: mixedType,

HISTORY.md

@@ -5,11 +5,18 @@ # History
 
+## 2.5.0
+
+- Progress.Circle supports gradient color now. #73
+
+![](https://user-images.githubusercontent.com/8358236/60152506-576be480-9813-11e9-9d0e-451060dfdcb9.png)
+
 ## 2.4.0
 
 - publish TypeScript typings to the npm registry.
-- fixed progress order in percent list
+- fixed progress order in percent list.
 - Add `transition` prop.
 
 ## 2.3.0
-- `percentage` & `strokeColor` can now use array of value
 
+- `percentage` & `strokeColor` can now use array of value.
+
 ## 2.2.0
@@ -16,0 +23,0 @@ - when circle percent == 0, make stroke not visible

lib/Circle.js

@@ -131,2 +131,3 @@ "use strict";
       var strokeColorList = Array.isArray(strokeColor) ? strokeColor : [strokeColor];
+      var stroke = Object.prototype.toString.call(strokeColor) === '[object Object]' ? 'url(#gradient)' : '';
       var stackPtg = 0;
@@ -145,2 +146,3 @@ return percentList.map(function (ptg, index) {
           d: pathString,
+          stroke: stroke,
           strokeLinecap: strokeLinecap,
@@ -169,3 +171,4 @@ strokeWidth: ptg === 0 ? 0 : strokeWidth,
           className = _this$props2.className,
-          restProps = _objectWithoutProperties(_this$props2, ["prefixCls", "strokeWidth", "trailWidth", "gapDegree", "gapPosition", "trailColor", "strokeLinecap", "style", "className"]);
+          strokeColor = _this$props2.strokeColor,
+          restProps = _objectWithoutProperties(_this$props2, ["prefixCls", "strokeWidth", "trailWidth", "gapDegree", "gapPosition", "trailColor", "strokeLinecap", "style", "className", "strokeColor"]);
 
@@ -177,3 +180,3 @@ var _getPathStyles2 = getPathStyles(0, 100, trailColor, strokeWidth, gapDegree, gapPosition),
       delete restProps.percent;
-      delete restProps.strokeColor;
+      var isGradient = Object.prototype.toString.call(strokeColor) === '[object Object]';
       return _react["default"].createElement("svg", _extends({
@@ -183,3 +186,15 @@ className: "".concat(prefixCls, "-circle ").concat(className),
         style: style
-      }, restProps), _react["default"].createElement("path", {
+      }, restProps), isGradient && _react["default"].createElement("defs", null, _react["default"].createElement("linearGradient", {
+        id: "gradient",
+        x1: "100%",
+        y1: "0%",
+        x2: "0%",
+        y2: "0%"
+      }, Object.keys(strokeColor).map(function (key, index) {
+        return _react["default"].createElement("stop", {
+          key: index,
+          offset: key,
+          stopColor: strokeColor[key]
+        });
+      }))), _react["default"].createElement("path", {
         className: "".concat(prefixCls, "-circle-trail"),
@@ -186,0 +201,0 @@ d: pathString,

lib/types.js

@@ -31,3 +31,3 @@ "use strict";
   prefixCls: _propTypes["default"].string,
-  strokeColor: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].string)]),
+  strokeColor: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].string), _propTypes["default"].object]),
   strokeLinecap: _propTypes["default"].oneOf(['butt', 'round', 'square']),
@@ -34,0 +34,0 @@ strokeWidth: mixedType,

package.json

 {
   "name": "rc-progress",
-  "version": "2.4.1",
+  "version": "2.5.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

53068

increased by3.03%

Lines of code

775

increased by4.03%

No dependency changes