63 lines
2.0 KiB
TypeScript
63 lines
2.0 KiB
TypeScript
import React, { memo } from '../../../lib/teact/teact';
|
|
import { getActions } from '../../../lib/teact/teactn';
|
|
|
|
import type { ApiMessage } from '../../../api/types';
|
|
|
|
import { formatDateAtTime } from '../../../util/date/dateFormat';
|
|
|
|
import useLang from '../../../hooks/useLang';
|
|
|
|
import MenuItem from '../../ui/MenuItem';
|
|
import MenuSeparator from '../../ui/MenuSeparator';
|
|
import Skeleton from '../../ui/placeholder/Skeleton';
|
|
import Transition from '../../ui/Transition';
|
|
|
|
import styles from './ReadTimeMenuItem.module.scss';
|
|
|
|
type OwnProps = {
|
|
message: ApiMessage;
|
|
shouldRenderShowWhen?: boolean;
|
|
canLoadReadDate?: boolean;
|
|
menuSeparatorSize: 'thin' | 'thick';
|
|
closeContextMenu: NoneToVoidFunction;
|
|
};
|
|
|
|
function ReadTimeMenuItem({
|
|
message, shouldRenderShowWhen, canLoadReadDate, closeContextMenu, menuSeparatorSize,
|
|
}: OwnProps) {
|
|
const { openPrivacySettingsNoticeModal } = getActions();
|
|
const lang = useLang();
|
|
const { readDate } = message;
|
|
const shouldRenderSkeleton = canLoadReadDate && !readDate && !shouldRenderShowWhen;
|
|
|
|
const handleOpenModal = () => {
|
|
closeContextMenu();
|
|
openPrivacySettingsNoticeModal({ chatId: message.chatId, isReadDate: true });
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<MenuSeparator size={menuSeparatorSize} />
|
|
<MenuItem icon="message-read" className={styles.item}>
|
|
<Transition name="fade" activeKey={shouldRenderSkeleton ? 1 : 2} className={styles.transition}>
|
|
{shouldRenderSkeleton ? <Skeleton className={styles.skeleton} /> : (
|
|
<>
|
|
{Boolean(readDate) && lang('PmReadAt', formatDateAtTime(lang, readDate * 1000))}
|
|
{!readDate && shouldRenderShowWhen && (
|
|
<div>
|
|
{lang('PmRead')}
|
|
<span className={styles.get} onClick={handleOpenModal}>
|
|
{lang('PmReadShowWhen')}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</Transition>
|
|
</MenuItem>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default memo(ReadTimeMenuItem);
|