From 483a863ea3d0187ff6278f41fb9e21c3b3968abc Mon Sep 17 00:00:00 2001 From: Jimmy Jia Date: Wed, 30 Dec 2015 18:55:04 -0500 Subject: [PATCH] [changed] Support React Router v2.x --- .eslintrc | 4 +- README.md | 6 ++- package.json | 72 ++++++++++++++--------------- src/LinkContainer.js | 32 +++++-------- tests/IndexLinkContainer.spec.js | 2 +- tests/LinkContainer.spec.js | 25 +++++++--- tests/visual/ButtonVisual.js | 2 +- tests/visual/Home.js | 2 +- tests/visual/ListGroupItemVisual.js | 2 +- tests/visual/MenuItemVisual.js | 2 +- tests/visual/NavItemVisual.js | 2 +- tests/visual/index.js | 9 ++-- webpack.config.babel.js | 6 +-- webpack.test.config.babel.js | 2 +- webpack.visual.config.babel.js | 8 ++-- 15 files changed, 91 insertions(+), 85 deletions(-) diff --git a/.eslintrc b/.eslintrc index d841636..4bd2371 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,8 +1,8 @@ { "extends": "airbnb", + "parser": "babel-eslint", "rules": { "comma-dangle": 0, - "eqeqeq": [2, "allow-null"], - "id-length": 0 + "eqeqeq": [2, "allow-null"] } } diff --git a/README.md b/README.md index 89ab9ab..4e9141f 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ Integration between [React Router](https://github.com/rackt/react-router) and [R Wrap your React-Bootstrap element in a `LinkContainer` to make it behave like a React Router `Link`: ```js - + ``` @@ -20,6 +20,8 @@ As with React Router's `Link`, returning `false` from an `onClick` handler on `L ## Installation +**Note:** Releases from v0.20.0 onward only support React Router v2.x. For React Router 1.x support, use v0.19.3 or earlier. + ``` npm install react-router-bootstrap ``` @@ -27,7 +29,7 @@ npm install react-router-bootstrap You will also want to have React Router and React-Bootstrap. ``` -npm install react-router@latest react-bootstrap +npm install react-router react-bootstrap ``` ## Contributing diff --git a/package.json b/package.json index 02ede79..06a419c 100644 --- a/package.json +++ b/package.json @@ -32,53 +32,53 @@ }, "homepage": "https://github.com/react-bootstrap/react-router-bootstrap", "peerDependencies": { - "react": ">=0.13.0", - "react-router": ">=1.0.0-rc3" + "react": ">=0.14.0", + "react-router": ">=2.0.0-rc2" }, "devDependencies": { - "babel": "^5.8.23", - "babel-core": "^5.8.25", - "babel-eslint": "^4.1.3", - "babel-loader": "^5.3.2", - "bootstrap": "^3.3.5", + "babel": "5.x", + "babel-core": "5.x", + "babel-eslint": "^4.1.6", + "babel-loader": "5.x", + "bootstrap": "^3.3.6", "colors": "^1.1.2", - "css-loader": "^0.19.0", - "es5-shim": "^4.1.14", - "eslint": "^1.7.1", - "eslint-config-airbnb": "^0.1.0", - "eslint-plugin-babel": "^2.1.1", - "eslint-plugin-mocha": "^1.0.0", - "eslint-plugin-react": "^3.5.1", - "file-loader": "^0.8.4", - "history": "^1.12.5", - "html-webpack-plugin": "^1.6.2", - "karma": "^0.13.11", - "karma-cli": "^0.1.1", - "karma-mocha": "^0.2.0", - "karma-mocha-reporter": "^1.1.1", - "karma-phantomjs-launcher": "^0.2.1", + "css-loader": "^0.23.1", + "es5-shim": "^4.4.1", + "eslint": "^1.10.3", + "eslint-config-airbnb": "^2.1.1", + "eslint-plugin-babel": "^3.0.0", + "eslint-plugin-mocha": "^1.1.0", + "eslint-plugin-react": "^3.13.1", + "file-loader": "^0.8.5", + "history": "^1.17.0", + "html-webpack-plugin": "^1.7.0", + "karma": "^0.13.16", + "karma-cli": "^0.1.2", + "karma-mocha": "^0.2.1", + "karma-mocha-reporter": "^1.1.5", + "karma-phantomjs-launcher": "^0.2.2", "karma-sinon-chai": "^1.1.0", "karma-sourcemap-loader": "^0.3.6", "karma-webpack": "^1.7.0", "less": "^2.5.3", - "less-loader": "^2.2.1", + "less-loader": "^2.2.2", "lodash": "^3.10.1", - "mocha": "^2.3.3", + "mocha": "^2.3.4", "mt-changelog": "^0.6.2", "node-libs-browser": "^0.5.3", - "phantomjs": "^1.9.18", - "react": "^0.14.0", - "react-bootstrap": "^0.27.2", - "react-dom": "^0.14.0", - "react-router": "^1.0.0-rc3", - "release-script": "^0.5.4", - "rimraf": "^2.4.3", + "phantomjs": "^1.9.19", + "react": "^0.14.5", + "react-bootstrap": "^0.28.1", + "react-dom": "^0.14.5", + "react-router": "^2.0.0-rc4", + "release-script": "^0.5.6", + "rimraf": "^2.5.0", "shelljs": "^0.5.3", - "style-loader": "^0.12.4", - "url-loader": "^0.5.6", - "webpack": "^1.12.2", - "webpack-dev-server": "^1.12.0", - "yargs": "^3.27.0" + "style-loader": "^0.13.0", + "url-loader": "^0.5.7", + "webpack": "^1.12.9", + "webpack-dev-server": "^1.14.0", + "yargs": "^3.31.0" }, "files": [ "README", diff --git a/src/LinkContainer.js b/src/LinkContainer.js index 5c8b1bd..1309f19 100644 --- a/src/LinkContainer.js +++ b/src/LinkContainer.js @@ -1,7 +1,7 @@ // This is largely taken from react-router/lib/Link. import React from 'react'; -import {Link} from 'react-router'; +import { Link } from 'react-router'; export default class LinkContainer extends React.Component { constructor(props, context) { @@ -24,23 +24,15 @@ export default class LinkContainer extends React.Component { } render() { - const {history} = this.context; - const {onlyActiveOnIndex, to, query, hash, children, ...props} = - this.props; - - delete props.state; + const { router } = this.context; + const { onlyActiveOnIndex, to, children, ...props } = this.props; props.onClick = this.onClick; - // Ignore if rendered outside the context of history, simplifies unit testing. - if (history) { - props.href = history.createHref(to, query); - - if (hash) { - props.href += hash; - } - - props.active = history.isActive(to, query, onlyActiveOnIndex); + // Ignore if rendered outside Router context; simplifies unit testing. + if (router) { + props.href = router.createHref(to); + props.active = router.isActive(to, onlyActiveOnIndex); } return React.cloneElement(React.Children.only(children), props); @@ -49,17 +41,17 @@ export default class LinkContainer extends React.Component { LinkContainer.propTypes = { onlyActiveOnIndex: React.PropTypes.bool.isRequired, - to: React.PropTypes.string.isRequired, - query: React.PropTypes.object, - hash: React.PropTypes.string, - state: React.PropTypes.object, + to: React.PropTypes.oneOfType([ + React.PropTypes.string, + React.PropTypes.object, + ]).isRequired, onClick: React.PropTypes.func, disabled: React.PropTypes.bool.isRequired, children: React.PropTypes.node.isRequired }; LinkContainer.contextTypes = { - history: React.PropTypes.object + router: React.PropTypes.object }; LinkContainer.defaultProps = { diff --git a/tests/IndexLinkContainer.spec.js b/tests/IndexLinkContainer.spec.js index db83270..919c47c 100644 --- a/tests/IndexLinkContainer.spec.js +++ b/tests/IndexLinkContainer.spec.js @@ -3,7 +3,7 @@ import React from 'react'; import ReactTestUtils from 'react/lib/ReactTestUtils'; import * as ReactBootstrap from 'react-bootstrap'; import ReactDOM from 'react-dom'; -import {IndexRoute, Route, Router} from 'react-router'; +import { IndexRoute, Route, Router } from 'react-router'; import IndexLinkContainer from '../src/IndexLinkContainer'; diff --git a/tests/LinkContainer.spec.js b/tests/LinkContainer.spec.js index 046d0b0..101f19e 100644 --- a/tests/LinkContainer.spec.js +++ b/tests/LinkContainer.spec.js @@ -1,9 +1,9 @@ -import createMemoryHistory from 'history/lib/createMemoryHistory'; import React from 'react'; import ReactTestUtils from 'react/lib/ReactTestUtils'; import * as ReactBootstrap from 'react-bootstrap'; import ReactDOM from 'react-dom'; -import {Route, Router} from 'react-router'; +import { Route, Router } from 'react-router'; +import createMemoryHistory from 'react-router/lib/createMemoryHistory'; import LinkContainer from '../src/LinkContainer'; @@ -23,7 +23,13 @@ describe('LinkContainer', () => { ( - + Foo )} @@ -43,7 +49,12 @@ describe('LinkContainer', () => { ( - + Foo )} @@ -84,7 +95,7 @@ describe('LinkContainer', () => { const anchor = ReactTestUtils.findRenderedDOMComponentWithTag( router, 'A' ); - ReactTestUtils.Simulate.click(anchor, {button: 0}); + ReactTestUtils.Simulate.click(anchor, { button: 0 }); const target = ReactTestUtils.findRenderedDOMComponentWithClass( router, 'target' @@ -116,7 +127,7 @@ describe('LinkContainer', () => { const anchor = ReactTestUtils.findRenderedDOMComponentWithTag( router, 'A' ); - ReactTestUtils.Simulate.click(anchor, {button: 0}); + ReactTestUtils.Simulate.click(anchor, { button: 0 }); expect(onClick).to.have.been.calledOnce; expect(childOnClick).to.have.been.calledOnce; @@ -183,7 +194,7 @@ describe('LinkContainer', () => { router, Component ); ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(component), - {button: 0} + { button: 0 } ); const target = ReactTestUtils.scryRenderedDOMComponentsWithClass( diff --git a/tests/visual/ButtonVisual.js b/tests/visual/ButtonVisual.js index 715ed92..da54a81 100644 --- a/tests/visual/ButtonVisual.js +++ b/tests/visual/ButtonVisual.js @@ -1,7 +1,7 @@ import React from 'react'; import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar'; import Button from 'react-bootstrap/lib/Button'; -import {Link} from 'react-router'; +import { Link } from 'react-router'; import LinkContainer from '../../src/LinkContainer'; diff --git a/tests/visual/Home.js b/tests/visual/Home.js index d2af208..f1e4e76 100644 --- a/tests/visual/Home.js +++ b/tests/visual/Home.js @@ -1,5 +1,5 @@ import React from 'react'; -import {Link} from 'react-router'; +import { Link } from 'react-router'; export default () => (
diff --git a/tests/visual/ListGroupItemVisual.js b/tests/visual/ListGroupItemVisual.js index 8ebc95c..75f2ff1 100644 --- a/tests/visual/ListGroupItemVisual.js +++ b/tests/visual/ListGroupItemVisual.js @@ -1,7 +1,7 @@ import React from 'react'; import ListGroup from 'react-bootstrap/lib/ListGroup'; import ListGroupItem from 'react-bootstrap/lib/ListGroupItem'; -import {Link} from 'react-router'; +import { Link } from 'react-router'; import LinkContainer from '../../src/LinkContainer'; diff --git a/tests/visual/MenuItemVisual.js b/tests/visual/MenuItemVisual.js index 5f56e77..0359f40 100644 --- a/tests/visual/MenuItemVisual.js +++ b/tests/visual/MenuItemVisual.js @@ -2,7 +2,7 @@ import React from 'react'; import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar'; import MenuItem from 'react-bootstrap/lib/MenuItem'; import SplitButton from 'react-bootstrap/lib/SplitButton'; -import {Link} from 'react-router'; +import { Link } from 'react-router'; import LinkContainer from '../../src/LinkContainer'; diff --git a/tests/visual/NavItemVisual.js b/tests/visual/NavItemVisual.js index aabf278..3b957b7 100644 --- a/tests/visual/NavItemVisual.js +++ b/tests/visual/NavItemVisual.js @@ -1,7 +1,7 @@ import React from 'react'; import Nav from 'react-bootstrap/lib/Nav'; import NavItem from 'react-bootstrap/lib/NavItem'; -import {Link} from 'react-router'; +import { Link } from 'react-router'; import LinkContainer from '../../src/LinkContainer'; diff --git a/tests/visual/index.js b/tests/visual/index.js index bdf7774..e08ef56 100644 --- a/tests/visual/index.js +++ b/tests/visual/index.js @@ -1,7 +1,8 @@ import React from 'react'; import Grid from 'react-bootstrap/lib/Grid'; import ReactDOM from 'react-dom'; -import {IndexRoute, Route, Router} from 'react-router'; +import { IndexRedirect, Route, Router } from 'react-router'; +import hashHistory from 'react-router/lib/hashHistory'; import ButtonVisual from './ButtonVisual'; import Home from './Home'; @@ -11,7 +12,7 @@ import NavItemVisual from './NavItemVisual'; import 'bootstrap/less/bootstrap.less'; -const App = ({children}) => ( +const App = ({ children }) => (

React-Router-Bootstrap Module Visual Test

{children} @@ -22,9 +23,9 @@ const mountNode = document.createElement('div'); document.body.appendChild(mountNode); ReactDOM.render( - + - replaceWith(null, '/home')} /> + diff --git a/webpack.config.babel.js b/webpack.config.babel.js index a1fd0d6..41250d3 100644 --- a/webpack.config.babel.js +++ b/webpack.config.babel.js @@ -1,7 +1,7 @@ import webpack from 'webpack'; import yargs from 'yargs'; -const {optimizeMinimize} = yargs.alias('p', 'optimize-minimize').argv; +const { optimizeMinimize } = yargs.alias('p', 'optimize-minimize').argv; const nodeEnv = optimizeMinimize ? 'production' : 'development'; export default { @@ -16,7 +16,7 @@ export default { }, module: { loaders: [ - {test: /\.js$/, loader: 'babel', exclude: /node_modules/} + { test: /\.js$/, loader: 'babel', exclude: /node_modules/ } ] }, externals: [ @@ -39,7 +39,7 @@ export default { ], plugins: [ new webpack.DefinePlugin({ - 'process.env': {'NODE_ENV': JSON.stringify(nodeEnv)} + 'process.env': { 'NODE_ENV': JSON.stringify(nodeEnv) } }) ], devtool: optimizeMinimize ? 'source-map' : null diff --git a/webpack.test.config.babel.js b/webpack.test.config.babel.js index 2e18c18..0aa046b 100644 --- a/webpack.test.config.babel.js +++ b/webpack.test.config.babel.js @@ -4,7 +4,7 @@ export default { }, module: { loaders: [ - {test: /\.js/, loader: 'babel', exclude: /node_modules/} + { test: /\.js/, loader: 'babel', exclude: /node_modules/ } ] }, devtool: 'inline-source-map' diff --git a/webpack.visual.config.babel.js b/webpack.visual.config.babel.js index 4da1a57..7105b52 100644 --- a/webpack.visual.config.babel.js +++ b/webpack.visual.config.babel.js @@ -4,10 +4,10 @@ export default { entry: './tests/visual', module: { loaders: [ - {test: /\.js/, loader: 'babel', exclude: /node_modules/}, - {test: /\.less$/, loader: 'style!css!less'}, - {test: /\.woff|\.woff2$/, loader: 'url?prefix=font/&limit=5000'}, - {test: /\.eot$|\.ttf$|\.svg$/, loader: 'file?prefix=font/'} + { test: /\.js/, loader: 'babel', exclude: /node_modules/ }, + { test: /\.less$/, loader: 'style!css!less' }, + { test: /\.woff|\.woff2$/, loader: 'url?prefix=font/&limit=5000' }, + { test: /\.eot$|\.ttf$|\.svg$/, loader: 'file?prefix=font/' } ] }, plugins: [