Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5747 | Rev 5771 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
5737 stevensc 1 
import React, { useEffect, useRef, useState } from 'react'
5577 stevensc 2 
import RecommendIcon from '@mui/icons-material/Recommend'
5747 stevensc 3 
import FavoriteIcon from '@mui/icons-material/FavoriteTwoTone'
5577 stevensc 4 
import VolunteerActivismIcon from '@mui/icons-material/VolunteerActivism'
5746 stevensc 5 
import EmojiEmotionsIcon from '@mui/icons-material/EmojiEmotions'
6 
import TungstenIcon from '@mui/icons-material/Tungsten'
5734 stevensc 7 
import { debounce } from '../../../utils'
5737 stevensc 8 
import useOutsideClick from '../../../hooks/useOutsideClick'
5574 stevensc 9 
 
5667 stevensc 10 
export const ReactionButton = () => {
5747 stevensc 11 
  const [settedReaction, setSettedReaction] = useState(null)
5734 stevensc 12 
  const [showReactions, setShowReactions] = useState(false)
5737 stevensc 13 
  const rectionBtn = useRef(null)
14 
  const outsideClick = useOutsideClick(rectionBtn)
5667 stevensc 15 
 
16 
  const reactions = [
17 
    {
18 
      type: 'r',
5739 stevensc 19 
      icon: <RecommendIcon style={{ color: '#7405f9' }} />,
5667 stevensc 20 
    },
21 
    {
5746 stevensc 22 
      type: 's',
5747 stevensc 23 
      icon: <VolunteerActivismIcon style={{ color: '#6495ED' }} />,
5667 stevensc 24 
    },
25 
    {
5746 stevensc 26 
      type: 'l',
27 
      icon: <FavoriteIcon style={{ color: '#DF704D' }} />,
5667 stevensc 28 
    },
5746 stevensc 29 
    {
30 
      type: 'i',
31 
      icon: (
32 
        <TungstenIcon
33 
          style={{ color: '#F5BB5C', transform: 'rotate(180deg)' }}
34 
        />
35 
      ),
36 
    },
37 
    {
38 
      type: 'f',
5747 stevensc 39 
      icon: <EmojiEmotionsIcon style={{ color: '#FF7F50' }} />,
5746 stevensc 40 
    },
5667 stevensc 41 
  ]
42 
 
5741 stevensc 43 
  const onHover = debounce(() => setShowReactions(true), 500)
5734 stevensc 44 
 
5743 stevensc 45 
  const onUnhover = debounce((e) => setShowReactions(false), 500)
5741 stevensc 46 
 
5739 stevensc 47 
  const handleClick = (reaction) => {
48 
    setSettedReaction(reaction)
49 
    setShowReactions(false)
50 
  }
51 
 
5737 stevensc 52 
  useEffect(() => {
53 
    if (outsideClick) {
54 
      setShowReactions(false)
55 
    }
56 
  }, [outsideClick])
57 
 
5577 stevensc 58 
  return (
5738 stevensc 59 
    <button
60 
      type="button"
61 
      className="reaction-btn"
5743 stevensc 62 
      onMouseOver={onHover}
63 
      onMouseOut={onUnhover}
5738 stevensc 64 
      ref={rectionBtn}
65 
    >
5748 stevensc 66 
      {settedReaction ? (
67 
        reactions.find((reaction) => reaction.type === settedReaction).icon
68 
      ) : (
69 
        <RecommendIcon style={{ color: '#626d7a' }} />
5737 stevensc 70 
      )}
5734 stevensc 71 
      <div className={`reactions ${showReactions ? 'active' : ''}`}>
5669 stevensc 72 
        {reactions.map((reaction) => (
73 
          <button
74 
            key={reaction.type}
5739 stevensc 75 
            onClick={() => handleClick(reaction.type)}
5669 stevensc 76 
          >
77 
            {reaction.icon}
78 
          </button>
79 
        ))}
5577 stevensc 80 
      </div>
81 
    </button>
82 
  )
83 
}