@etsoo/website
Version:
ETSOO CMS Based NextJs Website Framework
80 lines (79 loc) • 5.41 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Head from 'next/head';
import React from 'react';
import { CommonArticlePage } from './CommonArticlePage';
import { CommonContentListPage } from './CommonContentListPage';
import { CommonFullListPage } from './CommonFullListPage';
import { CommonLogoListPage } from './CommonLogoListPage';
import { CommonTitleDescriptionListPage } from './CommonTitleDescriptionListPage';
import { CommonTitleListPage } from './CommonTitleListPage';
import { SiteUtils } from '../site/SiteUtils';
import { TabLayout } from '../dto/site/TabLayout';
/**
* Common page class names
*/
export const CommonPageClassNames = {
articleClassName: '',
articleTitleClassName: 'article-title',
articleContentClassName: 'text-break text-justify article-content'
};
/**
* Common page title renderer
* @param Props
* @returns
*/
export function CommonPageTitleRenderer({ siteData, tab, article, articleTitleClassName, isTab, titleRightRenderer }) {
var _a, _b;
// Ancestors
const ancestors = (_b = (_a = tab.ancestorTabs) === null || _a === void 0 ? void 0 : _a.reverse()) !== null && _b !== void 0 ? _b : [];
if (!isTab)
ancestors.push(tab);
return (_jsxs("div", { className: "d-flex justify-content-between align-items-end title-container text-uppercase mb-3", children: [_jsx("div", { className: articleTitleClassName, children: _jsx("nav", { children: _jsxs("ol", { className: "breadcrumb", children: [ancestors.map((a) => (_jsx("li", { className: "breadcrumb-item", children: _jsx("a", { href: SiteUtils.formatUrl(a), children: a.name }) }, a.id))), _jsx("li", { className: "breadcrumb-item active", children: article ? article.title : tab.name })] }) }) }), titleRightRenderer == null
? undefined
: titleRightRenderer({ siteData, tab, article, isTab })] }));
}
/**
* Common tab page
* @param props Props
* @returns Component
*/
export function CommonTabPage(props) {
// Destruct
const { article, articles, articleClassName = CommonPageClassNames.articleClassName, articleTitleClassName = CommonPageClassNames.articleTitleClassName, logoListRenderer, photosRenderer, titleRenderer, titleRightRenderer, titleDescriptionListRenderer, titleListRenderer, siteData, tab, articleRenderer, contentListRenderer, fullListRenderer } = props;
if (article) {
const ArticleLayout = articleRenderer !== null && articleRenderer !== void 0 ? articleRenderer : CommonArticlePage;
return (_jsx(ArticleLayout, { siteData: siteData, tab: tab, article: article, articleClassName: articleClassName, articleTitleClassName: articleTitleClassName, photosRenderer: photosRenderer, titleRenderer: titleRenderer, titleRightRenderer: titleRightRenderer, isTab: tab.layout === TabLayout.Article }));
}
const getLayout = () => {
const layout = tab.layout;
if (layout === TabLayout.None) {
return _jsx(React.Fragment, {});
}
if (layout === TabLayout.ContentList) {
const ConentListLayout = contentListRenderer !== null && contentListRenderer !== void 0 ? contentListRenderer : CommonContentListPage;
return (_jsx(ConentListLayout, { siteData: siteData, tab: tab, articles: articles, photosRenderer: photosRenderer }));
}
if (layout === TabLayout.FullList) {
const FullListLayout = fullListRenderer !== null && fullListRenderer !== void 0 ? fullListRenderer : CommonFullListPage;
return (_jsx(FullListLayout, { siteData: siteData, tab: tab, articles: articles }));
}
if (layout === TabLayout.LogoList) {
const LogoListLayout = logoListRenderer !== null && logoListRenderer !== void 0 ? logoListRenderer : CommonLogoListPage;
return (_jsx(LogoListLayout, { siteData: siteData, tab: tab, articles: articles }));
}
if (layout === TabLayout.TitleDescriptionList) {
const TitleDescriptionLayout = titleDescriptionListRenderer !== null && titleDescriptionListRenderer !== void 0 ? titleDescriptionListRenderer : CommonTitleDescriptionListPage;
return (_jsx(TitleDescriptionLayout, { siteData: siteData, tab: tab, articles: articles }));
}
if (layout === TabLayout.TitleList) {
const TitleLayout = titleListRenderer !== null && titleListRenderer !== void 0 ? titleListRenderer : CommonTitleListPage;
return (_jsx(TitleLayout, { siteData: siteData, tab: tab, articles: articles }));
}
return _jsx("h6", { children: "Please add one article at least for the tab." });
};
const description = tab.description;
const TitleLayout = titleRenderer !== null && titleRenderer !== void 0 ? titleRenderer : CommonPageTitleRenderer;
// Layout
return (_jsxs(React.Fragment, { children: [_jsxs(Head, { children: [_jsx("title", { children: `${siteData.site.title} - ${tab.name}` }), description && (_jsx("meta", { name: "description", content: `${siteData.site.description} - ${description}` }))] }, `tab-${tab.id}`), _jsxs("article", { className: `tab-${TabLayout[tab.layout].toLowerCase()} ` +
articleClassName, children: [_jsx(TitleLayout, { siteData: siteData, tab: tab, article: null, articleTitleClassName: articleTitleClassName, titleRightRenderer: titleRightRenderer, isTab: true }), getLayout()] })] }));
}