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

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 { useDispatch } from 'react-redux';
import { Virtuoso } from 'react-virtuoso'; import { Virtuoso } from 'react-virtuoso';
@ -19,8 +20,13 @@ interface IChatList {
const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false }) => { const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false }) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const chatListRef = useRef(null);
const { chatsQuery: { data: chats, isFetching, hasNextPage, fetchNextPage } } = useChats(); 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 isEmpty = chats?.length === 0;
const handleLoadMore = () => { const handleLoadMore = () => {
@ -48,23 +54,41 @@ const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false })
}; };
return ( return (
<PullToRefresh onRefresh={handleRefresh}> <div className='relative h-full'>
{isEmpty ? renderEmpty() : ( <PullToRefresh onRefresh={handleRefresh}>
<Virtuoso {isEmpty ? renderEmpty() : (
useWindowScroll={useWindowScroll} <Virtuoso
data={chats} ref={chatListRef}
endReached={handleLoadMore} atTopStateChange={(atTop) => setNearTop(atTop)}
itemContent={(_index, chat) => ( atBottomStateChange={(atBottom) => setNearBottom(atBottom)}
<Chat chat={chat} onClick={onClickChat} /> useWindowScroll={useWindowScroll}
)} data={chats}
components={{ endReached={handleLoadMore}
ScrollSeekPlaceholder: () => <PlaceholderChat />, itemContent={(_index, chat) => (
// Footer: () => hasNextPage ? <Spinner withText={false} /> : null, <Chat chat={chat} onClick={onClickChat} />
EmptyPlaceholder: renderEmpty, )}
}} components={{
/> ScrollSeekPlaceholder: () => <PlaceholderChat />,
)} // Footer: () => hasNextPage ? <Spinner withText={false} /> : null,
</PullToRefresh> 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>
); );
}; };