Skip to content

Add support for hash prop #128

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 19, 2015
Merged

Add support for hash prop #128

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions package.json
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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