Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 1b67b1a

Browse files
committed
Merge pull request #103 from mdziekon/pageitems
[added] PageItem links support
2 parents 055f143 + 4365680 commit 1b67b1a

File tree

8 files changed

+158
-0
lines changed

8 files changed

+158
-0
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ This package gives you react-router compatible substitutes for:
1010
- `Button` -> `ButtonLink`
1111
- `MenuItem` -> `MenuItemLink`
1212
- `ListGroupItem` -> `ListGroupItemLink`
13+
- `PageItem` -> `PageItemLink`
1314
- `Thumbnail` -> `ThumbnailLink`
1415

1516
Turning this:

‎src/PageItemLink.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
3+
import PageItem from 'react-bootstrap/lib/PageItem';
4+
import LinkMixin from './LinkMixin';
5+
6+
const PageItemLink = React.createClass({
7+
mixins: [
8+
LinkMixin
9+
],
10+
11+
render() {
12+
return (
13+
<PageItem {...this.getLinkProps()} ref='pageItem'>
14+
{this.props.children}
15+
</PageItem>
16+
);
17+
}
18+
});
19+
20+
export default PageItemLink;

‎src/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,6 @@ export ButtonLink from './ButtonLink';
22
export ListGroupItemLink from './ListGroupItemLink';
33
export MenuItemLink from './MenuItemLink';
44
export NavItemLink from './NavItemLink';
5+
export PageItemLink from './PageItemLink';
56
export RouterOverlayTrigger from './RouterOverlayTrigger';
67
export ThumbnailLink from './ThumbnailLink';

‎tests/PageItemLink.spec.js

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
/* globals describe, it, assert, expect */
2+
3+
import React from 'react/addons';
4+
import PageItemLink from '../src/PageItemLink';
5+
import Router, { Route } from 'react-router';
6+
import { Foo } from './TestHandlers';
7+
import TestLocation from 'react-router/lib/locations/TestLocation';
8+
let { click } = React.addons.TestUtils.Simulate;
9+
10+
describe('A PageItemLink', function () {
11+
describe('with params and a query', function () {
12+
it('knows how to make its href', function () {
13+
let PageItemLinkHandler = React.createClass({
14+
render() {
15+
return <PageItemLink to="foo" params={{bar: 'baz'}} query={{qux: 'quux'}}>PageItemLink</PageItemLink>;
16+
}
17+
});
18+
19+
let routes = [
20+
<Route name="foo" path="foo/:bar" handler={Foo} />,
21+
<Route name="link" handler={PageItemLinkHandler} />
22+
];
23+
24+
let div = document.createElement('div');
25+
let testLocation = new TestLocation();
26+
testLocation.history = ['/link'];
27+
28+
Router.run(routes, testLocation, function (Handler) {
29+
React.render(<Handler/>, div, function () {
30+
let a = div.querySelector('a');
31+
expect(a.getAttribute('href')).to.equal('/foo/baz?qux=quux');
32+
});
33+
});
34+
});
35+
});
36+
37+
describe('when clicked', function () {
38+
it('calls a user defined click handler', function (done) {
39+
let PageItemLinkHandler = React.createClass({
40+
handleClick(event) {
41+
assert.ok(true);
42+
done();
43+
},
44+
45+
render() {
46+
return <PageItemLink to="foo" onClick={this.handleClick}>PageItemLink</PageItemLink>;
47+
}
48+
});
49+
50+
let routes = [
51+
<Route name="foo" handler={Foo} />,
52+
<Route name="link" handler={PageItemLinkHandler} />
53+
];
54+
let div = document.createElement('div');
55+
let testLocation = new TestLocation();
56+
testLocation.history = ['/link'];
57+
58+
Router.run(routes, testLocation, function (Handler) {
59+
React.render(<Handler/>, div, function () {
60+
click(div.querySelector('a'));
61+
});
62+
});
63+
});
64+
65+
it('transitions to the correct route', function (done) {
66+
let div = document.createElement('div');
67+
let testLocation = new TestLocation();
68+
testLocation.history = ['/link'];
69+
70+
let PageItemLinkHandler = React.createClass({
71+
handleClick() {
72+
// just here to make sure click handlers don't prevent it from happening
73+
},
74+
75+
render() {
76+
return <PageItemLink to="foo" onClick={this.handleClick}>PageItemLink</PageItemLink>;
77+
}
78+
});
79+
80+
let routes = [
81+
<Route name="foo" handler={Foo} />,
82+
<Route name="link" handler={PageItemLinkHandler} />
83+
];
84+
85+
let steps = [];
86+
87+
steps.push(function () {
88+
click(div.querySelector('a'), {button: 0});
89+
});
90+
91+
steps.push(function () {
92+
expect(div.innerHTML).to.match(/Foo/);
93+
done();
94+
});
95+
96+
Router.run(routes, testLocation, function (Handler) {
97+
React.render(<Handler/>, div, function () {
98+
steps.shift()();
99+
});
100+
});
101+
});
102+
103+
});
104+
105+
});

‎tests/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import './ButtonLink.spec.js';
1313
import './ListGroupItemLink.spec.js';
1414
import './MenuItemLink.spec.js';
1515
import './NavItemLink.spec.js';
16+
import './PageItemLink.spec.js';
1617
import './RouterOverlayTrigger.spec.js';
1718
import './ThumbnailLink.spec.js';
1819
import './bower-imports-module.spec.js';

‎tests/visual/PageItemVisual.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from 'react';
2+
import {Link} from 'react-router';
3+
import Pager from 'react-bootstrap/lib/Pager';
4+
import PageItem from 'react-bootstrap/lib/PageItem';
5+
import PageItemLink from '../../src/PageItemLink';
6+
7+
const PageItemVisual = React.createClass({
8+
render() {
9+
return (
10+
<div>
11+
<Link to='home'>&lt;-- Back to Index</Link>
12+
<h2>PageItemLink</h2>
13+
<h3>Baseline (Raw React-Bootstrap)</h3>
14+
<Pager>
15+
<PageItem previous>&larr; Previous Page</PageItem>
16+
<PageItem next>Next Page &rarr;</PageItem>
17+
</Pager>
18+
<h3>PageItemLink</h3>
19+
<Pager>
20+
<PageItemLink previous to='home'>&larr; Previous Page</PageItemLink>
21+
<PageItemLink next to='home'>Next Page &rarr;</PageItemLink>
22+
</Pager>
23+
</div>
24+
);
25+
}
26+
});
27+
28+
export default PageItemVisual;

‎tests/visual/app.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const routes = (
1919
<Route name='nav-item' handler={require('./NavItemVisual')} />
2020
<Route name='menu-item' handler={require('./MenuItemVisual')} />
2121
<Route name='list-group-item' handler={require('./ListGroupItemVisual')} />
22+
<Route name='page-item' handler={require('./PageItemVisual')} />
2223
<Route name='thumbnail' handler={require('./ThumbnailVisual')} />
2324
</Route>
2425
);

‎tests/visual/home.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ const Home = React.createClass({
1111
<li><Link to='nav-item'>NavItemLink</Link></li>
1212
<li><Link to='menu-item'>MenuItemLink</Link></li>
1313
<li><Link to='list-group-item'>ListGroupItemLink</Link></li>
14+
<li><Link to='page-item'>PageItemLink</Link></li>
1415
<li><Link to='thumbnail'>ThumbnailLink</Link></li>
1516
</ul>
1617
</div>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /