Merge pull request #1999 from matrix-org/t3chguy/chain_contextmenu
allow chaining right click contextmenus
This commit is contained in:
commit
e29e106efc
1 changed files with 27 additions and 2 deletions
|
@ -64,7 +64,9 @@ export default class ContextualMenu extends React.Component {
|
||||||
// The component to render as the context menu
|
// The component to render as the context menu
|
||||||
elementClass: PropTypes.element.isRequired,
|
elementClass: PropTypes.element.isRequired,
|
||||||
// on resize callback
|
// on resize callback
|
||||||
windowResize: PropTypes.func
|
windowResize: PropTypes.func,
|
||||||
|
// method to close menu
|
||||||
|
closeMenu: PropTypes.func,
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
|
@ -73,6 +75,7 @@ export default class ContextualMenu extends React.Component {
|
||||||
contextMenuRect: null,
|
contextMenuRect: null,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
this.onContextMenu = this.onContextMenu.bind(this);
|
||||||
this.collectContextMenuRect = this.collectContextMenuRect.bind(this);
|
this.collectContextMenuRect = this.collectContextMenuRect.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const position = {};
|
const position = {};
|
||||||
let chevronFace = null;
|
let chevronFace = null;
|
||||||
|
@ -195,7 +220,7 @@ export default class ContextualMenu extends React.Component {
|
||||||
{ chevron }
|
{ chevron }
|
||||||
<ElementClass {...props} onFinished={props.closeMenu} onResize={props.windowResize} />
|
<ElementClass {...props} onFinished={props.closeMenu} onResize={props.windowResize} />
|
||||||
</div>
|
</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>
|
<style>{ chevronCSS }</style>
|
||||||
</div>;
|
</div>;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue