Merge pull request react-bootstrap#606 from dozoisch/246_disabled_menu_items

[added] property disabled on MenuItem

Author: mtscout6

docs/assets/docs.css

@@ -29,6 +29,7 @@
  * Responsive tests
  * Glyphicons
  * Customizer
+ * MenuItem
  * Miscellaneous
  */
 
@@ -1127,6 +1128,14 @@ h1[id] {
   overflow: auto;
 }
 
+/* MenuItem */
+.bs-example .dropdown-menu.open {
+  position: static;
+  display: block;
+  margin-bottom: 5px;
+  clear: left;
+}
+
 
 /*
  * Code snippets

docs/examples/MenuItem.js

@@ -0,0 +1,26 @@
+function onSelectAlert(eventKey, href, target) {
+  alert('Alert from menu item.\neventKey: "' + eventKey + '"\nhref: "' + href + '"');
+}
+
+function preventDefault() {}
+
+const MenuItems = (
+  <div className="clearfix">
+    <ul className="dropdown-menu open">
+      <MenuItem header>Header</MenuItem>
+      <MenuItem onSelect={preventDefault}>link</MenuItem>
+      <MenuItem divider/>
+      <MenuItem header>Header</MenuItem>
+      <MenuItem onSelect={preventDefault}>link</MenuItem>
+      <MenuItem disabled>disabled</MenuItem>
+      <MenuItem title="See? I have a title." onSelect={preventDefault}>
+        link with title
+      </MenuItem>
+      <MenuItem eventKey={1} href="#someHref" onSelect={onSelectAlert}>
+        link that alerts
+      </MenuItem>
+    </ul>
+  </div>
+);
+
+React.render(MenuItems, mountNode);

docs/src/ComponentsPage.js

@@ -170,6 +170,25 @@ const ComponentsPage = React.createClass({
                   <ReactPlayground codeText={Samples.SplitButtonRight} />
                 </div>
 
+                {/* Menu Item */}
+                <div className='bs-docs-section'>
+                  <h1 id='menu-item' className='page-header'>Menu Item <small> MenudItem</small></h1>
+                  <p>This is a component used in other components (see <a href="buttons">Buttons</a>, <a href="#navbars">Navbars</a>).</p>
+                  <p>It supports the basic anchor properties <code>href</code>, <code>target</code>, <code>title</code>.</p>
+                  <p>It also supports different properties of the normal Bootstrap MenuItem.
+                    <ul>
+                      <li><code>header</code>: To add a header label to sections</li>
+                      <li><code>divider</code>: Adds an horizontal divider between sections</li>
+                      <li><code>disabled</code>: shows the item as disabled, and prevents the onclick</li>
+                      <li><code>eventKey</code>: passed to the callback</li>
+                      <li><code>onSelect</code>: a callback that is called when the user clicks the item.</li>
+                    </ul>
+                  <p>The callback is called with the following arguments: <code>eventKey</code>, <code>href</code> and <code>target</code></p>
+                  </p>
+                  <ReactPlayground codeText={Samples.MenuItem} />
+                </div>
+
+              {/* Panels */}
                 <div className='bs-docs-section'>
                   <h1 id='panels' className='page-header'>Panels <small>Panel, PanelGroup, Accordion</small></h1>
 
@@ -607,6 +626,7 @@ const ComponentsPage = React.createClass({
                   <code>getValue()</code> will not work when used this way.</p>
                   <ReactPlayground codeText={Samples.InputWrapper} />
                 </div>
+
               </div>
 
               <div className='col-md-3'>
@@ -623,6 +643,7 @@ const ComponentsPage = React.createClass({
                     <SubNav href='#buttons' key={1} text='Buttons'>
                       <NavItem href='#btn-groups' key={2}>Button groups</NavItem>
                       <NavItem href='#btn-dropdowns' key={3}>Button dropdowns</NavItem>
+                      <NavItem href='#menu-item' key={25}>Menu Item</NavItem>
                     </SubNav>
                     <NavItem href='#panels' key={4}>Panels</NavItem>
                     <NavItem href='#modals' key={5}>Modals</NavItem>

docs/src/Samples.js

@@ -96,5 +96,6 @@ export default {
   InputSizes:                    require('fs').readFileSync(__dirname + '/../examples/InputSizes.js', 'utf8'),
   InputValidation:               require('fs').readFileSync(__dirname + '/../examples/InputValidation.js', 'utf8'),
   InputHorizontal:               require('fs').readFileSync(__dirname + '/../examples/InputHorizontal.js', 'utf8'),
-  InputWrapper:                  require('fs').readFileSync(__dirname + '/../examples/InputWrapper.js', 'utf8')
+  InputWrapper:                  require('fs').readFileSync(__dirname + '/../examples/InputWrapper.js', 'utf8'),
+  MenuItem:                      require('fs').readFileSync(__dirname + '/../examples/MenuItem.js', 'utf8')
 };

src/MenuItem.js

@@ -10,7 +10,8 @@ const MenuItem = React.createClass({
     target:    React.PropTypes.string,
     onSelect:  React.PropTypes.func,
     eventKey:  React.PropTypes.any,
-    active:    React.PropTypes.bool
+    active:    React.PropTypes.bool,
+    disabled:  React.PropTypes.bool
   },
 
   getDefaultProps() {
@@ -21,6 +22,10 @@ const MenuItem = React.createClass({
   },
 
   handleClick(e) {
+    if (this.props.disabled) {
+      e.preventDefault();
+      return;
+    }
     if (this.props.onSelect) {
       e.preventDefault();
       this.props.onSelect(this.props.eventKey, this.props.href, this.props.target);
@@ -39,7 +44,8 @@ const MenuItem = React.createClass({
     let classes = {
         'dropdown-header': this.props.header,
         'divider': this.props.divider,
-        'active': this.props.active
+        'active': this.props.active,
+        'disabled': this.props.disabled
       };
 
     let children = null;

test/MenuItemSpec.js

@@ -107,4 +107,13 @@ describe('MenuItem', function () {
     );
     ReactTestUtils.Simulate.click(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'a'));
   });
+
+  it('Should be `disabled` link', function () {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <MenuItem disabled>
+        Title
+      </MenuItem>
+    );
+    assert.ok(instance.getDOMNode().className.match(/\bdisabled\b/));
+  });
 });