90 lines
2.7 KiB
TypeScript
90 lines
2.7 KiB
TypeScript
import React, { memo, useMemo, useRef } from '../../../lib/teact/teact';
|
|
|
|
import type { ApiFactCheck } from '../../../api/types';
|
|
|
|
import buildClassName from '../../../util/buildClassName';
|
|
import { renderTextWithEntities } from '../../common/helpers/renderTextWithEntities';
|
|
|
|
import useCollapsibleLines from '../../../hooks/element/useCollapsibleLines';
|
|
import useLastCallback from '../../../hooks/useLastCallback';
|
|
import useOldLang from '../../../hooks/useOldLang';
|
|
|
|
import Icon from '../../common/icons/Icon';
|
|
import PeerColorWrapper from '../../common/PeerColorWrapper';
|
|
import Separator from '../../ui/Separator';
|
|
|
|
import styles from './FactCheck.module.scss';
|
|
|
|
type OwnProps = {
|
|
factCheck: ApiFactCheck;
|
|
isToggleDisabled?: boolean;
|
|
};
|
|
|
|
const COLOR = {
|
|
color: 0,
|
|
};
|
|
const MAX_LINES = 4;
|
|
|
|
const FactCheck = ({ factCheck, isToggleDisabled }: OwnProps) => {
|
|
const lang = useOldLang();
|
|
|
|
// eslint-disable-next-line no-null/no-null
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
// eslint-disable-next-line no-null/no-null
|
|
const cutoutRef = useRef<HTMLDivElement>(null);
|
|
const {
|
|
isCollapsed, isCollapsible, setIsCollapsed,
|
|
} = useCollapsibleLines(ref, MAX_LINES, cutoutRef);
|
|
|
|
const countryLocalized = useMemo(() => {
|
|
if (!factCheck.countryCode || !lang.code) return undefined;
|
|
|
|
const displayNames = new Intl.DisplayNames([lang.code], { type: 'region' });
|
|
return displayNames.of(factCheck.countryCode);
|
|
}, [factCheck.countryCode, lang.code]);
|
|
|
|
const canExpand = !isToggleDisabled && isCollapsed;
|
|
|
|
const handleExpand = useLastCallback(() => {
|
|
setIsCollapsed(false);
|
|
});
|
|
|
|
const handleToggle = useLastCallback(() => {
|
|
setIsCollapsed((prev) => !prev);
|
|
});
|
|
|
|
if (!factCheck.text) {
|
|
return undefined;
|
|
}
|
|
|
|
return (
|
|
<PeerColorWrapper peerColor={COLOR} className={styles.root} onClick={canExpand ? handleExpand : undefined}>
|
|
<div
|
|
ref={cutoutRef}
|
|
className={buildClassName(styles.cutoutWrapper, isCollapsed && styles.collapsed)}
|
|
>
|
|
<div className={styles.title}>{lang('FactCheck')}</div>
|
|
<div ref={ref} className={styles.content}>
|
|
{renderTextWithEntities({
|
|
text: factCheck.text.text,
|
|
entities: factCheck.text.entities,
|
|
})}
|
|
</div>
|
|
<Separator className={styles.separator} />
|
|
<div className={styles.footnote}>{lang('FactCheckFooter', countryLocalized)}</div>
|
|
</div>
|
|
{isCollapsible && (
|
|
<div
|
|
className={buildClassName(styles.collapseIcon, !isToggleDisabled && styles.clickable)}
|
|
onClick={!isToggleDisabled ? handleToggle : undefined}
|
|
aria-hidden
|
|
>
|
|
<Icon name={isCollapsed ? 'down' : 'up'} />
|
|
</div>
|
|
)}
|
|
</PeerColorWrapper>
|
|
);
|
|
};
|
|
|
|
export default memo(FactCheck);
|