From d3f18e8b468400a1c48de8f6034fa29237655443 Mon Sep 17 00:00:00 2001 From: martyanov-av Date: Thu, 21 Mar 2024 15:45:51 +0300 Subject: [PATCH] feat: add page-constructor page type --- package.json | 2 +- .../PageConstructor/PageConstructor.tsx | 102 ++++++++++++++++++ src/components/PageConstructor/index.ts | 1 + src/index.ts | 2 + src/models/index.ts | 19 +++- src/utils/index.ts | 35 +++++- 6 files changed, 156 insertions(+), 5 deletions(-) create mode 100644 src/components/PageConstructor/PageConstructor.tsx create mode 100644 src/components/PageConstructor/index.ts diff --git a/package.json b/package.json index dfa70254..c5f0a388 100644 --- a/package.json +++ b/package.json @@ -75,7 +75,7 @@ }, "dependencies": { "@gravity-ui/icons": "^2.5.0", - "@gravity-ui/uikit": "6.0.0", + "@gravity-ui/uikit": "^6.2.0", "@popperjs/core": "^2.11.2", "bem-cn-lite": "4.1.0", "i18next": "^19.9.2", diff --git a/src/components/PageConstructor/PageConstructor.tsx b/src/components/PageConstructor/PageConstructor.tsx new file mode 100644 index 00000000..25778c18 --- /dev/null +++ b/src/components/PageConstructor/PageConstructor.tsx @@ -0,0 +1,102 @@ +import React from 'react'; + +import { + BackgroundMedia, + Col, + ConstructorBlocks, + Grid, + Row, + getThemedValue, +} from '@gravity-ui/page-constructor'; +import block from 'bem-cn-lite'; + +import {DEFAULT_SETTINGS} from '../../constants'; +import {DocumentType, PageConstructorData, Router, Theme} from '../../models'; +import {DocLayout} from '../DocLayout'; + +const b = block('dc-doc-page'); + +const bPC = block('pc-page-constructor'); +const bPCRow = block('pc-constructor-row'); + +const {wideFormat: defaultWideFormat} = DEFAULT_SETTINGS; + +export interface PageConstructorProps extends PageConstructorData { + router: Router; + headerHeight?: number; + wideFormat?: boolean; + hideTocHeader?: boolean; + hideToc?: boolean; + tocTitleIcon?: React.ReactNode; + theme: Theme; + type: DocumentType; +} + +export type WithChildren = T & {children?: React.ReactNode}; + +export const ConstructorRow = ({children}: WithChildren<{}>) => + children ? ( + + {children} + + ) : null; + +export const PageConstructor: React.FC = ({ + data, + toc, + router, + headerHeight, + wideFormat = defaultWideFormat, + hideTocHeader, + hideToc, + tocTitleIcon, + footer, + theme, + type, +}) => { + const modes = { + 'regular-page-width': !wideFormat, + }; + + const themedBackground = getThemedValue(data?.background, theme); + + return ( + + +
+
+ {type === DocumentType.PageConstructor && ( +
+
+ {data?.blocks && themedBackground && ( + + )} + + + + + +
+
+ )} +
+
+ + + ); +}; diff --git a/src/components/PageConstructor/index.ts b/src/components/PageConstructor/index.ts new file mode 100644 index 00000000..eb437822 --- /dev/null +++ b/src/components/PageConstructor/index.ts @@ -0,0 +1 @@ +export * from './PageConstructor'; diff --git a/src/index.ts b/src/index.ts index 09e61511..fe460990 100644 --- a/src/index.ts +++ b/src/index.ts @@ -23,7 +23,9 @@ export * from './components/ErrorBoundary'; export * from './components/Paginator'; export * from './components/SearchItem'; export * from './components/SearchPage'; +export * from './components/PageConstructor'; export * from './config'; export * from './models'; export * from './constants'; +export * from './utils'; diff --git a/src/models/index.ts b/src/models/index.ts index e54b8889..fb7d3c68 100644 --- a/src/models/index.ts +++ b/src/models/index.ts @@ -1,3 +1,5 @@ +import {PageContent} from '@gravity-ui/page-constructor'; + import type {Loc} from '../config/i18n'; export enum Theme { @@ -37,15 +39,20 @@ export interface DocSettings { export interface DocBasePageData { toc: TocData; - leading?: boolean; + isYaml?: boolean; footer?: React.ReactNode; } export interface DocLeadingPageData extends DocBasePageData { - leading: true; + isYaml: true; data: DocLeadingData; } +export interface PageConstructorData extends DocBasePageData { + isYaml: true; + data: PageContent & {fullScreen: boolean}; +} + export interface DocLeadingData { title: string; description: string | string[]; @@ -67,7 +74,7 @@ export enum VcsType { } export interface DocPageData extends DocBasePageData { - leading?: false; + isYaml?: false; breadcrumbs?: BreadcrumbItem[]; html: string; title?: string; @@ -167,3 +174,9 @@ export interface SubscribeData { email: string; type: SubscribeType; } + +export enum DocumentType { + Base = 'BASE', + Leading = 'LEADING', + PageConstructor = 'PAGE_CONSTRUCTOR', +} diff --git a/src/utils/index.ts b/src/utils/index.ts index c95e0f75..c2d382d2 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -2,8 +2,18 @@ import {parse} from 'url'; import {ThemeContextProps} from '@gravity-ui/uikit'; +import {DocLeadingPage} from '../components/DocLeadingPage'; +import {DocPage} from '../components/DocPage'; +import {PageConstructor} from '../components/PageConstructor'; import {PopperPosition} from '../hooks'; -import {Contributor, Router} from '../models'; +import { + Contributor, + DocLeadingPageData, + DocPageData, + DocumentType, + PageConstructorData, + Router, +} from '../models'; export type InnerProps, TDefaultProps> = Omit< TProps, @@ -97,3 +107,26 @@ export const getPopupPosition = ( return isVerticalView ? PopperPosition.LEFT_START : PopperPosition.BOTTOM_END; }; + +export function getPageByType(type: DocumentType) { + const PageTypes = { + [DocumentType.Base]: DocPage, + [DocumentType.Leading]: DocLeadingPage, + [DocumentType.PageConstructor]: PageConstructor, + }; + + return PageTypes[type] || null; +} + +export function getPageType({ + data, + isYaml, +}: DocLeadingPageData | (DocPageData & {data?: undefined}) | PageConstructorData): DocumentType { + if (isYaml && data) { + return Object.prototype.hasOwnProperty.call(data, 'links') + ? DocumentType.Leading + : DocumentType.PageConstructor; + } + + return DocumentType.Base; +}