From c368619b1f9dce2461f1781faf3236865e024b91 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Wed, 1 Mar 2023 11:49:42 +0800 Subject: [PATCH] refactor(progress): progress size (#40903) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: progress size * feat: update snapshots * feat: update demo * feat: update demo * docs: fix lint * feat: update demo * feat: update demo * docs: update doc * feat: update snapshots * docs: update doc * docs: update doc * docs: update doc * Update components/progress/index.en-US.md Co-authored-by: lijianan <574980606@qq.com> * Update components/progress/index.zh-CN.md Co-authored-by: lijianan <574980606@qq.com> * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * Update components/progress/utils.ts Co-authored-by: MadCcc <1075746765@qq.com> * feat: optimize code * feat: optimize code * feat: optimize code * Update components/progress/Circle.tsx Co-authored-by: MadCcc <1075746765@qq.com> * feat: optimize code * feat: optimize code * docs: update doc --------- Co-authored-by: 二货机器人 Co-authored-by: lijianan <574980606@qq.com> Co-authored-by: MadCcc <1075746765@qq.com> --- .../__snapshots__/components.test.tsx.snap | 7 + components/progress/Circle.tsx | 21 +- components/progress/Line.tsx | 28 +- components/progress/Steps.tsx | 11 +- .../__snapshots__/demo-extend.test.ts.snap | 712 +++++++++++++++++- .../__tests__/__snapshots__/demo.test.ts.snap | 664 +++++++++++++++- .../__snapshots__/index.test.tsx.snap | 11 + components/progress/__tests__/index.test.tsx | 78 ++ components/progress/demo/circle-micro.tsx | 2 +- components/progress/demo/circle-mini.tsx | 6 +- components/progress/demo/size.md | 7 + components/progress/demo/size.tsx | 36 + components/progress/index.en-US.md | 29 +- components/progress/index.zh-CN.md | 45 +- components/progress/progress.tsx | 22 +- components/progress/utils.ts | 60 +- .../__snapshots__/demo-extend.test.ts.snap | 12 +- .../__tests__/__snapshots__/demo.test.ts.snap | 12 +- components/steps/index.tsx | 2 +- 19 files changed, 1603 insertions(+), 162 deletions(-) create mode 100644 components/progress/demo/size.md create mode 100644 components/progress/demo/size.tsx diff --git a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap index 956a9e9064b4..eee6d83a957e 100644 --- a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap +++ b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap @@ -21705,6 +21705,7 @@ exports[`ConfigProvider components Progress configProvider 1`] = ` >
= (props) => { const { prefixCls, - width = 120, - strokeWidth = Math.max(getMinPercent(width), 6), trailColor = null as unknown as string, strokeLinecap = 'round', gapPosition, gapDegree, + width: originWidth = 120, type, children, success, + size, } = props; - const circleStyle: React.CSSProperties = { width, height: width, fontSize: width * 0.15 + 6 }; + const mergedSize = size ?? [originWidth, originWidth]; + + const [width, height] = getSize(mergedSize, 'circle'); + + let { strokeWidth } = props; + if (strokeWidth === undefined) { + strokeWidth = Math.max(getMinPercent(width), 6); + } + + const circleStyle: React.CSSProperties = { width, height, fontSize: width * 0.15 + 6 }; const realGapDegree = React.useMemo(() => { // Support gapDeg = 0 when type = 'dashboard' @@ -71,7 +80,9 @@ const Circle: React.FC = (props) => { return (
{width <= 20 ? ( - {circleContent} + + {circleContent} + ) : ( <> {circleContent} diff --git a/components/progress/Line.tsx b/components/progress/Line.tsx index e69a2772ce92..1e1db33a7b92 100644 --- a/components/progress/Line.tsx +++ b/components/progress/Line.tsx @@ -1,8 +1,9 @@ import { presetPrimaryColors } from '@ant-design/colors'; import * as React from 'react'; import type { DirectionType } from '../config-provider'; +import warning from '../_util/warning'; import type { ProgressGradient, ProgressProps, StringGradients } from './progress'; -import { getSuccessPercent, validProgress } from './utils'; +import { getSize, getSuccessPercent, validProgress } from './utils'; interface LineProps extends ProgressProps { prefixCls: string; @@ -71,8 +72,8 @@ const Line: React.FC = (props) => { prefixCls, direction: directionConfig, percent, - strokeWidth, size, + strokeWidth, strokeColor, strokeLinecap = 'round', children, @@ -92,9 +93,21 @@ const Line: React.FC = (props) => { borderRadius, }; + const mergedSize = size ?? [-1, strokeWidth || (size === 'small' ? 6 : 8)]; + + const [width, height] = getSize(mergedSize, 'line', { strokeWidth }); + + if (process.env.NODE_ENV !== 'production') { + warning( + !('strokeWidth' in props), + 'Progress', + '`strokeWidth` is deprecated. Please use `size` instead.', + ); + } + const percentStyle: React.CSSProperties = { width: `${validProgress(percent)}%`, - height: strokeWidth || (size === 'small' ? 6 : 8), + height, borderRadius, ...backgroundProps, }; @@ -103,14 +116,19 @@ const Line: React.FC = (props) => { const successPercentStyle: React.CSSProperties = { width: `${validProgress(successPercent)}%`, - height: strokeWidth || (size === 'small' ? 6 : 8), + height, borderRadius, backgroundColor: success?.strokeColor, }; + const outerStyle: React.CSSProperties = { + width: width < 0 ? '100%' : width, + height, + }; + return ( <> -
+
{successPercent !== undefined ? ( diff --git a/components/progress/Steps.tsx b/components/progress/Steps.tsx index 0f0de997a794..85f7c27b59d5 100644 --- a/components/progress/Steps.tsx +++ b/components/progress/Steps.tsx @@ -1,10 +1,10 @@ import classNames from 'classnames'; import * as React from 'react'; -import type { ProgressProps, ProgressSize } from './progress'; +import type { ProgressProps } from './progress'; +import { getSize } from './utils'; interface ProgressStepsProps extends ProgressProps { steps: number; - size?: ProgressSize; strokeColor?: string | string[]; trailColor?: string; } @@ -22,6 +22,9 @@ const Steps: React.FC = (props) => { } = props; const current = Math.round(steps * (percent / 100)); const stepWidth = size === 'small' ? 2 : 14; + const mergedSize = size ?? [stepWidth, strokeWidth]; + const [width, height] = getSize(mergedSize, 'step', { steps, strokeWidth }); + const unitWidth = width / steps; const styledSteps: React.ReactNode[] = new Array(steps); for (let i = 0; i < steps; i++) { const color = Array.isArray(strokeColor) ? strokeColor[i] : strokeColor; @@ -33,8 +36,8 @@ const Steps: React.FC = (props) => { })} style={{ backgroundColor: i <= current - 1 ? color : trailColor, - width: stepWidth, - height: strokeWidth, + width: unitWidth, + height, }} /> ); diff --git a/components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap index ee5c44f25849..f551c229e80e 100644 --- a/components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -328,7 +328,7 @@ Array [ exports[`renders ./components/progress/demo/circle-micro.tsx extend context correctly 1`] = ` Array [
- - - - - + + + + + + +
,
+
+
+
+
+
+
+
+ + 50% + +
+
+
+
+
+
+
+
+
+ + 50% + +
+
+
+
+
+
+
+
+
+ + 50% + +
+
+
, +
, +
, +
+
+
+
+ + + + + + + 50% + +
+
+
+
+
+
+ + + + + + + 50% + +
+
+
+
+
+
+
+
+
+ +
+
+ + + + + + + +
+
+
+
, +
, +
, +
+
+
+
+ + + + + + + 50% + +
+
+
+
+
+
+ + + + + + + 50% + +
+
+
+
+
+
+
+
+
+ +
+
+ + + + + + + +
+
+
+
, +
, +
, +
+
+
+
+
+
+
+ + 50% + +
+
+
+
+
+
+
+
+
+ + 50% + +
+
+
+
+
+
+
+
+
+ + 50% + +
+
+
+
+
+
+
+
+
+ + 50% + +
+
+
+
, +] +`; + exports[`renders ./components/progress/demo/steps.tsx extend context correctly 1`] = ` Array [
- - - - - + + + + + + +
,
+
+
+
+
+
+
+
+ + 50% + +
+
+
+
+
+
+
+
+
+ + 50% + +
+
+
+
+
+
+
+
+
+ + 50% + +
+
+
, +
, +
, +
+
+
+
+ + + + + + + 50% + +
+
+
+
+
+
+ + + + + + + 50% + +
+
+
+
+
+
+ + + + + + + +
+
+
+
, +
, +
, +
+
+
+
+ + + + + + + 50% + +
+
+
+
+
+
+ + + + + + + 50% + +
+
+
+
+
+
+ + + + + + + +
+
+
+
, +
, +
, +
+
+
+
+
+
+
+ + 50% + +
+
+
+
+
+
+
+
+
+ + 50% + +
+
+
+
+
+
+
+
+
+ + 50% + +
+
+
+
+
+
+
+
+
+ + 50% + +
+
+
+
, +] +`; + exports[`renders ./components/progress/demo/steps.tsx correctly 1`] = ` Array [
{ 'Warning: [antd: Progress] `success.progress` is deprecated. Please use `success.percent` instead.', ); }); + it('should warnning if use `width` prop', () => { + const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); + render(); + expect(errorSpy).toHaveBeenCalledWith( + 'Warning: [antd: Progress] `width` is deprecated. Please use `size` instead.', + ); + }); + + it('should warnning if use `strokeWidth` prop in type Line', () => { + const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); + render(); + expect(errorSpy).toHaveBeenCalledWith( + 'Warning: [antd: Progress] `strokeWidth` is deprecated. Please use `size` instead.', + ); + }); it('should warnning if use `progress` in success in type Circle', () => { const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); @@ -240,6 +255,22 @@ describe('Progress', () => { ); }); + it('should warnning if pass number[] into `size` in type Circle', () => { + const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); + render(); + expect(errorSpy).toHaveBeenCalledWith( + 'Warning: [antd: Progress] Type "circle" and "dashbord" do not accept array as `size`, please use number or preset size instead.', + ); + }); + + it('should warnning if pass number[] into `size` in type dashboard', () => { + const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); + render(); + expect(errorSpy).toHaveBeenCalledWith( + 'Warning: [antd: Progress] Type "circle" and "dashbord" do not accept array as `size`, please use number or preset size instead.', + ); + }); + describe('github issues', () => { // https://github.com/ant-design/ant-design/issues/30685 it('Rendered more hooks than during the previous render', () => { @@ -258,4 +289,51 @@ describe('Progress', () => { }).not.toThrow(); }); }); + + describe('progress size', () => { + const App = (props: { size: ProgressProps['size'] }) => ( + <> + + + + + + ); + + const { container, rerender } = render(); + expect(container.querySelector('.ant-progress-line .ant-progress-outer')).toHaveStyle({ + width: '30px', + }); + expect(container.querySelector('.ant-progress-steps .ant-progress-steps-item')).toHaveStyle({ + width: '30px', + height: '30px', + }); + expect(container.querySelectorAll('.ant-progress-circle .ant-progress-inner')[0]).toHaveStyle({ + width: '30px', + height: '30px', + }); + expect(container.querySelectorAll('.ant-progress-circle .ant-progress-inner')[1]).toHaveStyle({ + width: '30px', + height: '30px', + }); + + rerender(); + + expect(container.querySelector('.ant-progress-line .ant-progress-outer')).toHaveStyle({ + width: '60px', + height: '20px', + }); + expect(container.querySelector('.ant-progress-steps .ant-progress-steps-item')).toHaveStyle({ + width: '60px', + height: '20px', + }); + expect(container.querySelectorAll('.ant-progress-circle .ant-progress-inner')[0]).toHaveStyle({ + width: '60px', + height: '60px', + }); + expect(container.querySelectorAll('.ant-progress-circle .ant-progress-inner')[1]).toHaveStyle({ + width: '60px', + height: '60px', + }); + }); }); diff --git a/components/progress/demo/circle-micro.tsx b/components/progress/demo/circle-micro.tsx index b5f99face640..31fb7ed368be 100644 --- a/components/progress/demo/circle-micro.tsx +++ b/components/progress/demo/circle-micro.tsx @@ -8,7 +8,7 @@ const App: React.FC = () => ( trailColor="#e6f4ff" percent={60} strokeWidth={20} - width={14} + size={14} format={(number) => `进行中，已完成${number}%`} /> 代码发布 diff --git a/components/progress/demo/circle-mini.tsx b/components/progress/demo/circle-mini.tsx index eff6e4e47886..7aaf15456f22 100644 --- a/components/progress/demo/circle-mini.tsx +++ b/components/progress/demo/circle-mini.tsx @@ -3,9 +3,9 @@ import { Progress, Space } from 'antd'; const App: React.FC = () => ( - - - + + + ); diff --git a/components/progress/demo/size.md b/components/progress/demo/size.md new file mode 100644 index 000000000000..c0a90de792d9 --- /dev/null +++ b/components/progress/demo/size.md @@ -0,0 +1,7 @@ +## zh-CN + +进度条尺寸。 + +## en-US + +The size of progress. diff --git a/components/progress/demo/size.tsx b/components/progress/demo/size.tsx new file mode 100644 index 000000000000..21554ed94ffc --- /dev/null +++ b/components/progress/demo/size.tsx @@ -0,0 +1,36 @@ +import { Progress, Space } from 'antd'; +import React from 'react'; + +const App: React.FC = () => ( + <> + + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + + + +); + +export default App; diff --git a/components/progress/index.en-US.md b/components/progress/index.en-US.md index ae2fdc567b7c..94af02bc030c 100644 --- a/components/progress/index.en-US.md +++ b/components/progress/index.en-US.md @@ -33,22 +33,24 @@ If it will take a long time to complete an operation, you can use `Progress` to Stroke Linecap Custom line gradient Progress bar with steps +Progress size ## API Properties that shared by all types. -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| format | The template function of the content | function(percent, successPercent) | (percent) => percent + `%` | -| percent | To set the completion percentage | number | 0 | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| format | The template function of the content | function(percent, successPercent) | (percent) => percent + `%` | - | +| percent | To set the completion percentage | number | 0 | - | | showInfo | Whether to display the progress value and the status icon | boolean | true | | status | To set the status of the Progress, options: `success` `exception` `normal` `active`(line only) | string | - | -| strokeColor | The color of progress bar | string | - | -| strokeLinecap | To set the style of the progress linecap | `round` \| `butt` \| `square`, see [stroke-linecap](https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-linecap) | `round` | -| success | Configs of successfully progress bar | { percent: number, strokeColor: string } | - | -| trailColor | The color of unfilled part | string | - | +| strokeColor | The color of progress bar | string | - | - | +| strokeLinecap | To set the style of the progress linecap | `round` \| `butt` \| `square`, see [stroke-linecap](https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-linecap) | `round` | - | +| success | Configs of successfully progress bar | { percent: number, strokeColor: string } | - | - | +| trailColor | The color of unfilled part | string | - | - | | type | To set the type, options: `line` `circle` `dashboard` | string | `line` | +| size | Progress size | number \| \[number, number] \| "small" \| "default" | "default" | v5.3.0 | ### `type="line"` @@ -56,15 +58,13 @@ Properties that shared by all types. | --- | --- | --- | --- | --- | | steps | The total step count | number | - | - | | strokeColor | The color of progress bar, render `linear-gradient` when passing an object, could accept `string[]` when has `steps`. | string \| string[] \| { from: string; to: string; direction: string } | - | 4.21.0: `string[]` | -| strokeWidth | To set the width of the progress bar, unit: `px` | number | 10 | - | ### `type="circle"` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| strokeColor | The color of circular progress, render `linear-gradient` when passing an object | string \| object | - | -| strokeWidth | To set the width of the circular progress, unit: percentage of the canvas width | number | 6 | -| width | To set the canvas width of the circular progress, unit: `px` | number | 132 | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| strokeColor | The color of circular progress, render `linear-gradient` when passing an object | string \| object | - | - | +| strokeWidth | To set the width of the circular progress, unit: percentage of the canvas width | number | 6 | - | ### `type="dashboard"` @@ -73,4 +73,3 @@ Properties that shared by all types. | gapDegree | The gap degree of half circle, 0 ~ 295 | number | 75 | | gapPosition | The gap position, options: `top` `bottom` `left` `right` | string | `bottom` | | strokeWidth | To set the width of the dashboard progress, unit: percentage of the canvas width | number | 6 | -| width | To set the canvas width of the dashboard progress, unit: `px` | number | 132 | diff --git a/components/progress/index.zh-CN.md b/components/progress/index.zh-CN.md index d0e45e586ec4..fdede7fc00b5 100644 --- a/components/progress/index.zh-CN.md +++ b/components/progress/index.zh-CN.md @@ -34,22 +34,24 @@ demo: 边缘形状 自定义进度条渐变色 步骤进度条 +尺寸 ## API 各类型共用的属性。 -| 属性 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| format | 内容的模板函数 | function(percent, successPercent) | (percent) => percent + `%` | -| percent | 百分比 | number | 0 | -| showInfo | 是否显示进度数值或状态图标 | boolean | true | -| status | 状态，可选：`success` `exception` `normal` `active`(仅限 line) | string | - | -| strokeColor | 进度条的色彩 | string | - | -| strokeLinecap | 进度条的样式 | `round` \| `butt` \| `square`，区别详见 [stroke-linecap](https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-linecap) | `round` | -| success | 成功进度条相关配置 | { percent: number, strokeColor: string } | - | -| trailColor | 未完成的分段的颜色 | string | - | -| type | 类型，可选 `line` `circle` `dashboard` | string | `line` | +| 属性 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| format | 内容的模板函数 | function(percent, successPercent) | (percent) => percent + `%` | - | +| percent | 百分比 | number | 0 | - | +| showInfo | 是否显示进度数值或状态图标 | boolean | true | - | +| status | 状态，可选：`success` `exception` `normal` `active`(仅限 line) | string | - | - | +| strokeColor | 进度条的色彩 | string | - | - | +| strokeLinecap | 进度条的样式 | `round` \| `butt` \| `square`，区别详见 [stroke-linecap](https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-linecap) | `round` | - | +| success | 成功进度条相关配置 | { percent: number, strokeColor: string } | - | - | +| trailColor | 未完成的分段的颜色 | string | - | - | +| type | 类型，可选 `line` `circle` `dashboard` | string | `line` | - | +| size | 进度条的尺寸 | number \| \[number, number] \| "small" \| "default" | "default" | v5.3.0 | ### `type="line"` @@ -57,21 +59,18 @@ demo: | --- | --- | --- | --- | --- | | steps | 进度条总共步数 | number | - | - | | strokeColor | 进度条的色彩，传入 object 时为渐变。当有 `steps` 时支持传入一个数组。 | string \| string[] \| { from: string; to: string; direction: string } | - | 4.21.0: `string[]` | -| strokeWidth | 进度条线的宽度，单位 px | number | 10 | - | ### `type="circle"` -| 属性 | 说明 | 类型 | 默认值 | -| ----------- | ------------------------------------------------ | ---------------- | ------ | -| strokeColor | 圆形进度条线的色彩，传入 object 时为渐变 | string \| object | - | -| strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | -| width | 圆形进度条画布宽度，单位 px | number | 132 | +| 属性 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| strokeColor | 圆形进度条线的色彩，传入 object 时为渐变 | string \| object | - | - | +| strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | - | ### `type="dashboard"` -| 属性 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| gapDegree | 仪表盘进度条缺口角度，可取值 0 ~ 295 | number | 75 | -| gapPosition | 仪表盘进度条缺口位置 | `top` \| `bottom` \| `left` \| `right` | `bottom` | -| strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | -| width | 仪表盘进度条画布宽度，单位 px | number | 132 | +| 属性 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| gapDegree | 仪表盘进度条缺口角度，可取值 0 ~ 295 | number | 75 | - | +| gapPosition | 仪表盘进度条缺口位置 | `top` \| `bottom` \| `left` \| `right` | `bottom` | - | +| strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | - | diff --git a/components/progress/progress.tsx b/components/progress/progress.tsx index 566416678b41..f34d70bb5848 100644 --- a/components/progress/progress.tsx +++ b/components/progress/progress.tsx @@ -12,7 +12,7 @@ import Circle from './Circle'; import Line from './Line'; import Steps from './Steps'; import useStyle from './style'; -import { getSuccessPercent, validProgress } from './utils'; +import { getSize, getSuccessPercent, validProgress } from './utils'; const ProgressTypes = ['line', 'circle', 'dashboard'] as const; export type ProgressType = typeof ProgressTypes[number]; @@ -42,12 +42,13 @@ export interface ProgressProps { strokeLinecap?: 'butt' | 'square' | 'round'; strokeColor?: string | string[] | ProgressGradient; trailColor?: string; + /** @deprecated Use `size` instead */ width?: number; success?: SuccessProps; style?: React.CSSProperties; gapDegree?: number; gapPosition?: 'top' | 'bottom' | 'left' | 'right'; - size?: ProgressSize; + size?: number | [number, number] | ProgressSize; steps?: number; /** @deprecated Use `success` instead */ successPercent?: number; @@ -112,11 +113,14 @@ const Progress: React.FC = (props) => { ); }, [showInfo, percentNumber, progressStatus, type, prefixCls, format]); - warning( - !('successPercent' in props), - 'Progress', - '`successPercent` is deprecated. Please use `success.percent` instead.', - ); + if (process.env.NODE_ENV !== 'production') { + warning( + !('successPercent' in props), + 'Progress', + '`successPercent` is deprecated. Please use `success.percent` instead.', + ); + warning(!('width' in props), 'Progress', '`width` is deprecated. Please use `size` instead.'); + } const strokeColorNotArray = Array.isArray(strokeColor) ? strokeColor[0] : strokeColor; const strokeColorNotGradient = @@ -154,11 +158,11 @@ const Progress: React.FC = (props) => { const classString = classNames( prefixCls, { - [`${prefixCls}-inline-circle`]: type === 'circle' && props.width! <= 20, + [`${prefixCls}-inline-circle`]: type === 'circle' && getSize(size, 'circle')[0] <= 20, [`${prefixCls}-${(type === 'dashboard' && 'circle') || (steps && 'steps') || type}`]: true, [`${prefixCls}-status-${progressStatus}`]: true, [`${prefixCls}-show-info`]: showInfo, - [`${prefixCls}-${size}`]: size, + [`${prefixCls}-${size}`]: typeof size === 'string', [`${prefixCls}-rtl`]: direction === 'rtl', }, className, diff --git a/components/progress/utils.ts b/components/progress/utils.ts index 0889745f5a60..60c5f4145337 100644 --- a/components/progress/utils.ts +++ b/components/progress/utils.ts @@ -35,10 +35,62 @@ export const getPercentage = ({ percent, success, successPercent }: ProgressProp return [realSuccessPercent, validProgress(validProgress(percent) - realSuccessPercent)]; }; -export const getStrokeColor = ({ - success = {}, - strokeColor, -}: Partial): (string | Record)[] => { +export const getStrokeColor = ({ success = {}, strokeColor }: Partial): ( + | string + | Record +)[] => { const { strokeColor: successColor } = success; return [successColor || presetPrimaryColors.green, strokeColor || null!]; }; + +export const getSize = ( + size: ProgressProps['size'], + type: ProgressProps['type'] | 'step', + extra?: { + steps?: number; + strokeWidth?: number; + }, +): [number, number] => { + let width: number = -1; + let height: number = -1; + if (type === 'step') { + const steps = extra!.steps!; + const strokeWidth = extra!.strokeWidth!; + if (typeof size === 'string' || typeof size === 'undefined') { + width = size === 'small' ? 2 : 14; + height = strokeWidth ?? 8; + } else if (typeof size === 'number') { + [width, height] = [size, size]; + } else { + [width = 14, height = 8] = size; + } + width *= steps; + } else if (type === 'line') { + const strokeWidth = extra?.strokeWidth; + if (typeof size === 'string' || typeof size === 'undefined') { + height = strokeWidth || (size === 'small' ? 6 : 8); + } else if (typeof size === 'number') { + [width, height] = [size, size]; + } else { + [width = -1, height = 8] = size; + } + } else if (type === 'circle' || type === 'dashboard') { + if (typeof size === 'string' || typeof size === 'undefined') { + [width, height] = size === 'small' ? [60, 60] : [120, 120]; + } else if (typeof size === 'number') { + [width, height] = [size, size]; + } else { + if (process.env.NODE_ENV !== 'production') { + warning( + false, + 'Progress', + 'Type "circle" and "dashbord" do not accept array as `size`, please use number or preset size instead.', + ); + } + + width = size[0] ?? size[1] ?? 120; + height = size[0] ?? size[1] ?? 120; + } + } + return [width, height]; +}; diff --git a/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap index eaa651e7c31f..3f2ba66aee33 100644 --- a/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1895,7 +1895,7 @@ Array [ class="ant-steps-progress-icon" >
{ null} />