fix(Process): 支持Circle模式的进度条 (#2154)

* fix(Process): 支持Circle模式的进度条

* fix: 修改build错误

src/progress/Progress.tsx

@@ -3,32 +3,41 @@ import { SuccessFilled, ErrorFilled } from '@gio-design/icons';
 import classNames from 'classnames';
 import { usePrefixCls } from '@gio-design/utils';
 import { ProgressProps, ProgressStatus } from './interface';
+import ProgressCircle from './ProgressCircle';
 
-const defaultFormat = (percent?: number) => `${Math.round((percent || 0) * 100) / 100}%`;
+export const defaultFormat = (percent?: number) => `${Math.round((percent || 0) * 100) / 100}%`;
 const statusIcons = [null, SuccessFilled, ErrorFilled];
 
 const getStatusIcon = (status: string, prefix: string) => {
   const Icon = statusIcons[ProgressStatus[status as keyof typeof ProgressStatus]];
   return Icon && <Icon className={`${prefix}-${status}-icon`} />;
 };
 
-const Progress: React.FC<ProgressProps> = ({
-  percent = 0,
-  status = 'active',
-  format = defaultFormat,
-  customizePrefixCls,
-  animation,
-  className,
-  style,
-  showInfo = true,
-  size = 'default',
-  ...rest
-}: ProgressProps) => {
+const Progress: React.FC<ProgressProps> = (props) => {
+  const {
+    percent = 0,
+    status = 'active',
+    format = defaultFormat,
+    customizePrefixCls,
+    animation,
+    className,
+    style,
+    showInfo = true,
+    size = 'default',
+    type,
+    ...rest
+  } = props;
   const prefixCls = usePrefixCls('progress', customizePrefixCls);
 
+  if (type === 'circle') {
+    return <ProgressCircle {...props} />;
+  }
+
+  const fixedSize = size === 'large' ? 'default' : size;
+
   return (
     <div data-testid="progress" className={prefixCls} style={style} {...rest}>
-      <div className={classNames(`${prefixCls}-trail`, `${prefixCls}-${size}`, className)}>
+      <div className={classNames(`${prefixCls}-trail`, `${prefixCls}-${fixedSize}`, className)}>
         <div
           className={classNames(`${prefixCls}-stroke`, `${prefixCls}-${status}`, {
             [`${prefixCls}-animate`]: animation,

src/progress/ProgressCircle.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { usePrefixCls } from '@gio-design/utils';
+import { ProgressProps } from './interface';
+
+const sizeMapping = {
+  large: { size: 120, border: 6 },
+  default: { size: 80, border: 4 },
+  small: { size: 20, border: 3 },
+};
+
+const ProgressCircle: React.FC<ProgressProps> = ({
+  percent = 0,
+  status = 'active',
+  format,
+  customizePrefixCls,
+  //   animation,
+  //   className,
+  style,
+  size,
+  strokeLinecap,
+  ...rest
+}: ProgressProps) => {
+  const prefixCls = usePrefixCls('progress-circle', customizePrefixCls);
+
+  const width = sizeMapping[size || 'default']?.size || sizeMapping.default.size;
+  const border = sizeMapping[size || 'default']?.border || sizeMapping.default.border;
+
+  const r = width / 2 - 3;
+  const perimeter = Math.PI * r * 2;
+  const strokeDashOffset = perimeter - (perimeter * 75) / 100;
+  return (
+    <div data-testid="progress" className={`${prefixCls} ${prefixCls}-${status}`} style={style} {...rest}>
+      <svg width={width} height={width} viewBox={`${-width / 2} ${-width / 2} ${width} ${width}`}>
+        <circle cx="0" cy="0" r={r} fill="#fff" strokeWidth={border} stroke="#dfe4ee" strokeLinecap="round" />
+        <circle
+          cx="0"
+          cy="0"
+          r={r}
+          fill="#ffffff00"
+          strokeWidth={border}
+          className="circle"
+          stroke="#1248e9"
+          strokeLinecap={strokeLinecap || 'round'}
+          strokeDasharray={`${perimeter}, ${perimeter}`}
+          strokeDashoffset={strokeDashOffset}
+        />
+      </svg>
+      {size !== 'small' && (
+        <span className={`${prefixCls}-text`} style={{ width }}>
+          {format?.(percent) || `${percent}%`}
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default ProgressCircle;

src/progress/demos/Progress.stories.tsx

@@ -67,3 +67,23 @@ export const Status: Story<ProgressProps> = () => (
 export const Format: Story<ProgressProps> = () => (
   <Progress format={(e: number) => `${e}🌟`} status="active" percent={percent} />
 );
+
+export const Circle: Story<ProgressProps> = () => (
+  <>
+    <Progress type="circle" format={(e: number) => `${e}%`} status="active" size="large" percent={percent} />
+    <Progress type="circle" format={(e: number) => `${e}%`} status="success" size="default" percent={percent} />
+    <Progress
+      type="circle"
+      format={(e: number) => (
+        <span>
+          <span style={{ fontSize: 24 }}>{e}</span>
+          <span style={{ fontSize: 12 }}>%</span>
+        </span>
+      )}
+      status="exception"
+      strokeLinecap="butt"
+      percent={percent}
+    />
+    <Progress type="circle" format={(e: number) => `${e}%`} status="active" size="small" percent={percent} />
+  </>
+);

src/progress/interface.ts

@@ -4,6 +4,8 @@ export enum ProgressStatus {
   exception,
 }
 
+export type ProgressType = 'circle' | 'default';
+
 export interface ProgressProps {
   /**
    * 百分比
@@ -21,14 +23,16 @@ export interface ProgressProps {
    * 进度条尺寸
    * @default default
    */
-  size?: 'small'|'default';
+  size?: 'small' | 'default' | 'large';
   customizePrefixCls?: string;
-   /**
+  /**
    * 动画特效开关
    * @default false
    */
   animation?: boolean;
   className?: string;
   style?: React.CSSProperties;
   showInfo?: boolean;
+  type?: ProgressType;
+  strokeLinecap?: React.SVGProps<SVGElement>['strokeLinecap'];
 }

src/progress/style/index.less

@@ -10,6 +10,42 @@
   font-weight: normal;
   .text-h3();
 
+  &-circle {
+    display: inline-flex;
+    align-items: center;
+    // height: 24px;
+    color: @gray-5;
+    font-weight: normal;
+    // transform: rotate(-90deg);
+
+    svg circle {
+      transform: rotate(-90deg);
+    }
+
+    &-text {
+      position: absolute;
+      text-align: center;
+    }
+
+    &-active {
+      .circle {
+        stroke: @blue-3;
+      }
+    }
+
+    &-success {
+      .circle {
+        stroke: @green-3;
+      }
+    }
+
+    &-exception {
+      .circle {
+        stroke: @red-3;
+      }
+    }
+  }
+
   &-trail {
     flex-basis: 100%;
     overflow: hidden;