Skip to content

Commit 3c710f9

Browse files
ycdesuAlexKVal
ycdesu
authored and
AlexKVal
committed
[added] Breadcrumb component
1 parent 3edf4a1 commit 3c710f9

11 files changed

+396
-0
lines changed

‎docs/examples/.eslintrc

+2
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010
"Accordion",
1111
"Alert",
1212
"Badge",
13+
"Breadcrumb",
14+
"BreadcrumbItem",
1315
"Button",
1416
"ButtonGroup",
1517
"ButtonInput",

‎docs/examples/Breadcrumb.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const breadcrumbInstance = (
2+
<Breadcrumb>
3+
<BreadcrumbItem href="#">
4+
Home
5+
</BreadcrumbItem>
6+
<BreadcrumbItem href="http://getbootstrap.com/components/#breadcrumbs">
7+
Library
8+
</BreadcrumbItem>
9+
<BreadcrumbItem>
10+
Data
11+
</BreadcrumbItem>
12+
</Breadcrumb>
13+
);
14+
15+
React.render(breadcrumbInstance, mountNode);

‎docs/src/ComponentsPage.js

+18
Original file line numberDiff line numberDiff line change
@@ -541,6 +541,23 @@ const ComponentsPage = React.createClass({
541541
<PropTable component="Navbar"/>
542542
</div>
543543

544+
{/* Breadcrumb */}
545+
<div className="bs-docs-section">
546+
<h1 className="page-header"><Anchor id="breadcrumbs">Breadcrumbs</Anchor> <small>Breadcrumb, BreadcrumbItems</small></h1>
547+
<p>Breadcrumbs are used to indicate the current page's location. An <code>active</code> class is added to a <code>BreadcrumbItem</code> if there's no <code>href</code> property for it.</p>
548+
549+
<h3><Anchor id="breadcrumbs-example">Breadcrumbs Example</Anchor></h3>
550+
<ReactPlayground codeText={Samples.Breadcrumb} />
551+
552+
<h3><Anchor id="breadcrumbs-props">Props</Anchor></h3>
553+
554+
<h4><Anchor id="breadcrumbs-props-breadcrumb">Breadcrumb</Anchor></h4>
555+
<PropTable component="Breadcrumb"/>
556+
557+
<h4><Anchor id="breadcrumbs-props-breadcrumbItem">BreadcrumbItem</Anchor></h4>
558+
<PropTable component="BreadcrumbItem"/>
559+
</div>
560+
544561
{/* Tabbed Areas */}
545562
<div className="bs-docs-section">
546563
<h1 className="page-header"><Anchor id="tabs">Togglable tabs</Anchor> <small>Tabs, Tab</small></h1>
@@ -947,6 +964,7 @@ const ComponentsPage = React.createClass({
947964
<NavItem href="#progress" key={8}>Progress bars</NavItem>
948965
<NavItem href="#navs" key={9}>Navs</NavItem>
949966
<NavItem href="#navbars" key={10}>Navbars</NavItem>
967+
<NavItem href="#breadcrumbs" key={29}>Breadcrumbs</NavItem>
950968
<NavItem href="#tabs" key={11}>Tabs</NavItem>
951969
<NavItem href="#pager" key={12}>Pager</NavItem>
952970
<NavItem href="#pagination" key={13}>Pagination</NavItem>

‎docs/src/ReactPlayground.js

+2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ const React = require('react');
88
const Accordion = require('../../src/Accordion');
99
const Alert = require('../../src/Alert');
1010
const Badge = require('../../src/Badge');
11+
const Breadcrumb = require('../../src/Breadcrumb');
12+
const BreadcrumbItem = require('../../src/BreadcrumbItem');
1113
const Button = require('../../src/Button');
1214
const ButtonGroup = require('../../src/ButtonGroup');
1315
const ButtonInput = require('../../src/ButtonInput');

‎docs/src/Samples.js

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ export default {
44
Collapse: require('fs').readFileSync(__dirname + '/../examples/Collapse.js', 'utf8'),
55
Fade: require('fs').readFileSync(__dirname + '/../examples/Fade.js', 'utf8'),
66

7+
Breadcrumb: require('fs').readFileSync(__dirname + '/../examples/Breadcrumb.js', 'utf8'),
78
ButtonTypes: require('fs').readFileSync(__dirname + '/../examples/ButtonTypes.js', 'utf8'),
89
ButtonSizes: require('fs').readFileSync(__dirname + '/../examples/ButtonSizes.js', 'utf8'),
910
ButtonBlock: require('fs').readFileSync(__dirname + '/../examples/ButtonBlock.js', 'utf8'),

‎src/Breadcrumb.js

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React, { cloneElement } from 'react';
2+
import classNames from 'classnames';
3+
import BootstrapMixin from './BootstrapMixin';
4+
import ValidComponentChildren from './utils/ValidComponentChildren';
5+
6+
const Breadcrumb = React.createClass({
7+
mixins: [BootstrapMixin],
8+
9+
getDefaultProps() {
10+
return {
11+
bsClass: 'breadcrumb'
12+
};
13+
},
14+
15+
render() {
16+
const classes = this.getBsClassSet();
17+
const { className, ...props } = this.props;
18+
19+
return (
20+
<ol {...props} role="navigation" aria-label="breadcrumbs" className={classNames(className, classes)}>
21+
{ValidComponentChildren.map(this.props.children, this.renderBreadcrumbItem)}
22+
</ol>
23+
);
24+
},
25+
26+
renderBreadcrumbItem(child, index) {
27+
return cloneElement(
28+
child,
29+
{
30+
key: child.key ? child.key : index,
31+
navItem: true
32+
}
33+
);
34+
}
35+
});
36+
37+
export default Breadcrumb;

‎src/BreadcrumbItem.js

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React from 'react';
2+
import classNames from 'classnames';
3+
import BootstrapMixin from './BootstrapMixin';
4+
import SafeAnchor from './SafeAnchor';
5+
import warning from 'react/lib/warning';
6+
7+
const BreadcrumbItem = React.createClass({
8+
mixins: [BootstrapMixin],
9+
10+
propTypes: {
11+
id: React.PropTypes.string,
12+
active: React.PropTypes.bool,
13+
linkId: React.PropTypes.string,
14+
href: React.PropTypes.string,
15+
title: React.PropTypes.node,
16+
target: React.PropTypes.string
17+
},
18+
19+
getDefaultProps() {
20+
return {
21+
active: false,
22+
};
23+
},
24+
25+
render() {
26+
warning(!(this.props.href && this.props.active), '[react-bootstrap] href and active properties cannot be set at the same time');
27+
28+
const {
29+
id,
30+
active,
31+
linkId,
32+
children,
33+
href,
34+
title,
35+
target,
36+
...props } = this.props;
37+
const classes = { active };
38+
const linkProps = {
39+
href,
40+
title,
41+
target,
42+
id: linkId
43+
};
44+
45+
return (
46+
<li id={id} className={classNames(props.className, classes)}>
47+
{
48+
active ?
49+
<span {...props}>
50+
{ children }
51+
</span> :
52+
<SafeAnchor {...props} {...linkProps}>
53+
{ children }
54+
</SafeAnchor>
55+
}
56+
</li>
57+
);
58+
}
59+
});
60+
61+
export default BreadcrumbItem;

‎src/index.js

+2
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ export Button from './Button';
1010
export ButtonGroup from './ButtonGroup';
1111
export ButtonInput from './ButtonInput';
1212
export ButtonToolbar from './ButtonToolbar';
13+
export Breadcrumb from './Breadcrumb';
14+
export BreadcrumbItem from './BreadcrumbItem';
1315
export Carousel from './Carousel';
1416
export CarouselItem from './CarouselItem';
1517
export Col from './Col';

‎src/styleMaps.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
const styleMaps = {
22
CLASSES: {
33
'alert': 'alert',
4+
'breadcrumb': 'breadcrumb',
45
'button': 'btn',
56
'button-group': 'btn-group',
67
'button-toolbar': 'btn-toolbar',

‎test/BreadcrumbItemSpec.js

+137
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
import React from 'react';
2+
import ReactTestUtils from 'react/lib/ReactTestUtils';
3+
import BreadcrumbItem from '../src/BreadcrumbItem';
4+
5+
describe('BreadcrumbItem', function () {
6+
it('Should add active class', function () {
7+
let instance = ReactTestUtils.renderIntoDocument(
8+
<BreadcrumbItem active>
9+
Active Crumb
10+
</BreadcrumbItem>
11+
);
12+
13+
assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'active'));
14+
});
15+
16+
it('Should not add active class', function () {
17+
let instance = ReactTestUtils.renderIntoDocument(
18+
<BreadcrumbItem>
19+
Crumb
20+
</BreadcrumbItem>
21+
);
22+
23+
let liNode = React.findDOMNode(instance);
24+
assert.notInclude(liNode.className, 'active');
25+
});
26+
27+
it('Should add custom classes', function () {
28+
let instance = ReactTestUtils.renderIntoDocument(
29+
<BreadcrumbItem className="custom-one custom-two" active>
30+
Active Crumb
31+
</BreadcrumbItem>
32+
);
33+
34+
let liNode = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'active'));
35+
36+
let classes = liNode.className;
37+
assert.include(classes, 'active');
38+
assert.include(classes, 'custom-one');
39+
assert.include(classes, 'custom-two');
40+
});
41+
42+
it('Should spread props onto an active item', function() {
43+
let instance = ReactTestUtils.renderIntoDocument(
44+
<BreadcrumbItem herpa='derpa' active>
45+
Active Crumb
46+
</BreadcrumbItem>
47+
);
48+
49+
let spanNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'span');
50+
51+
spanNode.props.herpa.should.equal('derpa');
52+
});
53+
54+
it('Should spread props onto anchor', function(done) {
55+
const handleClick = () => {
56+
done();
57+
};
58+
59+
let instance = ReactTestUtils.renderIntoDocument(
60+
<BreadcrumbItem href='#' onClick={handleClick} herpa='derpa'>
61+
Crumb 1
62+
</BreadcrumbItem>
63+
);
64+
65+
let anchorNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'a');
66+
ReactTestUtils.Simulate.click(anchorNode);
67+
68+
anchorNode.props.herpa.should.equal('derpa');
69+
});
70+
71+
it('Should add id for li element', function() {
72+
let instance = ReactTestUtils.renderIntoDocument(
73+
<BreadcrumbItem href='#' id='test-li-id'>
74+
Crumb 1
75+
</BreadcrumbItem>
76+
);
77+
78+
let liNode = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'li'));
79+
assert.equal(liNode.id, 'test-li-id');
80+
});
81+
82+
it('Should add linkId', function() {
83+
let instance = ReactTestUtils.renderIntoDocument(
84+
<BreadcrumbItem href='#' linkId='test-link-id'>
85+
Crumb 1
86+
</BreadcrumbItem>
87+
);
88+
89+
let linkNode = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'a'));
90+
assert.equal(linkNode.id, 'test-link-id');
91+
});
92+
93+
it('Should add href', function() {
94+
let instance = ReactTestUtils.renderIntoDocument(
95+
<BreadcrumbItem href='http://getbootstrap.com/components/#breadcrumbs'>
96+
Crumb 1
97+
</BreadcrumbItem>
98+
);
99+
100+
let linkNode = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'a'));
101+
assert.equal(linkNode.href, 'http://getbootstrap.com/components/#breadcrumbs');
102+
});
103+
104+
it('Should have a title', function() {
105+
let instance = ReactTestUtils.renderIntoDocument(
106+
<BreadcrumbItem title='test-title' href='http://getbootstrap.com/components/#breadcrumbs'>
107+
Crumb 1
108+
</BreadcrumbItem>
109+
);
110+
111+
let linkNode = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'a'));
112+
assert.equal(linkNode.title, 'test-title');
113+
});
114+
115+
it('Should not add anchor properties to li', function() {
116+
let instance = ReactTestUtils.renderIntoDocument(
117+
<BreadcrumbItem title='test-title' href='/hi'>
118+
Crumb 1
119+
</BreadcrumbItem>
120+
);
121+
122+
let liNode = React.findDOMNode(instance);
123+
assert.notOk(liNode.hasAttribute('href'));
124+
assert.notOk(liNode.hasAttribute('title'));
125+
});
126+
127+
it('Should set target attribute on anchor', function () {
128+
let instance = ReactTestUtils.renderIntoDocument(
129+
<BreadcrumbItem target='_blank' href='http://getbootstrap.com/components/#breadcrumbs'>
130+
Crumb 1
131+
</BreadcrumbItem>
132+
);
133+
134+
let linkNode = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'a'));
135+
assert.equal(linkNode.target, '_blank');
136+
});
137+
});

0 commit comments

Comments
 (0)