Rename Timestamp to RelativeTime

This commit is contained in:
Chi Vinh Le
2018-07-12 16:40:11 -03:00
parent 6467348296
commit 067464104a
14 changed files with 38 additions and 38 deletions
@@ -2,7 +2,7 @@ import cn from "classnames";
import React from "react";
import { StatelessComponent } from "react";
import { Timestamp, Typography } from "talk-ui/components";
import { RelativeTime, Typography } from "talk-ui/components";
import * as styles from "./Comment.css";
import Username from "./Username";
@@ -25,7 +25,7 @@ const Comment: StatelessComponent<CommentProps> = props => {
<div className={rootClassName} role="article">
<div className={styles.topBar}>
{props.author && <Username>{props.author.username}</Username>}
<Timestamp date={props.createdAt} />
<RelativeTime date={props.createdAt} />
</div>
<Typography>{props.body}</Typography>
</div>
@@ -11,7 +11,7 @@ exports[`renders username and body 1`] = `
<Username>
Marvin
</Username>
<withPropsOnChange(Timestamp)
<withPropsOnChange(RelativeTime)
date="1995-12-17T06:24:00.000Z"
/>
</div>
@@ -32,7 +32,7 @@ exports[`renders with gutterBottom 1`] = `
<Username>
Marvin
</Username>
<withPropsOnChange(Timestamp)
<withPropsOnChange(RelativeTime)
date="1995-12-17T06:24:00.000Z"
/>
</div>
@@ -57,7 +57,7 @@ exports[`loads more comments 1`] = `
Markus
</span>
<time
className="Timestamp-root"
className="RelativeTime-root"
dateTime="2018-07-06T21:24:00.000Z"
title="2018-07-06T18:24:00"
>
@@ -85,7 +85,7 @@ exports[`loads more comments 1`] = `
Lukas
</span>
<time
className="Timestamp-root"
className="RelativeTime-root"
dateTime="2018-07-06T21:20:00.000Z"
title="2018-07-06T18:20:00"
>
@@ -113,7 +113,7 @@ exports[`loads more comments 1`] = `
Isabelle
</span>
<time
className="Timestamp-root"
className="RelativeTime-root"
dateTime="2018-07-06T21:14:00.000Z"
title="2018-07-06T18:14:00"
>
@@ -189,7 +189,7 @@ exports[`renders comment stream 1`] = `
Markus
</span>
<time
className="Timestamp-root"
className="RelativeTime-root"
dateTime="2018-07-06T21:24:00.000Z"
title="2018-07-06T18:24:00"
>
@@ -217,7 +217,7 @@ exports[`renders comment stream 1`] = `
Lukas
</span>
<time
className="Timestamp-root"
className="RelativeTime-root"
dateTime="2018-07-06T21:20:00.000Z"
title="2018-07-06T18:20:00"
>
@@ -57,7 +57,7 @@ exports[`renders comment stream 1`] = `
Markus
</span>
<time
className="Timestamp-root"
className="RelativeTime-root"
dateTime="2018-07-06T21:24:00.000Z"
title="2018-07-06T18:24:00"
>
@@ -85,7 +85,7 @@ exports[`renders comment stream 1`] = `
Markus
</span>
<time
className="Timestamp-root"
className="RelativeTime-root"
dateTime="2018-07-06T21:24:00.000Z"
title="2018-07-06T18:24:00"
>
@@ -118,7 +118,7 @@ exports[`renders comment stream 1`] = `
Markus
</span>
<time
className="Timestamp-root"
className="RelativeTime-root"
dateTime="2018-07-06T21:24:00.000Z"
title="2018-07-06T18:24:00"
>
@@ -144,7 +144,7 @@ exports[`renders comment stream 1`] = `
Lukas
</span>
<time
className="Timestamp-root"
className="RelativeTime-root"
dateTime="2018-07-06T21:20:00.000Z"
title="2018-07-06T18:20:00"
>
@@ -57,7 +57,7 @@ exports[`renders comment stream 1`] = `
Markus
</span>
<time
className="Timestamp-root"
className="RelativeTime-root"
dateTime="2018-07-06T21:24:00.000Z"
title="2018-07-06T18:24:00"
>
@@ -85,7 +85,7 @@ exports[`renders comment stream 1`] = `
Lukas
</span>
<time
className="Timestamp-root"
className="RelativeTime-root"
dateTime="2018-07-06T21:20:00.000Z"
title="2018-07-06T18:20:00"
>
@@ -57,7 +57,7 @@ exports[`renders comment stream 1`] = `
Markus
</span>
<time
className="Timestamp-root"
className="RelativeTime-root"
dateTime="2018-07-06T21:24:00.000Z"
title="2018-07-06T18:24:00"
>
@@ -90,7 +90,7 @@ exports[`renders comment stream 1`] = `
Lukas
</span>
<time
className="Timestamp-root"
className="RelativeTime-root"
dateTime="2018-07-06T21:20:00.000Z"
title="2018-07-06T18:20:00"
>
@@ -180,7 +180,7 @@ exports[`show all replies 1`] = `
Markus
</span>
<time
className="Timestamp-root"
className="RelativeTime-root"
dateTime="2018-07-06T21:24:00.000Z"
title="2018-07-06T18:24:00"
>
@@ -213,7 +213,7 @@ exports[`show all replies 1`] = `
Lukas
</span>
<time
className="Timestamp-root"
className="RelativeTime-root"
dateTime="2018-07-06T21:20:00.000Z"
title="2018-07-06T18:20:00"
>
@@ -239,7 +239,7 @@ exports[`show all replies 1`] = `
Isabelle
</span>
<time
className="Timestamp-root"
className="RelativeTime-root"
dateTime="2018-07-06T21:14:00.000Z"
title="2018-07-06T18:14:00"
>
@@ -1,17 +1,17 @@
---
name: Timestamp
name: RelativeTime
menu: UI Kit
---
import { Playground } from 'docz'
import Timestamp from './Timestamp'
import RelativeTime from './RelativeTime'
# Timestamp
# RelativeTime
Renders relative time until given `date`.
## Basic usage
<Playground>
<Timestamp date="2018-07-04T12:14"
<RelativeTime date="2018-07-04T12:14"
formatter={(value, unit, suffix, timestamp) => "".concat(value, " ", unit, " ", suffix)} />
</Playground>
@@ -2,13 +2,13 @@ import React from "react";
import { create } from "react-test-renderer";
import UIContext from "../UIContext";
import Timestamp from "./Timestamp";
import RelativeTime from "./RelativeTime";
it("uses default formatter", () => {
const props = {
date: new Date("December 17, 2108 03:24:00").toISOString(),
};
const tree = create(<Timestamp {...props} />).toJSON();
const tree = create(<RelativeTime {...props} />).toJSON();
expect(tree).toMatchSnapshot();
});
@@ -22,7 +22,7 @@ it("uses formatter from context", () => {
};
const tree = create(
<UIContext.Provider value={context}>
<Timestamp {...props} />
<RelativeTime {...props} />
</UIContext.Provider>
).toJSON();
@@ -34,7 +34,7 @@ it("uses formatter from props", () => {
date: new Date("December 17, 2108 03:24:00").toISOString(),
formatter: () => "My Props Formatter",
};
const tree = create(<Timestamp {...props} />).toJSON();
const tree = create(<RelativeTime {...props} />).toJSON();
expect(tree).toMatchSnapshot();
});
@@ -6,7 +6,7 @@ import { UIContext } from "talk-ui/components";
import { withStyles } from "talk-ui/hocs";
import { PropTypesOf } from "talk-ui/types";
import * as styles from "./Timestamp.css";
import * as styles from "./RelativeTime.css";
interface InnerProps {
date: string;
@@ -19,7 +19,7 @@ interface InnerProps {
const defaultFormatter: Formatter = (value, unit, suffix, timestamp: string) =>
new Date(timestamp).toISOString();
class Timestamp extends React.Component<InnerProps> {
class RelativeTime extends React.Component<InnerProps> {
public render() {
const { date, classes, live, className, formatter } = this.props;
return (
@@ -37,6 +37,6 @@ class Timestamp extends React.Component<InnerProps> {
}
}
const enhanced = withStyles(styles)(Timestamp);
export type TimestampProps = PropTypesOf<typeof enhanced>;
const enhanced = withStyles(styles)(RelativeTime);
export type RelativeTimeProps = PropTypesOf<typeof enhanced>;
export default enhanced;
@@ -2,7 +2,7 @@
exports[`uses default formatter 1`] = `
<time
className="Timestamp-root"
className="RelativeTime-root"
dateTime="2108-12-17T06:24:00.000Z"
title="2108-12-17T06:24:00.000Z"
>
@@ -12,7 +12,7 @@ exports[`uses default formatter 1`] = `
exports[`uses formatter from context 1`] = `
<time
className="Timestamp-root"
className="RelativeTime-root"
dateTime="2108-12-17T06:24:00.000Z"
title="2108-12-17T06:24:00.000Z"
>
@@ -22,7 +22,7 @@ exports[`uses formatter from context 1`] = `
exports[`uses formatter from props 1`] = `
<time
className="Timestamp-root"
className="RelativeTime-root"
dateTime="2108-12-17T06:24:00.000Z"
title="2108-12-17T06:24:00.000Z"
>
@@ -0,0 +1,2 @@
export * from "./RelativeTime";
export { default } from "./RelativeTime";
@@ -1,2 +0,0 @@
export * from "./Timestamp";
export { default } from "./Timestamp";
+1 -1
View File
@@ -1,7 +1,7 @@
export { default as BaseButton } from "./BaseButton";
export { default as Button } from "./Button";
export { default as Typography } from "./Typography";
export { default as Timestamp } from "./Timestamp";
export { default as RelativeTime } from "./RelativeTime";
export { default as UIContext } from "./UIContext";
export { default as Flex } from "./Flex";
export { default as MatchMedia } from "./MatchMedia";