Allow custom date rendering

prezly · Aug 1, 2024 · f7f8c69 · f7f8c69
1 parent 7b1907a
commit f7f8c69
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 15 deletions.
diff --git a/src/Renderer.tsx b/src/Renderer.tsx
@@ -41,10 +41,10 @@ type Fallback = 'ignore' | 'warning' | 'passthru' | ComponentType<{ node: Node }
 interface Props<N extends Node | Node[]> {
     children?: ReactNode;
     coverageEntries?: Record<number, CoverageEntry>;
-    dateFormat?: string;
     defaultComponents?: boolean;
     defaultFallback?: Fallback;
     nodes: N;
+    renderDate?: (date: string) => ReactNode;
     transformations?: Transformation[];
 }
 
@@ -56,10 +56,10 @@ interface RenderProps<T extends Node> {
 export function Renderer<N extends Node | Node[]>({
     children,
     coverageEntries = {},
-    dateFormat = 'DD/MM/YYYY',
     defaultComponents = true,
     defaultFallback = 'warning',
     nodes,
+    renderDate = defaultRenderDate,
     transformations = Object.values(Transformations),
 }: Props<N>) {
     const transformedNodes = applyTransformations<Node>(
@@ -69,7 +69,7 @@ export function Renderer<N extends Node | Node[]>({
 
     function renderCoverageNode(props: RenderProps<CoverageNode>) {
         const coverage: CoverageEntry | undefined = coverageEntries[props.node.coverage.id];
-        return <Elements.Coverage coverage={coverage} dateFormat={dateFormat} node={props.node} />;
+        return <Elements.Coverage coverage={coverage} node={props.node} renderDate={renderDate} />;
     }
 
     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
@@ -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
                 <Meta
                     author={coverage.author_contact}
                     date={coverage.published_at}
-                    dateFormat={dateFormat}
                     outlet={coverage.organisation_contact}
+                    renderDate={renderDate}
                 />
             </div>
         </div>
@@ -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 && (
                 <span className="prezly-slate-coverage-card-component__publication-date">
-                    {new Date(date).toLocaleDateString()}
+                    {renderDate(date)}
                 </span>
             )}
         </div>

diff --git 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) {
         <CoverageCard
             className="prezly-slate-coverage"
             coverage={coverage}
-            dateFormat={dateFormat}
             layout={node.layout}
+            renderDate={renderDate}
             withThumbnail={node.show_thumbnail}
         />
     );