signal-desktop/ts/components/conversation/Timestamp.tsx
2020-09-21 15:42:51 -04:00

85 lines
2.1 KiB
TypeScript

import React from 'react';
import classNames from 'classnames';
import moment from 'moment';
import { formatRelativeTime } from '../../util/formatRelativeTime';
import { LocalizerType } from '../../types/Util';
export interface Props {
timestamp?: number;
extended?: boolean;
module?: string;
withImageNoCaption?: boolean;
withSticker?: boolean;
withTapToViewExpired?: boolean;
withUnread?: boolean;
direction?: 'incoming' | 'outgoing';
i18n: LocalizerType;
}
const UPDATE_FREQUENCY = 60 * 1000;
export class Timestamp extends React.Component<Props> {
private interval: NodeJS.Timeout | null;
constructor(props: Props) {
super(props);
this.interval = null;
}
public componentDidMount(): void {
const update = () => {
this.setState({
// Used to trigger renders
// eslint-disable-next-line react/no-unused-state
lastUpdated: Date.now(),
});
};
this.interval = setInterval(update, UPDATE_FREQUENCY);
}
public componentWillUnmount(): void {
if (this.interval) {
clearInterval(this.interval);
}
}
public render(): JSX.Element | null {
const {
direction,
i18n,
module,
timestamp,
withImageNoCaption,
withSticker,
withTapToViewExpired,
withUnread,
extended,
} = this.props;
const moduleName = module || 'module-timestamp';
if (timestamp === null || timestamp === undefined) {
return null;
}
return (
<span
className={classNames(
moduleName,
direction ? `${moduleName}--${direction}` : null,
withTapToViewExpired && direction
? `${moduleName}--${direction}-with-tap-to-view-expired`
: null,
withImageNoCaption ? `${moduleName}--with-image-no-caption` : null,
withSticker ? `${moduleName}--with-sticker` : null,
withUnread ? `${moduleName}--with-unread` : null
)}
title={moment(timestamp).format('llll')}
>
{formatRelativeTime(timestamp, { i18n, extended })}
</span>
);
}
}