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 055f143

Browse files
committed
Merge pull request #102 from mdziekon/thumbnails
[added] Thumbnail links support
2 parents d673252 + f86272d commit 055f143

File tree

10 files changed

+152
-1
lines changed

10 files changed

+152
-1
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+
- `Thumbnail` -> `ThumbnailLink`
1314

1415
Turning this:
1516

‎assets/thumbnail.png

3.84 KB
Loading[フレーム]

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@
6464
"node-libs-browser": "^0.5.2",
6565
"phantomjs": "^1.9.13",
6666
"react": ">0.10.0",
67-
"react-bootstrap": ">=0.15",
67+
"react-bootstrap": ">=0.22.4",
6868
"react-router": ">=0.13.1",
6969
"release-script": "^0.2.1",
7070
"shelljs": "^0.5.1",

‎src/ThumbnailLink.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 Thumbnail from 'react-bootstrap/lib/Thumbnail';
4+
import LinkMixin from './LinkMixin';
5+
6+
const ThumbnailLink = React.createClass({
7+
mixins: [
8+
LinkMixin
9+
],
10+
11+
render() {
12+
return (
13+
<Thumbnail {...this.getLinkProps()} ref='thumbnail'>
14+
{this.props.children}
15+
</Thumbnail>
16+
);
17+
}
18+
});
19+
20+
export default ThumbnailLink;

‎src/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@ export ListGroupItemLink from './ListGroupItemLink';
33
export MenuItemLink from './MenuItemLink';
44
export NavItemLink from './NavItemLink';
55
export RouterOverlayTrigger from './RouterOverlayTrigger';
6+
export ThumbnailLink from './ThumbnailLink';

‎tests/ThumbnailLink.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 ThumbnailLink from '../src/ThumbnailLink';
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 ThumbnailLink', function () {
11+
describe('with params and a query', function () {
12+
it('knows how to make its href', function () {
13+
let ThumbnailLinkHandler = React.createClass({
14+
render() {
15+
return <ThumbnailLink to="foo" params={{bar: 'baz'}} query={{qux: 'quux'}} />;
16+
}
17+
});
18+
19+
let routes = [
20+
<Route name="foo" path="foo/:bar" handler={Foo} />,
21+
<Route name="link" handler={ThumbnailLinkHandler} />
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 ThumbnailLinkHandler = React.createClass({
40+
handleClick(event) {
41+
assert.ok(true);
42+
done();
43+
},
44+
45+
render() {
46+
return <ThumbnailLink to="foo" onClick={this.handleClick} />;
47+
}
48+
});
49+
50+
let routes = [
51+
<Route name="foo" handler={Foo} />,
52+
<Route name="link" handler={ThumbnailLinkHandler} />
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 ThumbnailLinkHandler = React.createClass({
71+
handleClick() {
72+
// just here to make sure click handlers don't prevent it from happening
73+
},
74+
75+
render() {
76+
return <ThumbnailLink to="foo" onClick={this.handleClick} />;
77+
}
78+
});
79+
80+
let routes = [
81+
<Route name="foo" handler={Foo} />,
82+
<Route name="link" handler={ThumbnailLinkHandler} />
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
@@ -14,4 +14,5 @@ import './ListGroupItemLink.spec.js';
1414
import './MenuItemLink.spec.js';
1515
import './NavItemLink.spec.js';
1616
import './RouterOverlayTrigger.spec.js';
17+
import './ThumbnailLink.spec.js';
1718
import './bower-imports-module.spec.js';

‎tests/visual/ThumbnailVisual.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react';
2+
import {Link} from 'react-router';
3+
import Thumbnail from 'react-bootstrap/lib/Thumbnail';
4+
import ThumbnailLink from '../../src/ThumbnailLink';
5+
6+
const ThumbnailVisual = React.createClass({
7+
render() {
8+
return (
9+
<div>
10+
<Link to='home'>&lt;-- Back to Index</Link>
11+
<h2>Thumbnailink</h2>
12+
<h3>Baseline (Raw React-Bootstrap)</h3>
13+
<Thumbnail alt='171x180' src='/assets/thumbnail.png' />
14+
<h3>ThumbnailLink</h3>
15+
<ThumbnailLink to='home' alt='171x180' src='/assets/thumbnail.png' />
16+
</div>
17+
);
18+
}
19+
});
20+
21+
export default ThumbnailVisual;

‎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='thumbnail' handler={require('./ThumbnailVisual')} />
2223
</Route>
2324
);
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='thumbnail'>ThumbnailLink</Link></li>
1415
</ul>
1516
</div>
1617
);

0 commit comments

Comments
(0)

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