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`] = ` + `;