@antv/s2-react/esm/utils/invokeComponent.js

use S2 with react

import React from 'react';
import { SpreadSheetContext } from '../context/SpreadSheetContext';
import { reactRender, reactUnmount } from './reactRender';
/**
 * 挂载组件
 */
export function invokeComponent(options) {
    const { id, s2, params, onCleanup, component: Component } = options;
    if (id) {
        const container = document.querySelector(`#${id}`);
        if (container) {
            const result = reactUnmount(container);
            if (result && container.parentNode) {
                container.parentNode.removeChild(container);
                return;
            }
        }
    }
    const container = document.createElement('div');
    if (id) {
        container.id = id;
    }
    document.body.appendChild(container);
    let resolveCb;
    let rejectCb;
    function destroy() {
        reactUnmount(container);
        if (container.parentNode) {
            container.parentNode.removeChild(container);
            if (onCleanup) {
                onCleanup();
            }
        }
    }
    function onClose() {
        destroy();
        rejectCb();
    }
    const handler = new Promise((resolve, reject) => {
        resolveCb = resolve;
        rejectCb = reject;
    }).then((val) => {
        onClose();
        return val;
    });
    function render() {
        setTimeout(() => {
            reactRender(React.createElement(SpreadSheetContext.Provider, { value: s2 },
                React.createElement(Component, { onCancel: onClose, resolver: resolveCb, params: params })), container);
        });
    }
    render();
    return handler;
}
//# sourceMappingURL=invokeComponent.js.map