feature(react): add react directory to make the react-framework-delegate a first-class citizen and to make it easier to keep APIs in sync

This commit is contained in:
Dan Bucholtz
2017-12-07 21:37:01 -06:00
parent 5117ac6594
commit c1e191cea2
9 changed files with 3238 additions and 0 deletions

View File

@ -0,0 +1,39 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { FrameworkDelegate } from '@ionic/core';
export function attachViewToDom(parentElement: HTMLElement, reactComponent: any, propsOrData: any, classesToAdd: string[]) {
const wrappingDiv = document.createElement('div');
if (classesToAdd) {
for (const clazz of classesToAdd) {
wrappingDiv.classList.add(clazz);
}
}
parentElement.appendChild(wrappingDiv);
// mount the React component
const reactElement = React.createElement(reactComponent, propsOrData);
const mountedComponentInstance = ReactDOM.render(reactElement, wrappingDiv);
return Promise.resolve({
element: wrappingDiv,
reactElement: reactElement,
instance: mountedComponentInstance
});
}
export function removeViewFromDom(parentElement: HTMLElement, childElement: HTMLElement): Promise<any> {
ReactDOM.unmountComponentAtNode(childElement);
parentElement.removeChild(childElement);
return Promise.resolve();
}
const Delegate: FrameworkDelegate = {
attachViewToDom: attachViewToDom,
removeViewFromDom: removeViewFromDom,
};
export { Delegate }