Give PersistedElement a key
So there can be more than one on a page
This commit is contained in:
parent
f429ae5617
commit
3f88721bc1
2 changed files with 12 additions and 7 deletions
|
@ -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,
|
||||||
|
};
|
||||||
|
|
|
@ -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}
|
||||||
|
|
Loading…
Reference in a new issue