feat: close reactions popover on click

This commit is contained in:
Pavel Prichodko 2022-06-15 16:11:04 +02:00
parent ddd01a0e35
commit 7794dd8d64
No known key found for this signature in database
GPG Key ID: 0EB8D75C775AB6F1
2 changed files with 23 additions and 11 deletions

View File

@ -4,7 +4,7 @@ import { useAccount } from '~/src/protocol'
import { styled } from '~/src/styles/config' import { styled } from '~/src/styles/config'
import { Flex, Image, Popover, PopoverTrigger } from '~/src/system' import { Flex, Image, Popover, PopoverTrigger } from '~/src/system'
import type { Reaction, Reactions } from '~/src/protocol/use-messages' import type { Reaction, Reactions } from '~/src/protocol'
interface Props { interface Props {
children: React.ReactElement children: React.ReactElement
@ -52,13 +52,13 @@ export const ReactionPopover = (props: Props) => {
<Popover side="top" align="center" sideOffset={6}> <Popover side="top" align="center" sideOffset={6}>
<Flex gap={1} css={{ padding: 8 }}> <Flex gap={1} css={{ padding: 8 }}>
{Object.entries(emojis).map(([type, emoji]) => { {Object.entries(emojis).map(([type, emoji]) => {
const value = reactions[type] const value = reactions[type as Reaction]
const me = account ? value.has('0x' + account.publicKey) : false const me = account ? value.has('0x' + account.publicKey) : false
return ( return (
<Button <Button
key={type} key={type}
onClick={() => onClick(type)} onClick={() => onClick(type as Reaction)}
active={me} active={me}
aria-label={`React with ${emoji.symbol}`} aria-label={`React with ${emoji.symbol}`}
> >

View File

@ -1,4 +1,4 @@
import React from 'react' import React, { useState } from 'react'
import { emojis, ReactionPopover } from '~/src/components/reaction-popover' import { emojis, ReactionPopover } from '~/src/components/reaction-popover'
import { ReactionIcon } from '~/src/icons/reaction-icon' import { ReactionIcon } from '~/src/icons/reaction-icon'
@ -6,7 +6,7 @@ import { useAccount } from '~/src/protocol'
import { styled } from '~/src/styles/config' import { styled } from '~/src/styles/config'
import { Flex, Image, Text } from '~/src/system' import { Flex, Image, Text } from '~/src/system'
import type { Reactions } from '~/src/protocol/use-messages' import type { Reaction, Reactions } from '~/src/protocol'
interface Props { interface Props {
reactions: Reactions reactions: Reactions
@ -16,24 +16,36 @@ interface Props {
export const MessageReactions = (props: Props) => { export const MessageReactions = (props: Props) => {
const { reactions, onClick } = props const { reactions, onClick } = props
const [open, setOpen] = useState(false)
const hasReaction = Object.values(reactions).some(value => value.size > 0) const hasReaction = Object.values(reactions).some(value => value.size > 0)
if (hasReaction === false) { if (hasReaction === false) {
return null return null
} }
const handlePopoverClick = (reaction: Reaction) => {
onClick(reaction)
setOpen(false)
}
return ( return (
<Flex align="center" css={{ paddingTop: 6 }} gap={1}> <Flex align="center" css={{ paddingTop: 6 }} gap={1}>
{Object.entries(emojis).map(([type, emoji]) => ( {Object.entries(emojis).map(([type, emoji]) => (
<Reaction <ReactionButton
key={type} key={type}
emoji={emoji} emoji={emoji}
value={reactions[type]} value={reactions[type as Reaction]}
onClick={() => onClick(type)} onClick={() => onClick(type as Reaction)}
/> />
))} ))}
<ReactionPopover reactions={reactions} onClick={onClick}> <ReactionPopover
open={open}
onOpenChange={setOpen}
reactions={reactions}
onClick={handlePopoverClick}
>
<AddReactionButton aria-label="Add Reaction"> <AddReactionButton aria-label="Add Reaction">
<ReactionIcon width={16} height={16} /> <ReactionIcon width={16} height={16} />
</AddReactionButton> </AddReactionButton>
@ -57,11 +69,11 @@ interface ReactionProps {
url: string url: string
symbol: string symbol: string
} }
value: Props['reactions']['HEART'] value: Reactions['LOVE']
onClick: VoidFunction onClick: VoidFunction
} }
const Reaction = (props: ReactionProps) => { const ReactionButton = (props: ReactionProps) => {
const { emoji, value, onClick } = props const { emoji, value, onClick } = props
const { account } = useAccount() const { account } = useAccount()