@j2inn/app-react
Version:
React implementation of the j2inn-app framework
47 lines (46 loc) • 2.02 kB
JavaScript
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*
* Copyright (c) 2022, J2 Innovations. All Rights Reserved
*/
import { getTranslatedAppName } from '@j2inn/app';
import { Container, Spacer } from '@j2inn/ui';
import { usei18n } from '@j2inn/utils';
import classNames from 'classnames';
import { observer } from 'mobx-react-lite';
import { createUseStyles } from 'react-jss';
import { useAppRootStore } from '../hooks/useAppRootStore';
import { RemoteAppIconRenderer } from './RemoteApp/RemoteAppIconRenderer';
import { Suspense } from './Suspense';
/**
* The default main title for a main app view header.
*/
const DefaultMainViewTitle = observer((props) => {
const i18n = usei18n();
const store = useAppRootStore();
const appData = store.app;
if (!appData) {
return _jsx(_Fragment, {});
}
return (_jsxs("h3", { style: { fontSize: `1.2rem` }, children: [_jsx("span", { style: { marginRight: `0.3rem` }, children: _jsx(RemoteAppIconRenderer, { view: appData.view, appProps: props }) }), getTranslatedAppName(appData.name, i18n)] }));
});
const headerContainerStyles = createUseStyles((theme) => ({
appHeader: {
padding: '1rem',
paddingBottom: '0.5rem',
whiteSpace: 'nowrap',
[`& h1, h2, h3, h4, h5, h6`]: {
color: theme.textColorSecondary,
},
},
}));
/**
* A standardized header for a main app view.
*
* This header shows an icon, the app's name and any extra left side UI.
*/
export const AppMainViewHeader = (props) => {
const { children, title } = props;
const classes = headerContainerStyles();
const appTitle = title?.() ?? (_jsx(DefaultMainViewTitle, { ...props }));
return (_jsxs(Container, { id: 'Shell-AppView-appHeader', horizontal: true, bottom: true, className: classNames(classes.appHeader, props.className), children: [appTitle, _jsx(Spacer, {}), children && _jsx(Suspense, { children: children })] }));
};