feat: Circle support semantic structure (#303)

zombieJ · web-flow · commit 9b7899e6abc7 · 2025-04-17T00:32:44.000+08:00
* feat: init semantic structure

* test: add test case

* test: update snapshot
diff --git a/.dumirc.ts b/.dumirc.ts
@@ -4,7 +4,7 @@ import { defineConfig } from 'dumi';
 export default defineConfig({
   favicons: ['https://avatars0.githubusercontent.com/u/9441414?s=200&v=4'],
   themeConfig: {
-    name: 'rc-progress',
+    name: '@rc-component/progress',
     logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4',
   },
   exportStatic: {},
diff --git a/README.md b/README.md
@@ -1,11 +1,11 @@
-# rc-progress
+# @rc-component/progress
 
 Progress Bar.
 
 [![NPM version][npm-image]][npm-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Test coverage][coveralls-image]][coveralls-url] [![npm download][download-image]][download-url] [![bundle size][bundlephobia-image]][bundlephobia-url]
 
-[npm-image]: http://img.shields.io/npm/v/rc-progress.svg?style=flat-square
-[npm-url]: http://npmjs.org/package/rc-progress
+[npm-image]: http://img.shields.io/npm/v/@rc-component/progress.svg?style=flat-square
+[npm-url]: http://npmjs.org/package/@rc-component/progress
 [github-actions-image]: https://github.com/react-component/progress/workflows/CI/badge.svg
 [github-actions-url]: https://github.com/react-component/progress/actions
 [circleci-image]: https://img.shields.io/circleci/react-component/progress/master?style=flat-square
@@ -16,10 +16,10 @@ Progress Bar.
 [david-image]: https://david-dm.org/react-component/progress/status.svg?style=flat-square
 [david-dev-url]: https://david-dm.org/react-component/progress?type=dev
 [david-dev-image]: https://david-dm.org/react-component/progress/dev-status.svg?style=flat-square
-[download-image]: https://img.shields.io/npm/dm/rc-progress.svg?style=flat-square
-[download-url]: https://npmjs.org/package/rc-progress
-[bundlephobia-url]: https://bundlephobia.com/result?p=rc-progress
-[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-progress
+[download-image]: https://img.shields.io/npm/dm/@rc-component/progress.svg?style=flat-square
+[download-url]: https://npmjs.org/package/@rc-component/progress
+[bundlephobia-url]: https://bundlephobia.com/result?p=@rc-component/progress
+[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@rc-component/progress
 
 ## Example
 
@@ -35,12 +35,12 @@ https://progress.react-component.vercel.app/
 
 ## Install
 
-[![rc-progress](https://nodei.co/npm/rc-progress.png)](https://npmjs.org/package/rc-progress)
+[![@rc-component/progress](https://nodei.co/npm/@rc-component/progress.png)](https://npmjs.org/package/@rc-component/progress)
 
 ## Usage
 
 ```js
-import { Line, Circle } from 'rc-progress';
+import { Line, Circle } from '@rc-component/progress';
 
 export default () => (
   <>
@@ -148,7 +148,7 @@ export default () => (
 ## Installation
 
 ```
-npm install --save rc-progress
+npm install --save @rc-component/progress
 ```
 
 ## Development
@@ -160,4 +160,4 @@ npm start
 
 ## License
 
-rc-progress is released under the MIT license.
+@rc-component/progress is released under the MIT license.
diff --git a/docs/examples/fast-progress.tsx b/docs/examples/fast-progress.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { Line, Circle } from 'rc-progress';
-import type { ProgressProps } from 'rc-progress';
+import { Line, Circle } from '@rc-component/progress';
+import type { ProgressProps } from '@rc-component/progress';
 
 class App extends React.Component<ProgressProps, any> {
   constructor(props: ProgressProps) {
diff --git a/docs/examples/gap.tsx b/docs/examples/gap.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { Circle } from 'rc-progress';
-import type { ProgressProps } from 'rc-progress';
+import { Circle } from '@rc-component/progress';
+import type { ProgressProps } from '@rc-component/progress';
 
 const colorMap = ['#3FC7FA', '#85D262', '#FE8C6A', '#FF5959', '#BC3FFA'];
 
diff --git a/docs/examples/gradient-circle.tsx b/docs/examples/gradient-circle.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Circle } from 'rc-progress';
+import { Circle } from '@rc-component/progress';
 
 const circleContainerStyle: React.CSSProperties = {
   width: 250,
diff --git a/docs/examples/loading.tsx b/docs/examples/loading.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Line, Circle } from 'rc-progress';
+import { Line, Circle } from '@rc-component/progress';
 
 const Loading = () => {
   return (
diff --git a/docs/examples/simple.tsx b/docs/examples/simple.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { Line, Circle } from 'rc-progress';
-import type { ProgressProps } from 'rc-progress';
+import { Line, Circle } from '@rc-component/progress';
+import type { ProgressProps } from '@rc-component/progress';
 
 class Example extends React.Component<ProgressProps, any> {
   constructor(props: ProgressProps) {
diff --git a/docs/examples/steps.tsx b/docs/examples/steps.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Circle } from 'rc-progress';
+import { Circle } from '@rc-component/progress';
 
 const Example: React.FC = () => {
   const [percent, setPercent] = useState<number>(30);
diff --git a/docs/index.md b/docs/index.md
@@ -1,6 +1,6 @@
 ---
 hero:
-  title: rc-progress
+  title: '@rc-component/progress'
   description: React Progress Component
 ---
 
diff --git a/now.json b/now.json
@@ -1,6 +1,6 @@
 {
   "version": 2,
-  "name": "rc-progress",
+  "name": "@rc-component/progress",
   "builds": [
     {
       "src": "package.json",
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "rc-progress",
-  "version": "4.0.0",
+  "name": "@rc-component/progress",
+  "version": "1.0.0",
   "description": "progress ui component for react",
   "keywords": [
     "react",
diff --git a/src/Circle/PtgCircle.tsx b/src/Circle/PtgCircle.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import type { ProgressProps } from '..';
 import type { StrokeColorObject } from '../interface';
+import classNames from 'classnames';
 
 interface BlockProps {
   bg: string;
@@ -22,6 +23,7 @@ function getPtgColors(color: Record<string, string | boolean>, scale: number) {
 
 export interface ColorGradientProps {
   prefixCls: string;
+  className?: string;
   gradientId: string;
   style: React.CSSProperties;
   ptg: number;
@@ -39,6 +41,7 @@ const PtgCircle = React.forwardRef<SVGCircleElement, ColorGradientProps>((props,
     color,
     gradientId,
     radius,
+    className,
     style: circleStyleForStack,
     ptg,
     strokeLinecap,
@@ -56,7 +59,7 @@ const PtgCircle = React.forwardRef<SVGCircleElement, ColorGradientProps>((props,
 
   const circleNode = (
     <circle
-      className={`${prefixCls}-circle-path`}
+      className={classNames(`${prefixCls}-circle-path`, className)}
       r={radius}
       cx={halfSize}
       cy={halfSize}
diff --git a/src/Circle/index.tsx b/src/Circle/index.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import classNames from 'classnames';
+import cls from 'classnames';
 import { defaultProps, useTransitionDuration } from '../common';
 import type { ProgressProps } from '../interface';
-import useId from '../hooks/useId';
+import useId from '@rc-component/util/lib/hooks/useId';
 import PtgCircle from './PtgCircle';
 import { VIEW_BOX_SIZE, getCircleStyle } from './util';
 import getIndeterminateCircle from '../utils/getIndeterminateCircle';
@@ -16,6 +16,8 @@ const Circle: React.FC<ProgressProps> = (props) => {
   const {
     id,
     prefixCls,
+    classNames = {},
+    styles = {},
     steps,
     strokeWidth,
     trailWidth,
@@ -100,7 +102,8 @@ const Circle: React.FC<ProgressProps> = (props) => {
             radius={radius}
             prefixCls={prefixCls}
             gradientId={gradientId}
-            style={{ ...circleStyleForStack, ...indeterminateStyleProps }}
+            className={classNames.track}
+            style={{ ...circleStyleForStack, ...indeterminateStyleProps, ...styles.track }}
             strokeLinecap={mergedStrokeLinecap}
             strokeWidth={strokeWidth}
             gapDegree={gapDegree}
@@ -148,14 +151,14 @@ const Circle: React.FC<ProgressProps> = (props) => {
       return (
         <circle
           key={index}
-          className={`${prefixCls}-circle-path`}
+          className={cls(`${prefixCls}-circle-path`, classNames.track)}
           r={radius}
           cx={halfSize}
           cy={halfSize}
           stroke={stroke}
           strokeWidth={strokeWidth}
           opacity={1}
-          style={circleStyleForStack}
+          style={{ ...circleStyleForStack, ...styles.track }}
           ref={(elem) => {
             paths[index] = elem;
           }}
@@ -166,23 +169,29 @@ const Circle: React.FC<ProgressProps> = (props) => {
 
   return (
     <svg
-      className={classNames(`${prefixCls}-circle`, className)}
+      className={cls(`${prefixCls}-circle`, classNames.root, className)}
       viewBox={`0 0 ${VIEW_BOX_SIZE} ${VIEW_BOX_SIZE}`}
-      style={style}
+      style={{
+        ...styles.root,
+        ...style,
+      }}
       id={id}
       role="presentation"
       {...restProps}
     >
       {!stepCount && (
         <circle
-          className={`${prefixCls}-circle-trail`}
+          className={cls(`${prefixCls}-circle-trail`, classNames.rail)}
           r={radius}
           cx={halfSize}
           cy={halfSize}
           stroke={trailColor}
           strokeLinecap={mergedStrokeLinecap}
           strokeWidth={trailWidth || strokeWidth}
-          style={circleStyle}
+          style={{
+            ...circleStyle,
+            ...styles.rail,
+          }}
         />
       )}
       {stepCount ? getStepStokeList() : getStokeList()}
diff --git a/src/Line.tsx b/src/Line.tsx
@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { useTransitionDuration, defaultProps } from './common';
 import type { ProgressProps } from './interface';
 import getIndeterminateLine from './utils/getIndeterminateLine';
-import useId from './hooks/useId';
+import useId from '@rc-component/util/lib/hooks/useId';
 
 const Line: React.FC<ProgressProps> = (props) => {
   const {
diff --git a/src/hooks/useId.ts b/src/hooks/useId.ts
diff --git a/src/interface.ts b/src/interface.ts
@@ -1,8 +1,12 @@
+export type SemanticName = 'root' | 'rail' | 'track';
+
 export interface ProgressProps {
   id?: string;
   strokeWidth?: number;
   trailWidth?: number;
   className?: string;
+  classNames?: Partial<Record<SemanticName, string>>;
+  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
   percent?: number | number[];
   strokeColor?: StrokeColorType;
   trailColor?: string;
diff --git a/tests/__snapshots__/conic.spec.tsx.snap b/tests/__snapshots__/conic.spec.tsx.snap
@@ -18,7 +18,7 @@ exports[`Circle.conic gapDegree 1`] = `
       style="stroke: #D9D9D9; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(125deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
     />
     <mask
-      id="rc_progress_TEST_OR_SSR-gradient-conic"
+      id="test-id-gradient-conic"
     >
       <circle
         class="rc-progress-circle-path"
@@ -29,12 +29,12 @@ exports[`Circle.conic gapDegree 1`] = `
         stroke="#FFF"
         stroke-linecap="butt"
         stroke-width="6"
-        style="stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(125deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+        style="stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(125deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;"
       />
     </mask>
     <foreignobject
       height="100"
-      mask="url(#rc_progress_TEST_OR_SSR-gradient-conic)"
+      mask="url(#test-id-gradient-conic)"
       width="100"
       x="0"
       y="0"
@@ -69,7 +69,7 @@ exports[`Circle.conic should work 1`] = `
       style="stroke: #D9D9D9; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
     />
     <mask
-      id="rc_progress_TEST_OR_SSR-gradient-conic"
+      id="test-id-gradient-conic"
     >
       <circle
         class="rc-progress-circle-path"
@@ -80,12 +80,12 @@ exports[`Circle.conic should work 1`] = `
         stroke="#FFF"
         stroke-linecap="butt"
         stroke-width="6"
-        style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+        style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;"
       />
     </mask>
     <foreignobject
       height="100"
-      mask="url(#rc_progress_TEST_OR_SSR-gradient-conic)"
+      mask="url(#test-id-gradient-conic)"
       width="100"
       x="0"
       y="0"
diff --git a/tests/__snapshots__/index.spec.js.snap b/tests/__snapshots__/index.spec.js.snap
diff --git a/tests/semantic.spec.tsx b/tests/semantic.spec.tsx
diff --git a/tsconfig.json b/tsconfig.json

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"version": 2,`
`3`		`- "name": "rc-progress",`
	`3`	`+ "name": "@rc-component/progress",`
`4`	`4`	`"builds": [`
`5`	`5`	`{`
`6`	`6`	`"src": "package.json",`