Skip to content

Commit f4d5bad

Browse files
rookie125rookie125
committed
新增Step组件
1 parent df71c70 commit f4d5bad

9 files changed

Lines changed: 678 additions & 0 deletions

File tree

‎src/components/step/constants.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// status
2+
export const WAIT = 'wait';
3+
export const FINISH = 'finish';
4+
export const PROCESS = 'process';
5+
6+
// direction
7+
export const HORIZONTAL = 'horizontal';
8+
export const VERTICAL = 'vertical';
9+
export const INLINE = 'inline';
10+
11+
// type
12+
export const CIRCLE = 'circle';
13+
export const DOT = 'dot';

‎src/components/step/demos/basic.markdown‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
order: 1
3+
title: 基本用法
4+
desc: 简单的步骤条。
5+
---
6+
7+
````javascript
8+
import React from 'react';
9+
import { Step } from 'cloud-react';
10+
11+
const title1Style = {
12+
textAlign: 'center'
13+
}
14+
const title2Style = {
15+
marginTop: '100px',
16+
textAlign: 'center'
17+
}
18+
19+
export default function StepDemo() {
20+
return (
21+
<>
22+
23+
<h4 style={title1Style}>把大象装进冰箱分几步</h4>
24+
25+
<Step current={0}>
26+
<Step.Item title="把冰箱门打开" />
27+
<Step.Item title="把大象放进去" />
28+
<Step.Item title="把冰箱门关上" />
29+
</Step>
30+
31+
<h4 style={title2Style}>把长颈鹿装进冰箱分几步</h4>
32+
33+
<Step current={3}>
34+
<Step.Item title="把冰箱门打开" />
35+
<Step.Item title="把大象拿出来" />
36+
<Step.Item title="把长颈鹿放进去" />
37+
<Step.Item title="把冰箱门关上" />
38+
</Step>
39+
</>
40+
);
41+
}
42+
````

‎src/components/step/demos/direction.markdown‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
---
2+
order: 4
3+
title: 纵向
4+
desc: 纵向方向的步骤
5+
---
6+
7+
````javascript
8+
import React from 'react';
9+
import { Step } from 'cloud-react';
10+
11+
const title1Style = {}
12+
const title2Style = { marginTop: '50px' };
13+
14+
export default function StepDemo() {
15+
return (
16+
<>
17+
<div className="step-demo-direction">
18+
<div>
19+
<h4 style={title1Style}>把大象装进冰箱分几步</h4>
20+
21+
<Step current={1} direction="vertical">
22+
<Step.Item title="步骤一" content="把冰箱门打开" />
23+
<Step.Item title="步骤二" content="把大象放进去" />
24+
<Step.Item title="步骤三" content="把冰箱门关上" />
25+
</Step>
26+
</div>
27+
28+
<div>
29+
<h4 style={title1Style}>把长颈鹿装进冰箱分几步</h4>
30+
31+
<Step current={1} direction="vertical">
32+
<Step.Item title="步骤一" content="把冰箱门打开" />
33+
<Step.Item title="步骤二" content="把大象拿出来" />
34+
<Step.Item title="步骤三" content="把长颈鹿放进去" />
35+
<Step.Item title="步骤四" content="把冰箱门关上" />
36+
</Step>
37+
</div>
38+
</div>
39+
40+
<div className="step-demo-direction">
41+
<div>
42+
<h4 style={title2Style}>把大象装进冰箱分几步</h4>
43+
44+
<Step current={1} type="dot" direction="vertical">
45+
<Step.Item title="把冰箱门打开" content="123132" />
46+
<Step.Item title="把大象放进去" />
47+
<Step.Item title="把冰箱门关上" />
48+
</Step>
49+
</div>
50+
51+
<div>
52+
<h4 style={title2Style}>把长颈鹿装进冰箱分几步</h4>
53+
54+
<Step current={1} type="dot" direction="vertical">
55+
<Step.Item title="把冰箱门打开" />
56+
<Step.Item title="把大象拿出来" />
57+
<Step.Item title="把长颈鹿放进去" />
58+
<Step.Item title="把冰箱门关上" />
59+
</Step>
60+
</div>
61+
</div>
62+
</>
63+
);
64+
}
65+
````
66+
67+
````less
68+
.step-demo-direction {
69+
display: flex;
70+
71+
> * {
72+
width: 50%;
73+
}
74+
}
75+
````

‎src/components/step/demos/inline.markdown‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
order: 2
3+
title: 并排对齐
4+
desc: 图标和内容部分并排显示
5+
---
6+
7+
````javascript
8+
import React from 'react';
9+
import { Step } from 'cloud-react';
10+
11+
const title1Style = {
12+
textAlign: 'center'
13+
}
14+
const title2Style = {
15+
marginTop: '100px',
16+
textAlign: 'center'
17+
}
18+
19+
export default function StepDemo() {
20+
return (
21+
<>
22+
23+
<h4 style={title1Style}>把大象装进冰箱分几步</h4>
24+
25+
<Step current={1} direction="inline">
26+
<Step.Item title="把冰箱门打开" />
27+
<Step.Item title="把大象放进去" />
28+
<Step.Item title="把冰箱门关上" />
29+
</Step>
30+
31+
<h4 style={title2Style}>把长颈鹿装进冰箱分几步</h4>
32+
33+
<Step current={1} direction="inline">
34+
<Step.Item title="步骤一" content="把冰箱门打开" />
35+
<Step.Item title="步骤二" content="把大象拿出来" />
36+
<Step.Item title="步骤三" content="把长颈鹿放进去" />
37+
<Step.Item title="步骤四" content="把冰箱门关上" />
38+
</Step>
39+
</>
40+
);
41+
}
42+
````

‎src/components/step/demos/type.markdown‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
---
2+
order: 3
3+
title: 类型
4+
desc: 有圆形和点状类型，默认是圆形
5+
---
6+
7+
````javascript
8+
import React from 'react';
9+
import { Step } from 'cloud-react';
10+
11+
const title1Style = {
12+
textAlign: 'center'
13+
}
14+
const title2Style = {
15+
marginTop: '100px',
16+
textAlign: 'center'
17+
}
18+
19+
export default function StepDemo() {
20+
return (
21+
<>
22+
23+
<h4 style={title1Style}>把大象装进冰箱分几步</h4>
24+
25+
<Step current={1} type="circle">
26+
<Step.Item title="把冰箱门打开" />
27+
<Step.Item title="把大象放进去" />
28+
<Step.Item title="把冰箱门关上" />
29+
</Step>
30+
31+
<h4 style={title2Style}>把长颈鹿装进冰箱分几步</h4>
32+
33+
<Step current={2} type="circle">
34+
<Step.Item title="把冰箱门打开" />
35+
<Step.Item title="把大象拿出来" />
36+
<Step.Item title="把长颈鹿放进去" />
37+
<Step.Item title="把冰箱门关上" />
38+
</Step>
39+
40+
<h4 style={title2Style}>把大象装进冰箱分几步</h4>
41+
42+
<Step current={2} type="dot">
43+
<Step.Item title="把冰箱门打开" />
44+
<Step.Item title="把大象放进去" />
45+
<Step.Item title="把冰箱门关上" />
46+
</Step>
47+
48+
<h4 style={title2Style}>把长颈鹿装进冰箱分几步</h4>
49+
50+
<Step current={2} type="dot">
51+
<Step.Item title="把冰箱门打开" />
52+
<Step.Item title="把大象拿出来" />
53+
<Step.Item title="把长颈鹿放进去" />
54+
<Step.Item title="把冰箱门关上" />
55+
</Step>
56+
</>
57+
);
58+
}
59+
````

‎src/components/step/index.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import React, { Children, cloneElement, PureComponent } from 'react';
2+
import PropTypes from 'prop-types';
3+
import classnames from 'classnames';
4+
import StepItem from './item';
5+
6+
import { HORIZONTAL, VERTICAL, INLINE, CIRCLE, DOT, PROCESS, WAIT, FINISH } from './constants';
7+
8+
import './index.less';
9+
10+
export default class Step extends PureComponent {
11+
12+
static propTypes = {
13+
current: PropTypes.number,
14+
direction: PropTypes.oneOf([HORIZONTAL, VERTICAL, INLINE]),
15+
type: PropTypes.oneOf([CIRCLE, DOT]),
16+
children: PropTypes.any,
17+
onClick: PropTypes.func,
18+
className: PropTypes.string
19+
};
20+
21+
static defaultProps = {
22+
current: 0,
23+
direction: HORIZONTAL,
24+
type: CIRCLE,
25+
children: null,
26+
className: '',
27+
onClick: () => {}
28+
}
29+
30+
static Item = StepItem;
31+
32+
getStatus(index) {
33+
const { current } = this.props;
34+
35+
if (current === index) {
36+
return PROCESS;
37+
}
38+
39+
if (index < current) {
40+
return FINISH;
41+
}
42+
43+
return WAIT;
44+
}
45+
46+
render() {
47+
48+
const { direction, type, children, className, onClick: rootClick, ...stepProps } = this.props;
49+
const classNames = classnames('step', direction, type, className);
50+
const elements = Children.map(children, (Child, index) => {
51+
const { status, content, onClick, ...props } = Child.props;
52+
53+
return cloneElement(Child, {
54+
...props,
55+
index,
56+
status: status || this.getStatus(index),
57+
onClick: () => {
58+
onClick(index);
59+
rootClick(index);
60+
},
61+
content: direction === HORIZONTAL ? null : content,
62+
63+
});
64+
});
65+
66+
return <div className={classNames} {...stepProps}>{elements}</div>;
67+
}
68+
}
69+

0 commit comments

Comments
 (0)