@j2inn/app-react/dist/dev/DevAppContainer.js

React implementation of the j2inn-app framework

import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
import { DEFAULT_THEME, GenerateTheme } from '@j2inn/ui';
import { I18NProvider } from '@j2inn/utils';
import { Client } from 'haystack-nclient';
import { ClientContext } from 'haystack-react';
import { observer } from 'mobx-react-lite';
import { useMemo, useState } from 'react';
import { ThemeProvider } from 'react-jss';
import { AppRootStoreContext } from '../react/hooks/useAppRootStore';
import { AppStoreContext } from '../react/hooks/useAppStore';
import { DevAppRootStore } from './DevAppRootStore';
/**
 * The default dev root store.
 */
export const DEFAULT_DEV_ROOT_STORE = new DevAppRootStore();
/**
 * The default dev client.
 */
export const DEFAULT_DEV_CLIENT = new Client({
    base: new URL(window.location.href),
    project: 'demo',
    getOpUrl: ({ origin, project, op }) => `${origin}/haystack/${project}/${op}`,
});
const Loader = ({ loading, children, }) => (loading ? _jsx(_Fragment, { children: "Loading..." }) : _jsx(_Fragment, { children: children }));
/**
 * Creates a dev application container environment to run a view.
 *
 * Ideally this is run in webpack development that proxies to a real
 * application server.
 */
export const DevAppContainer = observer(({ children, appStore, rootStore = DEFAULT_DEV_ROOT_STORE, client = DEFAULT_DEV_CLIENT, theme = GenerateTheme(DEFAULT_THEME).light, }) => {
    const [loadingDefs, setLoadingDefs] = useState(true);
    const [loadingi18n, setLoadingi18n] = useState(true);
    useMemo(() => {
        client.loadDefs().finally(() => setLoadingDefs(false));
    }, [client]);
    return (_jsx(AppRootStoreContext.Provider, { value: rootStore, children: _jsx(AppStoreContext.Provider, { value: appStore, children: _jsx(ClientContext.Provider, { value: client, children: _jsx(I18NProvider, { locale: navigator.language, path: '/api/locales/{{locale}}', setLoading: setLoadingi18n, children: _jsx(ThemeProvider, { theme: theme, children: _jsx(Loader, { loading: loadingDefs || loadingi18n, children: children }) }) }) }) }) }));
});