h3n3/cadhub
1
0
Fork 0
Code Issues 35 Pull Requests Packages Projects Releases Wiki Activity

Lint project

Browse Source
This commit is contained in:
Kurt Hutten
2020-11-11 03:18:10 +11:00
parent d8efead4e8
commit 39898270df
33 changed files with 852 additions and 481 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
web/src/components/EmojiReaction/EmojiReaction.js
View File

@@ -1,5 +1,5 @@
import { useState } from 'react'
import { getActiveClasses } from "get-active-classes"
import { getActiveClasses } from 'get-active-classes'
import Popover from '@material-ui/core/Popover'
import { useAuth } from '@redwoodjs/auth'
@@ -7,14 +7,21 @@ import Svg from 'src/components/Svg'
const emojiMenu = ['❤️', '👍', '😄', '🙌']
// const emojiMenu = ['🏆', '❤️', '👍', '😊', '😄', '🚀', '👏', '🙌']
const noEmotes =[{
emoji: '❤️',
count: 0,
}]
const noEmotes = [
{
emoji: '❤️',
count: 0,
},
]
const textShadow = {textShadow: '0 4px 6px rgba(0, 0, 0, 0.3)'}
const textShadow = { textShadow: '0 4px 6px rgba(0, 0, 0, 0.3)' }
const EmojiReaction = ({ emotes, userEmotes, onEmote = () => {}, className }) => {
const EmojiReaction = ({
emotes,
userEmotes,
onEmote = () => {},
className,
}) => {
const { currentUser } = useAuth()
const [isOpen, setIsOpen] = useState(false)
const [anchorEl, setAnchorEl] = useState(null)
@@ -48,29 +55,40 @@ const EmojiReaction = ({ emotes, userEmotes, onEmote = () => {}, className }) =>
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
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-no-wrap 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)}
'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 className="text-lg pr-1">{emote.emoji}</span>
<span className="text-sm font-ropa-sans">{emote.count}</span>
</span>
))}
</div>
@@ -96,7 +114,9 @@ const EmojiReaction = ({ emotes, userEmotes, onEmote = () => {}, className }) =>
style={textShadow}
key={`${emoji}-${i}}`}
onClick={() => handleEmojiClick(emoji)}
>{emoji}</button>
>
{emoji}
</button>
))}
</div>
</Popover>