Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

allow chaining right click contextmenus #1999

Merged
merged 3 commits into from
Jun 25, 2018
Merged

allow chaining right click contextmenus #1999

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7cd8a5a
allow chaining right click contextmenus
t3chguy Jun 20, 2018
4508da5
only override contextmenu if closeMenu is provided
t3chguy Jun 20, 2018
b23f84e
add XXX comment
t3chguy Jun 22, 2018
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
29 changes: 27 additions & 2 deletions src/components/structures/ContextualMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,9 @@ export default class ContextualMenu extends React.Component {
// The component to render as the context menu
elementClass: PropTypes.element.isRequired,
// on resize callback
windowResize: PropTypes.func
windowResize: PropTypes.func,
// method to close menu
closeMenu: PropTypes.func,
};

constructor() {
Expand All @@ -73,6 +75,7 @@ export default class ContextualMenu extends React.Component {
contextMenuRect: null,
};

this.onContextMenu = this.onContextMenu.bind(this);
this.collectContextMenuRect = this.collectContextMenuRect.bind(this);
}

Expand All @@ -85,6 +88,28 @@ export default class ContextualMenu extends React.Component {
});
}

onContextMenu(e) {
if (this.props.closeMenu) {
this.props.closeMenu();

e.preventDefault();
const x = e.clientX;
const y = e.clientY;

// XXX: This isn't pretty but the only way to allow opening a different context menu on right click whilst
// a context menu and its click-guard are up without completely rewriting how the context menus work.
setImmediate(() => {
const clickEvent = document.createEvent('MouseEvents');
clickEvent.initMouseEvent(
'contextmenu', true, true, window, 0,
0, 0, x, y, false, false,
false, false, 0, null,
);
document.elementFromPoint(x, y).dispatchEvent(clickEvent);
});
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, this is pretty grim, but I guess it's the only option apart from changing this to use a listener on document to dismiss the menu rather than a giant div that covers everything. Maybe deserves an XXX?

}
}

render() {
const position = {};
let chevronFace = null;
Expand Down Expand Up @@ -195,7 +220,7 @@ export default class ContextualMenu extends React.Component {
{ chevron }
<ElementClass {...props} onFinished={props.closeMenu} onResize={props.windowResize} />
</div>
{ props.hasBackground && <div className="mx_ContextualMenu_background" onClick={props.closeMenu} /> }
{ props.hasBackground && <div className="mx_ContextualMenu_background" onClick={props.closeMenu} onContextMenu={this.onContextMenu} /> }
<style>{ chevronCSS }</style>
</div>;
}
Expand Down