From 3f88721bc1f36021a4a67bc788b50cf3fb071bd1 Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 3 Jul 2018 14:43:27 +0100 Subject: [PATCH 1/3] Give PersistedElement a key So there can be more than one on a page --- .../views/elements/PersistedElement.js | 17 +++++++++++------ src/components/views/rooms/Stickerpicker.js | 2 +- 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/src/components/views/elements/PersistedElement.js b/src/components/views/elements/PersistedElement.js index 8115a36eeb..389a1458d2 100644 --- a/src/components/views/elements/PersistedElement.js +++ b/src/components/views/elements/PersistedElement.js @@ -16,19 +16,18 @@ 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); } @@ -106,9 +105,15 @@ export default class PersistedElement extends React.Component { {this.props.children} ; - ReactDOM.render(content, getOrCreateContainer()); + ReactDOM.render(content, getOrCreateContainer('mx_persistedElement_'+this.props.persistKey)); return
; } } +PersistedElement.propTypes = { + // Unique identifier for this PersistedElement instance + // Any PersistedElements with the same persistKey will use + // the same DOM container. + persistKey: PropTypes.string.isRequired, +}; diff --git a/src/components/views/rooms/Stickerpicker.js b/src/components/views/rooms/Stickerpicker.js index 4cb7c59ce6..343d04d24b 100644 --- a/src/components/views/rooms/Stickerpicker.js +++ b/src/components/views/rooms/Stickerpicker.js @@ -211,7 +211,7 @@ export default class Stickerpicker extends React.Component { width: this.popoverWidth, }} > - + Date: Tue, 3 Jul 2018 14:54:43 +0100 Subject: [PATCH 2/3] Use inline class field for PropTypes --- src/components/views/elements/PersistedElement.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/components/views/elements/PersistedElement.js b/src/components/views/elements/PersistedElement.js index 389a1458d2..23dea3499c 100644 --- a/src/components/views/elements/PersistedElement.js +++ b/src/components/views/elements/PersistedElement.js @@ -49,6 +49,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); @@ -110,10 +118,3 @@ export default class PersistedElement extends React.Component { return
; } } - -PersistedElement.propTypes = { - // Unique identifier for this PersistedElement instance - // Any PersistedElements with the same persistKey will use - // the same DOM container. - persistKey: PropTypes.string.isRequired, -}; From ad35fbf208370940e0809c607809b15442955b36 Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 3 Jul 2018 18:25:33 +0100 Subject: [PATCH 3/3] Pull out z-index to the sticker picker As it's not a thing that's necessary for other PersistedElements, only the sticker picker because it has to sit above the ContextMenu it sits in. --- src/components/views/elements/PersistedElement.js | 6 +----- src/components/views/rooms/Stickerpicker.js | 6 +++++- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/views/elements/PersistedElement.js b/src/components/views/elements/PersistedElement.js index 23dea3499c..6816b4dab3 100644 --- a/src/components/views/elements/PersistedElement.js +++ b/src/components/views/elements/PersistedElement.js @@ -34,9 +34,6 @@ function getOrCreateContainer(containerId) { 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. @@ -104,12 +101,11 @@ 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}
; diff --git a/src/components/views/rooms/Stickerpicker.js b/src/components/views/rooms/Stickerpicker.js index 343d04d24b..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, }} > - +