Skip to content
This repository was archived by the owner on Nov 9, 2017. It is now read-only.

Commit 5ca61cf

Browse files
taiontaion
committed
[added] Support hash prop on LinkContainer
Also update dependencies appropriately
1 parent c76fab6 commit 5ca61cf

File tree

4 files changed

+94
-113
lines changed

4 files changed

+94
-113
lines changed

‎package.json

+8-8
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
"homepage": "https://github.com/react-bootstrap/react-router-bootstrap",
3434
"peerDependencies": {
3535
"react": ">=0.13.0",
36-
"react-router": ">=1.0.0-rc1"
36+
"react-router": ">=1.0.0-rc3"
3737
},
3838
"devDependencies": {
3939
"babel": "^5.8.23",
@@ -44,21 +44,21 @@
4444
"colors": "^1.1.2",
4545
"css-loader": "^0.19.0",
4646
"es5-shim": "^4.1.14",
47-
"eslint": "1.6.x",
48-
"eslint-config-airbnb": "0.1.0",
47+
"eslint": "^1.7.1",
48+
"eslint-config-airbnb": "^0.1.0",
4949
"eslint-plugin-babel": "^2.1.1",
5050
"eslint-plugin-mocha": "^1.0.0",
5151
"eslint-plugin-react": "^3.5.1",
5252
"file-loader": "^0.8.4",
53-
"history": "^1.12.3",
53+
"history": "^1.12.5",
5454
"html-webpack-plugin": "^1.6.2",
55-
"karma": "^0.13.10",
55+
"karma": "^0.13.11",
5656
"karma-cli": "^0.1.1",
5757
"karma-mocha": "^0.2.0",
5858
"karma-mocha-reporter": "^1.1.1",
5959
"karma-phantomjs-launcher": "^0.2.1",
6060
"karma-sinon-chai": "^1.1.0",
61-
"karma-sourcemap-loader": "^0.3.5",
61+
"karma-sourcemap-loader": "^0.3.6",
6262
"karma-webpack": "^1.7.0",
6363
"less": "^2.5.3",
6464
"less-loader": "^2.2.1",
@@ -68,10 +68,10 @@
6868
"node-libs-browser": "^0.5.3",
6969
"phantomjs": "^1.9.18",
7070
"react": "^0.14.0",
71-
"react-bootstrap": "^0.27.1",
71+
"react-bootstrap": "^0.27.2",
7272
"react-dom": "^0.14.0",
7373
"react-router": "^1.0.0-rc3",
74-
"release-script": "^0.5.3",
74+
"release-script": "^0.5.4",
7575
"rimraf": "^2.4.3",
7676
"shelljs": "^0.5.3",
7777
"style-loader": "^0.12.4",

‎src/LinkContainer.js

+7-2
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,16 @@ export default class LinkContainer extends React.Component {
2525

2626
render() {
2727
const {history} = this.context;
28-
const {onlyActiveOnIndex, to, query, children, ...props} = this.props;
28+
const {onlyActiveOnIndex, to, query, hash, children, ...props} =
29+
this.props;
2930

3031
delete props.state;
31-
delete props.onClick;
32+
3233
props.onClick = this.onClick;
3334
props.href = history.createHref(to, query);
35+
if (hash) {
36+
props.href += hash;
37+
}
3438
props.active = history.isActive(to, query, onlyActiveOnIndex);
3539

3640
return React.cloneElement(React.Children.only(children), props);
@@ -41,6 +45,7 @@ LinkContainer.propTypes = {
4145
onlyActiveOnIndex: React.PropTypes.bool.isRequired,
4246
to: React.PropTypes.string.isRequired,
4347
query: React.PropTypes.object,
48+
hash: React.PropTypes.string,
4449
state: React.PropTypes.object,
4550
onClick: React.PropTypes.func,
4651
disabled: React.PropTypes.bool.isRequired,

‎tests/IndexLinkContainer.spec.js

+8-11
Original file line numberDiff line numberDiff line change
@@ -18,19 +18,16 @@ describe('IndexLinkContainer', () => {
1818

1919
describe('active state', () => {
2020
function renderComponent(location) {
21-
class LinkWrapper extends React.Component {
22-
render() {
23-
return (
24-
<IndexLinkContainer to="/">
25-
<Component>Root</Component>
26-
</IndexLinkContainer>
27-
);
28-
}
29-
}
30-
3121
const router = ReactTestUtils.renderIntoDocument(
3222
<Router history={createMemoryHistory(location)}>
33-
<Route path="/" component={LinkWrapper}>
23+
<Route
24+
path="/"
25+
component={() => (
26+
<IndexLinkContainer to="/">
27+
<Component>Root</Component>
28+
</IndexLinkContainer>
29+
)}
30+
>
3431
<IndexRoute />
3532
<Route path="foo" />
3633
</Route>

‎tests/LinkContainer.spec.js

+71-92
Original file line numberDiff line numberDiff line change
@@ -8,50 +8,45 @@ import {Route, Router} from 'react-router';
88
import LinkContainer from '../src/LinkContainer';
99

1010
describe('LinkContainer', () => {
11-
['Button',
11+
[
12+
'Button',
1213
'NavItem',
1314
'ListGroupItem'
1415
].forEach(name => {
1516
describe(name, () => {
1617
const Component = ReactBootstrap[name];
1718

1819
it('should make the correct href', () => {
19-
class LinkWrapper extends React.Component {
20-
render() {
21-
return (
22-
<LinkContainer to="/foo" query={{bar: 'baz'}}>
23-
<Component>Foo</Component>
24-
</LinkContainer>
25-
);
26-
}
27-
}
28-
2920
const router = ReactTestUtils.renderIntoDocument(
3021
<Router history={createMemoryHistory('/')}>
31-
<Route path="/" component={LinkWrapper} />
22+
<Route
23+
path="/"
24+
component={() => (
25+
<LinkContainer to="/foo" query={{bar: 'baz'}} hash="#the-hash">
26+
<Component>Foo</Component>
27+
</LinkContainer>
28+
)}
29+
/>
3230
</Router>
3331
);
3432

3533
const anchor = ReactTestUtils.findRenderedDOMComponentWithTag(
3634
router, 'A'
3735
);
38-
expect(anchor.getAttribute('href')).to.equal('/foo?bar=baz');
36+
expect(anchor.getAttribute('href')).to.equal('/foo?bar=baz#the-hash');
3937
});
4038

4139
it('should not add extra DOM nodes', () => {
42-
class LinkWrapper extends React.Component {
43-
render() {
44-
return (
45-
<LinkContainer to="/foo" query={{bar: 'baz'}}>
46-
<Component>Foo</Component>
47-
</LinkContainer>
48-
);
49-
}
50-
}
51-
5240
const router = ReactTestUtils.renderIntoDocument(
5341
<Router history={createMemoryHistory('/')}>
54-
<Route path="/" component={LinkWrapper} />
42+
<Route
43+
path="/"
44+
component={() => (
45+
<LinkContainer to="/foo" query={{bar: 'baz'}}>
46+
<Component>Foo</Component>
47+
</LinkContainer>
48+
)}
49+
/>
5550
</Router>
5651
);
5752

@@ -68,35 +63,27 @@ describe('LinkContainer', () => {
6863

6964
describe('when clicked', () => {
7065
it('should transition to the correct route', () => {
71-
class LinkWrapper extends React.Component {
72-
render() {
73-
return (
74-
<LinkContainer to="/target">
75-
<Component>Target</Component>
76-
</LinkContainer>
77-
);
78-
}
79-
}
80-
81-
class Target extends React.Component {
82-
render() {
83-
return <div className="target" />;
84-
}
85-
}
86-
8766
const router = ReactTestUtils.renderIntoDocument(
8867
<Router history={createMemoryHistory('/')}>
89-
<Route path="/" component={LinkWrapper} />
90-
<Route path="/target" component={Target} />
68+
<Route
69+
path="/"
70+
component={() => (
71+
<LinkContainer to="/target">
72+
<Component>Target</Component>
73+
</LinkContainer>
74+
)}
75+
/>
76+
<Route
77+
path="/target"
78+
component={() => <div className="target" />}
79+
/>
9180
</Router>
9281
);
9382

94-
const component = ReactTestUtils.findRenderedComponentWithType(
95-
router, Component
96-
);
97-
ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(component),
98-
{button: 0}
83+
const anchor = ReactTestUtils.findRenderedDOMComponentWithTag(
84+
router, 'A'
9985
);
86+
ReactTestUtils.Simulate.click(anchor, {button: 0});
10087

10188
const target = ReactTestUtils.findRenderedDOMComponentWithClass(
10289
router, 'target'
@@ -108,26 +95,27 @@ describe('LinkContainer', () => {
10895
const onClick = sinon.spy();
10996
const childOnClick = sinon.spy();
11097

111-
class LinkWrapper extends React.Component {
112-
render() {
113-
return (
114-
<LinkContainer to="/foo" onClick={onClick}>
115-
<Component onClick={childOnClick}>Foo</Component>
116-
</LinkContainer>
117-
);
118-
}
119-
}
120-
12198
const router = ReactTestUtils.renderIntoDocument(
12299
<Router history={createMemoryHistory('/')}>
123-
<Route path="/" component={LinkWrapper} />
100+
<Route
101+
path="/"
102+
component={() => (
103+
<LinkContainer to="/target" onClick={onClick}>
104+
<Component onClick={childOnClick}>Foo</Component>
105+
</LinkContainer>
106+
)}
107+
/>
108+
<Route
109+
path="/target"
110+
component={() => <div className="target" />}
111+
/>
124112
</Router>
125113
);
126114

127-
const component = ReactTestUtils.findRenderedComponentWithType(
128-
router, Component
115+
const anchor = ReactTestUtils.findRenderedDOMComponentWithTag(
116+
router, 'A'
129117
);
130-
ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(component));
118+
ReactTestUtils.Simulate.click(anchor, {button: 0});
131119

132120
expect(onClick).to.have.been.calledOnce;
133121
expect(childOnClick).to.have.been.calledOnce;
@@ -136,21 +124,18 @@ describe('LinkContainer', () => {
136124

137125
describe('active state', () => {
138126
function renderComponent(location) {
139-
class LinkWrapper extends React.Component {
140-
render() {
141-
return (
142-
<LinkContainer to="/foo">
143-
<Component>Foo</Component>
144-
</LinkContainer>
145-
);
146-
}
147-
}
148-
149127
const router = ReactTestUtils.renderIntoDocument(
150128
<Router history={createMemoryHistory(location)}>
151-
<Route component={LinkWrapper}>
152-
<Route path="/foo" />
153-
<Route path="/bar" />
129+
<Route
130+
path="/"
131+
component={() => (
132+
<LinkContainer to="/foo">
133+
<Component>Foo</Component>
134+
</LinkContainer>
135+
)}
136+
>
137+
<Route path="foo" />
138+
<Route path="bar" />
154139
</Route>
155140
</Router>
156141
);
@@ -174,26 +159,20 @@ describe('LinkContainer', () => {
174159
let router;
175160

176161
beforeEach(() => {
177-
class LinkWrapper extends React.Component {
178-
render() {
179-
return (
180-
<LinkContainer to="/target" disabled>
181-
<Component>Target</Component>
182-
</LinkContainer>
183-
);
184-
}
185-
}
186-
187-
class Target extends React.Component {
188-
render() {
189-
return <div className="target" />;
190-
}
191-
}
192-
193162
router = ReactTestUtils.renderIntoDocument(
194163
<Router history={createMemoryHistory('/')}>
195-
<Route path="/" component={LinkWrapper} />
196-
<Route path="/target" component={Target} />
164+
<Route
165+
path="/"
166+
component={() => (
167+
<LinkContainer to="/target" disabled>
168+
<Component>Target</Component>
169+
</LinkContainer>
170+
)}
171+
/>
172+
<Route
173+
path="/target"
174+
component={() => <div className="target" />}
175+
/>
197176
</Router>
198177
);
199178
});

0 commit comments

Comments
 (0)