Rev 6623 | AutorÃa | Comparar con el anterior | Ultima modificación | Ver Log |
import React, { useEffect, useRef, useState } from 'react'
import { debounce } from '../../utils'
import useOutsideClick from '../../hooks/useOutsideClick'
import RecommendIcon from '../UI/icons/Recommned'
import FavoriteIcon from '../UI/icons/LoveIt'
import VolunteerActivismIcon from '../UI/icons/Support'
import EmojiEmotionsIcon from '../UI/icons/Fun'
import TungstenIcon from '../UI/icons/Interest'
const withReactions = (
Component,
{ onSelect, onDelete, myReaction, withTitle = false }
) => {
return function HOC() {
const [settedReaction, setSettedReaction] = useState(null)
const [showReactions, setShowReactions] = useState(false)
const rectionBtn = useRef(null)
useOutsideClick(rectionBtn, () => setShowReactions(false))
const reactionsOptions = [
{
type: 'r',
icon: RecommendIcon,
color: '#7405f9',
label: 'Me gusta',
},
{
type: 's',
icon: VolunteerActivismIcon,
color: '#6495ED',
label: 'Dar apoyo',
},
{
type: 'l',
icon: FavoriteIcon,
color: '#DF704D',
label: 'Me encanta',
},
{
type: 'i',
icon: TungstenIcon,
color: '#F5BB5C',
label: 'Me interesa',
},
{
type: 'f',
icon: EmojiEmotionsIcon,
color: '#FF7F50',
label: 'Me divierte',
},
]
const onHover = debounce(() => setShowReactions(true), 500)
const onUnhover = debounce(() => setShowReactions(false), 500)
useEffect(() => {
const currentReaction = reactionsOptions.find(
(reaction) => reaction.type === myReaction
)
setSettedReaction(currentReaction)
}, [])
return (
<Component
onMouseOver={onHover}
onMouseOut={onUnhover}
ref={rectionBtn}
Icon={settedReaction ? settedReaction.icon : RecommendIcon}
color={settedReaction ? settedReaction.color : '#626d7a'}
title={settedReaction ? settedReaction.label : 'Reaccionar'}
onClick={() => {
settedReaction ? onDelete() : onSelect(reactionsOptions[0].type)
}}
withTitle={withTitle}
>
<div className={`reactions ${showReactions ? 'active' : ''}`}>
{reactionsOptions.map((reaction) => {
const { icon: Icon, color, type, label } = reaction
return (
<button
key={type}
onClick={(e) => {
e.stopPropagation()
onSelect(type)
}}
title={label}
>
<Icon style={{ color }} />
</button>
)
})}
</div>
</Component>
)
}
}
export default withReactions