1 | import React, { PropTypes } from 'react';
|
2 | import classNames from 'classnames';
|
3 |
|
4 | function isString(str) {
|
5 | return typeof str === 'string';
|
6 | }
|
7 |
|
8 | export default class Step extends React.Component {
|
9 | render() {
|
10 | const {
|
11 | className, prefixCls, style, tailWidth,
|
12 | status = 'wait', iconPrefix, icon, wrapperStyle,
|
13 | adjustMarginRight, stepLast, stepNumber,
|
14 | description, title, ...restProps } = this.props;
|
15 | const iconClassName = classNames({
|
16 | [`${prefixCls}-icon`]: true,
|
17 | [`${iconPrefix}icon`]: true,
|
18 | [`${iconPrefix}icon-${icon}`]: icon && isString(icon),
|
19 | [`${iconPrefix}icon-check`]: !icon && status === 'finish',
|
20 | [`${iconPrefix}icon-cross`]: !icon && status === 'error',
|
21 | });
|
22 |
|
23 | let iconNode;
|
24 | if (icon && !isString(icon)) {
|
25 | iconNode = <span className={`${prefixCls}-icon`}>{icon}</span>;
|
26 | } else if (icon || status === 'finish' || status === 'error') {
|
27 | iconNode = <span className={iconClassName} />;
|
28 | } else {
|
29 | iconNode = <span className={`${prefixCls}-icon`}>{stepNumber}</span>;
|
30 | }
|
31 |
|
32 | const classString = classNames({
|
33 | [`${prefixCls}-item`]: true,
|
34 | [`${prefixCls}-item-last`]: stepLast,
|
35 | [`${prefixCls}-status-${status}`]: true,
|
36 | [`${prefixCls}-custom`]: icon,
|
37 | [className]: !!className,
|
38 | });
|
39 | return (
|
40 | <div {...restProps}
|
41 | className={classString}
|
42 | style={{ width: tailWidth, marginRight: adjustMarginRight, ...style }}
|
43 | >
|
44 | {stepLast ? '' : <div ref="tail" className={`${prefixCls}-tail`}><i /></div>}
|
45 | <div className={`${prefixCls}-step`}>
|
46 | <div
|
47 | className={`${prefixCls}-head`}
|
48 | style={{ background: wrapperStyle.background || wrapperStyle.backgroundColor }}
|
49 | >
|
50 | <div className={`${prefixCls}-head-inner`}>{iconNode}</div>
|
51 | </div>
|
52 | <div ref="main" className={`${prefixCls}-main`}>
|
53 | <div
|
54 | className={`${prefixCls}-title`}
|
55 | style={{ background: wrapperStyle.background || wrapperStyle.backgroundColor }}
|
56 | >{title}</div>
|
57 | {description ? <div className={`${prefixCls}-description`}>{description}</div> : ''}
|
58 | </div>
|
59 | </div>
|
60 | </div>
|
61 | );
|
62 | }
|
63 | }
|
64 |
|
65 | Step.propTypes = {
|
66 | className: PropTypes.string,
|
67 | prefixCls: PropTypes.string,
|
68 | style: PropTypes.object,
|
69 | wrapperStyle: PropTypes.object,
|
70 | tailWidth: PropTypes.oneOfType([
|
71 | PropTypes.number,
|
72 | PropTypes.string,
|
73 | ]),
|
74 | status: PropTypes.string,
|
75 | iconPrefix: PropTypes.string,
|
76 | icon: PropTypes.node,
|
77 | adjustMarginRight: PropTypes.oneOfType([
|
78 | PropTypes.number,
|
79 | PropTypes.string,
|
80 | ]),
|
81 | stepLast: PropTypes.bool,
|
82 | stepNumber: PropTypes.string,
|
83 | description: PropTypes.any,
|
84 | title: PropTypes.any,
|
85 | };
|
86 |
|
87 | module.exports = Step;
|
88 |
|
\ | No newline at end of file |