feat(Dropdown): setActiveFromChild prop (#977)

reactstrap · May 1, 2018 · 1b47757 · 1b47757
1 parent ccdb7f2
commit 1b47757
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 1 deletion.
diff --git a/docs/lib/Components/DropdownsPage.js b/docs/lib/Components/DropdownsPage.js
@@ -65,7 +65,8 @@ export default class DropdownPage extends React.Component {
   // For Dropdown usage inside a Navbar (disables popper)
   inNavbar: PropTypes.bool,
   tag: PropTypes.string, // default: 'div' unless nav=true, then 'li'
-  toggle: PropTypes.func
+  toggle: PropTypes.func,
+  setActiveFromChild: PropTypes.bool
 };
 
 DropdownToggle.propTypes = {

diff --git a/src/Dropdown.js b/src/Dropdown.js
@@ -24,6 +24,7 @@ const propTypes = {
   className: PropTypes.string,
   cssModule: PropTypes.object,
   inNavbar: PropTypes.bool,
+  setActiveFromChild: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -33,6 +34,7 @@ const defaultProps = {
   active: false,
   addonType: false,
   inNavbar: false,
+  setActiveFromChild: false
 };
 
 const childContextTypes = {
@@ -181,6 +183,7 @@ class Dropdown extends React.Component {
       group,
       size,
       nav,
+      setActiveFromChild,
       active,
       addonType,
       ...attrs
@@ -190,10 +193,20 @@ class Dropdown extends React.Component {
 
     attrs.tag = attrs.tag || (nav ? 'li' : 'div');
 
+    let subItemIsActive = false;
+    if (setActiveFromChild) {
+      React.Children.map(this.props.children[1].props.children,
+        (dropdownItem) => {
+          if (dropdownItem.props.active) subItemIsActive = true;
+        }
+      );
+    }
+
     const classes = mapToCssModules(classNames(
       className,
       direction !== 'down' && `drop${direction}`,
       nav && active ? 'active' : false,
+      setActiveFromChild && subItemIsActive ? 'active' : false,
       {
         [`input-group-${addonType}`]: addonType,
         'btn-group': group,
@@ -203,6 +216,7 @@ class Dropdown extends React.Component {
         'nav-item': nav
       }
     ), cssModule);
+
     return <Manager {...attrs} className={classes} onKeyDown={this.handleKeyDown} />;
   }
 }

diff --git a/src/__tests__/Dropdown.spec.js b/src/__tests__/Dropdown.spec.js
@@ -812,6 +812,23 @@ describe('Dropdown', () => {
 
       expect(wrapper.hasClass('active')).toBe(true);
     });
+
+    it('should render an active class when a child DropdownItem is active IF setActiveFromChild is true', () => {
+      const wrapper = shallow(
+        <Dropdown nav inNavbar setActiveFromChild toggle={toggle}>
+          <DropdownToggle nav caret>
+            Options
+          </DropdownToggle>
+          <DropdownMenu>
+            <DropdownItem active>
+              Test
+            </DropdownItem>
+          </DropdownMenu>
+        </Dropdown>
+      );
+
+      expect(wrapper.hasClass('active')).toBe(true);
+    });
   });
 
   it('should render with correct class when direction is set', () => {