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

Right Search: Disable input during opening animation (#2151)

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-11-27 19:16:52 +01:00
parent dff2a18b20
commit 365a021dda
2 changed files with 33 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/middle/HeaderActions.tsx
View File

@ -12,6 +12,7 @@ import { MAIN_THREAD_ID } from '../../api/types';
import type { IAnchorPosition } from '../../types'; import type { IAnchorPosition } from '../../types';
import { ManagementScreens } from '../../types'; import { ManagementScreens } from '../../types';
import { ANIMATION_LEVEL_MIN } from '../../config';
import { import {
ARE_CALLS_SUPPORTED, IS_PWA, IS_SINGLE_COLUMN_LAYOUT, ARE_CALLS_SUPPORTED, IS_PWA, IS_SINGLE_COLUMN_LAYOUT,
} from '../../util/environment'; } from '../../util/environment';
@ -57,10 +58,11 @@ interface StateProps {
pendingJoinRequests?: number; pendingJoinRequests?: number;
shouldJoinToSend?: boolean; shouldJoinToSend?: boolean;
shouldSendJoinRequest?: boolean; shouldSendJoinRequest?: boolean;
noAnimation?: boolean;
} }
// Chrome breaks layout when focusing input during transition // Chrome breaks layout when focusing input during transition
const SEARCH_FOCUS_DELAY_MS = 400; const SEARCH_FOCUS_DELAY_MS = 320;
const HeaderActions: FC<OwnProps & StateProps> = ({ const HeaderActions: FC<OwnProps & StateProps> = ({
chatId, chatId,
@ -82,6 +84,7 @@ const HeaderActions: FC<OwnProps & StateProps> = ({
canExpandActions, canExpandActions,
shouldJoinToSend, shouldJoinToSend,
shouldSendJoinRequest, shouldSendJoinRequest,
noAnimation,
}) => { }) => {
const { const {
joinChannel, joinChannel,
@ -140,15 +143,15 @@ const HeaderActions: FC<OwnProps & StateProps> = ({
// iOS requires synchronous focus on user event. // iOS requires synchronous focus on user event.
const searchInput = document.querySelector<HTMLInputElement>('#MobileSearch input')!; const searchInput = document.querySelector<HTMLInputElement>('#MobileSearch input')!;
searchInput.focus(); searchInput.focus();
} else if (noAnimation) {
// The second RAF is necessary because teact must update the state and render the async component
requestAnimationFrame(() => {
requestAnimationFrame(setFocusInSearchInput);
});
} else { } else {
setTimeout(() => { setTimeout(setFocusInSearchInput, SEARCH_FOCUS_DELAY_MS);
const searchInput = document.querySelector<HTMLInputElement>('.RightHeader .SearchInput input');
if (searchInput) {
searchInput.focus();
}
}, SEARCH_FOCUS_DELAY_MS);
} }
}, [openLocalTextSearch]); }, [noAnimation, openLocalTextSearch]);
function handleRequestCall() { function handleRequestCall() {
requestCall({ userId: chatId }); requestCall({ userId: chatId });
@ -325,6 +328,7 @@ export default memo(withGlobal<OwnProps>(
const pendingJoinRequests = chat.fullInfo?.requestsPending; const pendingJoinRequests = chat.fullInfo?.requestsPending;
const shouldJoinToSend = Boolean(chat?.isNotJoined && chat.isJoinToSend); const shouldJoinToSend = Boolean(chat?.isNotJoined && chat.isJoinToSend);
const shouldSendJoinRequest = Boolean(chat?.isNotJoined && chat.isJoinRequest); const shouldSendJoinRequest = Boolean(chat?.isNotJoined && chat.isJoinRequest);
const noAnimation = global.settings.byKey.animationLevel === ANIMATION_LEVEL_MIN;
return { return {
noMenu: false, noMenu: false,
@ -343,6 +347,12 @@ export default memo(withGlobal<OwnProps>(
pendingJoinRequests, pendingJoinRequests,
shouldJoinToSend, shouldJoinToSend,
shouldSendJoinRequest, shouldSendJoinRequest,
noAnimation,
}; };
}, },
)(HeaderActions)); )(HeaderActions));
function setFocusInSearchInput() {
const searchInput = document.querySelector<HTMLInputElement>('.RightHeader .SearchInput input');
searchInput?.focus();
}

17
src/components/right/RightSearch.tsx
View File

@ -1,4 +1,6 @@
import React, { useMemo, memo, useRef } from '../../lib/teact/teact'; import React, {
useMemo, memo, useRef, useEffect,
} from '../../lib/teact/teact';
import { getActions, getGlobal, withGlobal } from '../../global'; import { getActions, getGlobal, withGlobal } from '../../global';
import type { FC } from '../../lib/teact/teact'; import type { FC } from '../../lib/teact/teact';
@ -15,11 +17,12 @@ import {
import { import {
isChatChannel, isChatChannel,
} from '../../global/helpers'; } from '../../global/helpers';
import { disableDirectTextInput, enableDirectTextInput } from '../../util/directInputManager';
import { renderMessageSummary } from '../common/helpers/renderMessageText';
import useLang from '../../hooks/useLang'; import useLang from '../../hooks/useLang';
import useKeyboardListNavigation from '../../hooks/useKeyboardListNavigation'; import useKeyboardListNavigation from '../../hooks/useKeyboardListNavigation';
import useHistoryBack from '../../hooks/useHistoryBack'; import useHistoryBack from '../../hooks/useHistoryBack';
import useInfiniteScroll from '../../hooks/useInfiniteScroll'; import useInfiniteScroll from '../../hooks/useInfiniteScroll';
import { renderMessageSummary } from '../common/helpers/renderMessageText';
import InfiniteScroll from '../ui/InfiniteScroll'; import InfiniteScroll from '../ui/InfiniteScroll';
import ListItem from '../ui/ListItem'; import ListItem from '../ui/ListItem';
@ -71,6 +74,16 @@ const RightSearch: FC<OwnProps & StateProps> = ({
onBack: onClose, onBack: onClose,
}); });
useEffect(() => {
if (!isActive) {
return undefined;
}
disableDirectTextInput();
return enableDirectTextInput;
}, [isActive]);
const [viewportIds, getMore] = useInfiniteScroll(searchTextMessagesLocal, foundIds); const [viewportIds, getMore] = useInfiniteScroll(searchTextMessagesLocal, foundIds);
const viewportResults = useMemo(() => { const viewportResults = useMemo(() => {