OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Export ContextualMenu component, with added `hasBackground` property 

, which is only enabled when `createMenu` is used.
pull/21833/head
Luke Barnard 2018-05-10 17:51:49 +01:00
parent 9046769132
commit 2c2eda1f00
1 changed files with 23 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/structures/ContextualMenu.js
View File

@ -40,7 +40,7 @@ function getOrCreateContainer() {
return container; return container;
} }
class ContextualMenu extends React.Component { export default class ContextualMenu extends React.Component {
propTypes: { propTypes: {
top: PropTypes.number, top: PropTypes.number,
bottom: PropTypes.number, bottom: PropTypes.number,
@ -57,6 +57,10 @@ class ContextualMenu extends React.Component {
menuPaddingRight: PropTypes.number, menuPaddingRight: PropTypes.number,
menuPaddingBottom: PropTypes.number, menuPaddingBottom: PropTypes.number,
menuPaddingLeft: PropTypes.number, menuPaddingLeft: PropTypes.number,
// If true, insert an invisible screen-sized element behind the
// menu that when clicked will close it.
hasBackground: PropTypes.bool,
} }
render() { render() {
@ -154,31 +158,30 @@ 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>
<div className="mx_ContextualMenu_background" onClick={props.closeMenu}></div> { props.hasBackground && <div className="mx_ContextualMenu_background" onClick={props.closeMenu}></div> }
<style>{ chevronCSS }</style> <style>{ chevronCSS }</style>
</div>; </div>;
} }
} }
module.exports = { export function createMenu(ElementClass, props) {
createMenu: function(ElementClass, props) { const closeMenu = function(...args) {
const closeMenu = function(...args) { ReactDOM.unmountComponentAtNode(getOrCreateContainer());
ReactDOM.unmountComponentAtNode(getOrCreateContainer());
if (props && props.onFinished) { if (props && props.onFinished) {
props.onFinished.apply(null, args); props.onFinished.apply(null, args);
} }
}; };
const menu = <ContextualMenu const menu = <ContextualMenu
{...props} {...props}
elementClass={ElementClass} hasBackground={true}
closeMenu={closeMenu} elementClass={ElementClass}
windowResize={closeMenu} closeMenu={closeMenu}
/>; windowResize={closeMenu}
/>;
ReactDOM.render(menu, getOrCreateContainer()); ReactDOM.render(menu, getOrCreateContainer());
return {close: closeMenu}; return {close: closeMenu};
}, }
};