Skip to content

Commit

Permalink
[added] Support hash prop on LinkContainer
Browse files Browse the repository at this point in the history 
Also update dependencies appropriately
  • Loading branch information
@taion
taion committed Oct 18, 2015
1 parent c76fab6 commit 5ca61cf
Show file tree
Hide file tree
Showing 4 changed files with 94 additions and 113 deletions.
16 changes: 8 additions & 8 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
"homepage": "https://github.com/react-bootstrap/react-router-bootstrap",
"peerDependencies": {
"react": ">=0.13.0",
"react-router": ">=1.0.0-rc1"
"react-router": ">=1.0.0-rc3"
},
"devDependencies": {
"babel": "^5.8.23",
Expand All @@ -44,21 +44,21 @@
"colors": "^1.1.2",
"css-loader": "^0.19.0",
"es5-shim": "^4.1.14",
"eslint": "1.6.x",
"eslint-config-airbnb": "0.1.0",
"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.3",
"history": "^1.12.5",
"html-webpack-plugin": "^1.6.2",
"karma": "^0.13.10",
"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",
"karma-sinon-chai": "^1.1.0",
"karma-sourcemap-loader": "^0.3.5",
"karma-sourcemap-loader": "^0.3.6",
"karma-webpack": "^1.7.0",
"less": "^2.5.3",
"less-loader": "^2.2.1",
Expand All @@ -68,10 +68,10 @@
"node-libs-browser": "^0.5.3",
"phantomjs": "^1.9.18",
"react": "^0.14.0",
"react-bootstrap": "^0.27.1",
"react-bootstrap": "^0.27.2",
"react-dom": "^0.14.0",
"react-router": "^1.0.0-rc3",
"release-script": "^0.5.3",
"release-script": "^0.5.4",
"rimraf": "^2.4.3",
"shelljs": "^0.5.3",
"style-loader": "^0.12.4",
Expand Down
9 changes: 7 additions & 2 deletions src/LinkContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,16 @@ export default class LinkContainer extends React.Component {

render() {
const {history} = this.context;
const {onlyActiveOnIndex, to, query, children, ...props} = this.props;
const {onlyActiveOnIndex, to, query, hash, children, ...props} =
this.props;

delete props.state;
delete props.onClick;

props.onClick = this.onClick;
props.href = history.createHref(to, query);
if (hash) {
props.href += hash;
}
props.active = history.isActive(to, query, onlyActiveOnIndex);

return React.cloneElement(React.Children.only(children), props);
Expand All @@ -41,6 +45,7 @@ LinkContainer.propTypes = {
onlyActiveOnIndex: React.PropTypes.bool.isRequired,
to: React.PropTypes.string.isRequired,
query: React.PropTypes.object,
hash: React.PropTypes.string,
state: React.PropTypes.object,
onClick: React.PropTypes.func,
disabled: React.PropTypes.bool.isRequired,
Expand Down
19 changes: 8 additions & 11 deletions tests/IndexLinkContainer.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,19 +18,16 @@ describe('IndexLinkContainer', () => {

describe('active state', () => {
function renderComponent(location) {
class LinkWrapper extends React.Component {
render() {
return (
<IndexLinkContainer to="/">
<Component>Root</Component>
</IndexLinkContainer>
);
}
}

const router = ReactTestUtils.renderIntoDocument(
<Router history={createMemoryHistory(location)}>
<Route path="/" component={LinkWrapper}>
<Route
path="/"
component={() => (
<IndexLinkContainer to="/">
<Component>Root</Component>
</IndexLinkContainer>
)}
>
<IndexRoute />
<Route path="foo" />
</Route>
Expand Down
163 changes: 71 additions & 92 deletions tests/LinkContainer.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,50 +8,45 @@ import {Route, Router} from 'react-router';
import LinkContainer from '../src/LinkContainer';

describe('LinkContainer', () => {
['Button',
[
'Button',
'NavItem',
'ListGroupItem'
].forEach(name => {
describe(name, () => {
const Component = ReactBootstrap[name];

it('should make the correct href', () => {
class LinkWrapper extends React.Component {
render() {
return (
<LinkContainer to="/foo" query={{bar: 'baz'}}>
<Component>Foo</Component>
</LinkContainer>
);
}
}

const router = ReactTestUtils.renderIntoDocument(
<Router history={createMemoryHistory('/')}>
<Route path="/" component={LinkWrapper} />
<Route
path="/"
component={() => (
<LinkContainer to="/foo" query={{bar: 'baz'}} hash="#the-hash">
<Component>Foo</Component>
</LinkContainer>
)}
/>
</Router>
);

const anchor = ReactTestUtils.findRenderedDOMComponentWithTag(
router, 'A'
);
expect(anchor.getAttribute('href')).to.equal('/foo?bar=baz');
expect(anchor.getAttribute('href')).to.equal('/foo?bar=baz#the-hash');
});

it('should not add extra DOM nodes', () => {
class LinkWrapper extends React.Component {
render() {
return (
<LinkContainer to="/foo" query={{bar: 'baz'}}>
<Component>Foo</Component>
</LinkContainer>
);
}
}

const router = ReactTestUtils.renderIntoDocument(
<Router history={createMemoryHistory('/')}>
<Route path="/" component={LinkWrapper} />
<Route
path="/"
component={() => (
<LinkContainer to="/foo" query={{bar: 'baz'}}>
<Component>Foo</Component>
</LinkContainer>
)}
/>
</Router>
);

Expand All @@ -68,35 +63,27 @@ describe('LinkContainer', () => {

describe('when clicked', () => {
it('should transition to the correct route', () => {
class LinkWrapper extends React.Component {
render() {
return (
<LinkContainer to="/target">
<Component>Target</Component>
</LinkContainer>
);
}
}

class Target extends React.Component {
render() {
return <div className="target" />;
}
}

const router = ReactTestUtils.renderIntoDocument(
<Router history={createMemoryHistory('/')}>
<Route path="/" component={LinkWrapper} />
<Route path="/target" component={Target} />
<Route
path="/"
component={() => (
<LinkContainer to="/target">
<Component>Target</Component>
</LinkContainer>
)}
/>
<Route
path="/target"
component={() => <div className="target" />}
/>
</Router>
);

const component = ReactTestUtils.findRenderedComponentWithType(
router, Component
);
ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(component),
{button: 0}
const anchor = ReactTestUtils.findRenderedDOMComponentWithTag(
router, 'A'
);
ReactTestUtils.Simulate.click(anchor, {button: 0});

const target = ReactTestUtils.findRenderedDOMComponentWithClass(
router, 'target'
Expand All @@ -108,26 +95,27 @@ describe('LinkContainer', () => {
const onClick = sinon.spy();
const childOnClick = sinon.spy();

class LinkWrapper extends React.Component {
render() {
return (
<LinkContainer to="/foo" onClick={onClick}>
<Component onClick={childOnClick}>Foo</Component>
</LinkContainer>
);
}
}

const router = ReactTestUtils.renderIntoDocument(
<Router history={createMemoryHistory('/')}>
<Route path="/" component={LinkWrapper} />
<Route
path="/"
component={() => (
<LinkContainer to="/target" onClick={onClick}>
<Component onClick={childOnClick}>Foo</Component>
</LinkContainer>
)}
/>
<Route
path="/target"
component={() => <div className="target" />}
/>
</Router>
);

const component = ReactTestUtils.findRenderedComponentWithType(
router, Component
const anchor = ReactTestUtils.findRenderedDOMComponentWithTag(
router, 'A'
);
ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(component));
ReactTestUtils.Simulate.click(anchor, {button: 0});

expect(onClick).to.have.been.calledOnce;
expect(childOnClick).to.have.been.calledOnce;
Expand All @@ -136,21 +124,18 @@ describe('LinkContainer', () => {

describe('active state', () => {
function renderComponent(location) {
class LinkWrapper extends React.Component {
render() {
return (
<LinkContainer to="/foo">
<Component>Foo</Component>
</LinkContainer>
);
}
}

const router = ReactTestUtils.renderIntoDocument(
<Router history={createMemoryHistory(location)}>
<Route component={LinkWrapper}>
<Route path="/foo" />
<Route path="/bar" />
<Route
path="/"
component={() => (
<LinkContainer to="/foo">
<Component>Foo</Component>
</LinkContainer>
)}
>
<Route path="foo" />
<Route path="bar" />
</Route>
</Router>
);
Expand All @@ -174,26 +159,20 @@ describe('LinkContainer', () => {
let router;

beforeEach(() => {
class LinkWrapper extends React.Component {
render() {
return (
<LinkContainer to="/target" disabled>
<Component>Target</Component>
</LinkContainer>
);
}
}

class Target extends React.Component {
render() {
return <div className="target" />;
}
}

router = ReactTestUtils.renderIntoDocument(
<Router history={createMemoryHistory('/')}>
<Route path="/" component={LinkWrapper} />
<Route path="/target" component={Target} />
<Route
path="/"
component={() => (
<LinkContainer to="/target" disabled>
<Component>Target</Component>
</LinkContainer>
)}
/>
<Route
path="/target"
component={() => <div className="target" />}
/>
</Router>
);
});
Expand Down

0 comments on commit 5ca61cf

Please sign in to comment.