@adaptabletools/adaptable/src/View/Components/ExternalRenderer.js

Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements

import * as React from 'react';
import { useAdaptable } from '../AdaptableContext';
export const ExternalRenderer = ({ render, frameworkComponent, componentName = 'N/A', onDestroy, ...rest }) => {
    const ref = React.useRef(null);
    const adaptable = useAdaptable();
    const [contentsHTML, setContentsHTML] = React.useState('');
    React.useLayoutEffect(() => {
        const element = ref.current;
        const adaptableApi = adaptable.api;
        if (render) {
            const html = render({
                phase: 'onMount',
                element,
                ...adaptableApi.internalApi.buildBaseContext(),
            });
            setContentsHTML(html);
        }
        else if (frameworkComponent) {
            adaptableApi.internalApi.createFrameworkComponent(element, frameworkComponent, 'toolbar');
        }
        return () => {
            if (render) {
                render({
                    phase: 'onDestroy',
                    element: element,
                    ...adaptableApi.internalApi.buildBaseContext(),
                });
            }
            else if (frameworkComponent) {
                onDestroy?.();
                adaptableApi.internalApi.destroyFrameworkComponent(element, frameworkComponent, 
                // @ts-ignore
                componentName);
            }
        };
    }, []);
    const RFC = adaptable.variant === 'react' ? frameworkComponent : null;
    return RFC ? (React.createElement("div", { ...rest, ref: ref },
        React.createElement(RFC, { adaptableApi: adaptable.api }))) : (React.createElement("div", { ...rest, dangerouslySetInnerHTML: { __html: contentsHTML }, ref: ref }));
};