diff --git a/src/components/views/elements/PersistedElement.js b/src/components/views/elements/PersistedElement.js index 8115a36eeb..6816b4dab3 100644 --- a/src/components/views/elements/PersistedElement.js +++ b/src/components/views/elements/PersistedElement.js @@ -16,28 +16,24 @@ limitations under the License. const React = require('react'); const ReactDOM = require('react-dom'); +const PropTypes = require('prop-types'); // Shamelessly ripped off Modal.js. There's probably a better way // of doing reusable widgets like dialog boxes & menus where we go and // pass in a custom control as the actual body. -const ContainerId = "mx_PersistedElement"; - -function getOrCreateContainer() { - let container = document.getElementById(ContainerId); +function getOrCreateContainer(containerId) { + let container = document.getElementById(containerId); if (!container) { container = document.createElement("div"); - container.id = ContainerId; + container.id = containerId; document.body.appendChild(container); } return container; } -// Greater than that of the ContextualMenu -const PE_Z_INDEX = 5000; - /* * Class of component that renders its children in a separate ReactDOM virtual tree * in a container element appended to document.body. @@ -50,6 +46,14 @@ const PE_Z_INDEX = 5000; * bounding rect as the parent of PE. */ export default class PersistedElement extends React.Component { + + static propTypes = { + // Unique identifier for this PersistedElement instance + // Any PersistedElements with the same persistKey will use + // the same DOM container. + persistKey: PropTypes.string.isRequired, + }; + constructor() { super(); this.collectChildContainer = this.collectChildContainer.bind(this); @@ -97,18 +101,16 @@ export default class PersistedElement extends React.Component { left: parentRect.left + 'px', width: parentRect.width + 'px', height: parentRect.height + 'px', - zIndex: PE_Z_INDEX, }); } render() { - const content =