56 lines
1.9 KiB
JavaScript
56 lines
1.9 KiB
JavaScript
import { jsx } from 'react/jsx-runtime';
|
|
import * as React from 'react';
|
|
import { intervalToDuration, isPast } from 'date-fns';
|
|
import { useIntl } from 'react-intl';
|
|
|
|
const intervals = [
|
|
'years',
|
|
'months',
|
|
'days',
|
|
'hours',
|
|
'minutes',
|
|
'seconds'
|
|
];
|
|
/**
|
|
* Displays the relative time between a given timestamp and the current time.
|
|
* You can display a custom message for given time intervals by passing an array of custom intervals.
|
|
*
|
|
* @example
|
|
* ```jsx
|
|
* <caption>Display "last hour" if the timestamp is less than an hour ago</caption>
|
|
* <RelativeTime
|
|
* timestamp={new Date('2021-01-01')}
|
|
* customIntervals={[
|
|
* { unit: 'hours', threshold: 1, text: 'last hour' },
|
|
* ]}
|
|
* ```
|
|
*/ const RelativeTime = /*#__PURE__*/ React.forwardRef(({ timestamp, customIntervals = [], ...restProps }, forwardedRef)=>{
|
|
const { formatRelativeTime, formatDate, formatTime } = useIntl();
|
|
/**
|
|
* TODO: make this auto-update, like a clock.
|
|
*/ const interval = intervalToDuration({
|
|
start: timestamp,
|
|
end: Date.now()
|
|
});
|
|
const unit = intervals.find((intervalUnit)=>{
|
|
return interval[intervalUnit] > 0 && Object.keys(interval).includes(intervalUnit);
|
|
});
|
|
const relativeTime = isPast(timestamp) ? -interval[unit] : interval[unit];
|
|
// Display custom text if interval is less than the threshold
|
|
const customInterval = customIntervals.find((custom)=>interval[custom.unit] < custom.threshold);
|
|
const displayText = customInterval ? customInterval.text : formatRelativeTime(relativeTime, unit, {
|
|
numeric: 'auto'
|
|
});
|
|
return /*#__PURE__*/ jsx("time", {
|
|
ref: forwardedRef,
|
|
dateTime: timestamp.toISOString(),
|
|
role: "time",
|
|
title: `${formatDate(timestamp)} ${formatTime(timestamp)}`,
|
|
...restProps,
|
|
children: displayText
|
|
});
|
|
});
|
|
|
|
export { RelativeTime };
|
|
//# sourceMappingURL=RelativeTime.mjs.map
|