Merge pull request #102 from mdziekon/thumbnails

[added] Thumbnail links support

Author: mtscout6

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:
 

assets/thumbnail.png

@@ -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",

package.json

@@ -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/ThumbnailLink.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';

src/index.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/ThumbnailLink.spec.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/index.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/ThumbnailVisual.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/app.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>
     );