diff --git a/src/components/common/ChatOrUserPicker.scss b/src/components/common/ChatOrUserPicker.scss index 5cd7fbfa3..f2cf3a2bb 100644 --- a/src/components/common/ChatOrUserPicker.scss +++ b/src/components/common/ChatOrUserPicker.scss @@ -46,7 +46,7 @@ height: 100%; overflow-x: hidden; overflow-y: auto; - padding: 0 1rem 1rem; + padding: 0 0.5rem; } } @@ -60,6 +60,15 @@ color: var(--color-text-secondary); } + .scroll-container { + position: relative; + } + + .ListItem { + position: absolute; + width: 100%; + } + .ListItem.chat-item-clickable { &:not(.force-rounded-corners) { @media (max-width: 600px) { diff --git a/src/components/common/ChatOrUserPicker.tsx b/src/components/common/ChatOrUserPicker.tsx index d842ce7e8..22641cba1 100644 --- a/src/components/common/ChatOrUserPicker.tsx +++ b/src/components/common/ChatOrUserPicker.tsx @@ -3,6 +3,8 @@ import React, { FC, memo, useRef, useCallback, } from '../../lib/teact/teact'; +import { CHAT_HEIGHT_PX } from '../../config'; +import { IS_ANDROID } from '../../util/environment'; import useInfiniteScroll from '../../hooks/useInfiniteScroll'; import useLang from '../../hooks/useLang'; import useKeyboardListNavigation from '../../hooks/useKeyboardListNavigation'; @@ -27,10 +29,11 @@ export type OwnProps = { filterRef: RefObject; filterPlaceholder: string; filter: string; - onFilterChange: (filter: string) => void; loadMore: NoneToVoidFunction; + onFilterChange: (filter: string) => void; onSelectChatOrUser: (chatOrUserId: string) => void; onClose: NoneToVoidFunction; + onCloseAnimationEnd?: NoneToVoidFunction; }; const ChatOrUserPicker: FC = ({ @@ -40,10 +43,11 @@ const ChatOrUserPicker: FC = ({ filterRef, filter, filterPlaceholder, - onFilterChange, - onClose, loadMore, + onFilterChange, onSelectChatOrUser, + onClose, + onCloseAnimationEnd, }) => { const lang = useLang(); const [viewportIds, getMore] = useInfiniteScroll(loadMore, chatOrUserIds, Boolean(filter)); @@ -85,35 +89,47 @@ const ChatOrUserPicker: FC = ({ ); + const viewportOffset = chatOrUserIds!.indexOf(viewportIds![0]); + return ( {viewportIds?.length ? ( - {viewportIds.map((id) => ( - onSelectChatOrUser(id)} - > - {isUserId(id) ? ( - - ) : ( - - )} - - ))} +
+ {viewportIds.map((id, i) => ( + onSelectChatOrUser(id)} + > + {isUserId(id) ? ( + + ) : ( + + )} + + ))} +
) : viewportIds && !viewportIds.length ? (

{lang('lng_blocked_list_not_found')}

diff --git a/src/components/main/ForwardPicker.tsx b/src/components/main/ForwardPicker.tsx index a38226ce3..74581470c 100644 --- a/src/components/main/ForwardPicker.tsx +++ b/src/components/main/ForwardPicker.tsx @@ -1,5 +1,5 @@ import React, { - FC, useMemo, useState, memo, useRef, useCallback, + FC, useMemo, useState, memo, useRef, useCallback, useEffect, } from '../../lib/teact/teact'; import { getDispatch, getGlobal, withGlobal } from '../../lib/teact/teactn'; @@ -14,6 +14,7 @@ import { import { unique } from '../../util/iteratees'; import useLang from '../../hooks/useLang'; import useCurrentOrPrev from '../../hooks/useCurrentOrPrev'; +import useFlag from '../../hooks/useFlag'; import ChatOrUserPicker from '../common/ChatOrUserPicker'; @@ -50,6 +51,13 @@ const ForwardPicker: FC = ({ // eslint-disable-next-line no-null/no-null const filterRef = useRef(null); + const [isShown, markIsShown, unmarkIsShown] = useFlag(); + useEffect(() => { + if (isOpen) { + markIsShown(); + } + }, [isOpen, markIsShown]); + const chatAndContactIds = useMemo(() => { if (!isOpen) { return undefined; @@ -82,7 +90,11 @@ const ForwardPicker: FC = ({ setForwardChatId({ id: userId }); }, [setForwardChatId]); - const renderingChatAndContactIds = useCurrentOrPrev(chatAndContactIds)!; + const renderingChatAndContactIds = useCurrentOrPrev(chatAndContactIds, true)!; + + if (!isOpen && !isShown) { + return undefined; + } return ( = ({ loadMore={loadMoreChats} onSelectChatOrUser={handleSelectUser} onClose={exitForwardMode} + onCloseAnimationEnd={unmarkIsShown} /> ); }; diff --git a/src/components/ui/ListItem.scss b/src/components/ui/ListItem.scss index 210fe2fd4..2bfb40bbe 100644 --- a/src/components/ui/ListItem.scss +++ b/src/components/ui/ListItem.scss @@ -147,8 +147,6 @@ } &.chat-item-clickable { - margin: 0 -0.5rem; - body.is-ios &, body.is-macos & { --color-text-secondary: var(--color-text-secondary-apple); diff --git a/src/hooks/useInfiniteScroll.ts b/src/hooks/useInfiniteScroll.ts index f7ac15e50..b37c1c74e 100644 --- a/src/hooks/useInfiniteScroll.ts +++ b/src/hooks/useInfiniteScroll.ts @@ -34,6 +34,10 @@ const useInfiniteScroll = ( const forceUpdate = useForceUpdate(); + if (isDisabled) { + lastParamsRef.current = {}; + } + const prevListIds = usePrevious(listIds); const prevIsDisabled = usePrevious(isDisabled); if (listIds && !isDisabled && (listIds !== prevListIds || isDisabled !== prevIsDisabled)) {