diff --git a/src/Renderer.tsx b/src/Renderer.tsx index bade2f2..e5efe27 100644 --- a/src/Renderer.tsx +++ b/src/Renderer.tsx @@ -41,10 +41,10 @@ type Fallback = 'ignore' | 'warning' | 'passthru' | ComponentType<{ node: Node } interface Props { children?: ReactNode; coverageEntries?: Record; - dateFormat?: string; defaultComponents?: boolean; defaultFallback?: Fallback; nodes: N; + renderDate?: (date: string) => ReactNode; transformations?: Transformation[]; } @@ -56,10 +56,10 @@ interface RenderProps { export function Renderer({ children, coverageEntries = {}, - dateFormat = 'DD/MM/YYYY', defaultComponents = true, defaultFallback = 'warning', nodes, + renderDate = defaultRenderDate, transformations = Object.values(Transformations), }: Props) { const transformedNodes = applyTransformations( @@ -69,7 +69,7 @@ export function Renderer({ function renderCoverageNode(props: RenderProps) { const coverage: CoverageEntry | undefined = coverageEntries[props.node.coverage.id]; - return ; + return ; } return ( @@ -132,6 +132,10 @@ function fallback(defaultFallback: Fallback): ComponentType<{ node: Node }> { return defaultFallback; } +function defaultRenderDate(date: string) { + return new Date(date).toLocaleDateString(); +} + function isAnyNode(_: Node): _ is Node { return true; } diff --git a/src/components/CoverageCard/CoverageCard.tsx b/src/components/CoverageCard/CoverageCard.tsx index aa5055a..79c876c 100644 --- a/src/components/CoverageCard/CoverageCard.tsx +++ b/src/components/CoverageCard/CoverageCard.tsx @@ -1,5 +1,6 @@ import type { Contact, CoverageEntry } from '@prezly/sdk'; import classNames from 'classnames'; +import type { ReactNode } from 'react'; import { formatBytes } from '../../lib'; @@ -8,15 +9,12 @@ import { getCoverageImageUrl } from './getCoverageImageUrl'; interface Props { className?: string; coverage: CoverageEntry; - /** - * Moment.js-compatible format - */ - dateFormat: string; layout: 'vertical' | 'horizontal'; + renderDate: (date: string) => ReactNode; withThumbnail: boolean; } -export function CoverageCard({ className, coverage, dateFormat, layout, withThumbnail }: Props) { +export function CoverageCard({ className, coverage, layout, renderDate, withThumbnail }: Props) { const imageUrl = getCoverageImageUrl(coverage); const href = coverage.attachment_oembed?.url || coverage.url; const autoLayout = withThumbnail && imageUrl ? layout : 'horizontal'; @@ -38,8 +36,8 @@ export function CoverageCard({ className, coverage, dateFormat, layout, withThum @@ -106,10 +104,10 @@ function Description(props: { coverage: CoverageEntry }) { function Meta(props: { author: Contact | null; date: string | null; - dateFormat: string; outlet: Contact | null; + renderDate: (date: string) => ReactNode; }) { - const { author, date, outlet } = props; + const { author, date, outlet, renderDate } = props; const hasOutlet = outlet !== null; const hasAuthor = author !== null; @@ -147,7 +145,7 @@ function Meta(props: { )} {hasDate && ( - {new Date(date).toLocaleDateString()} + {renderDate(date)} )} diff --git a/src/elements/Coverage/Coverage.tsx b/src/elements/Coverage/Coverage.tsx index 160510f..79c29cb 100644 --- a/src/elements/Coverage/Coverage.tsx +++ b/src/elements/Coverage/Coverage.tsx @@ -1,14 +1,15 @@ import type { CoverageNode } from '@prezly/story-content-format'; import type { CoverageEntry } from "@prezly/sdk"; import { CoverageCard } from "../../components"; +import type { ReactNode } from "react"; interface Props { coverage: CoverageEntry | undefined; - dateFormat: string; node: CoverageNode; + renderDate: (date: string) => ReactNode; } -export function Coverage({ coverage, dateFormat, node }: Props) { +export function Coverage({ coverage, node, renderDate }: Props) { if (!coverage) { return null; } @@ -17,8 +18,8 @@ export function Coverage({ coverage, dateFormat, node }: Props) { );