Skip to content

Commit 815292c

Browse files
ZxBing0066ZxBing0066
authored
feat(Breadcrumb): add Breadcrumb component
close #182
1 parent 02839a1 commit 815292c

File tree

34 files changed

+2736
-831
lines changed

34 files changed

+2736
-831
lines changed

‎.styleguide/components.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,10 @@
124124
{
125125
"name": "Other",
126126
"sections": [
127+
{
128+
"name": "Breadcrumb",
129+
"components": ["Breadcrumb", "Item", "BackButton"]
130+
},
127131
{
128132
"name": "Pagination"
129133
},

‎src/components/Breadcrumb/BackButton.jsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React, { PureComponent } from 'react';
2+
3+
import { BackButtonWrap } from './style';
4+
5+
export default class BackButton extends PureComponent {
6+
render() {
7+
return <BackButtonWrap {...this.props} />;
8+
}
9+
}

‎src/components/Breadcrumb/BackButton.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
### 说明
2+
3+
* 面包屑后退按钮组件，配合面包屑使用
4+
5+
### 演示
6+
7+
* 演示
8+
9+
```js {"codepath": "backbutton.jsx"}
10+
```

‎src/components/Breadcrumb/Breadcrumb.md

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,12 @@
44

55
### 演示
66

7-
* 普通使用
7+
* 演示
88

9-
```js {"codepath": "base.jsx"}
9+
```js {"codepath": "breadcrumb.jsx"}
10+
```
11+
12+
* separator
13+
14+
```js {"codepath": "breadcrumb-separator.jsx"}
1015
```

‎src/components/Breadcrumb/Item.jsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,22 @@ import { ItemWrapA, ItemWrapSpan } from './style';
55

66
export default class Item extends Component {
77
static propTypes = {
8-
/** 禁用 */
8+
/**
9+
* @ignore
10+
* 禁用
11+
*/
912
disabled: PropTypes.bool,
1013
/** 标明当前路由 */
1114
current: PropTypes.bool,
15+
/** 标明节点无点击跳转事件 */
16+
noAction: PropTypes.bool,
1217
/** @ignore */
1318
className: PropTypes.string
1419
};
1520
static __IS_BREADCRUMB_ITEM = true;
1621
render() {
1722
const { ...rest } = this.props;
18-
return 'href' in this.props ? <ItemWrapA {...rest} /> : <ItemWrapSpan {...rest} />;
23+
const ItemWrap = 'href' in this.props ? ItemWrapA : ItemWrapSpan;
24+
return <ItemWrap {...rest} />;
1925
}
2026
}

‎src/components/Breadcrumb/Item.md

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,26 @@
11
### 说明
22

33
* 面包屑项组件
4-
* 等同于 a 标签，支持 a 标签所有属性
4+
* 传入 href 时为 a 标签，其它情况下为 span 标签，可使用 href 或 onClick 执行跳转，或用于包裹其它元素（Link 等）
5+
6+
### 演示
7+
8+
* 演示
9+
10+
```js {"codepath": "item.jsx"}
11+
```
12+
13+
* current
14+
15+
```js {"codepath": "item-current.jsx"}
16+
```
17+
18+
* noAction
19+
20+
```js {"codepath": "item-noAction.jsx"}
21+
```
22+
23+
* disabled
24+
25+
```js {"codepath": "item-disabled.jsx"}
26+
```

‎src/components/Breadcrumb/__demo__/backbutton.jsx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React from 'react';
2+
3+
import Breadcrumb from 'src/components/Breadcrumb';
4+
import Icon from 'src/components/Icon';
5+
6+
// demo start
7+
class Demo extends React.Component {
8+
constructor(props) {
9+
super(props);
10+
}
11+
render() {
12+
return (
13+
<div>
14+
<div className="demo-wrap">
15+
<Breadcrumb>
16+
<Breadcrumb.BackButton type="left" onClick={() => window.history.back()} />
17+
<Breadcrumb.Item noAction>
18+
<Icon type="home" />
19+
</Breadcrumb.Item>
20+
<Breadcrumb.Item onClick={() => window.location.reload()}>
21+
<Icon type="uhost" />
22+
</Breadcrumb.Item>
23+
<Breadcrumb.Item href="https://www.google.com" target="_blank">
24+
google
25+
</Breadcrumb.Item>
26+
<Breadcrumb.Item onClick={() => window.location.reload()}>reload</Breadcrumb.Item>
27+
<Breadcrumb.Item current>current</Breadcrumb.Item>
28+
</Breadcrumb>
29+
</div>
30+
</div>
31+
);
32+
}
33+
}
34+
// demo end
35+
36+
export default Demo;

‎src/components/Breadcrumb/__demo__/base.jsx

Lines changed: 0 additions & 25 deletions
This file was deleted.

‎src/components/Breadcrumb/__demo__/breadcrumb-separator.jsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from 'react';
2+
3+
import Breadcrumb from 'src/components/Breadcrumb';
4+
import Icon from 'src/components/Icon';
5+
6+
// demo start
7+
class Demo extends React.Component {
8+
render() {
9+
return (
10+
<div>
11+
{['', '>', '>>', '->', <Icon key="icon" type="caret-right" />].map((separator, i) => (
12+
<div className="demo-wrap" key={i}>
13+
<Breadcrumb separator={separator}>
14+
<Breadcrumb.BackButton type="left" onClick={() => window.history.back()} />
15+
<Breadcrumb.Item noAction>
16+
<Icon type="home" />
17+
</Breadcrumb.Item>
18+
<Breadcrumb.Item onClick={() => window.location.reload()}>
19+
<Icon type="uhost" />
20+
</Breadcrumb.Item>
21+
<Breadcrumb.Item href="https://www.google.com" target="_blank">
22+
google
23+
</Breadcrumb.Item>
24+
<Breadcrumb.Item onClick={() => window.location.reload()}>reload</Breadcrumb.Item>
25+
<Breadcrumb.Item current>current</Breadcrumb.Item>
26+
</Breadcrumb>
27+
</div>
28+
))}
29+
</div>
30+
);
31+
}
32+
}
33+
// demo end
34+
35+
export default Demo;

‎src/components/Breadcrumb/__demo__/breadcrumb.jsx

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React from 'react';
2+
3+
import Breadcrumb from 'src/components/Breadcrumb';
4+
import Form from 'src/components/Form';
5+
import Input from 'src/components/Input';
6+
import Icon from 'src/components/Icon';
7+
8+
// demo start
9+
const itemLayout = {
10+
labelCol: {
11+
span: 3
12+
},
13+
controllerCol: {
14+
span: 9
15+
}
16+
};
17+
class Demo extends React.Component {
18+
constructor(props) {
19+
super(props);
20+
this.state = {
21+
separator: Breadcrumb.defaultProps.separator
22+
};
23+
}
24+
render() {
25+
const { separator } = this.state;
26+
return (
27+
<div>
28+
<Form className="demo-form">
29+
<Form.Item label="separator" {...itemLayout}>
30+
<Input value={separator} onChange={e => this.setState({ separator: e.target.value })} />
31+
</Form.Item>
32+
</Form>
33+
<div className="demo-wrap">
34+
<Breadcrumb separator={separator}>
35+
<Breadcrumb.BackButton type="left" onClick={() => window.history.back()} />
36+
<Breadcrumb.Item noAction>
37+
<Icon type="home" />
38+
</Breadcrumb.Item>
39+
<Breadcrumb.Item onClick={() => window.location.reload()}>
40+
<Icon type="uhost" />
41+
</Breadcrumb.Item>
42+
<Breadcrumb.Item href="https://www.google.com" target="_blank">
43+
google
44+
</Breadcrumb.Item>
45+
<Breadcrumb.Item onClick={() => window.location.reload()}>reload</Breadcrumb.Item>
46+
<Breadcrumb.Item current>current</Breadcrumb.Item>
47+
</Breadcrumb>
48+
</div>
49+
</div>
50+
);
51+
}
52+
}
53+
// demo end
54+
55+
export default Demo;

0 commit comments

Comments
 (0)