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/Svg' ; const emojiMenu = [ '❤️' , '👍' , '😄' , '🙌' ] ; const noEmotes = [ { emoji : '❤️' , count : 0 , } , ] ; const textShadow = { textShadow : '0 4px 6px rgba(0, 0, 0, 0.3)' } ; const EmojiReaction = ( { emotes , userEmotes , onEmote = ( ) => { } , onShowProjectReactions , 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 ) => { currentUser && onEmote ( emoji ) ; closePopover ( ) ; } ; return ( < > < div className = { getActiveClasses ( 'relative overflow-hidden pt-1' , className ) } > < div className = "z-10 flex items-center h-10" > < div className = "h-full w-10 mr-4" aria - describedby = { popoverId } onClick = { togglePopover } > < button className = "bg-ch-gray-600 w-full h-full flex justify-center items-center shadow-md hover:shadow-lg transform hover:-translate-y-px transition-all duration-150 rounded" > < Svg className = "w-8 text-ch-gray-300" name = "dots-vertical" / > < /button> < /div> { ( emotes . length ? emotes : noEmotes ) . map ( ( emote , i ) => ( < span className = { getActiveClasses ( 'tracking-wide border border-transparent hover:border-ch-gray-300 h-full p-1 px-4 transform hover:-translate-y-px transition-all duration-150 flex items-center rounded' , { 'bg-ch-gray-500 text-ch-gray-900' : currentUser && userEmotes ?. includes ( emote . emoji ) , 'bg-ch-gray-600' : ! ( currentUser && userEmotes ?. includes ( emote . emoji ) ) , } ) } style = { textShadow } key = { `${ emote . emoji }--${ i }` } onClick = { ( ) => handleEmojiClick ( emote . emoji ) } > < span className = "text-lg pr-2" > { emote . emoji } < /span> < span className = "text-sm font-fira-code" > { emote . count } < /span> < /span>))} < /div> < div className = "whitespace-nowrap flex items-center flex-row-reverse" > < /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 = { onShowProjectReactions } > View Reactions < /button> < /div> < /Popover> < />); } ; export default EmojiReaction ;