[added] Thumbnail links support

README.md

@@ -10,6 +10,7 @@ This package gives you react-router compatible substitutes for:
 - `Button` -> `ButtonLink`
 - `MenuItem` -> `MenuItemLink`
 - `ListGroupItem` -> `ListGroupItemLink`
+- `Thumbnail` -> `ThumbnailLink`
 
 Turning this:
 

package.json

@@ -64,7 +64,7 @@
  "node-libs-browser": "^0.5.2",
  "phantomjs": "^1.9.13",
  "react": ">0.10.0",
- "react-bootstrap": ">=0.15",
+ "react-bootstrap": ">=0.22.4",
  "react-router": ">=0.13.1",
  "release-script": "^0.2.1",
  "shelljs": "^0.5.1",

src/ThumbnailLink.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import Thumbnail from 'react-bootstrap/lib/Thumbnail';
+import LinkMixin from './LinkMixin';
+
+const ThumbnailLink = React.createClass({
+ mixins: [
+ LinkMixin
+ ],
+
+ render() {
+ return (
+ <Thumbnail {...this.getLinkProps()} ref='thumbnail'>
+ {this.props.children}
+ </Thumbnail>
+ );
+ }
+});
+
+export default ThumbnailLink;

src/index.js

@@ -3,3 +3,4 @@ export ListGroupItemLink from './ListGroupItemLink';
 export MenuItemLink from './MenuItemLink';
 export NavItemLink from './NavItemLink';
 export RouterOverlayTrigger from './RouterOverlayTrigger';
+export ThumbnailLink from './ThumbnailLink';

tests/ThumbnailLink.spec.js

@@ -0,0 +1,105 @@
+/* globals describe, it, assert, expect */
+
+import React from 'react/addons';
+import ThumbnailLink from '../src/ThumbnailLink';
+import Router, { Route } from 'react-router';
+import { Foo } from './TestHandlers';
+import TestLocation from 'react-router/lib/locations/TestLocation';
+let { click } = React.addons.TestUtils.Simulate;
+
+describe('A ThumbnailLink', function () {
+ describe('with params and a query', function () {
+ it('knows how to make its href', function () {
+ let ThumbnailLinkHandler = React.createClass({
+ render() {
+ return <ThumbnailLink to="foo" params={{bar: 'baz'}} query={{qux: 'quux'}} />;
+ }
+ });
+
+ let routes = [
+ <Route name="foo" path="foo/:bar" handler={Foo} />,
+ <Route name="link" handler={ThumbnailLinkHandler} />
+ ];
+
+ let div = document.createElement('div');
+ let testLocation = new TestLocation();
+ testLocation.history = ['/link'];
+
+ Router.run(routes, testLocation, function (Handler) {
+ React.render(<Handler/>, div, function () {
+ let a = div.querySelector('a');
+ expect(a.getAttribute('href')).to.equal('/foo/baz?qux=quux');
+ });
+ });
+ });
+ });
+
+ describe('when clicked', function () {
+ it('calls a user defined click handler', function (done) {
+ let ThumbnailLinkHandler = React.createClass({
+ handleClick(event) {
+ assert.ok(true);
+ done();
+ },
+
+ render() {
+ return <ThumbnailLink to="foo" onClick={this.handleClick} />;
+ }
+ });
+
+ let routes = [
+ <Route name="foo" handler={Foo} />,
+ <Route name="link" handler={ThumbnailLinkHandler} />
+ ];
+ let div = document.createElement('div');
+ let testLocation = new TestLocation();
+ testLocation.history = ['/link'];
+
+ Router.run(routes, testLocation, function (Handler) {
+ React.render(<Handler/>, div, function () {
+ click(div.querySelector('a'));
+ });
+ });
+ });
+
+ it('transitions to the correct route', function (done) {
+ let div = document.createElement('div');
+ let testLocation = new TestLocation();
+ testLocation.history = ['/link'];
+
+ let ThumbnailLinkHandler = React.createClass({
+ handleClick() {
+ // just here to make sure click handlers don't prevent it from happening
+ },
+
+ render() {
+ return <ThumbnailLink to="foo" onClick={this.handleClick} />;
+ }
+ });
+
+ let routes = [
+ <Route name="foo" handler={Foo} />,
+ <Route name="link" handler={ThumbnailLinkHandler} />
+ ];
+
+ let steps = [];
+
+ steps.push(function () {
+ click(div.querySelector('a'), {button: 0});
+ });
+
+ steps.push(function () {
+ expect(div.innerHTML).to.match(/Foo/);
+ done();
+ });
+
+ Router.run(routes, testLocation, function (Handler) {
+ React.render(<Handler/>, div, function () {
+ steps.shift()();
+ });
+ });
+ });
+
+ });
+
+});

tests/index.js

@@ -14,4 +14,5 @@ import './ListGroupItemLink.spec.js';
 import './MenuItemLink.spec.js';
 import './NavItemLink.spec.js';
 import './RouterOverlayTrigger.spec.js';
+import './ThumbnailLink.spec.js';
 import './bower-imports-module.spec.js';

tests/visual/ThumbnailVisual.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import {Link} from 'react-router';
+import Thumbnail from 'react-bootstrap/lib/Thumbnail';
+import ThumbnailLink from '../../src/ThumbnailLink';
+
+const ThumbnailVisual = React.createClass({
+ render() {
+ return (
+ <div>
+ <Link to='home'>&lt;-- Back to Index</Link>
+ <h2>Thumbnailink</h2>
+ <h3>Baseline (Raw React-Bootstrap)</h3>
+ <Thumbnail alt='171x180' src='/assets/thumbnail.png' />
+ <h3>ThumbnailLink</h3>
+ <ThumbnailLink to='home' alt='171x180' src='/assets/thumbnail.png' />
+ </div>
+ );
+ }
+});
+
+export default ThumbnailVisual;

tests/visual/app.js

@@ -19,6 +19,7 @@ const routes = (
  <Route name='nav-item' handler={require('./NavItemVisual')} />
  <Route name='menu-item' handler={require('./MenuItemVisual')} />
  <Route name='list-group-item' handler={require('./ListGroupItemVisual')} />
+ <Route name='thumbnail' handler={require('./ThumbnailVisual')} />
  </Route>
 );
 

tests/visual/home.js

@@ -11,6 +11,7 @@ const Home = React.createClass({
  <li><Link to='nav-item'>NavItemLink</Link></li>
  <li><Link to='menu-item'>MenuItemLink</Link></li>
  <li><Link to='list-group-item'>ListGroupItemLink</Link></li>
+ <li><Link to='thumbnail'>ThumbnailLink</Link></li>
  </ul>
  </div>
  );