feat(Dropdown): Add active prop to Dropdown (#895)

Fixes #827
reactstrap · Mar 7, 2018 · 45de5c5 · 45de5c5
1 parent 0648cc2
commit 45de5c5
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 0 deletions.
diff --git a/docs/lib/Components/DropdownsPage.js b/docs/lib/Components/DropdownsPage.js
@@ -61,6 +61,7 @@ export default class DropdownPage extends React.Component {
   isOpen: PropTypes.bool,
   // For Dropdown usage inside a Nav
   nav: PropTypes.bool,
+  active: PropTypes.bool,
   // For Dropdown usage inside a Navbar (disables popper)
   inNavbar: PropTypes.bool,
   tag: PropTypes.string, // default: 'div' unless nav=true, then 'li'

diff --git a/src/Dropdown.js b/src/Dropdown.js
@@ -15,6 +15,7 @@ const propTypes = {
   group: PropTypes.bool,
   isOpen: PropTypes.bool,
   nav: PropTypes.bool,
+  active: PropTypes.bool,
   addonType: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['prepend', 'append'])]),
   size: PropTypes.string,
   tag: PropTypes.string,
@@ -29,6 +30,7 @@ const defaultProps = {
   isOpen: false,
   direction: 'down',
   nav: false,
+  active: false,
   addonType: false,
   inNavbar: false,
 };
@@ -179,6 +181,7 @@ class Dropdown extends React.Component {
       group,
       size,
       nav,
+      active,
       addonType,
       ...attrs
     } = omit(this.props, ['toggle', 'disabled', 'inNavbar', 'direction']);
@@ -190,6 +193,7 @@ class Dropdown extends React.Component {
     const classes = mapToCssModules(classNames(
       className,
       direction !== 'down' && `drop${direction}`,
+      nav && active ? 'active' : false,
       {
         [`input-group-${addonType}`]: addonType,
         'btn-group': group,

diff --git a/src/__tests__/Dropdown.spec.js b/src/__tests__/Dropdown.spec.js
@@ -806,6 +806,14 @@ describe('Dropdown', () => {
     });
   });
 
+  describe('active', () => {
+    it('should render an active class', () => {
+      const wrapper = shallow(<Dropdown active nav />);
+
+      expect(wrapper.hasClass('active')).toBe(true);
+    });
+  });
+
   it('should render with correct class when direction is set', () => {
     const dropup = shallow(<Dropdown direction="up" />);
     const dropupProp = shallow(<Dropdown dropup />);