@j2inn/app-react/dist/react/components/RemoteApp/RemoteWebComponent.js

React implementation of the j2inn-app framework

import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
/*
 * Copyright (c) 2025, J2 Innovations. All Rights Reserved
 */
import { loadDefault } from '@j2inn/app';
import { usei18n } from '@j2inn/utils';
import { useClient } from 'haystack-react';
import { observer } from 'mobx-react-lite';
import { useEffect, useState } from 'react';
import { useTheme } from 'react-jss';
import { Loading, WebComponent } from '..';
import { useAppRootStore } from '../../hooks/useAppRootStore';
/**
 * A remote web component that has all available properties passed to it.
 */
export const RemoteWebComponent = observer(({ name, loaderPath, podName, dimensions, ...props }) => {
    const rootStore = useAppRootStore();
    const client = useClient();
    const i18n = usei18n();
    const theme = useTheme();
    return (_jsx(RemoteWebComponentLoader, { podName: podName, loaderPath: loaderPath, children: _jsx(WebComponent, { name: name, dimensions: dimensions, rootStore: rootStore, target: rootStore.target, targetSidebar: rootStore.targetSidebar, locale: rootStore.locale, currentUser: rootStore.currentUser, client: client, project: client.project, i18n: i18n, theme: theme, ...props }) }));
});
/**
 * A wrapper component to ensure that finUiWebComponentLoader if defined is loaded before loading a web component.
 */
export const RemoteWebComponentLoader = observer(({ podName, loaderPath, children, }) => {
    const [loaded, setLoaded] = useState(false);
    useEffect(() => {
        if (loaderPath) {
            loadDefault(podName, loaderPath)().then(() => setLoaded(true));
        }
    }, [loaderPath]);
    if (loaderPath && !loaded) {
        return _jsx(Loading, {});
    }
    return _jsx(_Fragment, { children: children });
});