framework-delegate.tsx

importtype{FrameworkDelegate}from'@ionic/core/components';
import{createPortal}from'react-dom';

import{generateId}from'./utils/generateId';

// TODO(FW-2959): types

typeReactComponent=(props?: any)=>JSX.Element;

exportconstReactDelegate=(
addView: (view: React.ReactElement)=>void,
removeView: (view: React.ReactElement)=>void
): FrameworkDelegate=>{
constrefMap=newWeakMap<HTMLElement,React.ReactElement>();
constreactDelegateId=`react-delegate-${generateId()}`;
// Incrementing counter to generate unique keys for each view
letid=0;

constattachViewToDom=async(
parentElement: HTMLElement,
component: ReactComponent,
propsOrDataObj?: any,
cssClasses?: string[]
): Promise<any>=>{
constdiv=document.createElement('div');
cssClasses&&div.classList.add(...cssClasses);
parentElement.appendChild(div);

constcomponentWithProps=component(propsOrDataObj);
constkey=`${reactDelegateId}-${id++}`;
consthostComponent=createPortal(componentWithProps,div,key);

refMap.set(div,hostComponent);

addView(hostComponent);

returnPromise.resolve(div);
};

constremoveViewFromDom=(_container: any,component: HTMLElement): Promise<void>=>{
consthostComponent=refMap.get(component);
hostComponent&&removeView(hostComponent);

component.remove();

returnPromise.resolve();
};

return{
 attachViewToDom,
 removeViewFromDom,
};
};