feat: init semantic structure

Author: zombieJ

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}

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,7 @@ const Circle: React.FC<ProgressProps> = (props) => {
             radius={radius}
             prefixCls={prefixCls}
             gradientId={gradientId}
-            style={{ ...circleStyleForStack, ...indeterminateStyleProps }}
+            style={{ ...circleStyleForStack, ...indeterminateStyleProps, ...styles.track }}
             strokeLinecap={mergedStrokeLinecap}
             strokeWidth={strokeWidth}
             gapDegree={gapDegree}
@@ -148,14 +150,14 @@ const Circle: React.FC<ProgressProps> = (props) => {
       return (
         <circle
           key={index}
-          className={`${prefixCls}-circle-path`}
+          className={cls(`${prefixCls}-circle-path`, className)}
           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 +168,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()}

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 {

src/hooks/useId.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;