44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
|
// Copyright 2022 Signal Messenger, LLC
|
||
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
||
|
|
|
||
|
|
import type { ReactElement } from 'react';
|
||
|
|
import React, { useEffect, useState } from 'react';
|
||
|
|
import classNames from 'classnames';
|
||
|
|
import * as durations from '../../util/durations';
|
||
|
|
import type { LocalizerType } from '../../types/Util';
|
||
|
|
import { formatDate } from '../../util/timestamp';
|
||
|
|
import { Time } from '../Time';
|
||
|
|
|
||
|
|
export function TimelineDateHeader({
|
||
|
|
floating = false,
|
||
|
|
i18n,
|
||
|
|
timestamp,
|
||
|
|
}: Readonly<{
|
||
|
|
floating?: boolean;
|
||
|
|
i18n: LocalizerType;
|
||
|
|
timestamp: number;
|
||
|
|
}>): ReactElement {
|
||
|
|
const [text, setText] = useState(formatDate(i18n, timestamp));
|
||
|
|
useEffect(() => {
|
||
|
|
const update = () => setText(formatDate(i18n, timestamp));
|
||
|
|
update();
|
||
|
|
const interval = setInterval(update, durations.MINUTE);
|
||
|
|
return () => {
|
||
|
|
clearInterval(interval);
|
||
|
|
};
|
||
|
|
}, [i18n, timestamp]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Time
|
||
|
|
className={classNames(
|
||
|
|
'TimelineDateHeader',
|
||
|
|
`TimelineDateHeader--${floating ? 'floating' : 'inline'}`
|
||
|
|
)}
|
||
|
|
dateOnly
|
||
|
|
timestamp={timestamp}
|
||
|
|
>
|
||
|
|
{text}
|
||
|
|
</Time>
|
||
|
|
);
|
||
|
|
}
|