feat(DropdownToggle): add nav prop to enable Nav specific functionality (#197)

eddywashere · web-flow · commit 9b28cbca543e · 2016-10-22T20:10:32.000-04:00
* feat(DropdownToggle): add nav prop to enable nav functionality

* refactor(DropdownToggle): simplify tag
diff --git a/docs/lib/Components/DropdownsPage.js b/docs/lib/Components/DropdownsPage.js
@@ -69,7 +69,8 @@ DropdownToggle.propTypes = {
   onClick: PropTypes.func,
   'data-toggle': PropTypes.string,
   'aria-haspopup': PropTypes.bool,
-
+  // For DropdownToggle usage inside a Nav
+  nav: PropTypes.bool,
   // Defaults to Button component
   tag: PropTypes.any
 };`}
diff --git a/docs/lib/examples/NavPills.js b/docs/lib/examples/NavPills.js
@@ -25,7 +25,7 @@ export default class Example extends React.Component {
             <NavLink href="#" active>Link</NavLink>
           </NavItem>
           <NavDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
-            <DropdownToggle tag={NavLink} href="#" onClick={(e) => e.preventDefault()} caret>
+            <DropdownToggle nav caret>
               Dropdown
             </DropdownToggle>
             <DropdownMenu>
diff --git a/docs/lib/examples/NavTabs.js b/docs/lib/examples/NavTabs.js
@@ -25,7 +25,7 @@ export default class Example extends React.Component {
             <NavLink href="#" active>Link</NavLink>
           </NavItem>
           <NavDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
-            <DropdownToggle tag={NavLink} href="#" onClick={(e) => e.preventDefault()} caret>
+            <DropdownToggle nav caret>
               Dropdown
             </DropdownToggle>
             <DropdownMenu>
diff --git a/src/DropdownToggle.js b/src/DropdownToggle.js
@@ -11,7 +11,8 @@ const propTypes = {
   'data-toggle': PropTypes.string,
   'aria-haspopup': PropTypes.bool,
   split: PropTypes.bool,
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  nav: PropTypes.bool
 };
 
 const defaultProps = {
@@ -39,6 +40,10 @@ class DropdownToggle extends React.Component {
       return;
     }
 
+    if (this.props.nav) {
+      e.preventDefault();
+    }
+
     if (this.props.onClick) {
       this.props.onClick(e);
     }
@@ -47,18 +52,24 @@ class DropdownToggle extends React.Component {
   }
 
   render() {
-    const { className, caret, split, tag: Tag, ...props } = this.props;
+    const { className, caret, split, nav, tag: Tag, ...props } = this.props;
     const ariaLabel = props['aria-label'] || 'Toggle Dropdown';
     const classes = classNames(
       className,
       {
         'dropdown-toggle': caret || split,
         'dropdown-toggle-split': split,
         active: this.context.isOpen,
+        'nav-link': nav
       }
     );
     const children = props.children || <span className="sr-only">{ariaLabel}</span>;
 
+    if (nav) {
+      props.tag = 'a';
+      props.href = '#';
+    }
+
     return (
       <Tag
         {...props}
diff --git a/src/__tests__/DropdownToggle.spec.js b/src/__tests__/DropdownToggle.spec.js
@@ -153,4 +153,38 @@ describe('DropdownToggle', () => {
       expect(e.preventDefault).toHaveBeenCalled();
     });
   });
+
+  describe('nav', () => {
+    it('should add .nav-link class', () => {
+      const wrapper = mount(
+        <DropdownToggle nav>Ello world</DropdownToggle>,
+        {
+          context: {
+            isOpen: isOpen,
+            toggle: toggle
+          }
+        }
+      );
+
+      expect(wrapper.find('a').length).toBe(1);
+      expect(wrapper.find('.nav-link').length).toBe(1);
+    });
+
+    it('should preventDefault', () => {
+      const e = { preventDefault: jasmine.createSpy('preventDefault') };
+      const wrapper = mount(
+        <DropdownToggle nav>Ello world</DropdownToggle>,
+        {
+          context: {
+            isOpen: isOpen,
+            toggle: toggle
+          }
+        }
+      );
+      const instance = wrapper.instance();
+
+      instance.onClick(e);
+      expect(e.preventDefault).toHaveBeenCalled();
+    });
+  });
 });
