From d373bf3d35db4793e3760ef6ab306476f0bdde21 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Fri, 25 Aug 2023 00:28:38 +0800 Subject: [PATCH] feat: Progress.Circle support conic (#44404) * feat: support conic * test: update snapshot * docs: update doc * chore: clean up * docs: update doc * test: update snapshot * test: update snapshot * test: update snapshot --- .../__snapshots__/demo-extend.test.ts.snap | 1044 +++++++++++------ .../__tests__/__snapshots__/demo.test.ts.snap | 1040 ++++++++++------ .../__snapshots__/index.test.tsx.snap | 140 +-- components/progress/demo/gradient-line.md | 4 +- components/progress/demo/gradient-line.tsx | 19 +- components/progress/index.en-US.md | 2 +- components/progress/index.zh-CN.md | 2 +- components/progress/progress.tsx | 12 +- .../__snapshots__/demo-extend.test.ts.snap | 120 +- .../__tests__/__snapshots__/demo.test.ts.snap | 120 +- package.json | 2 +- 11 files changed, 1592 insertions(+), 913 deletions(-) diff --git a/components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap index 3468effaf21f..f9d98744416c 100644 --- a/components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -21,36 +21,36 @@ exports[`renders components/progress/demo/circle.tsx extend context correctly 1` @@ -445,36 +445,36 @@ exports[`renders components/progress/demo/circle-mini.tsx extend context correct @@ -952,36 +952,36 @@ Array [ @@ -1292,36 +1292,36 @@ exports[`renders components/progress/demo/dashboard.tsx extend context correctly
99.9% -
, +
99.9% -
, + + +
+
+
+ + + + + + +
+
+
+ - 90% + + +
@@ -1751,8 +1848,8 @@ Array [ style="padding-bottom: 8px;" >
+
+ + +
+
+
+
+ + + + + +
+
+
+ + + + 90% + +
+ + +
+
+
+ + + + + + +
+
+
+
- , -] +
+
+
+ + + + + + +
+
+
+ + + + + 93% + +
+ + + + `; exports[`renders components/progress/demo/gradient-line.tsx extend context correctly 2`] = `[]`; @@ -2198,36 +2532,36 @@ Array [ @@ -2826,36 +3160,36 @@ Array [ diff --git a/components/progress/__tests__/__snapshots__/demo.test.ts.snap b/components/progress/__tests__/__snapshots__/demo.test.ts.snap index 59ba9f8689e3..244c1a484824 100644 --- a/components/progress/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/progress/__tests__/__snapshots__/demo.test.ts.snap @@ -21,36 +21,36 @@ exports[`renders components/progress/demo/circle.tsx correctly 1`] = ` @@ -415,36 +415,36 @@ exports[`renders components/progress/demo/circle-mini.tsx correctly 1`] = ` @@ -896,36 +896,36 @@ Array [ @@ -1210,36 +1210,36 @@ exports[`renders components/progress/demo/dashboard.tsx correctly 1`] = `
99.9% -
, +
99.9% -
, + + +
+
+
+ + + + + + +
+
+
+ - 90% + + +
@@ -1663,8 +1760,8 @@ Array [ style="padding-bottom:8px" >
+
+ + +
+
+
+
+ + + + + +
+
+
+ + + + 90% + +
+ + +
+
+
+ + + + + + +
+
+
+
- , -] +
+
+
+ + + + + + +
+
+
+ + + + + 93% + +
+ + + + `; exports[`renders components/progress/demo/line.tsx correctly 1`] = ` @@ -2104,36 +2438,36 @@ Array [ @@ -2647,36 +2981,36 @@ Array [ diff --git a/components/progress/__tests__/__snapshots__/index.test.tsx.snap b/components/progress/__tests__/__snapshots__/index.test.tsx.snap index 221322260026..37a2caf166f3 100644 --- a/components/progress/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/progress/__tests__/__snapshots__/index.test.tsx.snap @@ -13,36 +13,36 @@ exports[`Progress render dashboard 295 gapDegree 1`] = ` ( - <> - +
+ - - + + + + + + + + - +
); export default App; diff --git a/components/progress/index.en-US.md b/components/progress/index.en-US.md index aa9c81f5ce48..9b377ae2ee82 100644 --- a/components/progress/index.en-US.md +++ b/components/progress/index.en-US.md @@ -65,7 +65,7 @@ Properties that shared by all types. | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| strokeColor | The color of circular progress, render `linear-gradient` when passing an object | string \| object | - | - | +| strokeColor | The color of circular progress, render gradient when passing an object | string \| { number%: string } | - | - | | strokeWidth | To set the width of the circular progress, unit: percentage of the canvas width | number | 6 | - | ### `type="dashboard"` diff --git a/components/progress/index.zh-CN.md b/components/progress/index.zh-CN.md index 646c1ecdc6e6..6d8d5a84d007 100644 --- a/components/progress/index.zh-CN.md +++ b/components/progress/index.zh-CN.md @@ -66,7 +66,7 @@ demo: | 属性 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | -| strokeColor | 圆形进度条线的色彩，传入 object 时为渐变 | string \| object | - | - | +| strokeColor | 圆形进度条线的色彩，传入 object 时为渐变 | string \| { number%: string } | - | - | | strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | - | ### `type="dashboard"` diff --git a/components/progress/progress.tsx b/components/progress/progress.tsx index af61a4933cfb..574290ab9172 100644 --- a/components/progress/progress.tsx +++ b/components/progress/progress.tsx @@ -1,10 +1,11 @@ +import * as React from 'react'; import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled'; import CheckOutlined from '@ant-design/icons/CheckOutlined'; import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled'; import CloseOutlined from '@ant-design/icons/CloseOutlined'; import classNames from 'classnames'; import omit from 'rc-util/lib/omit'; -import * as React from 'react'; + import warning from '../_util/warning'; import type { ConfigConsumerProps } from '../config-provider'; import { ConfigContext } from '../config-provider'; @@ -15,10 +16,11 @@ import useStyle from './style'; import { getSize, getSuccessPercent, validProgress } from './utils'; export const ProgressTypes = ['line', 'circle', 'dashboard'] as const; -export type ProgressType = (typeof ProgressTypes)[number]; +export type ProgressType = typeof ProgressTypes[number]; const ProgressStatuses = ['normal', 'exception', 'active', 'success'] as const; export type ProgressSize = 'default' | 'small'; -export type StringGradients = { [percentage: string]: string }; +export type StringGradients = Record; + type FromToGradients = { from: string; to: string }; export type ProgressGradient = { direction?: string } & (StringGradients | FromToGradients); @@ -38,7 +40,7 @@ export interface ProgressProps extends ProgressAriaProps { type?: ProgressType; percent?: number; format?: (percent?: number, successPercent?: number) => React.ReactNode; - status?: (typeof ProgressStatuses)[number]; + status?: typeof ProgressStatuses[number]; showInfo?: boolean; strokeWidth?: number; strokeLinecap?: 'butt' | 'square' | 'round'; @@ -82,7 +84,7 @@ const Progress = React.forwardRef((props, ref) => ); }, [percent, props.success, props.successPercent]); - const progressStatus = React.useMemo<(typeof ProgressStatuses)[number]>(() => { + const progressStatus = React.useMemo(() => { if (!ProgressStatuses.includes(status!) && percentNumber >= 100) { return 'success'; } diff --git a/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap index d54fcfa8035f..34c92f5d00ff 100644 --- a/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -2606,36 +2606,36 @@ Array [