chore(docs): setActiveFromChild Example reactstrap#977 (reactstrap#1014)

FutureKode · TheSharpieOne · commit 459df03a2775 · 2018-05-14T10:15:27.000-04:00
diff --git a/docs/lib/Components/DropdownsPage.js b/docs/lib/Components/DropdownsPage.js
@@ -15,10 +15,12 @@ import DropdownExample from '../examples/Dropdown';
 import DropdownSizingExample from '../examples/DropdownSizing';
 import CustomDropdownExample from '../examples/CustomDropdown';
 import DropdownUncontrolledExample from '../examples/DropdownUncontrolled';
+import DropdownSetActiveFromChildExample from '../examples/DropdownSetActiveFromChild';
 
 const DropdownExampleSource = require('!!raw!../examples/Dropdown');
 const CustomDropdownExampleSource = require('!!raw!../examples/CustomDropdown');
 const DropdownUncontrolledExampleSource = require('!!raw!../examples/DropdownUncontrolled');
+const DropdownSetActiveFromChildSource = require('!!raw!../examples/DropdownSetActiveFromChild');
 
 export default class DropdownPage extends React.Component {
   constructor(props) {
@@ -381,6 +383,19 @@ DropdownItem.propTypes = {
 </Dropdown>`}
           </PrismCode>
         </pre>
+
+        <SectionTitle>setActiveFromChild</SectionTitle>
+        <p>
+          Use <code>setActiveFromChild</code> prop to automatically set the dropdown to active when any of the dropdown menu items are active. Note: this prop will not work in conjunction with react-router <code>Link</code> and <code>activeClassName</code>.
+        </p>
+        <div className="docs-example">
+          <DropdownSetActiveFromChildExample />
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+            {DropdownSetActiveFromChildSource}
+          </PrismCode>
+        </pre>
       </div>
     );
   }
diff --git a/docs/lib/examples/DropdownSetActiveFromChild.js b/docs/lib/examples/DropdownSetActiveFromChild.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import { Navbar, Nav, NavItem, NavLink, UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+
+export default function Example () {
+  return (
+    <Navbar color="light" light expand="md">
+      <Nav className="ml-auto" navbar>
+        <NavItem>
+          <NavLink href="/components/">Inactive Link</NavLink>
+        </NavItem>
+        <UncontrolledDropdown setActiveFromChild>
+          <DropdownToggle tag="a" className="nav-link" caret>
+            Dropdown
+          </DropdownToggle>
+          <DropdownMenu>
+            <DropdownItem tag="a" href="/blah" active>Link</DropdownItem>
+          </DropdownMenu>
+        </UncontrolledDropdown>
+      </Nav>
+    </Navbar>
+  );
+}
