Add the option to mount Vue components at the top of the React component

This commit is contained in:
Samuel Elliott 2018-05-29 18:35:40 +01:00
parent c3ff71ff85
commit 231afa8ed6
No known key found for this signature in database
GPG Key ID: 8420C7CDE43DC4D6
2 changed files with 5 additions and 3 deletions

View File

@ -214,7 +214,7 @@ export default new class EmoteModule {
retVal.props.children.splice(0, 0, VueInjector.createReactElement({
components: { Autocomplete },
template: '<Autocomplete />'
}));
}, true));
});
for (const e of document.querySelectorAll(selector)) {

View File

@ -32,11 +32,12 @@ export default class {
/**
* Returns a React element that will render a Vue component.
* @param {Object} options Options to pass to Vue
* @param {Boolean} mountAtTop Whether to mount the Vue component at the top of the React component instead of mounting it in a container
* @return {React.Element}
*/
static createReactElement(options) {
static createReactElement(options, mountAtTop) {
const React = WebpackModules.getModuleByName('React');
return React.createElement(this.ReactCompatibility, {options});
return React.createElement(this.ReactCompatibility, {options, mountAtTop});
}
static get ReactCompatibility() {
@ -61,6 +62,7 @@ export default class {
get vueMount() {
const element = ReactDOM.findDOMNode(this);
if (!element) return;
if (this.props.mountAtTop) return element;
if (element.firstChild) return element.firstChild;
const newElement = document.createElement('span');
element.appendChild(newElement);