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

Jump to bottom

[IconMenu] Set container as anchorEl when using prop 'open' #3666

Merged
merged 2 commits into from
Mar 12, 2016
Merged

[IconMenu] Set container as anchorEl when using prop 'open' #3666

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
880dbf5
[IconMenu] Set container as anchorEl when using prop 'open'
crashbell Mar 12, 2016
3c77dba
[Docs][IconMenu] Add example for using internal state
crashbell Mar 12, 2016
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
25 changes: 25 additions & 0 deletions docs/src/app/components/pages/components/IconMenu/ExampleControlled.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,10 @@ import React from 'react';
import IconMenu from 'material-ui/lib/menus/icon-menu';
import MenuItem from 'material-ui/lib/menus/menu-item';
import IconButton from 'material-ui/lib/icon-button';
import RaisedButton from 'material-ui/lib/raised-button';
import MoreVertIcon from 'material-ui/lib/svg-icons/navigation/more-vert';
import ContentFilter from 'material-ui/lib/svg-icons/content/filter-list';
import FileFileDownload from 'material-ui/lib/svg-icons/file/file-download';

export default class IconMenuExampleControlled extends React.Component {
constructor(props) {
Expand All @@ -27,6 +29,18 @@ export default class IconMenuExampleControlled extends React.Component {
});
};

handleOpenMenu = () => {
this.setState({
openMenu: true,
});
}

handleOnRequestChange = (value) => {
this.setState({
openMenu: value,
});
}

render() {
return (
<div>
Expand Down Expand Up @@ -54,6 +68,17 @@ export default class IconMenuExampleControlled extends React.Component {
<MenuItem value="5" primaryText="Hybrid SACD" />
<MenuItem value="6" primaryText="Vinyl" />
</IconMenu>
<IconMenu
iconButtonElement={<IconButton><FileFileDownload /></IconButton>}
open={this.state.openMenu}
onRequestChange={this.handleOnRequestChange}
>
<MenuItem value="1" primaryText="Windows App" />
<MenuItem value="2" primaryText="Mac App" />
<MenuItem value="3" primaryText="Android App" />
<MenuItem value="4" primaryText="iOS App" />
</IconMenu>
<RaisedButton onTouchTap={this.handleOpenMenu} label="Downloads" />
</div>
);
}
Expand Down
3 changes: 2 additions & 1 deletion docs/src/app/components/pages/components/IconMenu/Page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@ import iconMenuExampleNestedCode from '!raw!./ExampleNested';
const descriptions = {
simple: 'Simple Icon Menus demonstrating some of the layouts possible using the `anchorOrigin` and `' +
'targetOrigin` properties.',
controlled: 'Two controlled examples, the first allowing a single selection, the second multiple selections.',
controlled: 'Three controlled examples, the first allowing a single selection, the second multiple selections,' +
' the third using internal state.',
scrollable: 'The `maxHeight` property limits the height of the menu, above which it will be scrollable.',
nested: 'Example of nested menus within an IconMenu.',
};
Expand Down
8 changes: 6 additions & 2 deletions src/menus/icon-menu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,8 +180,11 @@ const IconMenu = React.createClass({
muiTheme: nextContext.muiTheme || this.state.muiTheme,
});

if (nextProps.open === true || nextProps.open === false) {
this.setState({open: nextProps.open});
if (nextProps.open != null) {
this.setState({
open: nextProps.open,
anchorEl: this.refs.iconMenuContainer,
});
}
},

Expand Down Expand Up @@ -315,6 +318,7 @@ const IconMenu = React.createClass({

return (
<div
ref="iconMenuContainer"
className={className}
onMouseDown={onMouseDown}
onMouseLeave={onMouseLeave}
Expand Down