@j2inn/app-react
Version:
React implementation of the j2inn-app framework
37 lines (36 loc) • 1.73 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*
* Copyright (c) 2022, J2 Innovations. All Rights Reserved
*/
import { CloseOutlined } from '@ant-design/icons';
import { getTranslatedAppName } from '@j2inn/app';
import { Button, 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 { Suspense } from './Suspense';
const sideBarHeaderStyles = createUseStyles((theme) => ({
sideBarHeader: {
padding: `0.5rem 1rem`,
whiteSpace: 'nowrap',
backgroundColor: theme.bgColor,
borderBottom: theme ? `1px solid ${theme.borderColor}` : '',
},
}));
/**
* A standardized header for a sidebar app view.
*
* This header shows an icon, the app's name, a target selector (if relevant),
* and a close button.
*/
export const AppSidebarViewHeader = observer((props) => {
const store = useAppRootStore();
const i18n = usei18n();
const classes = sideBarHeaderStyles();
const { children, title } = props;
const { sidebar } = store;
const appTitle = title?.() ?? (_jsx("h3", { children: sidebar ? getTranslatedAppName(sidebar.name, i18n) : '' }));
return (_jsxs(Container, { id: 'Shell-AppView-appHeader', horizontal: true, middle: true, className: classNames(classes.sideBarHeader, props.className), children: [appTitle, _jsx(Spacer, {}), children && _jsx(Suspense, { children: children }), _jsx(Button, { type: 'text', icon: _jsx(CloseOutlined, {}), onClick: () => (store.sidebarOpen = false) })] }));
});