mirror of
https://github.com/streetwriters/notesnook.git
synced 2025-12-16 19:57:52 +01:00
91 lines
2.1 KiB
JavaScript
91 lines
2.1 KiB
JavaScript
import { formatDate } from "@streetwriters/notesnook-core/utils/date";
|
|
import React, { useEffect, useRef } from "react";
|
|
import { Text } from "@streetwriters/rebass";
|
|
import { register, format, cancel, render } from "timeago.js";
|
|
|
|
const shortLocale = [
|
|
["now", "now"],
|
|
["%ss", "in %ss"],
|
|
["1m", "in 1m"],
|
|
["%sm", "in %sm"],
|
|
["1h", "in 1h"],
|
|
["%sh", "in %sh"],
|
|
["1d", "in 1d"],
|
|
["%sd", "in %sd"],
|
|
["1w", "in 1w"],
|
|
["%sw", "in %sw"],
|
|
["1mo", "in 1mo"],
|
|
["%smo", "in %smo"],
|
|
["1yr", "in 1yr"],
|
|
["%syr", "in %syr"]
|
|
];
|
|
|
|
const enShortLocale = [
|
|
["now", "now"],
|
|
["%ss ago", "in %ss"],
|
|
["1m ago", "in 1m"],
|
|
["%sm ago", "in %sm"],
|
|
["1h ago", "in 1h"],
|
|
["%sh ago", "in %sh"],
|
|
["1d ago", "in 1d"],
|
|
["%sd ago", "in %sd"],
|
|
["1w ago", "in 1w"],
|
|
["%sw ago", "in %sw"],
|
|
["1mo ago", "in 1mo"],
|
|
["%smo ago", "in %smo"],
|
|
["1yr ago", "in 1yr"],
|
|
["%syr ago", "in %syr"]
|
|
];
|
|
register("short", (_n, index) => shortLocale[index]);
|
|
register("en_short", (_n, index) => enShortLocale[index]);
|
|
|
|
function TimeAgo({ datetime, live, locale, opts, ...restProps }) {
|
|
const timeRef = useRef();
|
|
useEffect(() => {
|
|
const element = timeRef.current;
|
|
if (!element) return;
|
|
|
|
// cancel all the interval
|
|
cancel(element);
|
|
// if is live
|
|
if (live !== false) {
|
|
// live render
|
|
element.setAttribute("datetime", toDate(datetime).toISOString());
|
|
render(element, locale, opts);
|
|
}
|
|
|
|
return () => {
|
|
cancel(element);
|
|
};
|
|
}, [datetime, live, locale, opts]);
|
|
|
|
return (
|
|
<Text
|
|
ref={timeRef}
|
|
{...restProps}
|
|
title={formatDate(datetime)}
|
|
as="time"
|
|
dateTime={toDate(datetime).toISOString()}
|
|
>
|
|
{format(datetime, locale, opts)}
|
|
</Text>
|
|
);
|
|
}
|
|
|
|
export default React.memo(TimeAgo);
|
|
|
|
/**
|
|
* Convert input to a valid datetime string of <time> tag
|
|
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time
|
|
* @param input
|
|
* @returns datetime string
|
|
*/
|
|
const toDate = (input) => {
|
|
let date = null; // new Date();
|
|
if (input instanceof Date) {
|
|
date = input;
|
|
} else date = new Date(input);
|
|
|
|
return date;
|
|
};
|