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 4365680

Browse files
committed
[added] PageItem links support
1 parent 055f143 commit 4365680

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 によって変換されたページ (->オリジナル) /