Give PersistedElement a key

So there can be more than one on a page
This commit is contained in:
David Baker 2018-07-03 14:43:27 +01:00
parent f429ae5617
commit 3f88721bc1
2 changed files with 12 additions and 7 deletions

View file

@ -16,19 +16,18 @@ limitations under the License.
const React = require('react'); const React = require('react');
const ReactDOM = require('react-dom'); const ReactDOM = require('react-dom');
const PropTypes = require('prop-types');
// Shamelessly ripped off Modal.js. There's probably a better way // Shamelessly ripped off Modal.js. There's probably a better way
// of doing reusable widgets like dialog boxes & menus where we go and // of doing reusable widgets like dialog boxes & menus where we go and
// pass in a custom control as the actual body. // pass in a custom control as the actual body.
const ContainerId = "mx_PersistedElement"; function getOrCreateContainer(containerId) {
let container = document.getElementById(containerId);
function getOrCreateContainer() {
let container = document.getElementById(ContainerId);
if (!container) { if (!container) {
container = document.createElement("div"); container = document.createElement("div");
container.id = ContainerId; container.id = containerId;
document.body.appendChild(container); document.body.appendChild(container);
} }
@ -106,9 +105,15 @@ export default class PersistedElement extends React.Component {
{this.props.children} {this.props.children}
</div>; </div>;
ReactDOM.render(content, getOrCreateContainer()); ReactDOM.render(content, getOrCreateContainer('mx_persistedElement_'+this.props.persistKey));
return <div ref={this.collectChildContainer}></div>; return <div ref={this.collectChildContainer}></div>;
} }
} }
PersistedElement.propTypes = {
// Unique identifier for this PersistedElement instance
// Any PersistedElements with the same persistKey will use
// the same DOM container.
persistKey: PropTypes.string.isRequired,
};

View file

@ -211,7 +211,7 @@ export default class Stickerpicker extends React.Component {
width: this.popoverWidth, width: this.popoverWidth,
}} }}
> >
<PersistedElement> <PersistedElement persistKey="stickerPicker">
<AppTile <AppTile
collectWidgetMessaging={this._collectWidgetMessaging} collectWidgetMessaging={this._collectWidgetMessaging}
id={stickerpickerWidget.id} id={stickerpickerWidget.id}