1 |
|
2 |
|
3 |
|
4 |
|
5 | import React from 'react';
|
6 | import PropTypes from 'prop-types';
|
7 | import classNames from 'classnames';
|
8 |
|
9 | function isString(str) {
|
10 | return typeof str === 'string';
|
11 | }
|
12 |
|
13 | class Step extends React.Component {
|
14 | renderIconNode() {
|
15 | const {
|
16 | prefixCls, progressDot, stepNumber, status, title, description, icon,
|
17 | iconPrefix, icons,
|
18 | } = this.props;
|
19 | let iconNode;
|
20 | const iconClassName = classNames(`${prefixCls}-icon`, `${iconPrefix}icon`, {
|
21 | [`${iconPrefix}icon-${icon}`]: icon && isString(icon),
|
22 | [`${iconPrefix}icon-check`]: !icon && status === 'finish' && (icons && !icons.finish),
|
23 | [`${iconPrefix}icon-close`]: !icon && status === 'error' && (icons && !icons.error),
|
24 | });
|
25 | const iconDot = <span className={`${prefixCls}-icon-dot`}></span>;
|
26 |
|
27 | if (progressDot) {
|
28 | if (typeof progressDot === 'function') {
|
29 | iconNode = (
|
30 | <span className={`${prefixCls}-icon`}>
|
31 | {progressDot(iconDot, { index: stepNumber - 1, status, title, description })}
|
32 | </span>
|
33 | );
|
34 | } else {
|
35 | iconNode = <span className={`${prefixCls}-icon`}>{iconDot}</span>;
|
36 | }
|
37 | } else if (icon && !isString(icon)) {
|
38 | iconNode = <span className={`${prefixCls}-icon`}>{icon}</span>;
|
39 | } else if (icons && icons.finish && status === 'finish') {
|
40 | iconNode = <span className={`${prefixCls}-icon`}>{icons.finish}</span>;
|
41 | } else if (icons && icons.error && status === 'error') {
|
42 | iconNode = <span className={`${prefixCls}-icon`}>{icons.error}</span>;
|
43 | } else if (icon || status === 'finish' || status === 'error') {
|
44 | iconNode = <span className={iconClassName} />;
|
45 | } else {
|
46 | iconNode = <span className={`${prefixCls}-icon`}>{stepNumber}</span>;
|
47 | }
|
48 |
|
49 | return iconNode;
|
50 | }
|
51 | render() {
|
52 | const {
|
53 | className, prefixCls, style, itemWidth,
|
54 | status = 'wait', iconPrefix, icon, wrapperStyle,
|
55 | adjustMarginRight, stepNumber,
|
56 | description, title, progressDot, tailContent,
|
57 | icons,
|
58 | ...restProps,
|
59 | } = this.props;
|
60 |
|
61 | const classString = classNames(
|
62 | `${prefixCls}-item`,
|
63 | `${prefixCls}-item-${status}`,
|
64 | className,
|
65 | { [`${prefixCls}-item-custom`]: icon },
|
66 | );
|
67 | const stepItemStyle = { ...style };
|
68 | if (itemWidth) {
|
69 | stepItemStyle.width = itemWidth;
|
70 | }
|
71 | if (adjustMarginRight) {
|
72 | stepItemStyle.marginRight = adjustMarginRight;
|
73 | }
|
74 | return (
|
75 | <div
|
76 | {...restProps}
|
77 | className={classString}
|
78 | style={stepItemStyle}
|
79 | >
|
80 | <div className={`${prefixCls}-item-tail`}>
|
81 | {tailContent}
|
82 | </div>
|
83 | <div className={`${prefixCls}-item-icon`}>
|
84 | {this.renderIconNode()}
|
85 | </div>
|
86 | <div className={`${prefixCls}-item-content`}>
|
87 | <div className={`${prefixCls}-item-title`}>
|
88 | {title}
|
89 | </div>
|
90 | {description && <div className={`${prefixCls}-item-description`}>{description}</div>}
|
91 | </div>
|
92 | </div>
|
93 | );
|
94 | }
|
95 | }
|
96 |
|
97 | Step.propTypes = {
|
98 | className: PropTypes.string,
|
99 | prefixCls: PropTypes.string,
|
100 | style: PropTypes.object,
|
101 | wrapperStyle: PropTypes.object,
|
102 | itemWidth: PropTypes.oneOfType([
|
103 | PropTypes.number,
|
104 | PropTypes.string,
|
105 | ]),
|
106 | status: PropTypes.string,
|
107 | iconPrefix: PropTypes.string,
|
108 | icon: PropTypes.node,
|
109 | adjustMarginRight: PropTypes.oneOfType([
|
110 | PropTypes.number,
|
111 | PropTypes.string,
|
112 | ]),
|
113 | stepNumber: PropTypes.string,
|
114 | description: PropTypes.any,
|
115 | title: PropTypes.any,
|
116 | progressDot: PropTypes.oneOfType([
|
117 | PropTypes.bool,
|
118 | PropTypes.func,
|
119 | ]),
|
120 | tailContent: PropTypes.any,
|
121 | icons: PropTypes.shape({
|
122 | finish: PropTypes.node,
|
123 | error: PropTypes.node,
|
124 | }),
|
125 | };
|
126 |
|
127 | export default Step;
|
128 |
|
\ | No newline at end of file |