@rc-component/progress 1.0.0 → 1.0.2

package/README.md

@@ -83,16 +83,16 @@ export default () => (
       <td>Stroke color.</td>
     </tr>
     <tr>
-      <td>trailWidth</td>
+      <td>railWidth</td>
       <td>Number</td>
       <td>1</td>
-      <td>Width of the trail stroke. Unit is percentage of SVG canvas size. Trail is always centered relative to actual progress path. If trailWidth is not defined, it is the same as strokeWidth.</td>
+      <td>Width of the rail stroke. Unit is percentage of SVG canvas size. Rail is always centered relative to actual progress path. If railWidth is not defined, it is the same as strokeWidth.</td>
     </tr>
     <tr>
-      <td>trailColor</td>
+      <td>railColor</td>
       <td>String</td>
       <td>#D9D9D9</td>
-      <td>Color for lighter trail stroke underneath the actual progress path.</td>
+      <td>Color for lighter rail stroke underneath the actual progress path.</td>
     </tr>
     <tr>
       <td>strokeLinecap</td>

package/es/Circle/PtgCircle.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 const Block = ({
   bg,
   children
@@ -37,7 +37,7 @@ const PtgCircle = /*#__PURE__*/React.forwardRef((props, ref) => {
   // ========================== Circle ==========================
   const halfSize = size / 2;
   const circleNode = /*#__PURE__*/React.createElement("circle", {
-    className: classNames(`${prefixCls}-circle-path`, className),
+    className: clsx(`${prefixCls}-circle-path`, className),
     r: radius,
     cx: halfSize,
     cy: halfSize,

package/es/Circle/index.js

@@ -1,6 +1,6 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import * as React from 'react';
-import cls from 'classnames';
+import { clsx } from 'clsx';
 import { defaultProps, useTransitionDuration } from "../common";
 import useId from "@rc-component/util/es/hooks/useId";
 import PtgCircle from "./PtgCircle";
@@ -18,10 +18,10 @@ const Circle = props => {
     styles = {},
     steps,
     strokeWidth,
-    trailWidth,
+    railWidth,
     gapDegree = 0,
     gapPosition,
-    trailColor,
+    railColor,
     strokeLinecap,
     style,
     className,
@@ -59,7 +59,7 @@ const Circle = props => {
     id: mergedId,
     loading
   });
-  const circleStyle = getCircleStyle(perimeter, perimeterWithoutGap, 0, 100, rotateDeg, gapDegree, gapPosition, trailColor, mergedStrokeLinecap, strokeWidth);
+  const circleStyle = getCircleStyle(perimeter, perimeterWithoutGap, 0, 100, rotateDeg, gapDegree, gapPosition, railColor, mergedStrokeLinecap, strokeWidth);
   const paths = useTransitionDuration();
   const getStokeList = () => {
     let stackPtg = 0;
@@ -101,13 +101,13 @@ const Circle = props => {
     const stepPtg = 100 / stepCount;
     let stackPtg = 0;
     return new Array(stepCount).fill(null).map((_, index) => {
-      const color = index <= current - 1 ? strokeColorList[0] : trailColor;
+      const color = index <= current - 1 ? strokeColorList[0] : railColor;
       const stroke = color && typeof color === 'object' ? `url(#${gradientId})` : undefined;
       const circleStyleForStack = getCircleStyle(perimeter, perimeterWithoutGap, stackPtg, stepPtg, rotateDeg, gapDegree, gapPosition, color, 'butt', strokeWidth, stepGap);
       stackPtg += (perimeterWithoutGap - circleStyleForStack.strokeDashoffset + stepGap) * 100 / perimeterWithoutGap;
       return /*#__PURE__*/React.createElement("circle", {
         key: index,
-        className: cls(`${prefixCls}-circle-path`, classNames.track),
+        className: clsx(`${prefixCls}-circle-path`, classNames.track),
         r: radius,
         cx: halfSize,
         cy: halfSize,
@@ -125,7 +125,7 @@ const Circle = props => {
     });
   };
   return /*#__PURE__*/React.createElement("svg", _extends({
-    className: cls(`${prefixCls}-circle`, classNames.root, className),
+    className: clsx(`${prefixCls}-circle`, classNames.root, className),
     viewBox: `0 0 ${VIEW_BOX_SIZE} ${VIEW_BOX_SIZE}`,
     style: {
       ...styles.root,
@@ -134,13 +134,13 @@ const Circle = props => {
     id: id,
     role: "presentation"
   }, restProps), !stepCount && /*#__PURE__*/React.createElement("circle", {
-    className: cls(`${prefixCls}-circle-trail`, classNames.rail),
+    className: clsx(`${prefixCls}-circle-rail`, classNames.rail),
     r: radius,
     cx: halfSize,
     cy: halfSize,
-    stroke: trailColor,
+    stroke: railColor,
     strokeLinecap: mergedStrokeLinecap,
-    strokeWidth: trailWidth || strokeWidth,
+    strokeWidth: railWidth || strokeWidth,
     style: {
       ...circleStyle,
       ...styles.rail

package/es/Line.js

@@ -1,6 +1,6 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import * as React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useTransitionDuration, defaultProps } from "./common";
 import getIndeterminateLine from "./utils/getIndeterminateLine";
 import useId from "@rc-component/util/es/hooks/useId";
@@ -14,8 +14,8 @@ const Line = props => {
     strokeLinecap,
     strokeWidth,
     style,
-    trailColor,
-    trailWidth,
+    railColor,
+    railWidth,
     transition,
     loading,
     ...restProps
@@ -47,16 +47,16 @@ const Line = props => {
     strokeWidth
   });
   return /*#__PURE__*/React.createElement("svg", _extends({
-    className: classNames(`${prefixCls}-line`, className),
+    className: clsx(`${prefixCls}-line`, className),
     viewBox: viewBoxString,
     preserveAspectRatio: "none",
     style: style
   }, restProps), /*#__PURE__*/React.createElement("path", {
-    className: `${prefixCls}-line-trail`,
+    className: `${prefixCls}-line-rail`,
     d: pathString,
     strokeLinecap: strokeLinecap,
-    stroke: trailColor,
-    strokeWidth: trailWidth || strokeWidth,
+    stroke: railColor,
+    strokeWidth: railWidth || strokeWidth,
     fillOpacity: "0"
   }), percentList.map((ptg, index) => {
     let dashPercent = 1;

package/es/common.js

@@ -5,8 +5,8 @@ export const defaultProps = {
   strokeColor: '#2db7f5',
   strokeLinecap: 'round',
   strokeWidth: 1,
-  trailColor: '#D9D9D9',
-  trailWidth: 1,
+  railColor: '#D9D9D9',
+  railWidth: 1,
   gapPosition: 'bottom',
   loading: false
 };

package/es/interface.d.ts

@@ -3,13 +3,13 @@ export type SemanticName = 'root' | 'rail' | 'track';
 export interface ProgressProps {
     id?: string;
     strokeWidth?: number;
-    trailWidth?: number;
+    railWidth?: number;
     className?: string;
     classNames?: Partial<Record<SemanticName, string>>;
     styles?: Partial<Record<SemanticName, React.CSSProperties>>;
     percent?: number | number[];
     strokeColor?: StrokeColorType;
-    trailColor?: string;
+    railColor?: string;
     strokeLinecap?: StrokeLinecapType;
     prefixCls?: string;
     style?: React.CSSProperties;

package/lib/Circle/PtgCircle.js

@@ -5,8 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _clsx = require("clsx");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const Block = ({
@@ -46,7 +45,7 @@ const PtgCircle = /*#__PURE__*/React.forwardRef((props, ref) => {
   // ========================== Circle ==========================
   const halfSize = size / 2;
   const circleNode = /*#__PURE__*/React.createElement("circle", {
-    className: (0, _classnames.default)(`${prefixCls}-circle-path`, className),
+    className: (0, _clsx.clsx)(`${prefixCls}-circle-path`, className),
     r: radius,
     cx: halfSize,
     cy: halfSize,

package/lib/Circle/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _common = require("../common");
 var _useId = _interopRequireDefault(require("@rc-component/util/lib/hooks/useId"));
 var _PtgCircle = _interopRequireDefault(require("./PtgCircle"));
@@ -27,10 +27,10 @@ const Circle = props => {
     styles = {},
     steps,
     strokeWidth,
-    trailWidth,
+    railWidth,
     gapDegree = 0,
     gapPosition,
-    trailColor,
+    railColor,
     strokeLinecap,
     style,
     className,
@@ -68,7 +68,7 @@ const Circle = props => {
     id: mergedId,
     loading
   });
-  const circleStyle = (0, _util.getCircleStyle)(perimeter, perimeterWithoutGap, 0, 100, rotateDeg, gapDegree, gapPosition, trailColor, mergedStrokeLinecap, strokeWidth);
+  const circleStyle = (0, _util.getCircleStyle)(perimeter, perimeterWithoutGap, 0, 100, rotateDeg, gapDegree, gapPosition, railColor, mergedStrokeLinecap, strokeWidth);
   const paths = (0, _common.useTransitionDuration)();
   const getStokeList = () => {
     let stackPtg = 0;
@@ -110,13 +110,13 @@ const Circle = props => {
     const stepPtg = 100 / stepCount;
     let stackPtg = 0;
     return new Array(stepCount).fill(null).map((_, index) => {
-      const color = index <= current - 1 ? strokeColorList[0] : trailColor;
+      const color = index <= current - 1 ? strokeColorList[0] : railColor;
       const stroke = color && typeof color === 'object' ? `url(#${gradientId})` : undefined;
       const circleStyleForStack = (0, _util.getCircleStyle)(perimeter, perimeterWithoutGap, stackPtg, stepPtg, rotateDeg, gapDegree, gapPosition, color, 'butt', strokeWidth, stepGap);
       stackPtg += (perimeterWithoutGap - circleStyleForStack.strokeDashoffset + stepGap) * 100 / perimeterWithoutGap;
       return /*#__PURE__*/React.createElement("circle", {
         key: index,
-        className: (0, _classnames.default)(`${prefixCls}-circle-path`, classNames.track),
+        className: (0, _clsx.clsx)(`${prefixCls}-circle-path`, classNames.track),
         r: radius,
         cx: halfSize,
         cy: halfSize,
@@ -134,7 +134,7 @@ const Circle = props => {
     });
   };
   return /*#__PURE__*/React.createElement("svg", _extends({
-    className: (0, _classnames.default)(`${prefixCls}-circle`, classNames.root, className),
+    className: (0, _clsx.clsx)(`${prefixCls}-circle`, classNames.root, className),
     viewBox: `0 0 ${_util.VIEW_BOX_SIZE} ${_util.VIEW_BOX_SIZE}`,
     style: {
       ...styles.root,
@@ -143,13 +143,13 @@ const Circle = props => {
     id: id,
     role: "presentation"
   }, restProps), !stepCount && /*#__PURE__*/React.createElement("circle", {
-    className: (0, _classnames.default)(`${prefixCls}-circle-trail`, classNames.rail),
+    className: (0, _clsx.clsx)(`${prefixCls}-circle-rail`, classNames.rail),
     r: radius,
     cx: halfSize,
     cy: halfSize,
-    stroke: trailColor,
+    stroke: railColor,
     strokeLinecap: mergedStrokeLinecap,
-    strokeWidth: trailWidth || strokeWidth,
+    strokeWidth: railWidth || strokeWidth,
     style: {
       ...circleStyle,
       ...styles.rail

package/lib/Line.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _common = require("./common");
 var _getIndeterminateLine = _interopRequireDefault(require("./utils/getIndeterminateLine"));
 var _useId = _interopRequireDefault(require("@rc-component/util/lib/hooks/useId"));
@@ -23,8 +23,8 @@ const Line = props => {
     strokeLinecap,
     strokeWidth,
     style,
-    trailColor,
-    trailWidth,
+    railColor,
+    railWidth,
     transition,
     loading,
     ...restProps
@@ -56,16 +56,16 @@ const Line = props => {
     strokeWidth
   });
   return /*#__PURE__*/React.createElement("svg", _extends({
-    className: (0, _classnames.default)(`${prefixCls}-line`, className),
+    className: (0, _clsx.clsx)(`${prefixCls}-line`, className),
     viewBox: viewBoxString,
     preserveAspectRatio: "none",
     style: style
   }, restProps), /*#__PURE__*/React.createElement("path", {
-    className: `${prefixCls}-line-trail`,
+    className: `${prefixCls}-line-rail`,
     d: pathString,
     strokeLinecap: strokeLinecap,
-    stroke: trailColor,
-    strokeWidth: trailWidth || strokeWidth,
+    stroke: railColor,
+    strokeWidth: railWidth || strokeWidth,
     fillOpacity: "0"
   }), percentList.map((ptg, index) => {
     let dashPercent = 1;

package/lib/common.js

@@ -11,8 +11,8 @@ const defaultProps = exports.defaultProps = {
   strokeColor: '#2db7f5',
   strokeLinecap: 'round',
   strokeWidth: 1,
-  trailColor: '#D9D9D9',
-  trailWidth: 1,
+  railColor: '#D9D9D9',
+  railWidth: 1,
   gapPosition: 'bottom',
   loading: false
 };

package/lib/interface.d.ts

@@ -3,13 +3,13 @@ export type SemanticName = 'root' | 'rail' | 'track';
 export interface ProgressProps {
     id?: string;
     strokeWidth?: number;
-    trailWidth?: number;
+    railWidth?: number;
     className?: string;
     classNames?: Partial<Record<SemanticName, string>>;
     styles?: Partial<Record<SemanticName, React.CSSProperties>>;
     percent?: number | number[];
     strokeColor?: StrokeColorType;
-    trailColor?: string;
+    railColor?: string;
     strokeLinecap?: StrokeLinecapType;
     prefixCls?: string;
     style?: React.CSSProperties;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/progress",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "progress ui component for react",
   "keywords": [
     "react",
@@ -39,25 +39,20 @@
     "coverage": "father test --coverage",
     "now-build": "npm run docs:build"
   },
-  "peerDependencies": {
-    "react": ">=16.9.0",
-    "react-dom": ">=16.9.0"
-  },
   "dependencies": {
     "@rc-component/util": "^1.2.1",
-    "classnames": "^2.2.6"
+    "clsx": "^2.1.1"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^2.0.4",
     "@rc-component/np": "^1.0.4",
     "@testing-library/react": "^13.0.0",
-    "@types/classnames": "^2.2.9",
     "@types/jest": "^29.4.0",
     "@types/keyv": "3.1.4",
+    "@types/node": "^24.5.2",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.3",
     "@umijs/fabric": "^3.0.0",
-    "cross-env": "^7.0.0",
     "dumi": "^2.0.0",
     "eslint": "^8.57.0",
     "eslint-plugin-jest": "^27.6.0",
@@ -69,5 +64,9 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "typescript": "^5.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
   }
 }