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 =
+ const content =
{this.props.children}
; - ReactDOM.render(content, getOrCreateContainer()); + ReactDOM.render(content, getOrCreateContainer('mx_persistedElement_'+this.props.persistKey)); return
; } } - diff --git a/src/components/views/rooms/Stickerpicker.js b/src/components/views/rooms/Stickerpicker.js index 4cb7c59ce6..d6afc28dad 100644 --- a/src/components/views/rooms/Stickerpicker.js +++ b/src/components/views/rooms/Stickerpicker.js @@ -27,6 +27,10 @@ import WidgetUtils from '../../../utils/WidgetUtils'; const widgetType = 'm.stickerpicker'; +// We sit in a context menu, so the persisted element container needs to float +// above it, so it needs a greater z-index than the ContextMenu +const STICKERPICKER_Z_INDEX = 5000; + export default class Stickerpicker extends React.Component { constructor(props) { super(props); @@ -211,7 +215,7 @@ export default class Stickerpicker extends React.Component { width: this.popoverWidth, }} > - +