mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-24 10:15:43 +03:00
Code Issues Projects Releases Packages Wiki Activity

Factor out ContextualMenu component

Browse source
This commit is contained in:
Luke Barnard 2018-05-10 16:00:58 +01:00
parent 6a0bff6685
commit d503c86576
1 changed files with 47 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
src/components/structures/ContextualMenu.js
View file

@ -26,9 +26,21 @@ import PropTypes from 'prop-types';
// of doing reusable widgets like dialog boxes & menus where we go and
// pass in a custom control as the actual body.
module.exports = {
ContextualMenuContainerId: "mx_ContextualMenu_Container",
const ContextualMenuContainerId = "mx_ContextualMenu_Container";
function getOrCreateContainer() {
let container = document.getElementById(ContextualMenuContainerId);
if (!container) {
container = document.createElement("div");
container.id = ContextualMenuContainerId;
document.body.appendChild(container);
}
return container;
}
class ContextualMenu extends React.Component {
propTypes: {
top: PropTypes.number,
bottom: PropTypes.number,
@ -45,39 +57,14 @@ module.exports = {
menuPaddingRight: PropTypes.number,
menuPaddingBottom: PropTypes.number,
menuPaddingLeft: PropTypes.number,
},
getOrCreateContainer: function() {
let container = document.getElementById(this.ContextualMenuContainerId);
if (!container) {
container = document.createElement("div");
container.id = this.ContextualMenuContainerId;
document.body.appendChild(container);
}
return container;
},
createMenu: function(Element, props) {
const self = this;
const closeMenu = function(...args) {
ReactDOM.unmountComponentAtNode(self.getOrCreateContainer());
if (props && props.onFinished) {
props.onFinished.apply(null, args);
}
};
// Close the menu on window resize
const windowResize = function() {
closeMenu();
};
render() {
const position = {};
let chevronFace = null;
const props = this.props;
if (props.top) {
position.top = props.top;
} else {
@ -158,20 +145,39 @@ module.exports = {
menuStyle["paddingRight"] = props.menuPaddingRight;
}
const ElementClass = props.elementClass;
// FIXME: If a menu uses getDefaultProps it clobbers the onFinished
// property set here so you can't close the menu from a button click!
const menu = (
<div className={className} style={position}>
return <div className={className} style={position}>
<div className={menuClasses} style={menuStyle}>
{ chevron }
<Element {...props} onFinished={closeMenu} onResize={windowResize} />
<ElementClass {...props} onFinished={props.closeMenu} onResize={props.windowResize} />
</div>
<div className="mx_ContextualMenu_background" onClick={closeMenu}></div>
<div className="mx_ContextualMenu_background" onClick={props.closeMenu}></div>
<style>{ chevronCSS }</style>
</div>
);
</div>;
}
}
ReactDOM.render(menu, this.getOrCreateContainer());
module.exports = {
createMenu: function(ElementClass, props) {
const closeMenu = function(...args) {
ReactDOM.unmountComponentAtNode(getOrCreateContainer());
if (props && props.onFinished) {
props.onFinished.apply(null, args);
}
};
const menu = <ContextualMenu
{...props}
elementClass={ElementClass}
closeMenu={closeMenu}
windowResize={closeMenu}
/>;
ReactDOM.render(menu, getOrCreateContainer());
return {close: closeMenu};
},