diff --git a/docs/assets/docs.css b/docs/assets/docs.css index 16afe4d34d..50c7802105 100644 --- a/docs/assets/docs.css +++ b/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 diff --git a/docs/examples/MenuItem.js b/docs/examples/MenuItem.js new file mode 100644 index 0000000000..ac71bb8dce --- /dev/null +++ b/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 = ( +
+ +
+); + +React.render(MenuItems, mountNode); diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js index 50d3a6756e..ea408c7037 100644 --- a/docs/src/ComponentsPage.js +++ b/docs/src/ComponentsPage.js @@ -170,6 +170,25 @@ const ComponentsPage = React.createClass({ + {/* Menu Item */} +
+

Menu Item MenudItem

+

This is a component used in other components (see Buttons, Navbars).

+

It supports the basic anchor properties href, target, title.

+

It also supports different properties of the normal Bootstrap MenuItem. +

+

The callback is called with the following arguments: eventKey, href and target

+

+ +
+ + {/* Panels */}

Panels Panel, PanelGroup, Accordion

@@ -607,6 +626,7 @@ const ComponentsPage = React.createClass({ getValue() will not work when used this way.

+
@@ -623,6 +643,7 @@ const ComponentsPage = React.createClass({ Button groups Button dropdowns + Menu Item Panels Modals diff --git a/docs/src/Samples.js b/docs/src/Samples.js index 712023984e..a9dcb3b496 100644 --- a/docs/src/Samples.js +++ b/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') }; diff --git a/src/MenuItem.js b/src/MenuItem.js index d5bdce7a89..aa8b7c65b5 100644 --- a/src/MenuItem.js +++ b/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; diff --git a/test/MenuItemSpec.js b/test/MenuItemSpec.js index 703a1f63d9..9a8c0a533d 100644 --- a/test/MenuItemSpec.js +++ b/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( + + Title + + ); + assert.ok(instance.getDOMNode().className.match(/\bdisabled\b/)); + }); });