Merge b3f4b1e into d3fcd8d

reactstrap · Mar 27, 2016 · 690b3ee · 690b3ee
2 parents d3fcd8d + b3f4b1e
commit 690b3ee
Show file tree

Hide file tree

Showing 23 changed files with 680 additions and 11 deletions.
diff --git a/docs/lib/Components/LayoutPage.jsx b/docs/lib/Components/LayoutPage.jsx
@@ -9,7 +9,7 @@ export default class LayoutsPage extends React.Component {
   render() {
     return (
       <div>
-        <Helmet title="Layouts"/>
+        <Helmet title="Layout Components (Container, Row, Col)"/>
         <h3>Layout</h3>
         <div className="docs-example">
           <LayoutExample/>

diff --git a/docs/lib/Components/ModalsPage.jsx b/docs/lib/Components/ModalsPage.jsx
@@ -9,7 +9,7 @@ export default class ModalsPage extends React.Component {
   render() {
     return (
       <div>
-        <Helmet title="Modals"/>
+        <Helmet title="Layout"/>
         <h3>Modals</h3>
         <div className="docs-example">
           <ModalExample/>

diff --git a/docs/lib/Components/NavsPage.jsx b/docs/lib/Components/NavsPage.jsx
@@ -0,0 +1,107 @@
+/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
+import React from 'react';
+import { PrismCode } from 'react-prism';
+import Helmet from 'react-helmet';
+import NavsExample from '../examples/Navs';
+const NavsExampleSource = require('!!raw!../examples/Navs.jsx');
+import NavInlineExample from '../examples/NavInline';
+const NavInlineExampleSource = require('!!raw!../examples/NavInline.jsx');
+import NavTabsExample from '../examples/NavTabs';
+const NavTabsExampleSource = require('!!raw!../examples/NavTabs.jsx');
+import NavPillsExample from '../examples/NavPills';
+const NavPillsExampleSource = require('!!raw!../examples/NavPills.jsx');
+
+export default class NavssPage extends React.Component {
+  render() {
+    return (
+      <div>
+        <Helmet title="Nav Components"/>
+        <h3>Navs</h3>
+        <div className="docs-example">
+          <NavsExample/>
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+            {NavsExampleSource}
+          </PrismCode>
+        </pre>
+        <h4>Nav Properties</h4>
+        <pre>
+          <PrismCode className="language-jsx">
+{`Nav.propTypes = {
+  inline: PropTypes.bool,
+  disabled: PropTypes.bool,
+  tabs: PropTypes.bool,
+  pills: PropTypes.bool,
+  stacked: PropTypes.bool,
+  navbar: PropTypes.bool,
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
+  // pass in custom element to use
+}`}
+          </PrismCode>
+        </pre>
+        <h4>NavItem Properties</h4>
+        <pre>
+          <PrismCode className="language-jsx">
+{`NavItem.propTypes = {
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
+  // pass in custom element to use
+}`}
+          </PrismCode>
+        </pre>
+        <h4>NavLink Properties</h4>
+        <pre>
+          <PrismCode className="language-jsx">
+{`NavLink.propTypes = {
+  disabled: PropTypes.bool,
+  active: PropTypes.bool,
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
+  // pass in custom element to use
+}`}
+          </PrismCode>
+        </pre>
+        <h4>NavDropdown Properties</h4>
+        <pre>
+          <PrismCode className="language-jsx">
+{`NavDropdown.propTypes = {
+  disabled: PropTypes.bool,
+  dropup: PropTypes.bool,
+  group: PropTypes.bool,
+  isOpen: PropTypes.bool,
+  tag: PropTypes.string,
+  tether: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
+  toggle: PropTypes.func
+};`}
+          </PrismCode>
+        </pre>
+        <h3>Inline</h3>
+        <div className="docs-example">
+          <NavInlineExample/>
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+            {NavInlineExampleSource}
+          </PrismCode>
+        </pre>
+        <h3>Tabs</h3>
+        <div className="docs-example">
+          <NavTabsExample/>
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+            {NavTabsExampleSource}
+          </PrismCode>
+        </pre>
+        <h3>Pills</h3>
+        <div className="docs-example">
+          <NavPillsExample/>
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+            {NavPillsExampleSource}
+          </PrismCode>
+        </pre>
+      </div>
+    );
+  }
+}
diff --git a/docs/lib/Components/index.jsx b/docs/lib/Components/index.jsx
@@ -39,6 +39,10 @@ class Components extends React.Component {
           name: 'Labels',
           to: '/components/labels/'
         },
+        {
+          name: 'Navs',
+          to: '/components/navs/'
+        },
         {
           name: 'Tooltips',
           to: '/components/tooltips/'

diff --git a/docs/lib/UI/Footer.jsx b/docs/lib/UI/Footer.jsx
@@ -7,11 +7,10 @@ export default () => {
       <Container fluid>
         <Row>
           <Col className="text-xs-center">
-            <p>
+            <p className="social">
               <iframe src="https://ghbtns.com/github-btn.html?user=reactstrap&repo=reactstrap&type=star&count=true" frameBorder="0" scrolling="0" width="100" height="20px"/>
               <iframe src="https://ghbtns.com/github-btn.html?user=reactstrap&repo=reactstrap&type=fork&count=true" frameBorder="0" scrolling="0" width="100" height="20px"/>
             </p>
-            <p className="social"><a href="https://travis-ci.org/reactstrap/reactstrap"><img src="https://travis-ci.org/reactstrap/reactstrap.svg?branch=master" alt="Build Status"/></a> <a href="https://coveralls.io/github/reactstrap/reactstrap?branch=master"><img src="https://coveralls.io/repos/github/reactstrap/reactstrap/badge.svg?branch=master" alt="Coverage Status"/></a> <a href="https://www.npmjs.com/package/reactstrap"><img src="https://badge.fury.io/js/reactstrap.svg" alt="npm version" height="20"/></a></p>
           </Col>
         </Row>
       </Container>

diff --git a/docs/lib/app.jsx b/docs/lib/app.jsx
@@ -39,7 +39,6 @@ export default (locals, callback) => {
     let markup = `<!DOCTYPE html>
       <html>
         <head>
-          <base href="/" />
           <meta charset="utf-8">
           <meta http-equiv="X-UA-Compatible" content="IE=edge">
           <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

diff --git a/docs/lib/examples/NavInline.jsx b/docs/lib/examples/NavInline.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Nav, NavItem, NavLink } from 'reactstrap';
+
+export default class Example extends React.Component {
+  render() {
+    return (
+      <div>
+        <p>List Based</p>
+        <Nav inline>
+          <NavItem>
+            <NavLink href="#">Link</NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink href="#">Link</NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink href="#">Another Link</NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink disabled href="#">Disabled Link</NavLink>
+          </NavItem>
+        </Nav>
+        <hr/>
+        <p>Link based</p>
+        <Nav inline>
+          <NavLink href="#">Link</NavLink> <NavLink href="#">Link</NavLink> <NavLink href="#">Another Link</NavLink> <NavLink disabled href="#">Disabled Link</NavLink>
+        </Nav>
+      </div>
+    );
+  }
+}
diff --git a/docs/lib/examples/NavPills.jsx b/docs/lib/examples/NavPills.jsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { Nav, NavItem, NavDropdown, DropdownItem, DropdownToggle, DropdownMenu, NavLink } from 'reactstrap';
+
+export default class Example extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      dropdownOpen: false
+    };
+  }
+
+  toggle() {
+    this.setState({
+      dropdownOpen: !this.state.dropdownOpen
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <Nav pills>
+          <NavItem>
+            <NavLink href="#" active>Link</NavLink>
+          </NavItem>
+          <NavDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
+            <DropdownToggle caret>
+              <NavLink href="#">Dropdown</NavLink>
+            </DropdownToggle>
+            <DropdownMenu>
+              <DropdownItem header>Header</DropdownItem>
+              <DropdownItem disabled>Action</DropdownItem>
+              <DropdownItem>Another Action</DropdownItem>
+              <DropdownItem divider/>
+              <DropdownItem>Another Action</DropdownItem>
+            </DropdownMenu>
+          </NavDropdown>
+          <NavItem>
+            <NavLink href="#">Link</NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink href="#">Another Link</NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink disabled href="#">Disabled Link</NavLink>
+          </NavItem>
+        </Nav>
+      </div>
+    );
+  }
+}
diff --git a/docs/lib/examples/NavTabs.jsx b/docs/lib/examples/NavTabs.jsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { Nav, NavItem, NavDropdown, DropdownItem, DropdownToggle, DropdownMenu, NavLink } from 'reactstrap';
+
+export default class Example extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      dropdownOpen: false
+    };
+  }
+
+  toggle() {
+    this.setState({
+      dropdownOpen: !this.state.dropdownOpen
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <Nav tabs>
+          <NavItem>
+            <NavLink href="#" active>Link</NavLink>
+          </NavItem>
+          <NavDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
+            <DropdownToggle caret>
+              <NavLink href="#">Dropdown</NavLink>
+            </DropdownToggle>
+            <DropdownMenu>
+              <DropdownItem header>Header</DropdownItem>
+              <DropdownItem disabled>Action</DropdownItem>
+              <DropdownItem>Another Action</DropdownItem>
+              <DropdownItem divider/>
+              <DropdownItem>Another Action</DropdownItem>
+            </DropdownMenu>
+          </NavDropdown>
+          <NavItem>
+            <NavLink href="#">Link</NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink href="#">Another Link</NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink disabled href="#">Disabled Link</NavLink>
+          </NavItem>
+        </Nav>
+      </div>
+    );
+  }
+}
diff --git a/docs/lib/examples/Navs.jsx b/docs/lib/examples/Navs.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Nav, NavItem, NavLink } from 'reactstrap';
+
+export default class Example extends React.Component {
+  render() {
+    return (
+      <div>
+        <p>List Based</p>
+        <Nav>
+          <NavItem>
+            <NavLink href="#">Link</NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink href="#">Link</NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink href="#">Another Link</NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink disabled href="#">Disabled Link</NavLink>
+          </NavItem>
+        </Nav>
+        <hr/>
+        <p>Link Based</p>
+        <Nav>
+          <NavLink href="#">Link</NavLink> <NavLink href="#">Link</NavLink> <NavLink href="#">Another Link</NavLink> <NavLink disabled href="#">Disabled Link</NavLink>
+        </Nav>
+      </div>
+    );
+  }
+}
diff --git a/docs/lib/routes.jsx b/docs/lib/routes.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Route, IndexRoute, IndexRedirect } from 'react-router';
 import Home from './Home';
 import LayoutPage from './Components/LayoutPage';
+import NavsPage from './Components/NavsPage';
 import ButtonsPage from './Components/ButtonsPage';
 import ButtonGroupPage from './Components/ButtonGroupPage';
 import ButtonDropdownPage from './Components/ButtonDropdownPage';
@@ -28,6 +29,7 @@ const routes = (
       <Route path="labels/" component={ LabelsPage } />
       <Route path="modals/" component={ ModalsPage } />
       <Route path="layout/" component={ LayoutPage } />
+      <Route path="navs/" component={ NavsPage } />
     </Route>
     <Route path="*" component={NotFound} />
   </Route>

diff --git a/lib/Dropdown.jsx b/lib/Dropdown.jsx
@@ -124,7 +124,7 @@ class Dropdown extends React.Component {
   }
 
   renderChildren() {
-    let props = omit(this.props, ['children', 'className', 'id']);
+    let props = omit(this.props, ['children', 'className', 'id', 'tag']);
     props.toggle = this.toggle;
 
     return React.Children.map(React.Children.toArray(this.props.children), (child) => {

diff --git a/lib/DropdownToggle.jsx b/lib/DropdownToggle.jsx
@@ -10,13 +10,15 @@ const propTypes = {
   onClick: PropTypes.func,
   toggle: PropTypes.func,
   'data-toggle': PropTypes.string,
-  'aria-haspopup': PropTypes.bool
+  'aria-haspopup': PropTypes.bool,
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
 };
 
 const defaultProps = {
   'data-toggle': 'dropdown',
   'aria-haspopup': true,
-  color: 'secondary'
+  color: 'secondary',
+  tag: 'button'
 };
 
 class DropdownToggle extends React.Component {
@@ -41,7 +43,7 @@ class DropdownToggle extends React.Component {
   }
 
   render() {
-    const { className, children, caret, color, ...props } = this.props;
+    const { className, children, caret, color, 'tag': Tag, ...props } = this.props;
     const classes = classNames(
       className,
       {
@@ -66,13 +68,13 @@ class DropdownToggle extends React.Component {
     }
 
     return (
-      <button {...props}
+      <Tag {...props}
         className={buttonClasses}
         onClick={this.onClick}
         aria-haspopup="true"
         aria-expanded={props.isOpen}>
         {children}
-      </button>
+      </Tag>
     );
   }
 }