ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Middle Header: Fix missing UI when clicking Back multiple times (#1432)

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-09-10 20:33:00 +03:00
parent 7cc3e54117
commit 4ee26fb38d
1 changed files with 9 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/middle/MiddleHeader.tsx
View File

@ -65,6 +65,7 @@ import AudioPlayer from './AudioPlayer';
import './MiddleHeader.scss'; import './MiddleHeader.scss';
const ANIMATION_DURATION = 350; const ANIMATION_DURATION = 350;
const BACK_BUTTON_INACTIVE_TIME = 450;
type OwnProps = { type OwnProps = {
chatId: number; chatId: number;
@ -132,6 +133,7 @@ const MiddleHeader: FC<OwnProps & StateProps & DispatchProps> = ({
exitMessageSelectMode, exitMessageSelectMode,
}) => { }) => {
const lang = useLang(); const lang = useLang();
const isBackButtonActive = useRef(true);
const [pinnedMessageIndex, setPinnedMessageIndex] = useState(0); const [pinnedMessageIndex, setPinnedMessageIndex] = useState(0);
const pinnedMessageId = Array.isArray(pinnedMessageIds) ? pinnedMessageIds[pinnedMessageIndex] : pinnedMessageIds; const pinnedMessageId = Array.isArray(pinnedMessageIds) ? pinnedMessageIds[pinnedMessageIndex] : pinnedMessageIds;
@ -184,6 +186,10 @@ const MiddleHeader: FC<OwnProps & StateProps & DispatchProps> = ({
}, [openChat, chatId]); }, [openChat, chatId]);
const handleBackClick = useCallback((e: React.MouseEvent<HTMLElement, MouseEvent>) => { const handleBackClick = useCallback((e: React.MouseEvent<HTMLElement, MouseEvent>) => {
if (!isBackButtonActive.current) return;
// Workaround for missing UI when quickly clicking the Back button
isBackButtonActive.current = false;
if (IS_SINGLE_COLUMN_LAYOUT) { if (IS_SINGLE_COLUMN_LAYOUT) {
const messageInput = document.getElementById(EDITABLE_INPUT_ID); const messageInput = document.getElementById(EDITABLE_INPUT_ID);
if (messageInput) { if (messageInput) {
@ -208,6 +214,9 @@ const MiddleHeader: FC<OwnProps & StateProps & DispatchProps> = ({
} }
openPreviousChat(); openPreviousChat();
setTimeout(() => {
isBackButtonActive.current = true;
}, BACK_BUTTON_INACTIVE_TIME);
}, [ }, [
threadId, messageListType, currentTransitionKey, isSelectModeActive, openPreviousChat, shouldShowCloseButton, threadId, messageListType, currentTransitionKey, isSelectModeActive, openPreviousChat, shouldShowCloseButton,
openChat, toggleLeftColumn, exitMessageSelectMode, openChat, toggleLeftColumn, exitMessageSelectMode,