mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-08 01:53:34 +08:00
fix: Progress type="circle"
error (#30855)
* fix: Progress `type="circle"` error `Rendered more hooks than during the previous render` close #30685 * update snapshot * fix gradient strokeColor * fix snapshot
This commit is contained in:
parent
e851fa4548
commit
ad60e9544c
@ -12,24 +12,8 @@ interface CircleProps extends ProgressProps {
|
||||
}
|
||||
|
||||
function getPercentage({ percent, success, successPercent }: CircleProps) {
|
||||
const ptg = validProgress(percent);
|
||||
const realSuccessPercent = getSuccessPercent({ success, successPercent });
|
||||
if (!realSuccessPercent) {
|
||||
return ptg;
|
||||
}
|
||||
return [
|
||||
validProgress(realSuccessPercent),
|
||||
validProgress(ptg - validProgress(realSuccessPercent)),
|
||||
];
|
||||
}
|
||||
|
||||
function getStrokeColor({ success, strokeColor, successPercent }: CircleProps) {
|
||||
const color = strokeColor || null;
|
||||
const realSuccessPercent = getSuccessPercent({ success, successPercent });
|
||||
if (!realSuccessPercent) {
|
||||
return color;
|
||||
}
|
||||
return [presetPrimaryColors.green, color];
|
||||
const realSuccessPercent = validProgress(getSuccessPercent({ success, successPercent }));
|
||||
return [realSuccessPercent, validProgress(validProgress(percent) - realSuccessPercent)];
|
||||
}
|
||||
|
||||
const Circle: React.FC<CircleProps> = props => {
|
||||
@ -65,8 +49,8 @@ const Circle: React.FC<CircleProps> = props => {
|
||||
};
|
||||
|
||||
// using className to style stroke color
|
||||
const strokeColor = getStrokeColor(props) as string | string[] | object;
|
||||
const isGradient = Object.prototype.toString.call(strokeColor) === '[object Object]';
|
||||
const isGradient = Object.prototype.toString.call(props.strokeColor) === '[object Object]';
|
||||
const strokeColor = [presetPrimaryColors.green, props.strokeColor || null];
|
||||
|
||||
const wrapperClassName = classNames(`${prefixCls}-inner`, {
|
||||
[`${prefixCls}-circle-gradient`]: isGradient,
|
||||
|
@ -35,6 +35,18 @@ Array [
|
||||
stroke-width="6"
|
||||
style="stroke-dasharray:221.48228207808043px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
<path
|
||||
class="ant-progress-circle-path"
|
||||
d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94"
|
||||
fill-opacity="0"
|
||||
opacity="0"
|
||||
stroke=""
|
||||
stroke-linecap="round"
|
||||
stroke-width="6"
|
||||
style="stroke:#52C41A;stroke-dasharray:0px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
@ -77,6 +89,18 @@ Array [
|
||||
stroke-width="6"
|
||||
style="stroke-dasharray:206.7167966062084px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
<path
|
||||
class="ant-progress-circle-path"
|
||||
d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94"
|
||||
fill-opacity="0"
|
||||
opacity="0"
|
||||
stroke=""
|
||||
stroke-linecap="round"
|
||||
stroke-width="6"
|
||||
style="stroke:#52C41A;stroke-dasharray:0px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
@ -136,6 +160,18 @@ Array [
|
||||
stroke-width="6"
|
||||
style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
<path
|
||||
class="ant-progress-circle-path"
|
||||
d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94"
|
||||
fill-opacity="0"
|
||||
opacity="0"
|
||||
stroke=""
|
||||
stroke-linecap="round"
|
||||
stroke-width="6"
|
||||
style="stroke:#52C41A;stroke-dasharray:0px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
@ -200,6 +236,18 @@ Array [
|
||||
stroke-width="6"
|
||||
style="stroke-dasharray:0px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
<path
|
||||
class="ant-progress-circle-path"
|
||||
d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94"
|
||||
fill-opacity="0"
|
||||
opacity="0"
|
||||
stroke=""
|
||||
stroke-linecap="round"
|
||||
stroke-width="6"
|
||||
style="stroke:#52C41A;stroke-dasharray:0px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
@ -303,6 +351,18 @@ Array [
|
||||
stroke-width="6"
|
||||
style="stroke-dasharray:88.59291283123217px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
<path
|
||||
class="ant-progress-circle-path"
|
||||
d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94"
|
||||
fill-opacity="0"
|
||||
opacity="0"
|
||||
stroke=""
|
||||
stroke-linecap="round"
|
||||
stroke-width="6"
|
||||
style="stroke:#52C41A;stroke-dasharray:0px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
@ -345,6 +405,18 @@ Array [
|
||||
stroke-width="6"
|
||||
style="stroke-dasharray:206.7167966062084px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
<path
|
||||
class="ant-progress-circle-path"
|
||||
d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94"
|
||||
fill-opacity="0"
|
||||
opacity="0"
|
||||
stroke=""
|
||||
stroke-linecap="round"
|
||||
stroke-width="6"
|
||||
style="stroke:#52C41A;stroke-dasharray:0px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
@ -404,6 +476,18 @@ Array [
|
||||
stroke-width="6"
|
||||
style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
<path
|
||||
class="ant-progress-circle-path"
|
||||
d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94"
|
||||
fill-opacity="0"
|
||||
opacity="0"
|
||||
stroke=""
|
||||
stroke-linecap="round"
|
||||
stroke-width="6"
|
||||
style="stroke:#52C41A;stroke-dasharray:0px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
@ -468,6 +552,18 @@ Array [
|
||||
stroke-width="6"
|
||||
style="stroke-dasharray:165.23228207808043px 295.3097094374406px;stroke-dashoffset:-37.5px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
<path
|
||||
class="ant-progress-circle-path"
|
||||
d="M 50,50 m 0,47
|
||||
a 47,47 0 1 1 0,-94
|
||||
a 47,47 0 1 1 0,94"
|
||||
fill-opacity="0"
|
||||
opacity="0"
|
||||
stroke=""
|
||||
stroke-linecap="round"
|
||||
stroke-width="6"
|
||||
style="stroke:#52C41A;stroke-dasharray:0px 295.3097094374406px;stroke-dashoffset:-37.5px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
@ -510,6 +606,18 @@ Array [
|
||||
stroke-width="6"
|
||||
style="stroke-dasharray:198.98228207808043px 295.3097094374406px;stroke-dashoffset:-15px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
<path
|
||||
class="ant-progress-circle-path"
|
||||
d="M 50,50 m 0,47
|
||||
a 47,47 0 1 1 0,-94
|
||||
a 47,47 0 1 1 0,94"
|
||||
fill-opacity="0"
|
||||
opacity="0"
|
||||
stroke=""
|
||||
stroke-linecap="round"
|
||||
stroke-width="6"
|
||||
style="stroke:#52C41A;stroke-dasharray:0px 295.3097094374406px;stroke-dashoffset:-15px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
@ -640,6 +748,18 @@ Array [
|
||||
stroke-width="6"
|
||||
style="stroke-dasharray:221.48228207808043px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
<path
|
||||
class="ant-progress-circle-path"
|
||||
d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94"
|
||||
fill-opacity="0"
|
||||
opacity="0"
|
||||
stroke=""
|
||||
stroke-linecap="round"
|
||||
stroke-width="6"
|
||||
style="stroke:#52C41A;stroke-dasharray:0px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
@ -682,6 +802,18 @@ Array [
|
||||
stroke-width="6"
|
||||
style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
<path
|
||||
class="ant-progress-circle-path"
|
||||
d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94"
|
||||
fill-opacity="0"
|
||||
opacity="0"
|
||||
stroke=""
|
||||
stroke-linecap="round"
|
||||
stroke-width="6"
|
||||
style="stroke:#52C41A;stroke-dasharray:0px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
@ -791,6 +923,18 @@ Array [
|
||||
stroke-width="6"
|
||||
style="stroke-dasharray:265.77873849369655px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
<path
|
||||
class="ant-progress-circle-path"
|
||||
d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94"
|
||||
fill-opacity="0"
|
||||
opacity="0"
|
||||
stroke=""
|
||||
stroke-linecap="round"
|
||||
stroke-width="6"
|
||||
style="stroke:#52C41A;stroke-dasharray:0px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
@ -851,6 +995,18 @@ Array [
|
||||
stroke-width="6"
|
||||
style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
<path
|
||||
class="ant-progress-circle-path"
|
||||
d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94"
|
||||
fill-opacity="0"
|
||||
opacity="0"
|
||||
stroke=""
|
||||
stroke-linecap="round"
|
||||
stroke-width="6"
|
||||
style="stroke:#52C41A;stroke-dasharray:0px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
@ -1209,6 +1365,18 @@ Array [
|
||||
stroke-width="6"
|
||||
style="stroke-dasharray:221.48228207808043px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
<path
|
||||
class="ant-progress-circle-path"
|
||||
d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94"
|
||||
fill-opacity="0"
|
||||
opacity="0"
|
||||
stroke=""
|
||||
stroke-linecap="square"
|
||||
stroke-width="6"
|
||||
style="stroke:#52C41A;stroke-dasharray:0px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
@ -1251,6 +1419,18 @@ Array [
|
||||
stroke-width="6"
|
||||
style="stroke-dasharray:165.23228207808043px 295.3097094374406px;stroke-dashoffset:-37.5px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
<path
|
||||
class="ant-progress-circle-path"
|
||||
d="M 50,50 m 0,47
|
||||
a 47,47 0 1 1 0,-94
|
||||
a 47,47 0 1 1 0,94"
|
||||
fill-opacity="0"
|
||||
opacity="0"
|
||||
stroke=""
|
||||
stroke-linecap="square"
|
||||
stroke-width="6"
|
||||
style="stroke:#52C41A;stroke-dasharray:0px 295.3097094374406px;stroke-dashoffset:-37.5px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
|
@ -34,6 +34,18 @@ exports[`Progress render dashboard 295 gapDegree 1`] = `
|
||||
stroke-width="6"
|
||||
style="stroke-dasharray: 0px 295.3097094374406px; stroke-dashoffset: -147.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; transition-duration: .3s, .3s, .3s, .06s;"
|
||||
/>
|
||||
<path
|
||||
class="ant-progress-circle-path"
|
||||
d="M 50,50 m 0,47
|
||||
a 47,47 0 1 1 0,-94
|
||||
a 47,47 0 1 1 0,94"
|
||||
fill-opacity="0"
|
||||
opacity="0"
|
||||
stroke=""
|
||||
stroke-linecap="round"
|
||||
stroke-width="6"
|
||||
style="stroke: #52C41A; stroke-dasharray: 0px 295.3097094374406px; stroke-dashoffset: -147.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; transition-duration: .3s, .3s, .3s, .06s;"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
@ -79,6 +91,18 @@ exports[`Progress render dashboard 296 gapDegree 1`] = `
|
||||
stroke-width="6"
|
||||
style="stroke-dasharray: 0px 295.3097094374406px; stroke-dashoffset: -148px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; transition-duration: .3s, .3s, .3s, .06s;"
|
||||
/>
|
||||
<path
|
||||
class="ant-progress-circle-path"
|
||||
d="M 50,50 m 0,47
|
||||
a 47,47 0 1 1 0,-94
|
||||
a 47,47 0 1 1 0,94"
|
||||
fill-opacity="0"
|
||||
opacity="0"
|
||||
stroke=""
|
||||
stroke-linecap="round"
|
||||
stroke-width="6"
|
||||
style="stroke: #52C41A; stroke-dasharray: 0px 295.3097094374406px; stroke-dashoffset: -148px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; transition-duration: .3s, .3s, .3s, .06s;"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
@ -124,6 +148,18 @@ exports[`Progress render dashboard zero gapDegree 1`] = `
|
||||
stroke-width="6"
|
||||
style="stroke-dasharray: 0px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; transition-duration: .3s, .3s, .3s, .06s;"
|
||||
/>
|
||||
<path
|
||||
class="ant-progress-circle-path"
|
||||
d="M 50,50 m 0,47
|
||||
a 47,47 0 1 1 0,-94
|
||||
a 47,47 0 1 1 0,94"
|
||||
fill-opacity="0"
|
||||
opacity="0"
|
||||
stroke=""
|
||||
stroke-linecap="round"
|
||||
stroke-width="6"
|
||||
style="stroke: #52C41A; stroke-dasharray: 0px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; transition-duration: .3s, .3s, .3s, .06s;"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
@ -361,6 +397,18 @@ exports[`Progress render strokeColor 1`] = `
|
||||
stroke-width="6"
|
||||
style="stroke: red; stroke-dasharray: 147.6548547187203px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; transition-duration: .3s, .3s, .3s, .06s;"
|
||||
/>
|
||||
<path
|
||||
class="ant-progress-circle-path"
|
||||
d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94"
|
||||
fill-opacity="0"
|
||||
opacity="0"
|
||||
stroke=""
|
||||
stroke-linecap="round"
|
||||
stroke-width="6"
|
||||
style="stroke: #52C41A; stroke-dasharray: 0px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; transition-duration: .3s, .3s, .3s, .06s;"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
|
@ -204,4 +204,14 @@ describe('Progress', () => {
|
||||
'Warning: [antd: Progress] `success.progress` is deprecated. Please use `success.percent` instead.',
|
||||
);
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/30685
|
||||
describe('github issues', () => {
|
||||
it('"Rendered more hooks than during the previous render"', () => {
|
||||
expect(() => {
|
||||
const wrapper = mount(<Progress percent={60} success={{ percent: 0 }} type="circle" />);
|
||||
wrapper.setProps({ success: { percent: 10 } });
|
||||
}).not.toThrow();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
@ -83,8 +83,9 @@ export default class Progress extends React.Component<ProgressProps> {
|
||||
renderProcessInfo(prefixCls: string, progressStatus: typeof ProgressStatuses[number]) {
|
||||
const { showInfo, format, type, percent } = this.props;
|
||||
const successPercent = getSuccessPercent(this.props);
|
||||
if (!showInfo) return null;
|
||||
|
||||
if (!showInfo) {
|
||||
return null;
|
||||
}
|
||||
let text;
|
||||
const textFormatter = format || (percentNumber => `${percentNumber}%`);
|
||||
const isLineType = type === 'line';
|
||||
|
@ -1289,6 +1289,18 @@ exports[`renders ./components/steps/demo/progress.md correctly 1`] = `
|
||||
stroke-width="4"
|
||||
style="stroke-dasharray:180.95573684677208px 301.59289474462014px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
<path
|
||||
class="ant-progress-circle-path"
|
||||
d="M 50,50 m 0,-48
|
||||
a 48,48 0 1 1 0,96
|
||||
a 48,48 0 1 1 0,-96"
|
||||
fill-opacity="0"
|
||||
opacity="0"
|
||||
stroke=""
|
||||
stroke-linecap="round"
|
||||
stroke-width="4"
|
||||
style="stroke:#52C41A;stroke-dasharray:0px 301.59289474462014px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
@ -1522,6 +1534,18 @@ Array [
|
||||
stroke-width="4"
|
||||
style="stroke-dasharray:0px 301.59289474462014px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
<path
|
||||
class="ant-progress-circle-path"
|
||||
d="M 50,50 m 0,-48
|
||||
a 48,48 0 1 1 0,96
|
||||
a 48,48 0 1 1 0,-96"
|
||||
fill-opacity="0"
|
||||
opacity="0"
|
||||
stroke=""
|
||||
stroke-linecap="round"
|
||||
stroke-width="4"
|
||||
style="stroke:#52C41A;stroke-dasharray:0px 301.59289474462014px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
@ -1695,6 +1719,18 @@ Array [
|
||||
stroke-width="4"
|
||||
style="stroke-dasharray:0px 301.59289474462014px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
<path
|
||||
class="ant-progress-circle-path"
|
||||
d="M 50,50 m 0,-48
|
||||
a 48,48 0 1 1 0,96
|
||||
a 48,48 0 1 1 0,-96"
|
||||
fill-opacity="0"
|
||||
opacity="0"
|
||||
stroke=""
|
||||
stroke-linecap="round"
|
||||
stroke-width="4"
|
||||
style="stroke:#52C41A;stroke-dasharray:0px 301.59289474462014px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
@ -1868,6 +1904,18 @@ Array [
|
||||
stroke-width="4"
|
||||
style="stroke-dasharray:0px 301.59289474462014px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
<path
|
||||
class="ant-progress-circle-path"
|
||||
d="M 50,50 m 0,-48
|
||||
a 48,48 0 1 1 0,96
|
||||
a 48,48 0 1 1 0,-96"
|
||||
fill-opacity="0"
|
||||
opacity="0"
|
||||
stroke=""
|
||||
stroke-linecap="round"
|
||||
stroke-width="4"
|
||||
style="stroke:#52C41A;stroke-dasharray:0px 301.59289474462014px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
@ -2041,6 +2089,18 @@ Array [
|
||||
stroke-width="4"
|
||||
style="stroke-dasharray:0px 301.59289474462014px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
<path
|
||||
class="ant-progress-circle-path"
|
||||
d="M 50,50 m 0,-48
|
||||
a 48,48 0 1 1 0,96
|
||||
a 48,48 0 1 1 0,-96"
|
||||
fill-opacity="0"
|
||||
opacity="0"
|
||||
stroke=""
|
||||
stroke-linecap="round"
|
||||
stroke-width="4"
|
||||
style="stroke:#52C41A;stroke-dasharray:0px 301.59289474462014px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
|
Loading…
Reference in New Issue
Block a user