42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import Tooltip from "@material-ui/core/Tooltip";
|
|
import moment from "moment-timezone";
|
|
import React from "react";
|
|
|
|
import useDateLocalize from "@saleor/hooks/useDateLocalize";
|
|
import { LocaleConsumer } from "../Locale";
|
|
import { Consumer } from "./DateContext";
|
|
|
|
interface DateProps {
|
|
date: string;
|
|
plain?: boolean;
|
|
}
|
|
|
|
export const Date: React.FC<DateProps> = ({ date, plain }) => {
|
|
const localizeDate = useDateLocalize();
|
|
const getHumanized = (value: string, locale: string, currentDate: number) =>
|
|
moment(value)
|
|
.locale(locale)
|
|
.from(currentDate);
|
|
|
|
return (
|
|
<LocaleConsumer>
|
|
{locale => (
|
|
<Consumer>
|
|
{currentDate =>
|
|
plain ? (
|
|
localizeDate(date)
|
|
) : (
|
|
<Tooltip title={localizeDate(date)}>
|
|
<time dateTime={date}>
|
|
{getHumanized(date, locale, currentDate)}
|
|
</time>
|
|
</Tooltip>
|
|
)
|
|
}
|
|
</Consumer>
|
|
)}
|
|
</LocaleConsumer>
|
|
);
|
|
};
|
|
Date.displayName = "Date";
|
|
export default Date;
|