Something went wrong. Try again.
leaflet fork for copy edit / bug fixes forked from leaflet.pub/leaflet
Something went wrong. Try again.
3.4 kB · 106 lines
TSX
at ghost-import
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107"use client";
import { useContext, useState } from "react";import { CommentTiny } from "../Icons/CommentTiny";import { CommentEmptyTiny } from "../Icons/CommentEmptyTiny";
import { CommentFilledSmall } from "../Icons/CommentFilledSmall";import { CommentEmptySmall } from "../Icons/CommentEmptySmall";import { DiscussionModal } from "./DiscussionModal";import { DrawerThreadContext } from "app/(app)/(published)/lish/[did]/[publication]/[rkey]/Interactions/drawerThreadContext";import { InteractionButton, LargeInteractionButton,} from "./InteractionButtons";
export function DiscussionButton(props: { documentUri: string; commentsCount: number; quotesCount: number; showComments: boolean; showMentions: boolean; postUrl: string; title?: string; pageId?: string; large?: boolean; onClick?: (e: React.MouseEvent) => void; onPrefetch?: () => void; showWhenEmpty?: boolean; // Lets the caller track when the discussion is open — the reader feed uses // this to keep the post listing highlighted while the modal is up. onOpenChange?: (open: boolean) => void;}) { // Inside a published post body a DrawerThreadContext is in scope; there we open // this post's discussion in the interaction drawer (like a Bluesky post's // thread) instead of the standalone modal used in listings/feeds. const drawerNav = useContext(DrawerThreadContext); const [discussionsOpen, setDiscussionsOpen] = useState(false);
const commentsAvailable = props.showComments && (props.showWhenEmpty || props.commentsCount > 0); const mentionsAvailable = props.showMentions && props.quotesCount > 0; const discussionsAvailable = commentsAvailable || mentionsAvailable;
if (!discussionsAvailable) return null;
const openDiscussions = (e: React.MouseEvent) => { e.preventDefault(); e.stopPropagation(); if (props.onClick) { props.onClick(e); } else if (drawerNav) { drawerNav.push({ type: "standardSitePost", uri: props.documentUri }); } else { props.onOpenChange?.(true); setDiscussionsOpen(true); } };
const ButtonWrapper = props.large ? LargeInteractionButton : InteractionButton; const total = props.commentsCount + props.quotesCount; const icon = total > 0 ? ( props.large ? ( <CommentFilledSmall aria-hidden /> ) : ( <CommentTiny aria-hidden /> ) ) : props.large ? ( <CommentEmptySmall aria-hidden /> ) : ( <CommentEmptyTiny aria-hidden /> );
return ( <> <ButtonWrapper onClick={openDiscussions} onMouseEnter={props.onPrefetch} onTouchStart={props.onPrefetch} ariaLabel="Post discussions" > {icon} {total > 0 ? ` ${total}` : null} </ButtonWrapper> {!props.onClick && !drawerNav && ( <DiscussionModal open={discussionsOpen} onOpenChange={(open) => { setDiscussionsOpen(open); props.onOpenChange?.(open); }} document_uri={props.documentUri} postUrl={props.postUrl} title={props.title} commentsCount={props.commentsCount} quotesCount={props.quotesCount} showComments={props.showComments} showMentions={props.showMentions} pageId={props.pageId} /> )} </> );}