mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

refactoring: rewrite renderCircle with React Component (#50358)

Browse Source
This commit is contained in:
lijianan 2024-08-11 16:18:29 +08:00 committed by GitHub
parent dd343218a2
commit 429cf1b3b2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 47 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
components/spin/Indicator/Progress.tsx
View File

@ -7,7 +7,35 @@ export interface ProgressProps {
percent: number;
}
export default function Progress({ percent, prefixCls }: ProgressProps) {
const viewSize = 100;
const borderWidth = viewSize / 5;
const radius = viewSize / 2 - borderWidth / 2;
const circumference = radius * 2 * Math.PI;
const position = 50;
interface CircleProps {
dotClassName?: string;
style?: React.CSSProperties;
hasCircleCls?: boolean;
}
const CustomCircle: React.FC<Readonly<CircleProps>> = (props) => {
const { dotClassName, style, hasCircleCls } = props;
return (
<circle
className={classNames(`${dotClassName}-circle`, {
[`${dotClassName}-circle-bg`]: hasCircleCls,
})}
r={radius}
cx={position}
cy={position}
strokeWidth={borderWidth}
style={style}
/>
);
};
const Progress: React.FC<Readonly<ProgressProps>> = ({ percent, prefixCls }) => {
const dotClassName = `${prefixCls}-dot`;
const holderClassName = `${dotClassName}-holder`;
const hideClassName = `${holderClassName}-hidden`;
@ -24,27 +52,18 @@ export default function Progress({ percent, prefixCls }: ProgressProps) {
// ==================== Progress ====================
const safePtg = Math.max(Math.min(percent, 100), 0);
const viewSize = 100;
const borderWidth = viewSize / 5;
const radius = viewSize / 2 - borderWidth / 2;
const circumference = radius * 2 * Math.PI;
const renderCircle = (circleClassName?: string, style?: React.CSSProperties) => (
<circle
className={classNames(circleClassName, `${dotClassName}-circle`)}
r={radius}
cx="50"
cy="50"
strokeWidth={borderWidth}
style={style}
/>
);
// ===================== Render =====================
if (!render) {
return null;
}
const circleStyle: React.CSSProperties = {
strokeDashoffset: `${circumference / 4}`,
strokeDasharray: `${(circumference * safePtg) / 100} ${
(circumference * (100 - safePtg)) / 100
}`,
};
return (
<span
className={classNames(
@ -61,14 +80,11 @@ export default function Progress({ percent, prefixCls }: ProgressProps) {
aria-valuemax={100}
aria-valuenow={safePtg}
>
{renderCircle(`${dotClassName}-circle-bg`)}
{renderCircle('', {
strokeDasharray: `${(circumference * safePtg) / 100} ${
(circumference * (100 - safePtg)) / 100
}`,
strokeDashoffset: `${circumference / 4}`,
})}
<CustomCircle dotClassName={dotClassName} hasCircleCls />
<CustomCircle dotClassName={dotClassName} style={circleStyle} />
</svg>
</span>
);
}
};
export default Progress;

12
components/spin/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -370,7 +370,7 @@ exports[`renders components/spin/demo/percent.tsx extend context correctly 1`] =
viewBox="0 0 100 100"
>
<circle
class="ant-spin-dot-circle-bg ant-spin-dot-circle"
class="ant-spin-dot-circle ant-spin-dot-circle-bg"
cx="50"
cy="50"
r="40"
@ -382,7 +382,7 @@ exports[`renders components/spin/demo/percent.tsx extend context correctly 1`] =
cy="50"
r="40"
stroke-width="20"
style="stroke-dasharray: 0 251.32741228718342; stroke-dashoffset: 62.83185307179586;"
style="stroke-dashoffset: 62.83185307179586; stroke-dasharray: 0 251.32741228718342;"
/>
</svg>
</span>
@ -423,7 +423,7 @@ exports[`renders components/spin/demo/percent.tsx extend context correctly 1`] =
viewBox="0 0 100 100"
>
<circle
class="ant-spin-dot-circle-bg ant-spin-dot-circle"
class="ant-spin-dot-circle ant-spin-dot-circle-bg"
cx="50"
cy="50"
r="40"
@ -435,7 +435,7 @@ exports[`renders components/spin/demo/percent.tsx extend context correctly 1`] =
cy="50"
r="40"
stroke-width="20"
style="stroke-dasharray: 0 251.32741228718342; stroke-dashoffset: 62.83185307179586;"
style="stroke-dashoffset: 62.83185307179586; stroke-dasharray: 0 251.32741228718342;"
/>
</svg>
</span>
@ -476,7 +476,7 @@ exports[`renders components/spin/demo/percent.tsx extend context correctly 1`] =
viewBox="0 0 100 100"
>
<circle
class="ant-spin-dot-circle-bg ant-spin-dot-circle"
class="ant-spin-dot-circle ant-spin-dot-circle-bg"
cx="50"
cy="50"
r="40"
@ -488,7 +488,7 @@ exports[`renders components/spin/demo/percent.tsx extend context correctly 1`] =
cy="50"
r="40"
stroke-width="20"
style="stroke-dasharray: 0 251.32741228718342; stroke-dashoffset: 62.83185307179586;"
style="stroke-dashoffset: 62.83185307179586; stroke-dasharray: 0 251.32741228718342;"
/>
</svg>
</span>