Skip to content

Commit bd5960d

Browse files
yykoypjyangpj
yykoypj
authored and
yangpj
committed
feat: steps support for circular progress bar
1 parent e088adf commit bd5960d

10 files changed

+538
-7
lines changed

‎components/progress/Circle.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ const Circle: React.FC<CircleProps> = (props) => {
2929
children,
3030
success,
3131
size = originWidth,
32+
steps,
3233
} = props;
3334

3435
const [width, height] = getSize(size, 'circle');
@@ -51,6 +52,7 @@ const Circle: React.FC<CircleProps> = (props) => {
5152
return undefined;
5253
}, [gapDegree, type]);
5354

55+
const percentArray = getPercentage(props);
5456
const gapPos = gapPosition || (type === 'dashboard' && 'bottom') || undefined;
5557

5658
// using className to style stroke color
@@ -63,10 +65,11 @@ const Circle: React.FC<CircleProps> = (props) => {
6365

6466
const circleContent = (
6567
<RCCircle
66-
percent={getPercentage(props)}
68+
steps={steps}
69+
percent={steps ? percentArray[1] : percentArray}
6770
strokeWidth={strokeWidth}
6871
trailWidth={strokeWidth}
69-
strokeColor={strokeColor}
72+
strokeColor={steps ? strokeColor[1] : strokeColor}
7073
strokeLinecap={strokeLinecap}
7174
trailColor={trailColor}
7275
prefixCls={prefixCls}

‎components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap

+198
Original file line numberDiff line numberDiff line change
@@ -485,6 +485,204 @@ exports[`renders components/progress/demo/circle-mini.tsx extend context correct
485485

486486
exports[`renders components/progress/demo/circle-mini.tsx extend context correctly 2`] = `[]`;
487487

488+
exports[`renders components/progress/demo/circle-steps.tsx extend context correctly 1`] = `
489+
<div
490+
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
491+
style="flex-wrap: wrap;"
492+
>
493+
<div
494+
class="ant-space-item"
495+
>
496+
<div
497+
aria-valuenow="50"
498+
class="ant-progress ant-progress-status-normal ant-progress-circle ant-progress-steps ant-progress-show-info ant-progress-default"
499+
role="progressbar"
500+
>
501+
<div
502+
class="ant-progress-inner"
503+
style="width: 120px; height: 120px; font-size: 24px;"
504+
>
505+
<svg
506+
class="ant-progress-circle"
507+
role="presentation"
508+
viewBox="0 0 100 100"
509+
>
510+
<circle
511+
class="ant-progress-circle-path"
512+
cx="50"
513+
cy="50"
514+
opacity="1"
515+
r="40"
516+
stroke-width="20"
517+
style="stroke-dasharray: 198.96753472735355px 251.32741228718345; stroke-dashoffset: 176.09659288643437; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
518+
/>
519+
<circle
520+
class="ant-progress-circle-path"
521+
cx="50"
522+
cy="50"
523+
opacity="1"
524+
r="40"
525+
stroke-width="20"
526+
style="stroke-dasharray: 198.96753472735355px 251.32741228718345; stroke-dashoffset: 176.09659288643437; transform: rotate(163.125deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
527+
/>
528+
<circle
529+
class="ant-progress-circle-path"
530+
cx="50"
531+
cy="50"
532+
opacity="1"
533+
r="40"
534+
stroke-width="20"
535+
style="stroke-dasharray: 198.96753472735355px 251.32741228718345; stroke-dashoffset: 176.09659288643437; transform: rotate(198.74999999999997deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
536+
/>
537+
<circle
538+
class="ant-progress-circle-path"
539+
cx="50"
540+
cy="50"
541+
opacity="1"
542+
r="40"
543+
stroke-width="20"
544+
style="stroke-dasharray: 198.96753472735355px 251.32741228718345; stroke-dashoffset: 176.09659288643437; transform: rotate(234.37499999999994deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
545+
/>
546+
<circle
547+
class="ant-progress-circle-path"
548+
cx="50"
549+
cy="50"
550+
opacity="1"
551+
r="40"
552+
stroke-width="20"
553+
style="stroke: rgba(0, 0, 0, 0.06); stroke-dasharray: 198.96753472735355px 251.32741228718345; stroke-dashoffset: 176.09659288643437; transform: rotate(269.99999999999994deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
554+
/>
555+
<circle
556+
class="ant-progress-circle-path"
557+
cx="50"
558+
cy="50"
559+
opacity="1"
560+
r="40"
561+
stroke-width="20"
562+
style="stroke: rgba(0, 0, 0, 0.06); stroke-dasharray: 198.96753472735355px 251.32741228718345; stroke-dashoffset: 176.09659288643437; transform: rotate(305.625deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
563+
/>
564+
<circle
565+
class="ant-progress-circle-path"
566+
cx="50"
567+
cy="50"
568+
opacity="1"
569+
r="40"
570+
stroke-width="20"
571+
style="stroke: rgba(0, 0, 0, 0.06); stroke-dasharray: 198.96753472735355px 251.32741228718345; stroke-dashoffset: 176.09659288643437; transform: rotate(341.24999999999994deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
572+
/>
573+
<circle
574+
class="ant-progress-circle-path"
575+
cx="50"
576+
cy="50"
577+
opacity="1"
578+
r="40"
579+
stroke-width="20"
580+
style="stroke: rgba(0, 0, 0, 0.06); stroke-dasharray: 198.96753472735355px 251.32741228718345; stroke-dashoffset: 176.09659288643437; transform: rotate(376.87499999999994deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
581+
/>
582+
</svg>
583+
<span
584+
class="ant-progress-text"
585+
title="50%"
586+
>
587+
50%
588+
</span>
589+
</div>
590+
</div>
591+
</div>
592+
<div
593+
class="ant-space-item"
594+
>
595+
<div
596+
aria-valuenow="100"
597+
class="ant-progress ant-progress-status-success ant-progress-circle ant-progress-steps ant-progress-show-info ant-progress-default"
598+
role="progressbar"
599+
>
600+
<div
601+
class="ant-progress-inner"
602+
style="width: 120px; height: 120px; font-size: 24px;"
603+
>
604+
<svg
605+
class="ant-progress-circle"
606+
role="presentation"
607+
viewBox="0 0 100 100"
608+
>
609+
<circle
610+
class="ant-progress-circle-path"
611+
cx="50"
612+
cy="50"
613+
opacity="1"
614+
r="40"
615+
stroke-width="20"
616+
style="stroke-dasharray: 251.32741228718345px 251.32741228718345; stroke-dashoffset: 213.06192982974676; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
617+
/>
618+
<circle
619+
class="ant-progress-circle-path"
620+
cx="50"
621+
cy="50"
622+
opacity="1"
623+
r="40"
624+
stroke-width="20"
625+
style="stroke-dasharray: 251.32741228718345px 251.32741228718345; stroke-dashoffset: 213.06192982974676; transform: rotate(-18deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
626+
/>
627+
<circle
628+
class="ant-progress-circle-path"
629+
cx="50"
630+
cy="50"
631+
opacity="1"
632+
r="40"
633+
stroke-width="20"
634+
style="stroke-dasharray: 251.32741228718345px 251.32741228718345; stroke-dashoffset: 213.06192982974676; transform: rotate(54deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
635+
/>
636+
<circle
637+
class="ant-progress-circle-path"
638+
cx="50"
639+
cy="50"
640+
opacity="1"
641+
r="40"
642+
stroke-width="20"
643+
style="stroke-dasharray: 251.32741228718345px 251.32741228718345; stroke-dashoffset: 213.06192982974676; transform: rotate(126deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
644+
/>
645+
<circle
646+
class="ant-progress-circle-path"
647+
cx="50"
648+
cy="50"
649+
opacity="1"
650+
r="40"
651+
stroke-width="20"
652+
style="stroke-dasharray: 251.32741228718345px 251.32741228718345; stroke-dashoffset: 213.06192982974676; transform: rotate(198deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
653+
/>
654+
</svg>
655+
<span
656+
class="ant-progress-text"
657+
>
658+
<span
659+
aria-label="check"
660+
class="anticon anticon-check"
661+
role="img"
662+
>
663+
<svg
664+
aria-hidden="true"
665+
data-icon="check"
666+
fill="currentColor"
667+
focusable="false"
668+
height="1em"
669+
viewBox="64 64 896 896"
670+
width="1em"
671+
>
672+
<path
673+
d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
674+
/>
675+
</svg>
676+
</span>
677+
</span>
678+
</div>
679+
</div>
680+
</div>
681+
</div>
682+
`;
683+
684+
exports[`renders components/progress/demo/circle-steps.tsx extend context correctly 2`] = `[]`;
685+
488686
exports[`renders components/progress/demo/component-token.tsx extend context correctly 1`] = `
489687
Array [
490688
<div

0 commit comments

Comments
 (0)