Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Disable menu items #402

Merged
merged 4 commits into from
Mar 13, 2015
Merged

Disable menu items #402

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c1540ec
Menu items can now be disabled in a left-nav, menu or drop-down-menu.…
jkruder Mar 8, 2015
582f45c
Incorporating latest master into branch.
jkruder Mar 8, 2015
6849084
Removed console.log and removed docs/.../app.js and docs/.../main.css
jkruder Mar 12, 2015
285cbf3
remove console.log from menu-item
jkruder Mar 13, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 13 additions & 1 deletion docs/src/app/components/pages/components/left-nav.jsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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