"use client" import { Children, createContext, isValidElement, useCallback, useContext, useMemo, type ComponentProps, type MouseEvent, } from "react" import { useControllableState } from "@radix-ui/react-use-controllable-state" /* ----------------------------------------------------------------------------- * Types * -------------------------------------------------------------------------- */ export type VoteTallyValue = Record export interface VoteTallyRootProps extends Omit, "defaultValue"> { /** Current vote counts (controlled) */ value?: VoteTallyValue /** Initial vote counts (uncontrolled) */ defaultValue?: VoteTallyValue /** Callback when votes change */ onValueChange?: (value: VoteTallyValue) => void /** Set of item IDs the current user has voted for */ votedItems?: Set /** Default voted items (uncontrolled) */ defaultVotedItems?: Set /** Callback when user votes/unvotes */ onVotedItemsChange?: (votedItems: Set) => void /** Whether voting is disabled */ disabled?: boolean } export interface VoteTallyItemProps extends ComponentProps<"li"> { /** Unique identifier for this item */ value: string /** Whether this specific item is disabled */ disabled?: boolean } export type VoteTallyTriggerProps = ComponentProps<"button"> export type VoteTallyCountProps = ComponentProps<"span"> export type VoteTallyTitleProps = ComponentProps<"span"> export type VoteTallyDescriptionProps = ComponentProps<"span"> export interface VoteTallyGroupProps extends ComponentProps<"div"> { /** Sort items by vote count */ sortBy?: "votes-asc" | "votes-desc" | "none" } /* ----------------------------------------------------------------------------- * Context * -------------------------------------------------------------------------- */ interface VoteTallyContextValue { votes: VoteTallyValue votedItems: Set disabled: boolean vote: (itemId: string) => void unvote: (itemId: string) => void toggleVote: (itemId: string) => void getVoteCount: (itemId: string) => number hasVoted: (itemId: string) => boolean } const VoteTallyContext = createContext(null) function useVoteTallyContext() { const context = useContext(VoteTallyContext) if (!context) { throw new Error("VoteTally components must be used within VoteTally.Root") } return context } interface VoteTallyItemContextValue { itemId: string disabled: boolean } const VoteTallyItemContext = createContext( null ) function useVoteTallyItemContext() { const context = useContext(VoteTallyItemContext) if (!context) { throw new Error( "VoteTally.Item sub-components must be used within VoteTally.Item" ) } return context } /* ----------------------------------------------------------------------------- * Root * -------------------------------------------------------------------------- */ function VoteTallyRoot({ value: controlledValue, defaultValue = {}, onValueChange, votedItems: controlledVotedItems, defaultVotedItems, onVotedItemsChange, disabled = false, children, ...props }: VoteTallyRootProps) { const [votes, setVotes] = useControllableState({ prop: controlledValue, defaultProp: defaultValue, onChange: onValueChange, }) const [votedItemsArray, setVotedItemsArray] = useControllableState({ prop: controlledVotedItems ? Array.from(controlledVotedItems) : undefined, defaultProp: defaultVotedItems ? Array.from(defaultVotedItems) : [], onChange: (arr) => onVotedItemsChange?.(new Set(arr)), }) const votedItems = useMemo(() => new Set(votedItemsArray), [votedItemsArray]) const vote = useCallback( (itemId: string) => { if (disabled || votedItems.has(itemId)) { return } setVotes((prev) => ({ ...prev, [itemId]: (prev?.[itemId] ?? 0) + 1, })) setVotedItemsArray((prev) => [...(prev ?? []), itemId]) }, [disabled, votedItems, setVotes, setVotedItemsArray] ) const unvote = useCallback( (itemId: string) => { if (disabled || !votedItems.has(itemId)) { return } setVotes((prev) => ({ ...prev, [itemId]: Math.max((prev?.[itemId] ?? 0) - 1, 0), })) setVotedItemsArray((prev) => (prev ?? []).filter((id) => id !== itemId)) }, [disabled, votedItems, setVotes, setVotedItemsArray] ) const toggleVote = useCallback( (itemId: string) => { if (votedItems.has(itemId)) { unvote(itemId) } else { vote(itemId) } }, [votedItems, vote, unvote] ) const getVoteCount = useCallback( (itemId: string) => votes?.[itemId] ?? 0, [votes] ) const hasVoted = useCallback( (itemId: string) => votedItems.has(itemId), [votedItems] ) const contextValue = useMemo( () => ({ votes: votes ?? {}, votedItems, disabled, vote, unvote, toggleVote, getVoteCount, hasVoted, }), [ votes, votedItems, disabled, vote, unvote, toggleVote, getVoteCount, hasVoted, ] ) return (

{children} ) } /* ----------------------------------------------------------------------------- * Group (optional sorting wrapper) * -------------------------------------------------------------------------- */ function VoteTallyGroup({ sortBy = "none", children, ...props }: VoteTallyGroupProps) { const { votes } = useVoteTallyContext() const sortedChildren = useMemo(() => { if (sortBy === "none") { return children } const childArray = Children.toArray(children) return childArray.sort((a, b) => { if (!(isValidElement(a) && isValidElement(b))) { return 0 } const aValue = (a.props as VoteTallyItemProps).value const bValue = (b.props as VoteTallyItemProps).value const aVotes = votes[aValue] ?? 0 const bVotes = votes[bValue] ?? 0 return sortBy === "votes-desc" ? bVotes - aVotes : aVotes - bVotes }) }, [children, sortBy, votes]) return

{sortedChildren}

} /* ----------------------------------------------------------------------------- * Item * -------------------------------------------------------------------------- */ function VoteTallyItem({ value, disabled: itemDisabled = false, children, ...props }: VoteTallyItemProps) { const { disabled: rootDisabled, hasVoted, getVoteCount, } = useVoteTallyContext() const disabled = rootDisabled || itemDisabled const voted = hasVoted(value) const voteCount = getVoteCount(value) const itemContextValue = useMemo( () => ({ itemId: value, disabled }), [value, disabled] ) return (

{children}

) } /* ----------------------------------------------------------------------------- * Trigger * -------------------------------------------------------------------------- */ function VoteTallyTrigger({ children, onClick, ...props }: VoteTallyTriggerProps) { const { toggleVote, hasVoted, disabled: rootDisabled } = useVoteTallyContext() const { itemId, disabled: itemDisabled } = useVoteTallyItemContext() const disabled = rootDisabled || itemDisabled const voted = hasVoted(itemId) const handleClick = useCallback( (event: MouseEvent) => { onClick?.(event) if (!(event.defaultPrevented || disabled)) { toggleVote(itemId) } }, [onClick, disabled, toggleVote, itemId] ) return ( ) } /* ----------------------------------------------------------------------------- * Count * -------------------------------------------------------------------------- */ function VoteTallyCount({ children, ...props }: VoteTallyCountProps) { const { getVoteCount } = useVoteTallyContext() const { itemId } = useVoteTallyItemContext() const count = getVoteCount(itemId) return ( {children ?? count} ) } /* ----------------------------------------------------------------------------- * Title * -------------------------------------------------------------------------- */ function VoteTallyTitle({ children, ...props }: VoteTallyTitleProps) { return ( {children} ) } /* ----------------------------------------------------------------------------- * Description * -------------------------------------------------------------------------- */ function VoteTallyDescription({ children, ...props }: VoteTallyDescriptionProps) { return ( {children} ) } /* ----------------------------------------------------------------------------- * Hook for external access * -------------------------------------------------------------------------- */ export function useVoteTally() { return useVoteTallyContext() } /* ----------------------------------------------------------------------------- * Export * -------------------------------------------------------------------------- */ export const VoteTally = { Root: VoteTallyRoot, Group: VoteTallyGroup, Item: VoteTallyItem, Trigger: VoteTallyTrigger, Count: VoteTallyCount, Title: VoteTallyTitle, Description: VoteTallyDescription, } export { VoteTallyRoot, VoteTallyGroup, VoteTallyItem, VoteTallyTrigger, VoteTallyCount, VoteTallyTitle, VoteTallyDescription, }

Vote Tally

Instalação

Dependências