-
Notifications
You must be signed in to change notification settings - Fork 160
Commit
There are no files selected for viewing
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,41 +1,7 @@ | ||
{ | ||
"extends": ["eslint-config-airbnb"], | ||
"env": { | ||
"browser": true, | ||
"node": true | ||
}, | ||
"ecmaFeatures": { | ||
"jsx": true | ||
}, | ||
"parser": "babel-eslint", | ||
"plugins": [ | ||
"react", | ||
"babel" | ||
], | ||
"extends": "airbnb", | ||
"rules": { | ||
"comma-dangle": 0, | ||
"comma-spacing": 1, | ||
"key-spacing": 0, | ||
"no-eq-null": 0, | ||
"no-param-reassign": 0, | ||
"no-underscore-dangle": 0, | ||
"no-undef": 2, | ||
"no-unused-vars": [2, { "vars": "all", "args": "none" }], | ||
"no-var": 2, | ||
"babel/object-shorthand": 2, | ||
"quotes": [1, "single", "avoid-escape"], | ||
"react/display-name": 0, | ||
"react/jsx-no-undef": 2, | ||
"react/jsx-quotes": 0, | ||
"react/jsx-uses-react": 2, | ||
"react/no-did-mount-set-state": 2, | ||
"react/no-did-update-set-state": 2, | ||
"react/no-multi-comp": 2, | ||
"react/prop-types": [1, { "ignore": ["children", "className"] }], | ||
"react/react-in-jsx-scope": 2, | ||
"react/self-closing-comp": 1, | ||
"react/wrap-multilines": 2, | ||
"react/jsx-uses-vars": 1, | ||
"strict": 0 | ||
"no-eq-null": 0 | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,7 @@ | ||
# Contributing | ||
|
||
As part of the react-bootstrap organization all contributing guidelines can be | ||
found at: | ||
https://github.com/react-bootstrap/react-bootstrap/blob/master/CONTRIBUTING.md | ||
As part of the react-bootstrap organization all contributing guidelines can be found at: https://github.com/react-bootstrap/react-bootstrap/blob/master/CONTRIBUTING.md. | ||
|
||
Note that automated changelog generation has not been setup on this repo yet. | ||
Use `npm run visual-test` to check the appearance of components in your browser. The page will load at [http://localhost:8080/](http://localhost:8080/). | ||
|
||
Note that automated changelog generation has not been set up on this repo yet. |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,127 +1,33 @@ | ||
# react-router-bootstrap | ||
Integration between [React Router](https://github.com/rackt/react-router) and [React-Bootstrap](https://github.com/react-bootstrap/react-bootstrap). | ||
|
||
[![Build Status](https://travis-ci.org/react-bootstrap/react-router-bootstrap.svg?branch=master)](https://travis-ci.org/react-bootstrap/react-router-bootstrap) | ||
[![npm version](https://badge.fury.io/js/react-router-bootstrap.svg)](http://badge.fury.io/js/react-router-bootstrap) | ||
|
||
Intregation between [react-router](https://github.com/rackt/react-router) and [react-bootstrap](https://github.com/react-bootstrap/react-bootstrap) | ||
|
||
This package gives you react-router compatible substitutes for: | ||
|
||
- `NavItem` -> `NavItemLink` | ||
- `Button` -> `ButtonLink` | ||
- `MenuItem` -> `MenuItemLink` | ||
- `ListGroupItem` -> `ListGroupItemLink` | ||
- `PageItem` -> `PageItemLink` | ||
- `Thumbnail` -> `ThumbnailLink` | ||
|
||
Turning this: | ||
## Usage | ||
|
||
```jsx | ||
React.createClass({ | ||
mixins: [State, Navigation], | ||
Wrap your React-Bootstrap element in a `LinkContainer` to make it behave like a React Router `Link`: | ||
|
||
render: function() { | ||
var href = this.makeHref('destination', {some: 'params'}, {some: 'query param'}); | ||
var isActive = this.isActive('destination', {some: 'params'}, {some: 'query param'}); | ||
return <Button href={href} active={isActive}>; | ||
} | ||
}); | ||
```js | ||
<LinkContainer to="/foo" query={{bar: "baz"}}> | ||
<Button>Foo</Button> | ||
</LinkContainer> | ||
``` | ||
|
||
Into this | ||
|
||
```jsx | ||
React.createClass({ | ||
render: function() { | ||
return <ButtonLink to="destination" params={{ some: 'params' }} query={{some: 'query param'}}>; | ||
} | ||
}); | ||
``` | ||
To disable the element and the link, set the `disabled` prop on the `LinkContainer`. For the equivalent of `IndexLink`, use `IndexLinkContainer`. | ||
|
||
## Installation | ||
|
||
``` | ||
npm install --save react-router-bootstrap | ||
npm install react-router-bootstrap | ||
``` | ||
|
||
You will also (if you haven't already) want to install `react-router` and `react-bootstrap` | ||
You will also want to have React Router and React-Bootstrap. | ||
|
||
``` | ||
npm install --save react-router react-bootstrap | ||
``` | ||
|
||
## Usage | ||
|
||
A simple example | ||
|
||
```jsx | ||
var Router = require('react-router') | ||
, RouteHandler = Router.RouteHandler | ||
, Route = Router.Route; | ||
|
||
var ReactBootstrap = require('react-bootstrap') | ||
, Nav = ReactBootstrap.Nav | ||
, ListGroup = ReactBootstrap.ListGroup; | ||
|
||
var ReactRouterBootstrap = require('react-router-bootstrap') | ||
, NavItemLink = ReactRouterBootstrap.NavItemLink | ||
, ButtonLink = ReactRouterBootstrap.ButtonLink | ||
, ListGroupItemLink = ReactRouterBootstrap.ListGroupItemLink; | ||
|
||
var App = React.createClass({ | ||
render: function() { | ||
return ( | ||
<div> | ||
NavItemLink<br /> | ||
<Nav> | ||
<NavItemLink | ||
to="destination" | ||
params={{ someparam: 'hello' }}> | ||
Linky! | ||
</NavItemLink> | ||
</Nav> | ||
<br /> | ||
ButtonLink<br /> | ||
<ButtonLink | ||
to="destination" | ||
params={{ someparam: 'hello' }}> | ||
Linky! | ||
</ButtonLink> | ||
<br /> | ||
<ListGroup> | ||
<ListGroupItemLink | ||
to="destination" | ||
params={{ someparam: 'hello' }}> | ||
Linky! | ||
</ListGroupItemLink> | ||
</ListGroup> | ||
<RouteHandler /> | ||
</div> | ||
); | ||
} | ||
}); | ||
|
||
var Destination = React.createClass({ | ||
render: function() { | ||
return <div>You made it!</div>; | ||
} | ||
}); | ||
|
||
var routes = ( | ||
<Route handler={App} path="/"> | ||
<Route name="destination" path="destination/:someparam" handler={Destination} /> | ||
</Route> | ||
); | ||
|
||
Router.run(routes, function (Handler) { | ||
React.render(<Handler/>, document.body); | ||
}); | ||
|
||
npm install react-router react-bootstrap | ||
``` | ||
|
||
## Contributing | ||
|
||
See [CONTRIBUTING](CONTRIBUTING.md) | ||
|
||
Use `npm run visual-test` command to check components appearance in browser. It will open browser with a blank page. Then after `webpack-server` finishes its bundling, the browser automatically will refresh the page. | ||
|
||
URL for it: http://localhost:8080/public/visual#/ | ||
See [CONTRIBUTING](CONTRIBUTING.md). |
This file was deleted.
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import React from 'react'; | ||
|
||
import LinkContainer from './LinkContainer'; | ||
|
||
export default class IndexLinkContainer extends React.Component { | ||
render() { | ||
return ( | ||
<LinkContainer {...this.props} onlyActiveOnIndex /> | ||
); | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
// This is largely taken from react-router/lib/Link. | ||
|
||
import React from 'react'; | ||
import {Link} from 'react-router'; | ||
|
||
export default class LinkContainer extends React.Component { | ||
constructor(props, context) { | ||
super(props, context); | ||
|
||
this.onClick = this.onClick.bind(this); | ||
} | ||
|
||
onClick(event) { | ||
if (this.props.disabled) { | ||
event.preventDefault(); | ||
return; | ||
} | ||
|
||
Link.prototype.handleClick.call(this, event); | ||
} | ||
|
||
render() { | ||
const {history} = this.context; | ||
const {onlyActiveOnIndex, to, query, children, ...props} = this.props; | ||
|
||
delete props.state; | ||
delete props.onClick; | ||
props.onClick = this.onClick; | ||
props.href = history.createHref(to, query); | ||
props.active = history.isActive(to, query, onlyActiveOnIndex); | ||
|
||
return React.cloneElement(React.Children.only(children), props); | ||
} | ||
} | ||
|
||
LinkContainer.propTypes = { | ||
onlyActiveOnIndex: React.PropTypes.bool.isRequired, | ||
to: React.PropTypes.string.isRequired, | ||
query: React.PropTypes.object, | ||
state: React.PropTypes.object, | ||
onClick: React.PropTypes.func, | ||
disabled: React.PropTypes.bool.isRequired, | ||
children: React.PropTypes.node.isRequired | ||
}; | ||
|
||
LinkContainer.contextTypes = { | ||
history: React.PropTypes.object.isRequired | ||
}; | ||
|
||
LinkContainer.defaultProps = { | ||
onlyActiveOnIndex: false, | ||
disabled: false | ||
}; |
This file was deleted.
This file was deleted.
This file was deleted.
This file was deleted.
This file was deleted.
This file was deleted.
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,2 @@ | ||
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'; | ||
export IndexLinkContainer from './IndexLinkContainer'; | ||
export LinkContainer from './LinkContainer'; |
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
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 {IndexRoute, Route, Router} from 'react-router'; | ||
|
||
import IndexLinkContainer from '../src/IndexLinkContainer'; | ||
|
||
describe('IndexLinkContainer', () => { | ||
[ | ||
'Button', | ||
'NavItem', | ||
'ListGroupItem' | ||
].forEach(name => { | ||
describe(name, () => { | ||
const Component = ReactBootstrap[name]; | ||
|
||
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}> | ||
<IndexRoute /> | ||
<Route path="foo" /> | ||
</Route> | ||
</Router> | ||
); | ||
|
||
const component = ReactTestUtils.findRenderedComponentWithType( | ||
router, Component | ||
); | ||
return ReactDOM.findDOMNode(component); | ||
} | ||
|
||
it('should be active on the index route', () => { | ||
expect(renderComponent('/').className).to.match(/\bactive\b/); | ||
}); | ||
|
||
it('should not be active on a child route', () => { | ||
expect(renderComponent('/foo').className).to.not.match(/\bactive\b/); | ||
}); | ||
}); | ||
}); | ||
}); | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,223 @@ | ||
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 LinkContainer from '../src/LinkContainer'; | ||
|
||
describe('LinkContainer', () => { | ||
['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} /> | ||
</Router> | ||
); | ||
|
||
const anchor = ReactTestUtils.findRenderedDOMComponentWithTag( | ||
router, 'A' | ||
); | ||
expect(anchor.getAttribute('href')).to.equal('/foo?bar=baz'); | ||
}); | ||
|
||
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} /> | ||
</Router> | ||
); | ||
|
||
const container = ReactTestUtils.findRenderedComponentWithType( | ||
router, LinkContainer | ||
); | ||
const component = ReactTestUtils.findRenderedComponentWithType( | ||
router, Component | ||
); | ||
|
||
expect(ReactDOM.findDOMNode(container)) | ||
.to.equal(ReactDOM.findDOMNode(component)); | ||
}); | ||
|
||
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} /> | ||
</Router> | ||
); | ||
|
||
const component = ReactTestUtils.findRenderedComponentWithType( | ||
router, Component | ||
); | ||
ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(component), | ||
{button: 0} | ||
); | ||
|
||
const target = ReactTestUtils.findRenderedDOMComponentWithClass( | ||
router, 'target' | ||
); | ||
expect(target).to.exist; | ||
}); | ||
|
||
it('should call a user defined click handler', () => { | ||
const onClick = sinon.spy(); | ||
|
||
class LinkWrapper extends React.Component { | ||
render() { | ||
return ( | ||
<LinkContainer to="/foo" onClick={onClick}> | ||
<Component>Foo</Component> | ||
</LinkContainer> | ||
); | ||
} | ||
} | ||
|
||
const router = ReactTestUtils.renderIntoDocument( | ||
<Router history={createMemoryHistory('/')}> | ||
<Route path="/" component={LinkWrapper} /> | ||
</Router> | ||
); | ||
|
||
const component = ReactTestUtils.findRenderedComponentWithType( | ||
router, Component | ||
); | ||
ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(component)); | ||
|
||
expect(onClick).to.have.been.called; | ||
}); | ||
}); | ||
|
||
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> | ||
</Router> | ||
); | ||
|
||
const component = ReactTestUtils.findRenderedComponentWithType( | ||
router, Component | ||
); | ||
return ReactDOM.findDOMNode(component); | ||
} | ||
|
||
it('should be active when on the target route', () => { | ||
expect(renderComponent('/foo').className).to.match(/\bactive\b/); | ||
}); | ||
|
||
it('should not be active when on a different route', () => { | ||
expect(renderComponent('/bar').className).to.not.match(/\bactive\b/); | ||
}); | ||
}); | ||
|
||
describe('disabled state', () => { | ||
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} /> | ||
</Router> | ||
); | ||
}); | ||
|
||
it('should not transition on click', () => { | ||
const component = ReactTestUtils.findRenderedComponentWithType( | ||
router, Component | ||
); | ||
ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(component), | ||
{button: 0} | ||
); | ||
|
||
const target = ReactTestUtils.scryRenderedDOMComponentsWithClass( | ||
router, 'target' | ||
); | ||
expect(target).to.be.empty; | ||
}); | ||
|
||
it('should render with disabled class', () => { | ||
const component = ReactTestUtils.findRenderedComponentWithType( | ||
router, Component | ||
); | ||
expect(ReactDOM.findDOMNode(component).className) | ||
.to.match(/\bdisabled\b/); | ||
}); | ||
}); | ||
}); | ||
}); | ||
}); |
This file was deleted.
This file was deleted.
This file was deleted.
This file was deleted.
This file was deleted.
This file was deleted.
This file was deleted.
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,19 +1,4 @@ | ||
import './phantom-shims'; | ||
import 'mocha'; | ||
import 'es5-shim'; | ||
|
||
const chai = require('chai'); | ||
chai.should(); | ||
|
||
global.expect = chai.expect; | ||
global.assert = chai.assert; | ||
|
||
global.TestUtils = require('react/addons').addons.TestUtils; | ||
|
||
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'; | ||
const testsContext = require.context('.', true, /\.spec\.js$/); | ||
testsContext.keys().forEach(testsContext); |
This file was deleted.
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,36 +1,45 @@ | ||
import React from 'react'; | ||
import {Link} from 'react-router'; | ||
import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar'; | ||
import Button from 'react-bootstrap/lib/Button'; | ||
import ButtonLink from '../../src/ButtonLink'; | ||
import {Link} from 'react-router'; | ||
|
||
import LinkContainer from '../../src/LinkContainer'; | ||
|
||
export default () => ( | ||
<div> | ||
<Link to="home">Back to Index</Link> | ||
<h2>Button</h2> | ||
|
||
const ButtonVisual = React.createClass({ | ||
render() { | ||
return ( | ||
<div> | ||
<Link to='home'><-- Back to Index</Link> | ||
<h2>ButtonLink</h2> | ||
<h3>Baseline (Raw React-Bootstrap)</h3> | ||
<ButtonToolbar> | ||
<Button>Default</Button> | ||
<Button bsStyle="success">Success</Button> | ||
<Button bsStyle="info">Info</Button> | ||
<Button bsStyle="warning">Warning</Button> | ||
<Button bsStyle="danger">Danger</Button> | ||
<Button bsStyle="link">Link</Button> | ||
</ButtonToolbar> | ||
<h3>ButtonLink</h3> | ||
<ButtonToolbar> | ||
<ButtonLink to='home'>Default</ButtonLink> | ||
<ButtonLink to='home' bsStyle="success">Success</ButtonLink> | ||
<ButtonLink to='home' bsStyle="info">Info</ButtonLink> | ||
<ButtonLink to='home' bsStyle="warning">Warning</ButtonLink> | ||
<ButtonLink to='home' bsStyle="danger">Danger</ButtonLink> | ||
<ButtonLink to='home' bsStyle="link">Link</ButtonLink> | ||
</ButtonToolbar> | ||
</div> | ||
); | ||
} | ||
}); | ||
<h3>Baseline</h3> | ||
<ButtonToolbar> | ||
<Button>Default</Button> | ||
<Button bsStyle="success">Success</Button> | ||
<Button bsStyle="info">Info</Button> | ||
<Button bsStyle="warning">Warning</Button> | ||
<Button bsStyle="danger">Danger</Button> | ||
<Button bsStyle="link">Link</Button> | ||
</ButtonToolbar> | ||
|
||
export default ButtonVisual; | ||
<h3>LinkContainer</h3> | ||
<ButtonToolbar> | ||
<LinkContainer to="/home"> | ||
<Button>Default</Button> | ||
</LinkContainer> | ||
<LinkContainer to="/home"> | ||
<Button bsStyle="success">Success</Button> | ||
</LinkContainer> | ||
<LinkContainer to="/home"> | ||
<Button bsStyle="info">Info</Button> | ||
</LinkContainer> | ||
<LinkContainer to="/home"> | ||
<Button bsStyle="warning">Warning</Button> | ||
</LinkContainer> | ||
<LinkContainer to="/home"> | ||
<Button bsStyle="danger">Danger</Button> | ||
</LinkContainer> | ||
<LinkContainer to="/home"> | ||
<Button bsStyle="link">Link</Button> | ||
</LinkContainer> | ||
</ButtonToolbar> | ||
</div> | ||
); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,41 +1,77 @@ | ||
import React from 'react'; | ||
import {Link} from 'react-router'; | ||
import ListGroup from 'react-bootstrap/lib/ListGroup'; | ||
import ListGroupItem from 'react-bootstrap/lib/ListGroupItem'; | ||
import ListGroupItemLink from '../../src/ListGroupItemLink'; | ||
import {Link} from 'react-router'; | ||
|
||
import LinkContainer from '../../src/LinkContainer'; | ||
|
||
export default () => ( | ||
<div> | ||
<Link to="/home">Back to Index</Link> | ||
<h2>ListGroupItem</h2> | ||
|
||
const NavItemVisual = React.createClass({ | ||
handleSelect(selectedKey) { | ||
window.alert('selected ' + selectedKey); | ||
}, | ||
render() { | ||
return ( | ||
<div> | ||
<Link to='home'><-- Back to Index</Link> | ||
<h2>ListGroupItemLink</h2> | ||
<h3>Baseline (Raw React-Bootstrap)</h3> | ||
<ListGroup> | ||
<ListGroupItem eventKey={1} href="/home" header="ListGroupItem 1 Heading">ListGroupItem 1 content</ListGroupItem> | ||
<ListGroupItem eventKey={2} header="ListGroupItem 2 Heading">ListGroupItem 2 content</ListGroupItem> | ||
<ListGroupItem eventKey={3} disabled={true}>ListGroupItem 3 content disabled</ListGroupItem> | ||
<ListGroupItem eventKey={4} bsStyle="success">ListGroupItem 4 content success</ListGroupItem> | ||
<ListGroupItem eventKey={5} bsStyle="info">ListGroupItem 5 content info</ListGroupItem> | ||
<ListGroupItem eventKey={6} bsStyle="warning">ListGroupItem 6 content warning</ListGroupItem> | ||
<ListGroupItem eventKey={7} bsStyle="danger">ListGroupItem 7 content danger</ListGroupItem> | ||
</ListGroup> | ||
<h3>ListGroupItemLink</h3> | ||
<ListGroup> | ||
<ListGroupItemLink to="list-group-item" header="ListGroupItemLink 1 Heading">ListGroupItemLink 1 content</ListGroupItemLink> | ||
<ListGroupItemLink to="home" header="ListGroupItemLink 2 Heading">ListGroupItemLink 2 content</ListGroupItemLink> | ||
<ListGroupItemLink to="home" disabled={true}>ListGroupItemLink 3 content disabled</ListGroupItemLink> | ||
<ListGroupItemLink to="home" bsStyle="success">ListGroupItemLink 4 content success</ListGroupItemLink> | ||
<ListGroupItemLink to="home" bsStyle="info">ListGroupItemLink 5 content info</ListGroupItemLink> | ||
<ListGroupItemLink to="home" bsStyle="warning">ListGroupItemLink 6 content warning</ListGroupItemLink> | ||
<ListGroupItemLink to="home" bsStyle="danger">ListGroupItemLink 7 content danger</ListGroupItemLink> | ||
</ListGroup> | ||
</div> | ||
); | ||
} | ||
}); | ||
<h3>Baseline</h3> | ||
<ListGroup> | ||
<ListGroupItem href="#/home" active header="ListGroupItem 1 Heading"> | ||
ListGroupItem 1 content | ||
</ListGroupItem> | ||
<ListGroupItem header="ListGroupItem 2 Heading"> | ||
ListGroupItem 2 content | ||
</ListGroupItem> | ||
<ListGroupItem disabled> | ||
ListGroupItem 3 content disabled | ||
</ListGroupItem> | ||
<ListGroupItem bsStyle="success"> | ||
ListGroupItem 4 content success | ||
</ListGroupItem> | ||
<ListGroupItem bsStyle="info"> | ||
ListGroupItem 5 content info | ||
</ListGroupItem> | ||
<ListGroupItem bsStyle="warning"> | ||
ListGroupItem 6 content warning | ||
</ListGroupItem> | ||
<ListGroupItem bsStyle="danger"> | ||
ListGroupItem 7 content danger | ||
</ListGroupItem> | ||
</ListGroup> | ||
|
||
export default NavItemVisual; | ||
<h3>LinkContainer</h3> | ||
<ListGroup> | ||
<LinkContainer to="/list-group-item"> | ||
<ListGroupItem header="ListGroupItem 1 Heading"> | ||
ListGroupItem 1 content | ||
</ListGroupItem> | ||
</LinkContainer> | ||
<LinkContainer to="/home"> | ||
<ListGroupItem header="ListGroupItem 2 Heading"> | ||
ListGroupItem 2 content | ||
</ListGroupItem> | ||
</LinkContainer> | ||
<LinkContainer to="/home" disabled> | ||
<ListGroupItem> | ||
ListGroupItem 3 content disabled | ||
</ListGroupItem> | ||
</LinkContainer> | ||
<LinkContainer to="/home"> | ||
<ListGroupItem bsStyle="success"> | ||
ListGroupItem 4 content success | ||
</ListGroupItem> | ||
</LinkContainer> | ||
<LinkContainer to="/home"> | ||
<ListGroupItem bsStyle="info"> | ||
ListGroupItem 5 content info | ||
</ListGroupItem> | ||
</LinkContainer> | ||
<LinkContainer to="/home"> | ||
<ListGroupItem bsStyle="warning"> | ||
ListGroupItem 6 content warning | ||
</ListGroupItem> | ||
</LinkContainer> | ||
<LinkContainer to="/home"> | ||
<ListGroupItem bsStyle="danger"> | ||
ListGroupItem 7 content danger | ||
</ListGroupItem> | ||
</LinkContainer> | ||
</ListGroup> | ||
</div> | ||
); |
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,33 +1,33 @@ | ||
import React from 'react'; | ||
import {Link} from 'react-router'; | ||
import Nav from 'react-bootstrap/lib/Nav'; | ||
import NavItem from 'react-bootstrap/lib/NavItem'; | ||
import NavItemLink from '../../src/NavItemLink'; | ||
import {Link} from 'react-router'; | ||
|
||
import LinkContainer from '../../src/LinkContainer'; | ||
|
||
export default () => ( | ||
<div> | ||
<Link to="/home">Back to Index</Link> | ||
<h2>NavItem</h2> | ||
|
||
const NavItemVisual = React.createClass({ | ||
handleSelect(selectedKey) { | ||
window.alert('selected ' + selectedKey); | ||
}, | ||
render() { | ||
return ( | ||
<div> | ||
<Link to='home'><-- Back to Index</Link> | ||
<h2>NavItemLink</h2> | ||
<h3>Baseline (Raw React-Bootstrap)</h3> | ||
<Nav bsStyle="pills" activeKey={1} onSelect={this.handleSelect}> | ||
<NavItem eventKey={1} href="/home">NavItem 1 content</NavItem> | ||
<NavItem eventKey={2} title="Item">NavItem 2 content</NavItem> | ||
<NavItem eventKey={3} disabled={true}>NavItem 3 content</NavItem> | ||
</Nav> | ||
<h3>NavItemLink</h3> | ||
<Nav bsStyle="pills"> | ||
<NavItemLink to='nav-item'>NavItemLink 1 content</NavItemLink> | ||
<NavItemLink to='home'>NavItemLink 2 content</NavItemLink> | ||
<NavItemLink to='home' disabled={true}>NavItemLink 3 content</NavItemLink> | ||
</Nav> | ||
</div> | ||
); | ||
} | ||
}); | ||
<h3>Baseline</h3> | ||
<Nav bsStyle="pills" activeKey={1}> | ||
<NavItem eventKey={1}>NavItem 1 content</NavItem> | ||
<NavItem eventKey={2}>NavItem 2 content</NavItem> | ||
<NavItem eventKey={3} disabled>NavItem 3 content</NavItem> | ||
</Nav> | ||
|
||
export default NavItemVisual; | ||
<h3>LinkContainer</h3> | ||
<Nav bsStyle="pills"> | ||
<LinkContainer to="/nav-item"> | ||
<NavItem>NavItem 1 content</NavItem> | ||
</LinkContainer> | ||
<LinkContainer to="/home"> | ||
<NavItem>NavItem 2 content</NavItem> | ||
</LinkContainer> | ||
<LinkContainer to="/home" disabled> | ||
<NavItem>NavItem 3 content</NavItem> | ||
</LinkContainer> | ||
</Nav> | ||
</div> | ||
); |
This file was deleted.
This file was deleted.
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,22 +1,13 @@ | ||
import React from 'react'; | ||
import {Link} from 'react-router'; | ||
|
||
const Home = React.createClass({ | ||
render() { | ||
return ( | ||
<div> | ||
<h2>Index</h2> | ||
<ul> | ||
<li><Link to='button'>ButtonLink</Link></li> | ||
<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> | ||
); | ||
} | ||
}); | ||
|
||
export default Home; | ||
export default () => ( | ||
<div> | ||
<h2>Index</h2> | ||
<ul> | ||
<li><Link to="/button">Button</Link></li> | ||
<li><Link to="/nav-item">NavItem</Link></li> | ||
<li><Link to="/list-group-item">ListGroupItem</Link></li> | ||
</ul> | ||
</div> | ||
); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
import React from 'react'; | ||
import Grid from 'react-bootstrap/lib/Grid'; | ||
import ReactDOM from 'react-dom'; | ||
import {IndexRoute, Route, Router} from 'react-router'; | ||
|
||
import ButtonVisual from './ButtonVisual'; | ||
import Home from './Home'; | ||
import ListGroupItemVisual from './ListGroupItemVisual'; | ||
import NavItemVisual from './NavItemVisual'; | ||
|
||
import 'bootstrap/less/bootstrap.less'; | ||
|
||
const App = ({children}) => ( | ||
<Grid> | ||
<h1>React-Router-Bootstrap Module Visual Test</h1> | ||
{children} | ||
</Grid> | ||
); | ||
|
||
const mountNode = document.createElement('div'); | ||
document.body.appendChild(mountNode); | ||
|
||
ReactDOM.render( | ||
<Router> | ||
<Route path="/" component={App}> | ||
<IndexRoute onEnter={(_, replaceWith) => replaceWith(null, '/home')} /> | ||
<Route path="home" component={Home} /> | ||
|
||
<Route path="button" component={ButtonVisual} /> | ||
<Route path="nav-item" component={NavItemVisual} /> | ||
<Route path="list-group-item" component={ListGroupItemVisual} /> | ||
</Route> | ||
</Router>, | ||
mountNode | ||
); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,24 +1,11 @@ | ||
import path from 'path'; | ||
|
||
module.exports = { | ||
entry: { | ||
visual: ['./tests/visual.js'] | ||
}, | ||
|
||
devtool: 'inline-source-map', | ||
|
||
export default { | ||
output: { | ||
path: path.join(__dirname, 'tests-served/'), | ||
publicPath: '/public/', | ||
filename: '[name].js' | ||
pathinfo: true | ||
}, | ||
|
||
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/} | ||
] | ||
} | ||
}, | ||
devtool: 'inline-source-map' | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import HtmlWebpackPlugin from 'html-webpack-plugin'; | ||
|
||
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/'} | ||
] | ||
}, | ||
plugins: [ | ||
new HtmlWebpackPlugin() | ||
], | ||
devtool: 'eval-source-map' | ||
}; |
This file was deleted.