[added] Active property to MenuItem component

kyletsang · May 16, 2015 · 0904adc · 0904adc
1 parent fb9b3bf
commit 0904adc
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/docs/examples/DropdownButtonBasic.js b/docs/examples/DropdownButtonBasic.js
@@ -5,7 +5,7 @@ function renderDropdownButton (title, i) {
     <DropdownButton bsStyle={title.toLowerCase()} title={title} key={i}>
       <MenuItem eventKey='1'>Action</MenuItem>
       <MenuItem eventKey='2'>Another action</MenuItem>
-      <MenuItem eventKey='3'>Something else here</MenuItem>
+      <MenuItem eventKey='3' active={true}>Active Item</MenuItem>
       <MenuItem divider />
       <MenuItem eventKey='4'>Separated link</MenuItem>
     </DropdownButton>

diff --git a/src/MenuItem.js b/src/MenuItem.js
@@ -9,12 +9,14 @@ const MenuItem = React.createClass({
     title:     React.PropTypes.string,
     target:    React.PropTypes.string,
     onSelect:  React.PropTypes.func,
-    eventKey:  React.PropTypes.any
+    eventKey:  React.PropTypes.any,
+    active:    React.PropTypes.bool
   },
 
   getDefaultProps() {
     return {
-      href: '#'
+      href: '#',
+      active: false
     };
   },
 
@@ -36,7 +38,8 @@ const MenuItem = React.createClass({
   render() {
     let classes = {
         'dropdown-header': this.props.header,
-        'divider': this.props.divider
+        'divider': this.props.divider,
+        'active': this.props.active
       };
 
     let children = null;

diff --git a/test/MenuItemSpec.js b/test/MenuItemSpec.js
@@ -18,7 +18,8 @@ describe('MenuItem', function () {
       <MenuItem
         className="test-class"
         href="#hi-mom!"
-        title="hi mom!">
+        title="hi mom!"
+        active={true}>
         Title
       </MenuItem>
     );
@@ -27,6 +28,7 @@ describe('MenuItem', function () {
     assert(node.className.match(/\btest-class\b/));
     assert.equal(node.getAttribute('href'), null);
     assert.equal(node.getAttribute('title'), null);
+    assert.ok(node.className.match(/\bactive\b/));
 
     let anchorNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'a').getDOMNode();
     assert.notOk(anchorNode.className.match(/\btest-class\b/));