roomListItem.tsx (3549B)
1 import { useInView } from "react-intersection-observer"; 2 import Avatar from "../../avatar/avatar"; 3 import { FC, memo, useContext } from "react"; 4 import { MatrixContext, useRoom } from "../../../app/sdk/client"; 5 import { OnlineState } from "../../../app/sdk/api/otherEnums"; 6 import "./roomListItem.scss"; 7 8 type RoomListItemProps = { 9 /** 10 * Room id 11 */ 12 roomId: string 13 /** 14 * The URL of the Avatar image 15 */ 16 avatarUrl?: string 17 /** 18 * The displayname of the room list item 19 */ 20 displayname: string 21 /** 22 * Wether it is a DM or not 23 */ 24 dm: boolean 25 /** 26 * Wether the user is online. Only used if dm is true. 27 */ 28 online: OnlineState 29 /** 30 * Wether the current room is selected 31 */ 32 active: boolean 33 /** 34 * The onClick handler 35 */ 36 onClick: () => void; 37 /** 38 * If room is hidden 39 */ 40 hidden: boolean 41 }; 42 43 const RoomListItem: FC<RoomListItemProps> = memo(({ roomId, avatarUrl, displayname, dm = false, online = OnlineState.Unknown, active = false, onClick, hidden }: RoomListItemProps) => { 44 const matrixClient = useContext(MatrixContext); 45 const room = useRoom(roomId); 46 const { ref, inView } = useInView({ 47 triggerOnce: true, 48 skip: hidden, 49 threshold: 1, 50 onChange(inView) { 51 if (inView) { 52 matrixClient.addInViewRoom(roomId) 53 } else { 54 matrixClient.removeInViewRoom(roomId) 55 } 56 }, 57 }); 58 return ( 59 <div ref={ref} onClick={onClick} className="w-full cursor-pointer"> 60 { 61 inView && (active ? ( 62 <div className="flex flex-row gap-2 p-1 bg-gray-300 hover:bg-gray-400 rounded-lg duration-200 ease-in-out items-center"> 63 <Avatar avatarUrl={avatarUrl} displayname={displayname} dm={dm} online={online} isBot={false} /> 64 <span title={displayname} className='text-slate-900 font-normal text-base max-w-[32ch] overflow-hidden text-ellipsis w-full whitespace-nowrap'>{displayname}</span> 65 {(room?.getNotificationHighlightCount() !== 0 || room?.getNotificationCount() !== 0) && (room?.getNotificationHighlightCount() === 0 ? 66 <div className="notificationCount">{room?.getNotificationCount()}</div> 67 : <div className="notificationCount higlight">{room?.getNotificationCount() ?? 0 + (room?.getNotificationHighlightCount() ?? 0)}</div>)} 68 </div> 69 ) : ( 70 <div className="flex flex-row gap-2 p-1 hover:bg-gray-300 rounded-lg duration-200 ease-in-out items-center"> 71 <Avatar avatarUrl={avatarUrl} displayname={displayname} dm={dm} online={online} isBot={false} /> 72 <span title={displayname} className='text-slate-900 font-normal text-base max-w-[32ch] overflow-hidden text-ellipsis w-full whitespace-nowrap'>{displayname}</span> 73 {(room?.getNotificationHighlightCount() !== 0 || room?.getNotificationCount() !== 0) && (room?.getNotificationHighlightCount() === 0 ? 74 <div className="notificationCount">{room?.getNotificationCount()}</div> 75 : <div className="notificationCount higlight">{room?.getNotificationCount() ?? 0 + (room?.getNotificationHighlightCount() ?? 0)}</div>)} 76 </div> 77 )) 78 } 79 </div> 80 ); 81 }) 82 83 export default RoomListItem