bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add shadow when scrolling

Browse source
This commit is contained in:
Justin 2022-08-26 12:53:19 -04:00
parent 01167af69e
commit b04bc6a7ae
1 changed files with 42 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
app/soapbox/features/chats/components/chat-list.tsx
View file

@ -1,4 +1,5 @@
import React from 'react';
import classNames from 'classnames';
import React, { useRef, useState } from 'react';
import { useDispatch } from 'react-redux';
import { Virtuoso } from 'react-virtuoso';
@ -19,8 +20,13 @@ interface IChatList {
const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false }) => {
const dispatch = useDispatch();
const chatListRef = useRef(null);
const { chatsQuery: { data: chats, isFetching, hasNextPage, fetchNextPage } } = useChats();
const [isNearBottom, setNearBottom] = useState<boolean>(false);
const [isNearTop, setNearTop] = useState<boolean>(true);
const isEmpty = chats?.length === 0;
const handleLoadMore = () => {
@ -48,23 +54,41 @@ const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false })
};
return (
<PullToRefresh onRefresh={handleRefresh}>
{isEmpty ? renderEmpty() : (
<Virtuoso
useWindowScroll={useWindowScroll}
data={chats}
endReached={handleLoadMore}
itemContent={(_index, chat) => (
<Chat chat={chat} onClick={onClickChat} />
)}
components={{
ScrollSeekPlaceholder: () => <PlaceholderChat />,
// Footer: () => hasNextPage ? <Spinner withText={false} /> : null,
EmptyPlaceholder: renderEmpty,
}}
/>
)}
</PullToRefresh>
<div className='relative h-full'>
<PullToRefresh onRefresh={handleRefresh}>
{isEmpty ? renderEmpty() : (
<Virtuoso
ref={chatListRef}
atTopStateChange={(atTop) => setNearTop(atTop)}
atBottomStateChange={(atBottom) => setNearBottom(atBottom)}
useWindowScroll={useWindowScroll}
data={chats}
endReached={handleLoadMore}
itemContent={(_index, chat) => (
<Chat chat={chat} onClick={onClickChat} />
)}
components={{
ScrollSeekPlaceholder: () => <PlaceholderChat />,
// Footer: () => hasNextPage ? <Spinner withText={false} /> : null,
EmptyPlaceholder: renderEmpty,
}}
/>
)}
</PullToRefresh>
<div
className={classNames('inset-x-0 top-0 flex rounded-t-lg justify-center bg-gradient-to-b from-white pb-12 pt-8 pointer-events-none dark:from-gray-900 absolute transition-opacity duration-500', {
'opacity-0': isNearTop,
'opacity-100': !isNearTop,
})}
/>
<div
className={classNames('inset-x-0 bottom-0 flex rounded-b-lg justify-center bg-gradient-to-t from-white pt-12 pb-8 pointer-events-none dark:from-gray-900 absolute transition-opacity duration-500', {
'opacity-0': isNearBottom,
'opacity-100': !isNearBottom,
})}
/>
</div>
);
};