diff --git a/src/core/client/ui/components/Timestamp/Timestamp.mdx b/src/core/client/ui/components/Timestamp/Timestamp.mdx
index 07c205ece..591ae963a 100644
--- a/src/core/client/ui/components/Timestamp/Timestamp.mdx
+++ b/src/core/client/ui/components/Timestamp/Timestamp.mdx
@@ -8,8 +8,10 @@ import Timestamp from './Timestamp'
# Timestamp
+Renders relative time until given `date`.
+
## Basic usage
-
+ "".concat(value, " ", unit, " ", suffix)} />
-
diff --git a/src/core/client/ui/components/Timestamp/Timestamp.spec.tsx b/src/core/client/ui/components/Timestamp/Timestamp.spec.tsx
index 17043020c..6235f1e15 100644
--- a/src/core/client/ui/components/Timestamp/Timestamp.spec.tsx
+++ b/src/core/client/ui/components/Timestamp/Timestamp.spec.tsx
@@ -15,7 +15,7 @@ it("uses default formatter", () => {
it("uses formatter from context", () => {
const context: any = {
- timeagoFormatter: () => "My Formatter",
+ timeagoFormatter: () => "My Context Formatter",
};
const props = {
date: new Date("December 17, 2108 03:24:00").toISOString(),
@@ -28,3 +28,13 @@ it("uses formatter from context", () => {
expect(tree).toMatchSnapshot();
});
+
+it("uses formatter from props", () => {
+ const props = {
+ date: new Date("December 17, 2108 03:24:00").toISOString(),
+ formatter: () => "My Props Formatter",
+ };
+ const tree = create().toJSON();
+
+ expect(tree).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/Timestamp/Timestamp.tsx b/src/core/client/ui/components/Timestamp/Timestamp.tsx
index 004092b11..999587d1e 100644
--- a/src/core/client/ui/components/Timestamp/Timestamp.tsx
+++ b/src/core/client/ui/components/Timestamp/Timestamp.tsx
@@ -13,6 +13,7 @@ interface InnerProps {
live?: boolean;
classes: typeof styles;
className?: string;
+ formatter?: Formatter;
}
const defaultFormatter: Formatter = (value, unit, suffix, timestamp: string) =>
@@ -20,7 +21,7 @@ const defaultFormatter: Formatter = (value, unit, suffix, timestamp: string) =>
class Timestamp extends React.Component {
public render() {
- const { date, classes, live, className } = this.props;
+ const { date, classes, live, className, formatter } = this.props;
return (
{({ timeagoFormatter }) => (
@@ -28,7 +29,7 @@ class Timestamp extends React.Component {
date={date}
className={cn(className, classes.root)}
live={live}
- formatter={timeagoFormatter || defaultFormatter}
+ formatter={timeagoFormatter || formatter || defaultFormatter}
/>
)}
diff --git a/src/core/client/ui/components/Timestamp/__snapshots__/Timestamp.spec.tsx.snap b/src/core/client/ui/components/Timestamp/__snapshots__/Timestamp.spec.tsx.snap
index fb4af9b41..455673622 100644
--- a/src/core/client/ui/components/Timestamp/__snapshots__/Timestamp.spec.tsx.snap
+++ b/src/core/client/ui/components/Timestamp/__snapshots__/Timestamp.spec.tsx.snap
@@ -16,6 +16,16 @@ exports[`uses formatter from context 1`] = `
dateTime="2108-12-17T06:24:00.000Z"
title="2108-12-17T06:24:00.000Z"
>
- My Formatter
+ My Context Formatter
+
+`;
+
+exports[`uses formatter from props 1`] = `
+
`;