Skip to content

Commit 0348274

Browse files
AlexKValAlexKVal
committed
[fixed] Breadcrumb and BreadcrumbItem components
1 parent 3c710f9 commit 0348274

7 files changed

+120
-161
lines changed

‎docs/examples/Breadcrumb.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const breadcrumbInstance = (
66
<BreadcrumbItem href="http://getbootstrap.com/components/#breadcrumbs">
77
Library
88
</BreadcrumbItem>
9-
<BreadcrumbItem>
9+
<BreadcrumbItem active>
1010
Data
1111
</BreadcrumbItem>
1212
</Breadcrumb>

‎docs/src/ComponentsPage.js

+4-5
Original file line numberDiff line numberDiff line change
@@ -544,15 +544,14 @@ const ComponentsPage = React.createClass({
544544
{/* Breadcrumb */}
545545
<div className="bs-docs-section">
546546
<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>
547+
<p>Breadcrumbs are used to indicate the current page's location. Add <code>active</code> attribute to active <code>BreadcrumbItem</code>.</p>
548+
<p>Do not set both <code>active</code> and <code>href</code> attributes. <code>active</code> overrides <code>href</code> and <code>span</code> element is rendered instead of <code>a</code>.</p>
548549

549550
<h3><Anchor id="breadcrumbs-example">Breadcrumbs Example</Anchor></h3>
550551
<ReactPlayground codeText={Samples.Breadcrumb} />
551552

552553
<h3><Anchor id="breadcrumbs-props">Props</Anchor></h3>
553-
554-
<h4><Anchor id="breadcrumbs-props-breadcrumb">Breadcrumb</Anchor></h4>
555-
<PropTable component="Breadcrumb"/>
554+
<p><code>Breadcrumb</code> component itself doesn't have any specific public properties</p>
556555

557556
<h4><Anchor id="breadcrumbs-props-breadcrumbItem">BreadcrumbItem</Anchor></h4>
558557
<PropTable component="BreadcrumbItem"/>
@@ -964,7 +963,7 @@ const ComponentsPage = React.createClass({
964963
<NavItem href="#progress" key={8}>Progress bars</NavItem>
965964
<NavItem href="#navs" key={9}>Navs</NavItem>
966965
<NavItem href="#navbars" key={10}>Navbars</NavItem>
967-
<NavItem href="#breadcrumbs" key={29}>Breadcrumbs</NavItem>
966+
<NavItem href="#breadcrumbs" key={30}>Breadcrumbs</NavItem>
968967
<NavItem href="#tabs" key={11}>Tabs</NavItem>
969968
<NavItem href="#pager" key={12}>Pager</NavItem>
970969
<NavItem href="#pagination" key={13}>Pagination</NavItem>

‎src/Breadcrumb.js

+13-11
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
import React, { cloneElement } from 'react';
22
import classNames from 'classnames';
3-
import BootstrapMixin from './BootstrapMixin';
43
import ValidComponentChildren from './utils/ValidComponentChildren';
54

65
const Breadcrumb = React.createClass({
7-
mixins: [BootstrapMixin],
6+
propTypes: {
7+
/**
8+
* bootstrap className
9+
* @private
10+
*/
11+
bsClass: React.PropTypes.string
12+
},
813

914
getDefaultProps() {
1015
return {
@@ -13,24 +18,21 @@ const Breadcrumb = React.createClass({
1318
},
1419

1520
render() {
16-
const classes = this.getBsClassSet();
1721
const { className, ...props } = this.props;
1822

1923
return (
20-
<ol {...props} role="navigation" aria-label="breadcrumbs" className={classNames(className, classes)}>
24+
<ol
25+
{...props}
26+
role="navigation"
27+
aria-label="breadcrumbs"
28+
className={classNames(className, this.props.bsClass)}>
2129
{ValidComponentChildren.map(this.props.children, this.renderBreadcrumbItem)}
2230
</ol>
2331
);
2432
},
2533

2634
renderBreadcrumbItem(child, index) {
27-
return cloneElement(
28-
child,
29-
{
30-
key: child.key ? child.key : index,
31-
navItem: true
32-
}
33-
);
35+
return cloneElement( child, { key: child.key ? child.key : index } );
3436
}
3537
});
3638

‎src/BreadcrumbItem.js

+32-10
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,39 @@
11
import React from 'react';
22
import classNames from 'classnames';
3-
import BootstrapMixin from './BootstrapMixin';
43
import SafeAnchor from './SafeAnchor';
54
import warning from 'react/lib/warning';
65

76
const BreadcrumbItem = React.createClass({
8-
mixins: [BootstrapMixin],
9-
107
propTypes: {
11-
id: React.PropTypes.string,
8+
/**
9+
* If set to true, renders `span` instead of `a`
10+
*/
1211
active: React.PropTypes.bool,
13-
linkId: React.PropTypes.string,
12+
/**
13+
* HTML id for the wrapper `li` element
14+
*/
15+
id: React.PropTypes.oneOfType([
16+
React.PropTypes.string,
17+
React.PropTypes.number
18+
]),
19+
/**
20+
* HTML id for the inner `a` element
21+
*/
22+
linkId: React.PropTypes.oneOfType([
23+
React.PropTypes.string,
24+
React.PropTypes.number
25+
]),
26+
/**
27+
* `href` attribute for the inner `a` element
28+
*/
1429
href: React.PropTypes.string,
30+
/**
31+
* `title` attribute for the inner `a` element
32+
*/
1533
title: React.PropTypes.node,
34+
/**
35+
* `target` attribute for the inner `a` element
36+
*/
1637
target: React.PropTypes.string
1738
},
1839

@@ -23,18 +44,19 @@ const BreadcrumbItem = React.createClass({
2344
},
2445

2546
render() {
26-
warning(!(this.props.href && this.props.active), '[react-bootstrap] href and active properties cannot be set at the same time');
27-
2847
const {
29-
id,
3048
active,
49+
className,
50+
id,
3151
linkId,
3252
children,
3353
href,
3454
title,
3555
target,
3656
...props } = this.props;
37-
const classes = { active };
57+
58+
warning(!(href && active), '[react-bootstrap] `href` and `active` properties cannot be set at the same time');
59+
3860
const linkProps = {
3961
href,
4062
title,
@@ -43,7 +65,7 @@ const BreadcrumbItem = React.createClass({
4365
};
4466

4567
return (
46-
<li id={id} className={classNames(props.className, classes)}>
68+
<li id={id} className={classNames(className, { active })}>
4769
{
4870
active ?
4971
<span {...props}>

‎src/styleMaps.js

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

‎test/BreadcrumbItemSpec.js

+60-57
Original file line numberDiff line numberDiff line change
@@ -1,137 +1,140 @@
11
import React from 'react';
22
import ReactTestUtils from 'react/lib/ReactTestUtils';
33
import BreadcrumbItem from '../src/BreadcrumbItem';
4+
import { shouldWarn } from './helpers';
45

5-
describe('BreadcrumbItem', function () {
6-
it('Should add active class', function () {
7-
let instance = ReactTestUtils.renderIntoDocument(
8-
<BreadcrumbItem active>
9-
Active Crumb
6+
describe('BreadcrumbItem', () => {
7+
it('Should warn if `active` and `href` attributes set', () => {
8+
ReactTestUtils.renderIntoDocument(
9+
<BreadcrumbItem href='#' active>
10+
Crumb
1011
</BreadcrumbItem>
1112
);
1213

13-
assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'active'));
14+
shouldWarn('[react-bootstrap] `href` and `active` properties cannot be set at the same time');
1415
});
1516

16-
it('Should not add active class', function () {
17-
let instance = ReactTestUtils.renderIntoDocument(
18-
<BreadcrumbItem>
17+
it('Should render `a` as inner element when is not active', () => {
18+
const instance = ReactTestUtils.renderIntoDocument(
19+
<BreadcrumbItem href='#'>
1920
Crumb
2021
</BreadcrumbItem>
2122
);
2223

23-
let liNode = React.findDOMNode(instance);
24-
assert.notInclude(liNode.className, 'active');
24+
assert.ok(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'a'));
25+
assert.notInclude(React.findDOMNode(instance).className, 'active');
2526
});
2627

27-
it('Should add custom classes', function () {
28-
let instance = ReactTestUtils.renderIntoDocument(
29-
<BreadcrumbItem className="custom-one custom-two" active>
28+
it('Should add `active` class with `active` attribute set.', () => {
29+
const instance = ReactTestUtils.renderIntoDocument(
30+
<BreadcrumbItem active>
3031
Active Crumb
3132
</BreadcrumbItem>
3233
);
3334

34-
let liNode = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'active'));
35+
assert.include(React.findDOMNode(instance).className, 'active');
36+
});
3537

36-
let classes = liNode.className;
37-
assert.include(classes, 'active');
38-
assert.include(classes, 'custom-one');
39-
assert.include(classes, 'custom-two');
38+
it('Should render `span` as inner element when is active', () => {
39+
const instance = ReactTestUtils.renderIntoDocument(
40+
<BreadcrumbItem active>
41+
Crumb
42+
</BreadcrumbItem>
43+
);
44+
45+
assert.ok(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'span'));
4046
});
4147

42-
it('Should spread props onto an active item', function() {
43-
let instance = ReactTestUtils.renderIntoDocument(
44-
<BreadcrumbItem herpa='derpa' active>
48+
it('Should add custom classes onto `li` wrapper element', () => {
49+
const instance = ReactTestUtils.renderIntoDocument(
50+
<BreadcrumbItem className="custom-one custom-two">
4551
Active Crumb
4652
</BreadcrumbItem>
4753
);
4854

49-
let spanNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'span');
50-
51-
spanNode.props.herpa.should.equal('derpa');
55+
const classes = React.findDOMNode(instance).className;
56+
assert.include(classes, 'custom-one');
57+
assert.include(classes, 'custom-two');
5258
});
5359

54-
it('Should spread props onto anchor', function(done) {
60+
it('Should spread additional props onto inner element', (done) => {
5561
const handleClick = () => {
5662
done();
5763
};
5864

59-
let instance = ReactTestUtils.renderIntoDocument(
60-
<BreadcrumbItem href='#' onClick={handleClick} herpa='derpa'>
61-
Crumb 1
65+
const instance = ReactTestUtils.renderIntoDocument(
66+
<BreadcrumbItem href='#' onClick={handleClick}>
67+
Crumb
6268
</BreadcrumbItem>
6369
);
6470

65-
let anchorNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'a');
71+
const anchorNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'a');
6672
ReactTestUtils.Simulate.click(anchorNode);
67-
68-
anchorNode.props.herpa.should.equal('derpa');
6973
});
7074

71-
it('Should add id for li element', function() {
72-
let instance = ReactTestUtils.renderIntoDocument(
75+
it('Should apply id onto `li` wrapper element via `id` property', () => {
76+
const instance = ReactTestUtils.renderIntoDocument(
7377
<BreadcrumbItem href='#' id='test-li-id'>
74-
Crumb 1
78+
Crumb
7579
</BreadcrumbItem>
7680
);
7781

78-
let liNode = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'li'));
79-
assert.equal(liNode.id, 'test-li-id');
82+
assert.equal(React.findDOMNode(instance).id, 'test-li-id');
8083
});
8184

82-
it('Should add linkId', function() {
83-
let instance = ReactTestUtils.renderIntoDocument(
85+
it('Should apply id onto `a` inner alement via `linkId` property', () => {
86+
const instance = ReactTestUtils.renderIntoDocument(
8487
<BreadcrumbItem href='#' linkId='test-link-id'>
85-
Crumb 1
88+
Crumb
8689
</BreadcrumbItem>
8790
);
8891

89-
let linkNode = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'a'));
92+
const linkNode = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'a'));
9093
assert.equal(linkNode.id, 'test-link-id');
9194
});
9295

93-
it('Should add href', function() {
94-
let instance = ReactTestUtils.renderIntoDocument(
96+
it('Should apply `href` property onto `a` inner element', () => {
97+
const instance = ReactTestUtils.renderIntoDocument(
9598
<BreadcrumbItem href='http://getbootstrap.com/components/#breadcrumbs'>
96-
Crumb 1
99+
Crumb
97100
</BreadcrumbItem>
98101
);
99102

100-
let linkNode = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'a'));
103+
const linkNode = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'a'));
101104
assert.equal(linkNode.href, 'http://getbootstrap.com/components/#breadcrumbs');
102105
});
103106

104-
it('Should have a title', function() {
105-
let instance = ReactTestUtils.renderIntoDocument(
107+
it('Should apply `title` property onto `a` inner element', () => {
108+
const instance = ReactTestUtils.renderIntoDocument(
106109
<BreadcrumbItem title='test-title' href='http://getbootstrap.com/components/#breadcrumbs'>
107-
Crumb 1
110+
Crumb
108111
</BreadcrumbItem>
109112
);
110113

111-
let linkNode = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'a'));
114+
const linkNode = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'a'));
112115
assert.equal(linkNode.title, 'test-title');
113116
});
114117

115-
it('Should not add anchor properties to li', function() {
116-
let instance = ReactTestUtils.renderIntoDocument(
118+
it('Should not apply properties for inner `anchor` onto `li` wrapper element', () => {
119+
const instance = ReactTestUtils.renderIntoDocument(
117120
<BreadcrumbItem title='test-title' href='/hi'>
118-
Crumb 1
121+
Crumb
119122
</BreadcrumbItem>
120123
);
121124

122-
let liNode = React.findDOMNode(instance);
125+
const liNode = React.findDOMNode(instance);
123126
assert.notOk(liNode.hasAttribute('href'));
124127
assert.notOk(liNode.hasAttribute('title'));
125128
});
126129

127-
it('Should set target attribute on anchor', function () {
128-
let instance = ReactTestUtils.renderIntoDocument(
130+
it('Should set `target` attribute on `anchor`', () => {
131+
const instance = ReactTestUtils.renderIntoDocument(
129132
<BreadcrumbItem target='_blank' href='http://getbootstrap.com/components/#breadcrumbs'>
130-
Crumb 1
133+
Crumb
131134
</BreadcrumbItem>
132135
);
133136

134-
let linkNode = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'a'));
137+
const linkNode = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'a'));
135138
assert.equal(linkNode.target, '_blank');
136139
});
137140
});

0 commit comments

Comments
 (0)