[added] PageItem links support

Author: mdziekon

README.md

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

src/PageItemLink.js

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

src/index.js

@@ -2,5 +2,6 @@ export ButtonLink from './ButtonLink';
 export ListGroupItemLink from './ListGroupItemLink';
 export MenuItemLink from './MenuItemLink';
 export NavItemLink from './NavItemLink';
+export PageItemLink from './PageItemLink';
 export RouterOverlayTrigger from './RouterOverlayTrigger';
 export ThumbnailLink from './ThumbnailLink';

tests/PageItemLink.spec.js

@@ -0,0 +1,105 @@
+/* globals describe, it, assert, expect */
+
+import React from 'react/addons';
+import PageItemLink from '../src/PageItemLink';
+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 PageItemLink', function () {
+  describe('with params and a query', function () {
+    it('knows how to make its href', function () {
+      let PageItemLinkHandler = React.createClass({
+        render() {
+          return <PageItemLink to="foo" params={{bar: 'baz'}} query={{qux: 'quux'}}>PageItemLink</PageItemLink>;
+        }
+      });
+
+      let routes = [
+        <Route name="foo" path="foo/:bar" handler={Foo} />,
+        <Route name="link" handler={PageItemLinkHandler} />
+      ];
+
+      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 PageItemLinkHandler = React.createClass({
+        handleClick(event) {
+          assert.ok(true);
+          done();
+        },
+
+        render() {
+          return <PageItemLink to="foo" onClick={this.handleClick}>PageItemLink</PageItemLink>;
+        }
+      });
+
+      let routes = [
+        <Route name="foo" handler={Foo} />,
+        <Route name="link" handler={PageItemLinkHandler} />
+      ];
+      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 PageItemLinkHandler = React.createClass({
+        handleClick() {
+          // just here to make sure click handlers don't prevent it from happening
+        },
+
+        render() {
+          return <PageItemLink to="foo" onClick={this.handleClick}>PageItemLink</PageItemLink>;
+        }
+      });
+
+      let routes = [
+        <Route name="foo" handler={Foo} />,
+        <Route name="link" handler={PageItemLinkHandler} />
+      ];
+
+      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

@@ -13,6 +13,7 @@ import './ButtonLink.spec.js';
 import './ListGroupItemLink.spec.js';
 import './MenuItemLink.spec.js';
 import './NavItemLink.spec.js';
+import './PageItemLink.spec.js';
 import './RouterOverlayTrigger.spec.js';
 import './ThumbnailLink.spec.js';
 import './bower-imports-module.spec.js';

tests/visual/PageItemVisual.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import {Link} from 'react-router';
+import Pager from 'react-bootstrap/lib/Pager';
+import PageItem from 'react-bootstrap/lib/PageItem';
+import PageItemLink from '../../src/PageItemLink';
+
+const PageItemVisual = React.createClass({
+  render() {
+    return (
+      <div>
+        <Link to='home'>&lt;-- Back to Index</Link>
+        <h2>PageItemLink</h2>
+        <h3>Baseline (Raw React-Bootstrap)</h3>
+        <Pager>
+          <PageItem previous>&larr; Previous Page</PageItem>
+          <PageItem next>Next Page &rarr;</PageItem>
+        </Pager>
+        <h3>PageItemLink</h3>
+        <Pager>
+          <PageItemLink previous to='home'>&larr; Previous Page</PageItemLink>
+          <PageItemLink next to='home'>Next Page &rarr;</PageItemLink>
+        </Pager>
+      </div>
+    );
+  }
+});
+
+export default PageItemVisual;

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='page-item' handler={require('./PageItemVisual')} />
     <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='page-item'>PageItemLink</Link></li>
           <li><Link to='thumbnail'>ThumbnailLink</Link></li>
         </ul>
       </div>