85 lines
2.3 KiB
TypeScript
85 lines
2.3 KiB
TypeScript
import { MouseEvent as ReactMouseEvent } from 'react';
|
|
import React, {
|
|
FC, memo, useCallback, useEffect, useRef,
|
|
} from '../../../lib/teact/teact';
|
|
|
|
import { createClassNameBuilder } from '../../../util/buildClassName';
|
|
import useFlag from '../../../hooks/useFlag';
|
|
|
|
import './Spoiler.scss';
|
|
|
|
type OwnProps = {
|
|
children?: React.ReactNode;
|
|
messageId?: number;
|
|
};
|
|
|
|
const READING_SYMBOLS_PER_SECOND = 23; // Heuristics
|
|
const MIN_HIDE_TIMEOUT = 5000; // 5s
|
|
const MAX_HIDE_TIMEOUT = 60000; // 1m
|
|
|
|
const actionsByMessageId: Map<number, {
|
|
reveal: VoidFunction;
|
|
conceal: VoidFunction;
|
|
}[]> = new Map();
|
|
|
|
const buildClassName = createClassNameBuilder('Spoiler');
|
|
|
|
const Spoiler: FC<OwnProps> = ({
|
|
children,
|
|
messageId,
|
|
}) => {
|
|
// eslint-disable-next-line no-null/no-null
|
|
const contentRef = useRef<HTMLDivElement>(null);
|
|
|
|
const [isRevealed, reveal, conceal] = useFlag();
|
|
|
|
const handleClick = useCallback((e: ReactMouseEvent<HTMLDivElement, MouseEvent>) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
actionsByMessageId.get(messageId!)?.forEach((actions) => actions.reveal());
|
|
|
|
const contentLength = contentRef.current!.innerText.length;
|
|
const readingMs = Math.round(contentLength / READING_SYMBOLS_PER_SECOND) * 1000;
|
|
const timeoutMs = Math.max(MIN_HIDE_TIMEOUT, Math.min(readingMs, MAX_HIDE_TIMEOUT));
|
|
|
|
setTimeout(() => {
|
|
actionsByMessageId.get(messageId!)?.forEach((actions) => actions.conceal());
|
|
conceal();
|
|
}, timeoutMs);
|
|
}, [conceal, messageId]);
|
|
|
|
useEffect(() => {
|
|
if (!messageId) {
|
|
return undefined;
|
|
}
|
|
|
|
if (actionsByMessageId.has(messageId)) {
|
|
actionsByMessageId.get(messageId)!.push({ reveal, conceal });
|
|
} else {
|
|
actionsByMessageId.set(messageId, [{ reveal, conceal }]);
|
|
}
|
|
|
|
return () => {
|
|
actionsByMessageId.delete(messageId);
|
|
};
|
|
}, [conceal, handleClick, isRevealed, messageId, reveal]);
|
|
|
|
return (
|
|
<span
|
|
className={buildClassName(
|
|
'&',
|
|
!isRevealed && 'concealed',
|
|
!isRevealed && Boolean(messageId) && 'animated',
|
|
)}
|
|
onClick={messageId && !isRevealed ? handleClick : undefined}
|
|
>
|
|
<span className={buildClassName('content')} ref={contentRef}>
|
|
{children}
|
|
</span>
|
|
</span>
|
|
);
|
|
};
|
|
|
|
export default memo(Spoiler);
|