Skip to content

Commit ea78fbd

Browse files
HeskeyBaoziHeskeyBaozi
committed
finishIcon, errorIcon => icons
1 parent ca43852 commit ea78fbd

File tree

6 files changed

+41
-33
lines changed

6 files changed

+41
-33
lines changed

‎README.md‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -87,16 +87,10 @@ online example: http://react-component.github.io/steps/examples/
8787
<td>status of current Steps, could be `error` `process` `finish` `wait`</td>
8888
</tr>
8989
<tr>
90-
<td>finishIcon</td>
91-
<td>ReactNode</td>
92-
<td></td>
93-
<td>spicify the finish icon</td>
94-
</tr>
95-
<tr>
96-
<td>errorIcon</td>
97-
<td>ReactNode</td>
90+
<td>icons</td>
91+
<td>{ finish: ReactNode, error: ReactNode }</td>
9892
<td></td>
99-
<td>spicify the error icon</td>
93+
<td>spicify the default finish icon and error icon</td>
10094
</tr>
10195
</tbody>
10296
</table>

‎examples/custom-svg-icon.jsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import 'rc-steps/assets/index.less';
2+
import 'rc-steps/assets/iconfont.less';
13
import React from 'react';
24
import ReactDOM from 'react-dom';
35
import Steps, { Step } from 'rc-steps';
@@ -55,8 +57,13 @@ function getErrorIcon() {
5557
);
5658
}
5759

60+
const icons = {
61+
finish: getFinishIcon(),
62+
error: getErrorIcon(),
63+
};
64+
5865
ReactDOM.render(
59-
<Steps current={1} status="error" finishIcon={getFinishIcon()} errorIcon={getErrorIcon()}>
66+
<Steps current={1} status="error" icons={icons}>
6067
<Step title="Finished" description="This is a description" />
6168
<Step title="In Process" description="This is a description" />
6269
<Step title="Waiting" description="This is a description" />

‎src/Step.jsx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -31,19 +31,21 @@ export default class Step extends React.Component {
3131
PropTypes.func,
3232
]),
3333
tailContent: PropTypes.any,
34-
finishIcon: PropTypes.node,
35-
errorIcon: PropTypes.node,
34+
icons: PropTypes.shape({
35+
finish: PropTypes.node,
36+
error: PropTypes.node,
37+
}),
3638
};
3739
renderIconNode() {
3840
const {
3941
prefixCls, progressDot, stepNumber, status, title, description, icon,
40-
iconPrefix, finishIcon, errorIcon,
42+
iconPrefix, icons,
4143
} = this.props;
4244
let iconNode;
4345
const iconClassName = classNames(`${prefixCls}-icon`, `${iconPrefix}icon`, {
4446
[`${iconPrefix}icon-${icon}`]: icon && isString(icon),
45-
[`${iconPrefix}icon-check`]: !icon && status === 'finish' && !finishIcon,
46-
[`${iconPrefix}icon-close`]: !icon && status === 'error' && !errorIcon,
47+
[`${iconPrefix}icon-check`]: !icon && status === 'finish' && (icons && !icons.finish),
48+
[`${iconPrefix}icon-close`]: !icon && status === 'error' && (icons && !icons.error),
4749
});
4850
const iconDot = <span className={`${prefixCls}-icon-dot`}></span>;
4951
// `progressDot` enjoy the highest priority
@@ -59,10 +61,10 @@ export default class Step extends React.Component {
5961
}
6062
} else if (icon && !isString(icon)) {
6163
iconNode = <span className={`${prefixCls}-icon`}>{icon}</span>;
62-
} else if (finishIcon && status === 'finish') {
63-
iconNode = <span className={`${prefixCls}-icon`}>{finishIcon}</span>;
64-
} else if (errorIcon && status === 'error') {
65-
iconNode = <span className={`${prefixCls}-icon`}>{errorIcon}</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>;
6668
} else if (icon || status === 'finish' || status === 'error') {
6769
iconNode = <span className={iconClassName} />;
6870
} else {
@@ -77,7 +79,7 @@ export default class Step extends React.Component {
7779
status = 'wait', iconPrefix, icon, wrapperStyle,
7880
adjustMarginRight, stepNumber,
7981
description, title, progressDot, tailContent,
80-
finishIcon, errorIcon,
82+
icons,
8183
...restProps,
8284
} = this.props;
8385

‎src/Steps.jsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,10 @@ export default class Steps extends Component {
2323
style: PropTypes.object,
2424
initial: PropTypes.number,
2525
current: PropTypes.number,
26-
finishIcon: PropTypes.node,
27-
errorIcon: PropTypes.node,
26+
icons: PropTypes.shape({
27+
finish: PropTypes.node,
28+
error: PropTypes.node,
29+
}),
2830
};
2931
static defaultProps = {
3032
prefixCls: 'rc-steps',
@@ -90,7 +92,7 @@ export default class Steps extends Component {
9092
const {
9193
prefixCls, style = {}, className, children, direction,
9294
labelPlacement, iconPrefix, status, size, current, progressDot, initial,
93-
finishIcon, errorIcon,
95+
icons,
9496
...restProps,
9597
} = this.props;
9698
const { lastStepOffsetWidth, flexSupported } = this.state;
@@ -117,8 +119,7 @@ export default class Steps extends Component {
117119
iconPrefix,
118120
wrapperStyle: style,
119121
progressDot,
120-
finishIcon,
121-
errorIcon,
122+
icons,
122123
...child.props,
123124
};
124125
if (!flexSupported && direction !== 'vertical' && index !== lastIndex) {

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

Lines changed: 7 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-close"
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>

‎tests/index.test.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -152,8 +152,12 @@ describe('Steps', () => {
152152
);
153153
}
154154
it('should render svg finishIcon and errorIcon correctly', () => {
155+
const icons = {
156+
finish: getFinishIcon(),
157+
error: getErrorIcon(),
158+
};
155159
const wrapper = render(
156-
<Steps current={1} status="error" finishIcon={getFinishIcon()} errorIcon={getErrorIcon()}>
160+
<Steps current={1} status="error" icons={icons}>
157161
<Step title="Finished" description="This is a description" />
158162
<Step title="In Process" description="This is a description" />
159163
<Step title="Waiting" description="This is a description" />

0 commit comments

Comments
 (0)