diff --git a/docs/src/app/components/pages/components/drop-down-menu.jsx b/docs/src/app/components/pages/components/drop-down-menu.jsx index 4f3df813b1fc6d..15acf517d88335 100644 --- a/docs/src/app/components/pages/components/drop-down-menu.jsx +++ b/docs/src/app/components/pages/components/drop-down-menu.jsx @@ -83,6 +83,12 @@ class DropDownMenuPage extends React.Component { type: 'object', header: 'optional', desc: 'Overrides the inline-styles of DropDownMenu\'s root element.' + }, + { + name: 'disabled', + type: 'bool', + header: 'default: false', + desc: 'Disables the menu.' } ] }, diff --git a/src/drop-down-menu.jsx b/src/drop-down-menu.jsx index 975a30f96db49b..cee002f7d8f885 100644 --- a/src/drop-down-menu.jsx +++ b/src/drop-down-menu.jsx @@ -24,6 +24,7 @@ let DropDownMenu = React.createClass({ displayMember: React.PropTypes.string, valueMember: React.PropTypes.string, autoWidth: React.PropTypes.bool, + disabled: React.PropTypes.bool, onChange: React.PropTypes.func, menuItems: React.PropTypes.array.isRequired, menuItemStyle: React.PropTypes.object, @@ -36,6 +37,7 @@ let DropDownMenu = React.createClass({ getDefaultProps() { return { autoWidth: true, + disabled: false, valueMember: 'payload', displayMember: 'text', }; @@ -64,6 +66,7 @@ let DropDownMenu = React.createClass({ }, getStyles(){ + const {disabled} = this.props; let zIndex = 5; // As AppBar let spacing = this.context.muiTheme.spacing; let accentColor = this.context.muiTheme.component.dropDownMenu.accentColor; @@ -78,7 +81,7 @@ let DropDownMenu = React.createClass({ outline: 'none', }, control: { - cursor: 'pointer', + cursor: disabled ? 'not-allowed' : 'pointer', position: 'static', height: '100%', }, @@ -102,7 +105,7 @@ let DropDownMenu = React.createClass({ paddingLeft: spacing.desktopGutter, top: 0, opacity: 1, - color: this.context.muiTheme.palette.textColor, + color: disabled ? this.context.muiTheme.palette.disabledColor : this.context.muiTheme.palette.textColor, }, underline: { borderTop: 'solid 1px ' + accentColor, @@ -240,7 +243,9 @@ let DropDownMenu = React.createClass({ }, _onControlClick() { - this.setState({ open: !this.state.open }); + if (!this.props.disabled) { + this.setState({ open: !this.state.open }); + } }, _onKeyDown(e) {