Skip to content

Commit

Permalink
Merge pull request #402 from jkruder/disable-menu-items
Browse files Browse the repository at this point in the history 
Looks great! Thanks @jkruder !
  • Loading branch information
@mmrtnz
mmrtnz committed Mar 13, 2015
2 parents c348795 + 285cbf3 commit aacfbc1
Show file tree
Hide file tree
Showing 14 changed files with 178 additions and 67 deletions.
14 changes: 13 additions & 1 deletion docs/src/app/components/pages/components/left-nav.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,9 @@ var LeftNavPage = React.createClass({
{ route: 'css-framework', text: 'CSS Framework' },
{ route: 'components', text: 'Components' },
{ type: MenuItem.Types.SUBHEADER, text: 'Resources' },
{ type: MenuItem.Types.LINK, payload: 'https://github.com/callemall/material-ui', text: 'GitHub' }
{ type: MenuItem.Types.LINK, payload: 'https://github.com/callemall/material-ui', text: 'GitHub' },
{ text: 'Disabled', disabled: true },
{ type: MenuItem.Types.LINK, payload: 'https://www.google.com', text: 'Disabled Link', disabled: true }
];

var code =
Expand All @@ -34,6 +36,16 @@ var LeftNavPage = React.createClass({
' payload: \'https://github.com/callemall/material-ui\', \n' +
' text: \'GitHub\' \n' +
' },\n' +
' { \n' +
' text: \'Disabled\', \n' +
' disabled: true \n' +
' },\n' +
' { \n' +
' type: MenuItem.Types.LINK, \n' +
' payload: \'https://www.google.com\', \n' +
' text: \'Disabled Link\', \n' +
' disabled: true \n' +
' },\n' +
'];\n\n' +
'//Docked Left Nav\n' +
'<LeftNav menuItems={menuItems} />\n\n' +
Expand Down
56 changes: 28 additions & 28 deletions docs/src/app/components/pages/components/menus.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,27 +31,27 @@ var nestedMenuItems = [
{ type: mui.MenuItem.Types.NESTED, text: 'Reports', items: [
{ payload: '1', text: 'Nested Item 1' },
{ type: mui.MenuItem.Types.NESTED, text: 'Nested Item 2', items: [
{ payload: '1', text: 'Nested Item 3' },
{ type: mui.MenuItem.Types.NESTED, text: 'Nested Item 4', items: [
{ payload: '1', text: 'Nested Item 5' },
{ payload: '3', text: 'Nested Item 6' }
{ payload: '1', text: 'Nested Item 2.1' },
{ type: mui.MenuItem.Types.NESTED, text: 'Nested Item 2.2', items: [
{ payload: '1', text: 'Nested Item 2.2.1' },
{ payload: '3', text: 'Nested Item 2.2.2' }
] },
{ payload: '3', text: 'Nested Item 7' }
{ payload: '3', text: 'Nested Item 2.3' }
] },
{ payload: '3', text: 'Nested Item 9' },
{ type: mui.MenuItem.Types.NESTED, text: 'Nested Item 2', items: [
{ payload: '1', text: 'Nested Item 3' },
{ type: mui.MenuItem.Types.NESTED, text: 'Nested Item 4', items: [
{ payload: '1', text: 'Nested Item 5' },
{ payload: '3', text: 'Nested Item 6' }
{ payload: '3', text: 'Nested Item 3' },
{ type: mui.MenuItem.Types.NESTED, text: 'Nested Item 4', items: [
{ payload: '1', text: 'Nested Item 4.1' },
{ type: mui.MenuItem.Types.NESTED, text: 'Nested Item 4.2', items: [
{ payload: '1', text: 'Nested Item 4.2.1', disabled: true },
{ payload: '3', text: 'Nested Item 4.2.2' }
] },
{ payload: '3', text: 'Nested Item 7' }
{ payload: '3', text: 'Nested Item 4.3' }
] },
{ payload: '4', text: 'Nested Item 10' }
{ payload: '4', text: 'Nested Item 5' }
] },
{ payload: '1', text: 'Audio Library'},
{ payload: '2', text: 'Settings'},
{ payload: '3', text: 'Logout'}
{ payload: '3', text: 'Logout', disabled: true}
];


Expand Down Expand Up @@ -160,27 +160,27 @@ var MenusPage = React.createClass({
" { type: mui.MenuItem.Types.NESTED, text: 'Reports', items: [\n" +
" { payload: '1', text: 'Nested Item 1' },\n" +
" { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 2', items: [\n" +
" { payload: '1', text: 'Nested Item 3' },\n" +
" { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 4', items: [\n" +
" { payload: '1', text: 'Nested Item 5' },\n" +
" { payload: '3', text: 'Nested Item 6' }\n" +
" { payload: '1', text: 'Nested Item 2.1' },\n" +
" { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 2.2', items: [\n" +
" { payload: '1', text: 'Nested Item 2.2.1' },\n" +
" { payload: '3', text: 'Nested Item 2.2.2' }\n" +
" ] },\n" +
" { payload: '3', text: 'Nested Item 7' }\n" +
" { payload: '3', text: 'Nested Item 2.3' }\n" +
" ] },\n" +
" { payload: '3', text: 'Nested Item 9' },\n" +
" { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 2', items: [\n" +
" { payload: '1', text: 'Nested Item 3' },\n" +
" { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 4', items: [\n" +
" { payload: '1', text: 'Nested Item 5' },\n" +
" { payload: '3', text: 'Nested Item 6' }\n" +
" { payload: '3', text: 'Nested Item 3' },\n" +
" { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 4', items: [\n" +
" { payload: '1', text: 'Nested Item 4.1' },\n" +
" { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 4.2', items: [\n" +
" { payload: '1', text: 'Nested Item 4.2.1', disabled: true },\n" +
" { payload: '3', text: 'Nested Item 4.2.2' }\n" +
" ] },\n" +
" { payload: '3', text: 'Nested Item 7' }\n" +
" { payload: '3', text: 'Nested Item 4.3' }\n" +
" ] },\n" +
" { payload: '4', text: 'Nested Item 10' }\n" +
" { payload: '4', text: 'Nested Item 5' }\n" +
" ] },\n" +
" { payload: '1', text: 'Audio Library'},\n" +
" { payload: '2', text: 'Settings'},\n" +
" { payload: '3', text: 'Logout'}\n" +
" { payload: '3', text: 'Logout', disabled: true}\n" +
" ];\n\n" +
'<Menu menuItems={nestedMenuItems} />';

Expand Down
4 changes: 2 additions & 2 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ module.exports = {
IconButton: require('./js/icon-button'),
Input: require('./js/input'),
LeftNav: require('./js/left-nav'),
MenuItem: require('./js/menu-item'),
Menu: require('./js/menu'),
Menu: require('./js/menu/menu'),
MenuItem: require('./js/menu/menu-item'),
Mixins: {
Classable: require('./js/mixins/classable'),
ClickAwayable: require('./js/mixins/click-awayable'),
Expand Down
3 changes: 1 addition & 2 deletions src/js/drop-down-icon.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,7 @@ var ClickAwayable = require('./mixins/click-awayable');
var KeyLine = require('./utils/key-line');
var Paper = require('./paper');
var FontIcon = require('./font-icon');
var Menu = require('./menu');
var MenuItem = require('./menu-item');
var Menu = require('./menu/menu');

var DropDownIcon = React.createClass({

Expand Down
2 changes: 1 addition & 1 deletion src/js/drop-down-menu.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ var ClickAwayable = require('./mixins/click-awayable');
var DropDownArrow = require('./svg-icons/drop-down-arrow');
var KeyLine = require('./utils/key-line');
var Paper = require('./paper');
var Menu = require('./menu');
var Menu = require('./menu/menu');

var DropDownMenu = React.createClass({

Expand Down
4 changes: 2 additions & 2 deletions src/js/left-nav.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ var React = require('react'),
WindowListenable = require('./mixins/window-listenable'),
Overlay = require('./overlay'),
Paper = require('./paper'),
Menu = require('./menu');
Menu = require('./menu/menu');

var LeftNav = React.createClass({

Expand Down Expand Up @@ -82,10 +82,10 @@ var LeftNav = React.createClass({
},

_onMenuItemClick: function(e, key, payload) {
if (!this.props.docked) this.close();
if (this.props.onChange && this.props.selectedIndex !== key) {
this.props.onChange(e, key, payload);
}
if (!this.props.docked) this.close();
},

_onOverlayTouchTap: function() {
Expand Down
41 changes: 41 additions & 0 deletions src/js/menu/link-menu-item.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
var React = require('react');
var Classable = require('../mixins/classable');

var LinkMenuItem = React.createClass({

mixins: [Classable],

propTypes: {
index: React.PropTypes.number.isRequired,
payload: React.PropTypes.string.isRequired,
text: React.PropTypes.string.isRequired,
target: React.PropTypes.string,
disabled: React.PropTypes.bool
},

getDefaultProps: function() {
return {
disabled: false
};
},

render: function() {
var classes = this.getClasses('mui-menu-item', {
'mui-is-disabled': this.props.disabled
});
var onClickHandler = (this.props.disabled) ? this._stopLink : undefined;
// Prevent context menu 'Open In New Tab/Window'
var linkAttribute = (this.props.disabled) ? 'data-href' : 'href';
var link = {linkAttribute: this.props.payload};

return (
<a key={this.props.index} className={classes} {...link} target={this.props.target} onClick={onClickHandler}>{this.props.text}</a>
);
},

_stopLink: function(event) {
event.preventDefault();
}
});

module.exports = LinkMenuItem;
21 changes: 12 additions & 9 deletions src/js/menu-item.jsx → src/js/menu/menu-item.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
var React = require('react');
var Classable = require('./mixins/classable');
var FontIcon = require('./font-icon');
var Toggle = require('./toggle');
var Classable = require('../mixins/classable');
var FontIcon = require('../font-icon');
var Toggle = require('../toggle');

var Types = {
LINK: 'LINK',
Expand All @@ -21,25 +21,28 @@ var MenuItem = React.createClass({
number: React.PropTypes.string,
data: React.PropTypes.string,
toggle: React.PropTypes.bool,
disabled: React.PropTypes.bool,
onTouchTap: React.PropTypes.func,
onClick: React.PropTypes.func,
onToggle: React.PropTypes.func,
selected: React.PropTypes.bool
},

statics: {
Types: Types
},

getDefaultProps: function() {
return {
toggle: false
toggle: false,
disabled: false
};
},

render: function() {
var classes = this.getClasses('mui-menu-item', {
'mui-is-selected': this.props.selected
'mui-is-selected': this.props.selected,
'mui-is-disabled': this.props.disabled
});
var icon;
var data;
Expand Down Expand Up @@ -86,15 +89,15 @@ var MenuItem = React.createClass({
},

_handleTouchTap: function(e) {
if (this.props.onTouchTap) this.props.onTouchTap(e, this.props.index);
if (!this.props.disabled && this.props.onTouchTap) this.props.onTouchTap(e, this.props.index);
},

_handleOnClick: function(e) {
if (this.props.onClick) this.props.onClick(e, this.props.index);
if (!this.props.disabled && this.props.onClick) this.props.onClick(e, this.props.index);
},

_handleToggle: function(e, toggled) {
if (this.props.onToggle) this.props.onToggle(e, this.props.index, toggled);
if (!this.props.disabled && this.props.onToggle) this.props.onToggle(e, this.props.index, toggled);
}

});
Expand Down
Loading

0 comments on commit aacfbc1

Please sign in to comment.