Skip to content

Commit b1a692d

Browse files
anlyyaoanlyyao
authored
fix(Steps): fixed the problem of built-in icons being invalid (#635)
* fix(Steps): fixed the problem of built-in icons being invalid * fix: fix demo * test: update snapshots
1 parent fc21113 commit b1a692d

File tree

5 files changed

+296
-89
lines changed

5 files changed

+296
-89
lines changed

‎src/steps/StepItem.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -82,15 +82,18 @@ const StepItem: FC<StepItemProps> = (props) => {
8282
() => classNames(`${stepItemClass}__dot`, `${stepItemClass}__dot--${currentStatus}`),
8383
[stepItemClass, currentStatus],
8484
);
85+
86+
const iconContent = useMemo(() => parseTNode(icon), [icon]);
87+
8588
const iconClassName = useMemo(
8689
() =>
8790
classNames({
88-
[`${stepItemClass}__icon`]: icon,
89-
[`${stepItemClass}__icon--${currentStatus}`]: icon,
90-
[`${stepItemClass}__circle`]: !icon,
91-
[`${stepItemClass}__circle--${currentStatus}`]: !icon,
91+
[`${stepItemClass}__icon`]: iconContent,
92+
[`${stepItemClass}__icon--${currentStatus}`]: iconContent,
93+
[`${stepItemClass}__circle`]: !iconContent && theme === StepThemeEnum.DEFAULT,
94+
[`${stepItemClass}__circle--${currentStatus}`]: !iconContent && theme === StepThemeEnum.DEFAULT,
9295
}),
93-
[stepItemClass, currentStatus, icon],
96+
[stepItemClass, currentStatus, iconContent, theme],
9497
);
9598
const contentClassName = useMemo(
9699
() =>
@@ -145,8 +148,8 @@ const StepItem: FC<StepItemProps> = (props) => {
145148
};
146149

147150
const renderIconContent = () => {
148-
if (icon) {
149-
return parseTNode(icon);
151+
if (iconContent) {
152+
return iconContent;
150153
}
151154

152155
if (currentStatus === StepItemStatusEnum.ERROR) {

‎src/steps/__tests__/__snapshots__/demo.test.tsx.snap‎

Lines changed: 92 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,21 @@ exports[`Steps > Steps horizontalDemo demo 1`] = `
2020
class="t-step-item__anchor t-step-item__anchor--horizontal"
2121
>
2222
<div
23-
class="t-step-item__icon t-step-item__icon--finish"
24-
/>
23+
class="t-step-item__circle t-step-item__circle--finish"
24+
>
25+
<svg
26+
class="t-icon t-icon-check"
27+
fill="none"
28+
height="1em"
29+
viewBox="0 0 24 24"
30+
width="1em"
31+
>
32+
<path
33+
d="M20.9852 7.37845L10.3786 17.985L4.01465 11.6211L5.42886 10.2069L10.3786 15.1566L19.571 5.96423L20.9852 7.37845Z"
34+
fill="currentColor"
35+
/>
36+
</svg>
37+
</div>
2538
</div>
2639
<div
2740
class="t-step-item__content t-step-item__content--horizontal"
@@ -51,8 +64,10 @@ exports[`Steps > Steps horizontalDemo demo 1`] = `
5164
class="t-step-item__anchor t-step-item__anchor--horizontal"
5265
>
5366
<div
54-
class="t-step-item__icon t-step-item__icon--process"
55-
/>
67+
class="t-step-item__circle t-step-item__circle--process"
68+
>
69+
2
70+
</div>
5671
</div>
5772
<div
5873
class="t-step-item__content t-step-item__content--horizontal"
@@ -82,8 +97,10 @@ exports[`Steps > Steps horizontalDemo demo 1`] = `
8297
class="t-step-item__anchor t-step-item__anchor--horizontal"
8398
>
8499
<div
85-
class="t-step-item__icon t-step-item__icon--default"
86-
/>
100+
class="t-step-item__circle t-step-item__circle--default"
101+
>
102+
3
103+
</div>
87104
</div>
88105
<div
89106
class="t-step-item__content t-step-item__content--horizontal"
@@ -113,8 +130,10 @@ exports[`Steps > Steps horizontalDemo demo 1`] = `
113130
class="t-step-item__anchor t-step-item__anchor--horizontal"
114131
>
115132
<div
116-
class="t-step-item__icon t-step-item__icon--default"
117-
/>
133+
class="t-step-item__circle t-step-item__circle--default"
134+
>
135+
4
136+
</div>
118137
</div>
119138
<div
120139
class="t-step-item__content t-step-item__content--horizontal t-step-item__content--last"
@@ -780,8 +799,21 @@ exports[`Steps > Steps statusDemo demo 1`] = `
780799
class="t-step-item__anchor t-step-item__anchor--horizontal"
781800
>
782801
<div
783-
class="t-step-item__icon t-step-item__icon--finish"
784-
/>
802+
class="t-step-item__circle t-step-item__circle--finish"
803+
>
804+
<svg
805+
class="t-icon t-icon-check"
806+
fill="none"
807+
height="1em"
808+
viewBox="0 0 24 24"
809+
width="1em"
810+
>
811+
<path
812+
d="M20.9852 7.37845L10.3786 17.985L4.01465 11.6211L5.42886 10.2069L10.3786 15.1566L19.571 5.96423L20.9852 7.37845Z"
813+
fill="currentColor"
814+
/>
815+
</svg>
816+
</div>
785817
</div>
786818
<div
787819
class="t-step-item__content t-step-item__content--horizontal"
@@ -811,8 +843,21 @@ exports[`Steps > Steps statusDemo demo 1`] = `
811843
class="t-step-item__anchor t-step-item__anchor--horizontal"
812844
>
813845
<div
814-
class="t-step-item__icon t-step-item__icon--error"
815-
/>
846+
class="t-step-item__circle t-step-item__circle--error"
847+
>
848+
<svg
849+
class="t-icon t-icon-close"
850+
fill="none"
851+
height="1em"
852+
viewBox="0 0 24 24"
853+
width="1em"
854+
>
855+
<path
856+
d="M7.04996 5.63599L11.9997 10.5857L16.9494 5.63599L18.3637 7.0502L13.4139 11.9999L18.3637 16.9497L16.9494 18.3639L11.9997 13.4142L7.04996 18.3639L5.63574 16.9497L10.5855 11.9999L5.63574 7.0502L7.04996 5.63599Z"
857+
fill="currentColor"
858+
/>
859+
</svg>
860+
</div>
816861
</div>
817862
<div
818863
class="t-step-item__content t-step-item__content--horizontal"
@@ -842,8 +887,10 @@ exports[`Steps > Steps statusDemo demo 1`] = `
842887
class="t-step-item__anchor t-step-item__anchor--horizontal"
843888
>
844889
<div
845-
class="t-step-item__icon t-step-item__icon--default"
846-
/>
890+
class="t-step-item__circle t-step-item__circle--default"
891+
>
892+
3
893+
</div>
847894
</div>
848895
<div
849896
class="t-step-item__content t-step-item__content--horizontal"
@@ -873,8 +920,10 @@ exports[`Steps > Steps statusDemo demo 1`] = `
873920
class="t-step-item__anchor t-step-item__anchor--horizontal"
874921
>
875922
<div
876-
class="t-step-item__icon t-step-item__icon--default"
877-
/>
923+
class="t-step-item__circle t-step-item__circle--default"
924+
>
925+
4
926+
</div>
878927
</div>
879928
<div
880929
class="t-step-item__content t-step-item__content--horizontal t-step-item__content--last"
@@ -1213,8 +1262,21 @@ exports[`Steps > Steps verticalDemo demo 1`] = `
12131262
class="t-step-item__anchor t-step-item__anchor--vertical"
12141263
>
12151264
<div
1216-
class="t-step-item__icon t-step-item__icon--finish"
1217-
/>
1265+
class="t-step-item__circle t-step-item__circle--finish"
1266+
>
1267+
<svg
1268+
class="t-icon t-icon-check"
1269+
fill="none"
1270+
height="1em"
1271+
viewBox="0 0 24 24"
1272+
width="1em"
1273+
>
1274+
<path
1275+
d="M20.9852 7.37845L10.3786 17.985L4.01465 11.6211L5.42886 10.2069L10.3786 15.1566L19.571 5.96423L20.9852 7.37845Z"
1276+
fill="currentColor"
1277+
/>
1278+
</svg>
1279+
</div>
12181280
</div>
12191281
<div
12201282
class="t-step-item__content t-step-item__content--vertical"
@@ -1245,8 +1307,10 @@ exports[`Steps > Steps verticalDemo demo 1`] = `
12451307
class="t-step-item__anchor t-step-item__anchor--vertical"
12461308
>
12471309
<div
1248-
class="t-step-item__icon t-step-item__icon--process"
1249-
/>
1310+
class="t-step-item__circle t-step-item__circle--process"
1311+
>
1312+
2
1313+
</div>
12501314
</div>
12511315
<div
12521316
class="t-step-item__content t-step-item__content--vertical"
@@ -1277,8 +1341,10 @@ exports[`Steps > Steps verticalDemo demo 1`] = `
12771341
class="t-step-item__anchor t-step-item__anchor--vertical"
12781342
>
12791343
<div
1280-
class="t-step-item__icon t-step-item__icon--default"
1281-
/>
1344+
class="t-step-item__circle t-step-item__circle--default"
1345+
>
1346+
3
1347+
</div>
12821348
</div>
12831349
<div
12841350
class="t-step-item__content t-step-item__content--vertical"
@@ -1309,8 +1375,10 @@ exports[`Steps > Steps verticalDemo demo 1`] = `
13091375
class="t-step-item__anchor t-step-item__anchor--vertical"
13101376
>
13111377
<div
1312-
class="t-step-item__icon t-step-item__icon--default"
1313-
/>
1378+
class="t-step-item__circle t-step-item__circle--default"
1379+
>
1380+
4
1381+
</div>
13141382
</div>
13151383
<div
13161384
class="t-step-item__content t-step-item__content--vertical t-step-item__content--last"

‎src/steps/_example/style/index.less‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
.steps-horizontal-demo-block {
22
margin: 16px 0 24px;
33
padding: 16px 0;
4-
background-color: var(--bg-color-demo, #fff);
4+
background-color: #fff;
55
}
66
.steps-vertical-demo-block {
77
margin: 16px 0 24px;
88
padding: 16px;
9-
background-color: var(--bg-color-demo, #fff);
9+
background-color: #fff;
1010
}

0 commit comments

Comments
 (0)