Skip to content

Commit 2e9d821

Browse files
afc163afc163
authored
Merge pull request #47 from HeskeyBaozi/master
support custon finish icon & error icon
2 parents 9e62045 + ea78fbd commit 2e9d821

File tree

7 files changed

+302
-10
lines changed

7 files changed

+302
-10
lines changed

‎README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,12 @@ online example: http://react-component.github.io/steps/examples/
8686
<td>wait</td>
8787
<td>status of current Steps, could be `error` `process` `finish` `wait`</td>
8888
</tr>
89+
<tr>
90+
<td>icons</td>
91+
<td>{ finish: ReactNode, error: ReactNode }</td>
92+
<td></td>
93+
<td>spicify the default finish icon and error icon</td>
94+
</tr>
8995
</tbody>
9096
</table>
9197

‎examples/custom-svg-icon.html‎

Whitespace-only changes.

‎examples/custom-svg-icon.jsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import 'rc-steps/assets/index.less';
2+
import 'rc-steps/assets/iconfont.less';
3+
import React from 'react';
4+
import ReactDOM from 'react-dom';
5+
import Steps, { Step } from 'rc-steps';
6+
7+
function getFinishIcon() {
8+
const path = 'M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.' +
9+
'5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139' +
10+
'.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5' +
11+
'-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 ' +
12+
'55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33' +
13+
'.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99' +
14+
'.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.' +
15+
'7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 10' +
16+
'1.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 ' +
17+
'20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z';
18+
return (
19+
<svg
20+
width="1em"
21+
height="1em"
22+
fill="currentColor"
23+
viewBox="0 0 1024 1024"
24+
style={{ verticalAlign: '-.125em' }}
25+
>
26+
<path d={path} />
27+
</svg>
28+
);
29+
}
30+
31+
function getErrorIcon() {
32+
const path1 = 'M512 0C229.2 0 0 229.2 0 512s229.2 512 512 512 512-229' +
33+
'.2 512-512S794.8 0 512 0zm311.1 823.1c-40.4 40.4-87.5 72.2-139.9 9' +
34+
'4.3C629 940.4 571.4 952 512 952s-117-11.6-171.2-34.5c-52.4-22.2-99' +
35+
'.4-53.9-139.9-94.3-40.4-40.4-72.2-87.5-94.3-139.9C83.6 629 72 571.' +
36+
'4 72 512s11.6-117 34.5-171.2c22.2-52.4 53.9-99.4 94.3-139.9 40.4-4' +
37+
'0.4 87.5-72.2 139.9-94.3C395 83.6 452.6 72 512 72s117 11.6 171.2 3' +
38+
'4.5c52.4 22.2 99.4 53.9 139.9 94.3 40.4 40.4 72.2 87.5 94.3 139.9C' +
39+
'940.4 395 952 452.6 952 512s-11.6 117-34.5 171.2c-22.2 52.4-53.9 9' +
40+
'9.5-94.4 139.9z';
41+
const path2 = 'M640.3 765.5c-19.9 0-36-16.1-36-36 0-50.9-41.4-92.3-92' +
42+
'.3-92.3s-92.3 41.4-92.3 92.3c0 19.9-16.1 36-36 36s-36-16.1-36-36c0' +
43+
'-90.6 73.7-164.3 164.3-164.3s164.3 73.7 164.3 164.3c0 19.9-16.1 36' +
44+
'-36 36zM194.2 382.4a60 60 0 1 0 120 0 60 60 0 1 0-120 0zM709.5 382' +
45+
'.4a60 60 0 1 0 120 0 60 60 0 1 0-120 0z';
46+
return (
47+
<svg
48+
width="1em"
49+
height="1em"
50+
fill="currentColor"
51+
viewBox="0 0 1024 1024"
52+
style={{ verticalAlign: '-.125em' }}
53+
>
54+
<path d={path1} />
55+
<path d={path2} />
56+
</svg>
57+
);
58+
}
59+
60+
const icons = {
61+
finish: getFinishIcon(),
62+
error: getErrorIcon(),
63+
};
64+
65+
ReactDOM.render(
66+
<Steps current={1} status="error" icons={icons}>
67+
<Step title="Finished" description="This is a description" />
68+
<Step title="In Process" description="This is a description" />
69+
<Step title="Waiting" description="This is a description" />
70+
</Steps>
71+
, document.getElementById('__react-content'));

‎src/Step.jsx‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,17 +31,21 @@ export default class Step extends React.Component {
3131
PropTypes.func,
3232
]),
3333
tailContent: PropTypes.any,
34+
icons: PropTypes.shape({
35+
finish: PropTypes.node,
36+
error: PropTypes.node,
37+
}),
3438
};
3539
renderIconNode() {
3640
const {
3741
prefixCls, progressDot, stepNumber, status, title, description, icon,
38-
iconPrefix,
42+
iconPrefix, icons,
3943
} = this.props;
4044
let iconNode;
4145
const iconClassName = classNames(`${prefixCls}-icon`, `${iconPrefix}icon`, {
4246
[`${iconPrefix}icon-${icon}`]: icon && isString(icon),
43-
[`${iconPrefix}icon-check`]: !icon && status === 'finish',
44-
[`${iconPrefix}icon-cross`]: !icon && status === 'error',
47+
[`${iconPrefix}icon-check`]: !icon && status === 'finish' && (icons && !icons.finish),
48+
[`${iconPrefix}icon-close`]: !icon && status === 'error' && (icons && !icons.error),
4549
});
4650
const iconDot = <span className={`${prefixCls}-icon-dot`}></span>;
4751
// `progressDot` enjoy the highest priority
@@ -57,11 +61,16 @@ export default class Step extends React.Component {
5761
}
5862
} else if (icon && !isString(icon)) {
5963
iconNode = <span className={`${prefixCls}-icon`}>{icon}</span>;
64+
} else if (icons && icons.finish && status === 'finish') {
65+
iconNode = <span className={`${prefixCls}-icon`}>{icons.finish}</span>;
66+
} else if (icons && icons.error && status === 'error') {
67+
iconNode = <span className={`${prefixCls}-icon`}>{icons.error}</span>;
6068
} else if (icon || status === 'finish' || status === 'error') {
6169
iconNode = <span className={iconClassName} />;
6270
} else {
6371
iconNode = <span className={`${prefixCls}-icon`}>{stepNumber}</span>;
6472
}
73+
6574
return iconNode;
6675
}
6776
render() {
@@ -70,6 +79,7 @@ export default class Step extends React.Component {
7079
status = 'wait', iconPrefix, icon, wrapperStyle,
7180
adjustMarginRight, stepNumber,
7281
description, title, progressDot, tailContent,
82+
icons,
7383
...restProps,
7484
} = this.props;
7585

‎src/Steps.jsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,10 @@ export default class Steps extends Component {
2323
style: PropTypes.object,
2424
initial: PropTypes.number,
2525
current: PropTypes.number,
26+
icons: PropTypes.shape({
27+
finish: PropTypes.node,
28+
error: PropTypes.node,
29+
}),
2630
};
2731
static defaultProps = {
2832
prefixCls: 'rc-steps',
@@ -88,6 +92,7 @@ export default class Steps extends Component {
8892
const {
8993
prefixCls, style = {}, className, children, direction,
9094
labelPlacement, iconPrefix, status, size, current, progressDot, initial,
95+
icons,
9196
...restProps,
9297
} = this.props;
9398
const { lastStepOffsetWidth, flexSupported } = this.state;
@@ -114,6 +119,7 @@ export default class Steps extends Component {
114119
iconPrefix,
115120
wrapperStyle: style,
116121
progressDot,
122+
icons,
117123
...child.props,
118124
};
119125
if (!flexSupported && direction !== 'vertical' && index !== lastIndex) {

‎tests/__snapshots__/index.test.js.snap‎

Lines changed: 139 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ exports[`Steps render renders current correctly 1`] = `
131131
class="rc-steps-item-icon"
132132
>
133133
<span
134-
class="rc-steps-icon rcicon rcicon-check"
134+
class="rc-steps-icon rcicon"
135135
>
136136
137137
</span>
@@ -158,7 +158,7 @@ exports[`Steps render renders current correctly 1`] = `
158158
class="rc-steps-item-icon"
159159
>
160160
<span
161-
class="rc-steps-icon rcicon rcicon-check"
161+
class="rc-steps-icon rcicon"
162162
>
163163
164164
</span>
@@ -615,7 +615,7 @@ exports[`Steps render renders status correctly 1`] = `
615615
class="rc-steps-item-icon"
616616
>
617617
<span
618-
class="rc-steps-icon rcicon rcicon-check"
618+
class="rc-steps-icon rcicon"
619619
>
620620
621621
</span>
@@ -642,7 +642,7 @@ exports[`Steps render renders status correctly 1`] = `
642642
class="rc-steps-item-icon"
643643
>
644644
<span
645-
class="rc-steps-icon rcicon rcicon-check"
645+
class="rc-steps-icon rcicon"
646646
>
647647
648648
</span>
@@ -669,7 +669,7 @@ exports[`Steps render renders status correctly 1`] = `
669669
class="rc-steps-item-icon"
670670
>
671671
<span
672-
class="rc-steps-icon rcicon rcicon-cross"
672+
class="rc-steps-icon rcicon"
673673
>
674674
675675
</span>
@@ -961,7 +961,7 @@ exports[`Steps render renders step with description and status 1`] = `
961961
class="rc-steps-item-icon"
962962
>
963963
<span
964-
class="rc-steps-icon rcicon rcicon-check"
964+
class="rc-steps-icon rcicon"
965965
>
966966
967967
</span>
@@ -1348,7 +1348,7 @@ exports[`Steps render renders with fasly children 1`] = `
13481348
class="rc-steps-item-icon"
13491349
>
13501350
<span
1351-
class="rc-steps-icon rcicon rcicon-check"
1351+
class="rc-steps-icon rcicon"
13521352
>
13531353
13541354
</span>
@@ -1370,3 +1370,135 @@ exports[`Steps render renders with fasly children 1`] = `
13701370
</div>
13711371
</div>
13721372
`;
1373+
1374+
exports[`Steps render should render svg finishIcon and errorIcon correctly 1`] = `
1375+
<div
1376+
class="rc-steps rc-steps-horizontal rc-steps-label-horizontal"
1377+
>
1378+
<div
1379+
class="rc-steps-item rc-steps-item-finish rc-steps-next-error"
1380+
>
1381+
<div
1382+
class="rc-steps-item-tail"
1383+
>
1384+
1385+
</div>
1386+
<div
1387+
class="rc-steps-item-icon"
1388+
>
1389+
<span
1390+
class="rc-steps-icon"
1391+
>
1392+
<svg
1393+
fill="currentColor"
1394+
height="1em"
1395+
style="vertical-align:-.125em"
1396+
viewBox="0 0 1024 1024"
1397+
width="1em"
1398+
>
1399+
<path
1400+
d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z"
1401+
>
1402+
1403+
</path>
1404+
</svg>
1405+
</span>
1406+
</div>
1407+
<div
1408+
class="rc-steps-item-content"
1409+
>
1410+
<div
1411+
class="rc-steps-item-title"
1412+
>
1413+
Finished
1414+
</div>
1415+
<div
1416+
class="rc-steps-item-description"
1417+
>
1418+
This is a description
1419+
</div>
1420+
</div>
1421+
</div>
1422+
<div
1423+
class="rc-steps-item rc-steps-item-error"
1424+
>
1425+
<div
1426+
class="rc-steps-item-tail"
1427+
>
1428+
1429+
</div>
1430+
<div
1431+
class="rc-steps-item-icon"
1432+
>
1433+
<span
1434+
class="rc-steps-icon"
1435+
>
1436+
<svg
1437+
fill="currentColor"
1438+
height="1em"
1439+
style="vertical-align:-.125em"
1440+
viewBox="0 0 1024 1024"
1441+
width="1em"
1442+
>
1443+
<path
1444+
d="M512 0C229.2 0 0 229.2 0 512s229.2 512 512 512 512-229.2 512-512S794.8 0 512 0zm311.1 823.1c-40.4 40.4-87.5 72.2-139.9 94.3C629 940.4 571.4 952 512 952s-117-11.6-171.2-34.5c-52.4-22.2-99.4-53.9-139.9-94.3-40.4-40.4-72.2-87.5-94.3-139.9C83.6 629 72 571.4 72 512s11.6-117 34.5-171.2c22.2-52.4 53.9-99.4 94.3-139.9 40.4-40.4 87.5-72.2 139.9-94.3C395 83.6 452.6 72 512 72s117 11.6 171.2 34.5c52.4 22.2 99.4 53.9 139.9 94.3 40.4 40.4 72.2 87.5 94.3 139.9C940.4 395 952 452.6 952 512s-11.6 117-34.5 171.2c-22.2 52.4-53.9 99.5-94.4 139.9z"
1445+
>
1446+
1447+
</path>
1448+
<path
1449+
d="M640.3 765.5c-19.9 0-36-16.1-36-36 0-50.9-41.4-92.3-92.3-92.3s-92.3 41.4-92.3 92.3c0 19.9-16.1 36-36 36s-36-16.1-36-36c0-90.6 73.7-164.3 164.3-164.3s164.3 73.7 164.3 164.3c0 19.9-16.1 36-36 36zM194.2 382.4a60 60 0 1 0 120 0 60 60 0 1 0-120 0zM709.5 382.4a60 60 0 1 0 120 0 60 60 0 1 0-120 0z"
1450+
>
1451+
1452+
</path>
1453+
</svg>
1454+
</span>
1455+
</div>
1456+
<div
1457+
class="rc-steps-item-content"
1458+
>
1459+
<div
1460+
class="rc-steps-item-title"
1461+
>
1462+
In Process
1463+
</div>
1464+
<div
1465+
class="rc-steps-item-description"
1466+
>
1467+
This is a description
1468+
</div>
1469+
</div>
1470+
</div>
1471+
<div
1472+
class="rc-steps-item rc-steps-item-wait"
1473+
>
1474+
<div
1475+
class="rc-steps-item-tail"
1476+
>
1477+
1478+
</div>
1479+
<div
1480+
class="rc-steps-item-icon"
1481+
>
1482+
<span
1483+
class="rc-steps-icon"
1484+
>
1485+
3
1486+
</span>
1487+
</div>
1488+
<div
1489+
class="rc-steps-item-content"
1490+
>
1491+
<div
1492+
class="rc-steps-item-title"
1493+
>
1494+
Waiting
1495+
</div>
1496+
<div
1497+
class="rc-steps-item-description"
1498+
>
1499+
This is a description
1500+
</div>
1501+
</div>
1502+
</div>
1503+
</div>
1504+
`;

0 commit comments

Comments
 (0)