@enonic/react-components
Version:
Library of React components for handling Enonic XP data and page components
221 lines (214 loc) • 7.95 kB
TypeScript
import { ComponentDescriptor, TextComponent, LiteralUnion, RequestMode } from '@enonic-types/core';
import { Element } from 'html-react-parser';
import { CSSProperties, JSX, ReactNode } from 'react';
interface ComponentDefinitionParams<PROPS = {}> {
View: React.FunctionComponent<PROPS>;
}
interface ComponentDefinition<PROPS = {}> {
View: React.FunctionComponent<PROPS>;
}
interface ComponentRegistry {
addContentType<PROPS = {}>(name: string, obj: ComponentDefinitionParams<PROPS>): void;
addMacro<PROPS = {}>(name: string, obj: ComponentDefinitionParams<PROPS>): void;
addLayout<PROPS = {}>(name: string, obj: ComponentDefinitionParams<PROPS>): void;
addPage<PROPS = {}>(name: string, obj: ComponentDefinitionParams<PROPS>): void;
addPart<PROPS = {}>(name: string, obj: ComponentDefinitionParams<PROPS>): void;
getContentType<PROPS = {}>(name: string): ComponentDefinition<PROPS> | undefined;
getMacro<PROPS = {}>(name: string): ComponentDefinition<PROPS> | undefined;
getLayout<PROPS = {}>(name: string): ComponentDefinition<PROPS> | undefined;
getPage<PROPS = {}>(name: string): ComponentDefinition<PROPS> | undefined;
getPart<PROPS = {}>(name: string): ComponentDefinition<PROPS> | undefined;
hasContentType(name: string): boolean;
hasMacro(name: string): boolean;
hasLayout(name: string): boolean;
hasPage(name: string): boolean;
hasPart(name: string): boolean;
}
type XpRunMode = 'development' | 'production';
interface ContentTypeData {
contentType: string;
type: 'contentType';
}
interface ErrorData {
html: string;
path: string;
type: 'error';
}
interface RegionData {
name: string;
components: ComponentDataAndProps[];
}
type RegionsData = Record<string, RegionData>;
interface LayoutData {
descriptor: ComponentDescriptor;
path?: string;
regions: RegionsData;
type: 'layout';
}
interface PageData {
descriptor: ComponentDescriptor;
path: '/';
regions: RegionsData;
type: 'page';
}
interface PartData {
descriptor: ComponentDescriptor;
path?: string;
type: 'part';
}
interface FragmentData {
key?: string;
path?: string;
type: 'fragment';
}
interface MacroComponentData {
descriptor: string;
name: string;
ref?: string;
type: 'macro';
}
type TextData = TextComponent;
type MetaData = {
type: string;
id: string;
path: string;
mode: LiteralUnion<RequestMode>;
componentRegistry: ComponentRegistry;
};
type ComponentDataAndProps<T extends ComponentData = ComponentData> = {
data?: Record<string, unknown>;
component: T;
};
type ComponentData = ContentTypeData | LayoutData | PageData | PartData | TextData | FragmentData | MacroComponentData | ErrorData;
interface RichTextData extends Record<string, unknown> {
processedHtml: string;
links?: LinkData[];
macros?: MacroData[];
images?: ImageData[];
}
interface ExtendedRichTextData extends RichTextData {
macroComponents?: ComponentDataAndProps<MacroComponentData>[];
}
interface LinkData {
ref: string;
content?: Partial<RichtextContent> | null;
media?: LinkDataMedia | null;
uri: string;
}
interface LinkDataMedia {
content: Partial<RichtextContent> & {
mediaUrl?: string;
};
intent: 'inline' | 'download';
}
type MacroConfig = Record<string, unknown>;
interface MacroData {
ref: string;
name: string;
descriptor: string;
config: Record<string, MacroConfig>;
}
type ImageContent = Partial<RichtextContent> & {
imageUrl?: string;
};
interface ImageData {
ref: string;
image: ImageContent;
style?: ImageStyle | null;
}
interface ImageStyle {
name: string;
aspectRatio: string;
filter: string;
}
type RichTextComponentProps = Omit<ComponentProps, 'data' | 'meta'> & {
data: ExtendedRichTextData;
meta: RichTextMetaData;
};
type RichTextMetaData = Omit<MetaData, 'componentRegistry'> & {
componentRegistry?: ComponentRegistry;
};
type ReplacerResult = JSX.Element | object | void | undefined | null | false;
type ImageComponent<RestProps = Record<string, unknown>> = (params: ImageComponentParams<RestProps>) => JSX.Element | null;
type ImageComponentParams<RestProps = Record<string, unknown>> = {
alt?: string;
image: ImageContent;
imageStyle?: ImageStyle | null;
sizes?: string;
src: string;
srcSet?: string;
style?: CSSProperties;
} & RestProps;
type ReplacerParams<RestProps = Record<string, unknown>> = RichTextComponentProps & {
el: Element;
} & RestProps;
type Replacer<RestProps = Record<string, unknown>> = (params: ReplacerParams<RestProps>) => ReplacerResult;
type LinkComponent<RestProps = Record<string, unknown>> = (params: LinkComponentParams<RestProps>) => JSX.Element | null;
type LinkComponentParams<RestProps = Record<string, unknown>> = {
children: ReactNode;
content?: Partial<RichtextContent> | null;
href: string;
media?: LinkDataMedia | null;
target?: string;
title?: string;
uri: string;
} & RestProps;
type MacroComponent<RestProps = Record<string, unknown>> = (params: MacroComponentParams<RestProps>) => JSX.Element | null;
type MacroComponentParams<RestProps = Record<string, unknown>> = ComponentProps<MacroComponentData> & {
children: string | JSX.Element | JSX.Element[];
} & RestProps;
type RichtextContent<Extensions extends Record<string, unknown> = Record<string, unknown>> = {
_id: string;
_name: string;
_path: string;
_references: RichtextContent[];
_score?: number;
children: RichtextContent[];
components: RichtextContent[];
createdTime: string;
displayName: string;
language: string;
modifiedTime?: string;
pageTemplate: RichtextContent;
pageUrl: string;
parent: RichtextContent;
type: string;
valid: boolean;
imageUrl?: string;
mediaUrl?: string;
[key: string]: any;
} & Extensions;
type RichTextParams<RestProps = Record<string, unknown>> = RichTextComponentProps & {
tag?: string;
className?: string;
Image?: ImageComponent<RestProps>;
Macro?: MacroComponent<RestProps>;
Link?: LinkComponent<RestProps>;
replacer?: Replacer<RestProps>;
} & RestProps;
type ContentUri = `content://${string}`;
type MediaUri = `media://${string}`;
interface ComponentProps<T extends ComponentData = ComponentData> {
meta: MetaData;
component: T;
data?: Record<string, unknown>;
common?: Record<string, unknown>;
}
declare enum COMPONENT_DATA_TYPE {
CONTENT_TYPE = "contentType",
ERROR = "error",
FRAGMENT = "fragment",
LAYOUT = "layout",
PAGE = "page",
PART = "part",
TEXT = "text",
MACRO = "macro"
}
declare enum XP_REQUEST_MODE {
ADMIN = "admin",
EDIT = "edit",
INLINE = "inline",
LIVE = "live",
PREVIEW = "preview"
}
export { type RichTextData as A, type ExtendedRichTextData as B, type ComponentProps as C, type RichTextMetaData as D, type ErrorData as E, type FragmentData as F, type RichTextComponentProps as G, type MacroData as H, type ImageComponentParams as I, COMPONENT_DATA_TYPE as J, type XpRunMode as K, type LayoutData as L, type MacroComponentParams as M, type PageData as P, type RichTextParams as R, type TextData as T, XP_REQUEST_MODE as X, type ContentTypeData as a, type PartData as b, type ComponentRegistry as c, type ComponentDefinitionParams as d, type ComponentDefinition as e, type ComponentDataAndProps as f, type MetaData as g, type LinkComponentParams as h, type ContentUri as i, type ComponentData as j, type RegionsData as k, type RegionData as l, type MacroComponentData as m, type ImageComponent as n, type ImageContent as o, type ImageData as p, type ImageStyle as q, type LinkComponent as r, type LinkData as s, type LinkDataMedia as t, type MacroComponent as u, type MacroConfig as v, type MediaUri as w, type Replacer as x, type ReplacerResult as y, type RichtextContent as z };