mirror of
https://github.com/wassname/talk.git
synced 2026-08-18 12:30:39 +08:00
Rename Timestamp to RelativeTime
This commit is contained in:
@@ -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"
|
||||
>
|
||||
|
||||
+4
-4
@@ -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>
|
||||
+4
-4
@@ -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();
|
||||
});
|
||||
+4
-4
@@ -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;
|
||||
+3
-3
@@ -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,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";
|
||||
|
||||
Reference in New Issue
Block a user