134 lines
3.8 KiB
JavaScript
134 lines
3.8 KiB
JavaScript
import { useState } from 'react'
|
|
import { getActiveClasses } from 'get-active-classes'
|
|
import Popover from '@material-ui/core/Popover'
|
|
import { useAuth } from '@redwoodjs/auth'
|
|
|
|
import Svg from 'src/components/Svg'
|
|
|
|
const emojiMenu = ['❤️', '👍', '😄', '🙌']
|
|
// const emojiMenu = ['🏆', '❤️', '👍', '😊', '😄', '🚀', '👏', '🙌']
|
|
const noEmotes = [
|
|
{
|
|
emoji: '❤️',
|
|
count: 0,
|
|
},
|
|
]
|
|
|
|
const textShadow = { textShadow: '0 4px 6px rgba(0, 0, 0, 0.3)' }
|
|
|
|
const EmojiReaction = ({
|
|
emotes,
|
|
userEmotes,
|
|
onEmote = () => {},
|
|
onShowPartReactions,
|
|
className,
|
|
}) => {
|
|
const { currentUser } = useAuth()
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
const [anchorEl, setAnchorEl] = useState(null)
|
|
const [popoverId, setPopoverId] = useState(undefined)
|
|
|
|
const openPopover = (target) => {
|
|
setAnchorEl(target)
|
|
setPopoverId('simple-popover')
|
|
setIsOpen(true)
|
|
}
|
|
|
|
const closePopover = () => {
|
|
setAnchorEl(null)
|
|
setPopoverId(undefined)
|
|
setIsOpen(false)
|
|
}
|
|
|
|
const togglePopover = ({ currentTarget }) => {
|
|
if (isOpen) {
|
|
return closePopover()
|
|
}
|
|
|
|
openPopover(currentTarget)
|
|
}
|
|
|
|
const handleEmojiClick = (emoji) => {
|
|
// TODO handle user not signed in better, maybe open up a modal, I danno think about it.
|
|
currentUser && onEmote(emoji)
|
|
closePopover()
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className={getActiveClasses(
|
|
'h-10 relative overflow-hidden py-4',
|
|
className
|
|
)}
|
|
>
|
|
<div className="absolute left-0 w-8 inset-y-0 z-10 flex items-center bg-gray-100">
|
|
<div
|
|
className="h-8 w-8 relative"
|
|
aria-describedby={popoverId}
|
|
onClick={togglePopover}
|
|
>
|
|
<button className="bg-gray-200 border-2 m-px w-full h-full border-gray-300 rounded-full flex justify-center items-center shadow-md hover:shadow-lg hover:border-indigo-200 transform hover:-translate-y-px transition-all duration-150">
|
|
<Svg
|
|
className="h-8 w-8 pt-px mt-px text-gray-500"
|
|
name="dots-vertical"
|
|
/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="whitespace-nowrap absolute right-0 inset-y-0 flex items-center flex-row-reverse">
|
|
{(emotes.length ? emotes : noEmotes).map((emote, i) => (
|
|
<span
|
|
className={getActiveClasses(
|
|
'rounded-full tracking-wide hover:bg-indigo-100 p-1 mx-px transform hover:-translate-y-px transition-all duration-150 border-indigo-400',
|
|
{ border: currentUser && userEmotes?.includes(emote.emoji) }
|
|
)}
|
|
style={textShadow}
|
|
key={`${emote.emoji}--${i}`}
|
|
onClick={() => handleEmojiClick(emote.emoji)}
|
|
>
|
|
<span className="text-lg pr-1">{emote.emoji}</span>
|
|
<span className="text-sm font-ropa-sans">{emote.count}</span>
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<Popover
|
|
id={popoverId}
|
|
open={isOpen}
|
|
anchorEl={anchorEl}
|
|
onClose={closePopover}
|
|
anchorOrigin={{
|
|
vertical: 'bottom',
|
|
horizontal: 'left',
|
|
}}
|
|
transformOrigin={{
|
|
vertical: 'top',
|
|
horizontal: 'left',
|
|
}}
|
|
>
|
|
<div className="p-2 pr-3 flex flex-col">
|
|
<div className="inline-flex">
|
|
{emojiMenu.map((emoji, i) => (
|
|
<button
|
|
className="p-2"
|
|
style={textShadow}
|
|
key={`${emoji}-${i}}`}
|
|
onClick={() => handleEmojiClick(emoji)}
|
|
>
|
|
{emoji}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<button className="text-gray-700" onClick={onShowPartReactions}>
|
|
View Reactions
|
|
</button>
|
|
</div>
|
|
</Popover>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default EmojiReaction
|