diff --git a/packages/components/progress/Progress.tsx b/packages/components/progress/Progress.tsx index 4bb9c72b6e..1d629bcbb3 100644 --- a/packages/components/progress/Progress.tsx +++ b/packages/components/progress/Progress.tsx @@ -1,4 +1,4 @@ -import React, { forwardRef, isValidElement } from 'react'; +import React, { forwardRef, isValidElement, useRef, useState, useEffect, useCallback } from 'react'; import { CheckCircleFilledIcon as TdCheckCircleFilledIcon, CheckIcon as TdCheckIcon, @@ -55,6 +55,42 @@ const Progress = forwardRef((props, ref) => { const status = !customizeStatus && percentage >= 100 ? 'success' : customizeStatus; + // plump 模式下的 label 位置计算 + const innerRef = useRef(null); + const labelRef = useRef(null); + const [labelPosition, setLabelPosition] = useState<'inside' | 'outside'>('inside'); + + const getLabelPosition = useCallback(() => { + if (!innerRef.current || !labelRef.current) return 'inside'; + + const innerWidth = innerRef.current.offsetWidth; // 填充区域宽度 + const labelWidth = labelRef.current.offsetWidth; // 文字实际宽度 + const padding = 8; // 左右 padding + + return innerWidth >= labelWidth + padding ? 'inside' : 'outside'; + }, []); + + useEffect(() => { + // 仅在 plump 模式下启用 + if (theme !== 'plump') return; + + // 初始计算 + setLabelPosition(getLabelPosition() as 'inside' | 'outside'); + + // 如果不支持 ResizeObserver，仅使用初始计算 + if (typeof ResizeObserver === 'undefined') return; + + const observer = new ResizeObserver(() => { + setLabelPosition(getLabelPosition() as 'inside' | 'outside'); + }); + + if (innerRef.current) { + observer.observe(innerRef.current); + } + + return () => observer.disconnect(); + }, [theme, percentage, label, getLabelPosition]); + let iconMap = { success: CheckCircleFilledIcon, error: CloseCircleFilledIcon, @@ -205,29 +241,32 @@ const Progress = forwardRef((props, ref) => { borderRadius: getHeight(), } as React.CSSProperties; if (theme === 'plump') { - const PLUMP_SEPARATE = 10; progressDom = (
PLUMP_SEPARATE, - [`${classPrefix}-progress--under-ten`]: percentage <= PLUMP_SEPARATE, + [`${classPrefix}-progress--over-ten`]: labelPosition === 'inside', + [`${classPrefix}-progress--under-ten`]: labelPosition === 'outside', })} style={trackStyle} > - {percentage > PLUMP_SEPARATE ? ( -
+ {labelPosition === 'inside' ? ( +
{label && ( -
+
{isValidElement(label) ? label : `${percentage}%`}
)}
) : ( <> -
- {getInfoContent()} +
+ {label && ( +
+ {isValidElement(label) ? label : `${percentage}%`} +
+ )} )}
diff --git a/packages/components/progress/__tests__/progress.test.tsx b/packages/components/progress/__tests__/progress.test.tsx index 92b44ef6ed..92d7c39d55 100644 --- a/packages/components/progress/__tests__/progress.test.tsx +++ b/packages/components/progress/__tests__/progress.test.tsx @@ -1,58 +1,167 @@ -/* eslint-disable prefer-destructuring */ -/* - * @Author: Bin - * @Date: 2022-04-07 - * @FilePath: /tdesign-react/src/progress/__tests__/progress.test.tsx - */ -import React from 'react'; -import { render, waitFor } from '@test/utils'; -import Progress from '../Progress'; -import { ThemeEnum } from '../type'; - -describe('Progress 组件测试', () => { - test('render theme', async () => { - const testId = 'progress test theme'; - const themes: ThemeEnum[] = ['line', 'plump', 'circle']; - const { getByTestId } = render( -
- {themes?.map((theme, index) => ( - - ))} -
, - ); - - const instance = await waitFor(() => getByTestId(testId)); - - for (let index = 0; index < themes.length; index++) { - const theme = themes[index]; - expect(() => instance.querySelector(`.t-progress--${theme}`)).not.toBe(null); - } - }); - - test('render size', async () => { - // const testId = 'progress test size'; - const sizes: any[] = [ - { name: 'small', size: 72 }, - { name: 'medium', size: 112 }, - { name: 'large', size: 160 }, - { name: 240, size: 240 }, - ]; - - const createProgressSizeTest = async (sizeOjb: any) => { - // const sizeOjb = sizes[0]; - const testId = `progress test size ${sizeOjb.name}`; - const view = render( -
- -
, - ); - const instance = await waitFor(() => view.getByTestId(testId)); - expect(instance.querySelector('.t-progress--circle')).toHaveStyle(`width: ${sizeOjb.size}px`); - }; - - await createProgressSizeTest(sizes[0]); - await createProgressSizeTest(sizes[1]); - await createProgressSizeTest(sizes[2]); - await createProgressSizeTest(sizes[3]); - }); -}); +/* eslint-disable prefer-destructuring */ +/* + * @Author: Bin + * @Date: 2022-04-07 + * @FilePath: /tdesign-react/src/progress/__tests__/progress.test.tsx + */ +import React from 'react'; +import { render, waitFor } from '@test/utils'; +import { vi } from 'vitest'; +import Progress from '../Progress'; +import { ThemeEnum } from '../type'; + +// Mock ResizeObserver +const mockResizeObserver = vi.fn().mockImplementation(() => ({ + observe: vi.fn(), + unobserve: vi.fn(), + disconnect: vi.fn(), +})); +window.ResizeObserver = mockResizeObserver as any; + +// Mock offsetWidth +Object.defineProperties(HTMLElement.prototype, { + offsetWidth: { + get() { + // 根据元素 class 返回不同的宽度 + if (this.classList.contains('t-progress__inner')) { + return 200; // 进度条填充区域宽度 + } + if (this.classList.contains('t-progress__info')) { + return 30; // label 文字宽度 + } + return 0; + }, + configurable: true, + }, +}); + +describe('Progress 组件测试', () => { + test('render theme', async () => { + const testId = 'progress test theme'; + const themes: ThemeEnum[] = ['line', 'plump', 'circle']; + const { getByTestId } = render( +
+ {themes?.map((theme, index) => ( + + ))} +
, + ); + + const instance = await waitFor(() => getByTestId(testId)); + + for (let index = 0; index < themes.length; index++) { + const theme = themes[index]; + expect(() => instance.querySelector(`.t-progress--${theme}`)).not.toBe(null); + } + }); + + test('render size', async () => { + // const testId = 'progress test size'; + const sizes: any[] = [ + { name: 'small', size: 72 }, + { name: 'medium', size: 112 }, + { name: 'large', size: 160 }, + { name: 240, size: 240 }, + ]; + + const createProgressSizeTest = async (sizeOjb: any) => { + // const sizeOjb = sizes[0]; + const testId = `progress test size ${sizeOjb.name}`; + const view = render( +
+ +
, + ); + const instance = await waitFor(() => view.getByTestId(testId)); + expect(instance.querySelector('.t-progress--circle')).toHaveStyle(`width: ${sizeOjb.size}px`); + }; + + await createProgressSizeTest(sizes[0]); + await createProgressSizeTest(sizes[1]); + await createProgressSizeTest(sizes[2]); + await createProgressSizeTest(sizes[3]); + }); + + describe('plump theme label position', () => { + test('label should be inside when inner width is enough', async () => { + const testId = 'progress plump inside'; + const { getByTestId } = render( +
+ +
, + ); + + const instance = await waitFor(() => getByTestId(testId)); + // inner(200) >= label(30) + 8，label 应在内部 + expect(instance.querySelector('.t-progress--over-ten')).toBeTruthy(); + }); + + test('label should be outside when inner width is not enough', async () => { + const testId = 'progress plump outside'; + // Mock 小的 inner 宽度 + Object.defineProperty(HTMLElement.prototype, 'offsetWidth', { + get() { + if (this.classList.contains('t-progress__inner')) { + return 20; // 小于 label 宽度 + } + if (this.classList.contains('t-progress__info')) { + return 30; + } + return 0; + }, + configurable: true, + }); + + const { getByTestId } = render( +
+ +
, + ); + + const instance = await waitFor(() => getByTestId(testId)); + + // inner(20) < label(30) + 8，label 应在外部 + expect(instance.querySelector('.t-progress--under-ten')).toBeTruthy(); + + // 恢复原始 mock + Object.defineProperty(HTMLElement.prototype, 'offsetWidth', { + get() { + if (this.classList.contains('t-progress__inner')) { + return 200; + } + if (this.classList.contains('t-progress__info')) { + return 30; + } + return 0; + }, + configurable: true, + }); + }); + + test('label should be hidden when label is false', async () => { + const testId = 'progress plump no label'; + const { getByTestId } = render( +
+ +
, + ); + + const instance = await waitFor(() => getByTestId(testId)); + // label 为 false 时不显示 + expect(instance.querySelector('.t-progress__info')).toBeFalsy(); + }); + + test('custom label should render correctly', async () => { + const testId = 'progress plump custom label'; + const customLabel = Custom; + const { getByTestId } = render( +
+ +
, + ); + + const instance = await waitFor(() => getByTestId(testId)); + expect(instance.querySelector('[data-testid="custom-label"]')).toBeTruthy(); + }); + }); +}); diff --git a/packages/components/progress/_example/circle.tsx b/packages/components/progress/_example/circle.tsx index a66f7380fd..7b9eab6a51 100644 --- a/packages/components/progress/_example/circle.tsx +++ b/packages/components/progress/_example/circle.tsx @@ -1,78 +1,61 @@ import React, { useState, useEffect } from 'react'; import { Progress, Space } from 'tdesign-react'; -import type { CSSProperties } from 'react'; - -const commonStyle: CSSProperties = { - textAlign: 'center', -}; - -export default function LineProgress() { - const [percent, setPercent] = useState(0); +export default function CircleProgress() { + const [percent, setPercent] = useState(10); useEffect(() => { - const timer = setInterval(() => setPercent((percent) => (percent % 100) + 10), 1000); + const timer = setInterval(() => setPercent((v) => (v % 100) + 10), 1000); return () => clearInterval(timer); }, []); return ( - - - -
默认样式
- - - -
不显示数字
- - - -
自定义内容
- 75 day
} percentage={percent}> + +
默认
+ {/* 重要：strokeWidth 大小不能超过 size 的一半，否则无法渲染出环形 */} + + +
默认样式
+ + + +
不显示数字
+ + + +
自定义内容
+ {percent}day
} percentage={percent} /> - - -
进度完成
- + + +
进度状态完成
+ - -
进度发生错误
- + +
进度状态发生重大错误
+ - -
进度被中断
- - - -
自定义颜色
- + +
进度状态被中断
+ - - -
小尺寸
- - - -
默认尺寸
- - - -
大尺寸
- - - -
自定义尺寸
- +
默认不同尺寸
+ + +
小尺寸
+ + + +
默认尺寸
+ + + +
大尺寸
+ diff --git a/packages/components/progress/_example/line.tsx b/packages/components/progress/_example/line.tsx index c601520107..8459672d13 100644 --- a/packages/components/progress/_example/line.tsx +++ b/packages/components/progress/_example/line.tsx @@ -2,52 +2,55 @@ import React, { useState, useEffect } from 'react'; import { Progress, Space } from 'tdesign-react'; export default function LineProgress() { - const [percent, setPercent] = useState(0); + const [percent, setPercent] = useState(10); useEffect(() => { - const timer = setInterval(() => setPercent((percent) => (percent % 100) + 10), 1000); + const timer = setInterval(() => setPercent((v) => (v % 100) + 10), 1000); return () => clearInterval(timer); }, []); return ( -

默认在线形外展示进度和状态

-
默认样式
- +

动态更新示例

+ +
进度正常更新
+ -
进度被中断
- +
不显示数字
+ -
进度状态发生重大错误
- +
自定义内容
+ 自定义文本} percentage={percent} /> + -
进度正常更新
- +

默认在线形外展示进度和状态

+ +
默认样式
+ + +
100%
+ -
不显示数字
- +
进度状态完成
+ -
自定义内容
- 自定义文本} percentage={percent}> +
进度状态发生重大错误
+ -
自定义颜色与高度
- +
进度状态被中断
+ -
进度条渐变色
- - - +
渐变色
+ +

可以在线形内展示进度信息

默认样式
-
进度0-10%时数字数字位置出现在目前进度的右边区域
- + +
进度条内部宽度不足以展示其内容时，该内容会自动显示在进度条右侧
+ 当前进度为：{percent}%} percentage={percent} /> ); diff --git a/packages/components/progress/_example/plump.tsx b/packages/components/progress/_example/plump.tsx deleted file mode 100644 index 866b0ccbe4..0000000000 --- a/packages/components/progress/_example/plump.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import { Progress } from 'tdesign-react'; - -export default function LineProgress() { - const style = { margin: '20px 0 10px' }; - return ( -
-
默认样式
- -
进度0-10%时数字数字位置出现在目前进度的右边区域
- -
100%
- -
success
- -
warning
- -
error
- -
active
- -
不显示数字
- -
自定义颜色与尺寸
- -
进度条渐变色
- -
- -
- -
- ); -} diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index edbb2283ab..5e692d4c0c 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -80620,26 +80620,35 @@ exports[`csr snapshot test > csr test packages/components/progress/_example/circ
+
+
+ 默认 +
+
-
+
默认样式
@@ -80654,7 +80663,7 @@ exports[`csr snapshot test > csr test packages/components/progress/_example/circ
- 0% + 10%
csr test packages/components/progress/_example/circ stroke="var(--td-bg-color-component)" stroke-width="6" /> +
@@ -80679,13 +80699,15 @@ exports[`csr snapshot test > csr test packages/components/progress/_example/circ class="t-space-item" >
-
+
不显示数字
@@ -80710,6 +80732,17 @@ exports[`csr snapshot test > csr test packages/components/progress/_example/circ stroke="var(--td-bg-color-component)" stroke-width="6" /> +
@@ -80720,13 +80753,15 @@ exports[`csr snapshot test > csr test packages/components/progress/_example/circ class="t-space-item" >
-
+
自定义内容
@@ -80742,7 +80777,8 @@ exports[`csr snapshot test > csr test packages/components/progress/_example/circ class="t-progress__info" >
- 75 day + 10 + day
csr test packages/components/progress/_example/circ stroke="var(--td-bg-color-component)" stroke-width="6" /> +
@@ -80771,20 +80818,22 @@ exports[`csr snapshot test > csr test packages/components/progress/_example/circ >
-
- 进度完成 +
+ 进度状态完成
csr test packages/components/progress/_example/circ class="t-space-item" >
-
- 进度发生错误 +
+ 进度状态发生重大错误
csr test packages/components/progress/_example/circ stroke="var(--td-bg-color-component)" stroke-width="6" /> +
@@ -80918,14 +80980,16 @@ exports[`csr snapshot test > csr test packages/components/progress/_example/circ class="t-space-item" >
-
- 进度被中断 +
+ 进度状态被中断
csr test packages/components/progress/_example/circ stroke="var(--td-bg-color-component)" stroke-width="6" /> - -
-
-
-
-
-
-
-
-
- 自定义颜色 -
-
-
-
-
-
- - - - - -
-
@@ -81046,24 +81056,33 @@ exports[`csr snapshot test > csr test packages/components/progress/_example/circ
+
+
+ 默认不同尺寸 +
+
-
+
小尺寸
@@ -81078,7 +81097,7 @@ exports[`csr snapshot test > csr test packages/components/progress/_example/circ
- 0% + 30%
csr test packages/components/progress/_example/circ stroke="var(--td-bg-color-component)" stroke-width="4" /> +
@@ -81103,13 +81133,15 @@ exports[`csr snapshot test > csr test packages/components/progress/_example/circ class="t-space-item" >
-
+
默认尺寸
@@ -81124,7 +81156,7 @@ exports[`csr snapshot test > csr test packages/components/progress/_example/circ
- 0% + 30%
csr test packages/components/progress/_example/circ stroke="var(--td-bg-color-component)" stroke-width="6" /> +
@@ -81149,13 +81192,15 @@ exports[`csr snapshot test > csr test packages/components/progress/_example/circ class="t-space-item" >
-
+
大尺寸
@@ -81170,7 +81215,7 @@ exports[`csr snapshot test > csr test packages/components/progress/_example/circ
- 0% + 75%
csr test packages/components/progress/_example/circ stroke="var(--td-bg-color-component)" stroke-width="6" /> - -
-
-
-
-
-
-
-
-
- 自定义尺寸 -
-
-
-
-
-
- 0% -
-
@@ -81253,315 +81263,101 @@ exports[`csr snapshot test > csr test packages/components/progress/_example/line class="t-space-item" >

- 默认在线形外展示进度和状态 + 动态更新示例

-
- 默认样式 -
-
-
-
-
-
-
-
-
- 0% -
-
-
-
-
-
- 进度被中断 -
-
-
-
+
-
-
-
-
- - - +
+ 进度正常更新
-
-
-
-
- 进度状态发生重大错误 -
-
-
-
-
+
-
-
- - - -
-
-
-
-
-
- 进度正常更新 -
-
-
-
-
-
-
-
-
- 0% -
-
-
-
-
-
- 不显示数字 -
-
-
-
-
-
-
-
-
-
-
-
-
- 自定义内容 -
-
-
-
-
-
-
-
-
-
- 自定义文本 +
+
+
+
+ 10% +
-
-
-
-
- 自定义颜色与高度 -
-
-
-
-
-
-
-
- 0% +
+ 不显示数字
-
-
-
-
- 进度条渐变色 -
-
-
-
-
+
-
-
- 0% + class="t-progress--thin" + > +
+
+
+
-
-
-
-
-
-
-
-
- 0% +
+ 自定义内容
-
-
-
-
-
+
-
-
- 0% + class="t-progress--thin" + > +
+
+
+
+
+ 自定义文本 +
+
+
@@ -81570,7 +81366,7 @@ exports[`csr snapshot test > csr test packages/components/progress/_example/line class="t-space-item" >

- 可以在线形内展示进度信息 + 默认在线形外展示进度和状态

csr test packages/components/progress/_example/line >
- 30% -
+ class="t-progress__inner" + style="width: 30%;" + /> +
+
+ 30%
@@ -81612,7 +81410,7 @@ exports[`csr snapshot test > csr test packages/components/progress/_example/line class="t-space-item" >
- 进度0-10%时数字数字位置出现在目前进度的右边区域 + 100%
csr test packages/components/progress/_example/line >
+ class="t-progress__bar" + > +
+
- 5% + + +
-
-
-
-
-`; - -exports[`csr snapshot test > csr test packages/components/progress/_example/plump.tsx 1`] = ` -
-
-
- 默认样式 -
-
-
-
- 30% +
+ 进度状态完成
-
-
-
- 进度0-10%时数字数字位置出现在目前进度的右边区域 -
-
-
+ class="t-space-item" + > +
+
+
+
+
+
+ + + +
+
+
+
- 5% +
+ 进度状态发生重大错误 +
-
-
-
- 100% -
-
-
-
- 100% +
+
+
+
+
+
+ + + +
+
-
-
-
- success -
-
-
-
- 100% +
+ 进度状态被中断
-
-
-
- warning -
-
-
-
- 30% +
+
+
+
+
+
+ + + +
+
-
-
-
- error -
-
-
-
- 30% +
+ 渐变色
-
-
-
- active -
-
-
-
- 30% +
+
+
+
+
+
+ 60% +
+
- 不显示数字 -
-
-
-
-
+

+ 可以在线形内展示进度信息 +

- 自定义颜色与尺寸 -
-
-
- 30% +
+ 默认样式
-
-
-
- 进度条渐变色 -
-
-
-
- 30% +
+
+
+
+ 30% +
+
-
-
-
-
-
-
- 30% +
+ 进度条内部宽度不足以展示其内容时，该内容会自动显示在进度条右侧
-
-
-
-
-
-
- 30% +
+
+
+
+
+ 当前进度为： + 10 + % +
+
+
@@ -152631,11 +152417,9 @@ exports[`ssr snapshot test > ssr test packages/components/popup/_example/trigger exports[`ssr snapshot test > ssr test packages/components/popup/_example/visible.tsx 1`] = `""`; -exports[`ssr snapshot test > ssr test packages/components/progress/_example/circle.tsx 1`] = `"
默认样式
0%
不显示数字
自定义内容
75 day
进度完成
进度发生错误
进度被中断
自定义颜色
小尺寸
0%
默认尺寸
0%
大尺寸
0%
自定义尺寸
0%
"`; - -exports[`ssr snapshot test > ssr test packages/components/progress/_example/line.tsx 1`] = `"

默认在线形外展示进度和状态

默认样式
0%
进度被中断
进度状态发生重大错误
进度正常更新
0%
不显示数字
自定义内容
自定义文本
自定义颜色与高度
0%
进度条渐变色
0%
0%
0%

可以在线形内展示进度信息

默认样式
30%
进度0-10%时数字数字位置出现在目前进度的右边区域
5%
"`; +exports[`ssr snapshot test > ssr test packages/components/progress/_example/circle.tsx 1`] = `"
默认
默认样式
10%
不显示数字
自定义内容
10day
进度状态完成
进度状态发生重大错误
进度状态被中断
默认不同尺寸
小尺寸
30%
默认尺寸
30%
大尺寸
75%
"`; -exports[`ssr snapshot test > ssr test packages/components/progress/_example/plump.tsx 1`] = `"
默认样式
30%
进度0-10%时数字数字位置出现在目前进度的右边区域
5%
100%
100%
success
100%
warning
30%
error
30%
active
30%
不显示数字
自定义颜色与尺寸
30%
进度条渐变色
30%

30%

30%
"`; +exports[`ssr snapshot test > ssr test packages/components/progress/_example/line.tsx 1`] = `"

动态更新示例

进度正常更新
10%
不显示数字
自定义内容
自定义文本

默认在线形外展示进度和状态

默认样式
30%
100%
进度状态完成
进度状态发生重大错误
进度状态被中断
渐变色
60%

可以在线形内展示进度信息

默认样式
30%
进度条内部宽度不足以展示其内容时，该内容会自动显示在进度条右侧
当前进度为：10%
"`; exports[`ssr snapshot test > ssr test packages/components/qrcode/_example/base.tsx 1`] = `"
"`; diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index 4ddae9b59e..7bb45e0410 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -754,11 +754,9 @@ exports[`ssr snapshot test > ssr test packages/components/popup/_example/trigger exports[`ssr snapshot test > ssr test packages/components/popup/_example/visible.tsx 1`] = `""`; -exports[`ssr snapshot test > ssr test packages/components/progress/_example/circle.tsx 1`] = `"
默认样式
0%
不显示数字
自定义内容
75 day
进度完成
进度发生错误
进度被中断
自定义颜色
小尺寸
0%
默认尺寸
0%
大尺寸
0%
自定义尺寸
0%
"`; +exports[`ssr snapshot test > ssr test packages/components/progress/_example/circle.tsx 1`] = `"
默认
默认样式
10%
不显示数字
自定义内容
10day
进度状态完成
进度状态发生重大错误
进度状态被中断
默认不同尺寸
小尺寸
30%
默认尺寸
30%
大尺寸
75%
"`; -exports[`ssr snapshot test > ssr test packages/components/progress/_example/line.tsx 1`] = `"

默认在线形外展示进度和状态

默认样式
0%
进度被中断
进度状态发生重大错误
进度正常更新
0%
不显示数字
自定义内容
自定义文本
自定义颜色与高度
0%
进度条渐变色
0%
0%
0%

可以在线形内展示进度信息

默认样式
30%
进度0-10%时数字数字位置出现在目前进度的右边区域
5%
"`; - -exports[`ssr snapshot test > ssr test packages/components/progress/_example/plump.tsx 1`] = `"
默认样式
30%
进度0-10%时数字数字位置出现在目前进度的右边区域
5%
100%
100%
success
100%
warning
30%
error
30%
active
30%
不显示数字
自定义颜色与尺寸
30%
进度条渐变色
30%

30%

30%
"`; +exports[`ssr snapshot test > ssr test packages/components/progress/_example/line.tsx 1`] = `"

动态更新示例

进度正常更新
10%
不显示数字
自定义内容
自定义文本

默认在线形外展示进度和状态

默认样式
30%
100%
进度状态完成
进度状态发生重大错误
进度状态被中断
渐变色
60%

可以在线形内展示进度信息

默认样式
30%
进度条内部宽度不足以展示其内容时，该内容会自动显示在进度条右侧
当前进度为：10%
"`; exports[`ssr snapshot test > ssr test packages/components/qrcode/_example/base.tsx 1`] = `"
"`; diff --git a/test/snap/csr.test.jsx b/test/snap/csr.test.jsx index 1e3c7fa642..977d96ba1c 100644 --- a/test/snap/csr.test.jsx +++ b/test/snap/csr.test.jsx @@ -9,6 +9,10 @@ import { IGNORE_ASYNC_EXAMPLE_LIST } from './ssr.test'; MockDate.set('2020-12-28 00:00:00'); class ResizeObserver { + constructor(callback) { + this.callback = callback; + } + observe() { return this; } @@ -16,6 +20,10 @@ class ResizeObserver { unobserve() { return this; } + + disconnect() { + return this; + } } function runTest() {