Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5743 | Rev 5747 | 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'
3 
import FavoriteIcon from '@mui/icons-material/Favorite'
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 = () => {
5668 stevensc 11 
  const [settedReaction, setSettedReaction] = useState('r')
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 
    {
5746 stevensc 18 
      type: 'd',
19 
      icon: <RecommendIcon style={{ color: '#7405f9' }} />,
20 
    },
21 
    {
5667 stevensc 22 
      type: 'r',
5739 stevensc 23 
      icon: <RecommendIcon style={{ color: '#7405f9' }} />,
5667 stevensc 24 
    },
25 
    {
5746 stevensc 26 
      type: 's',
27 
      icon: <VolunteerActivismIcon style={{ color: '#493D57' }} />,
5667 stevensc 28 
    },
29 
    {
5746 stevensc 30 
      type: 'l',
31 
      icon: <FavoriteIcon style={{ color: '#DF704D' }} />,
5667 stevensc 32 
    },
5746 stevensc 33 
    {
34 
      type: 'i',
35 
      icon: (
36 
        <TungstenIcon
37 
          style={{ color: '#F5BB5C', transform: 'rotate(180deg)' }}
38 
        />
39 
      ),
40 
    },
41 
    {
42 
      type: 'f',
43 
      icon: <EmojiEmotionsIcon style={{ color: '##79DEEE' }} />,
44 
    },
5667 stevensc 45 
  ]
46 
 
5741 stevensc 47 
  const onHover = debounce(() => setShowReactions(true), 500)
5734 stevensc 48 
 
5743 stevensc 49 
  const onUnhover = debounce((e) => setShowReactions(false), 500)
5741 stevensc 50 
 
5739 stevensc 51 
  const handleClick = (reaction) => {
52 
    setSettedReaction(reaction)
53 
    setShowReactions(false)
54 
  }
55 
 
5737 stevensc 56 
  useEffect(() => {
57 
    if (outsideClick) {
58 
      setShowReactions(false)
59 
    }
60 
  }, [outsideClick])
61 
 
5577 stevensc 62 
  return (
5738 stevensc 63 
    <button
64 
      type="button"
65 
      className="reaction-btn"
5743 stevensc 66 
      onMouseOver={onHover}
67 
      onMouseOut={onUnhover}
5738 stevensc 68 
      ref={rectionBtn}
69 
    >
5737 stevensc 70 
      {reactions.map((reaction) =>
71 
        reaction.type === settedReaction ? reaction.icon : null
72 
      )}
5734 stevensc 73 
      <div className={`reactions ${showReactions ? 'active' : ''}`}>
5669 stevensc 74 
        {reactions.map((reaction) => (
75 
          <button
76 
            key={reaction.type}
5739 stevensc 77 
            onClick={() => handleClick(reaction.type)}
5669 stevensc 78 
          >
79 
            {reaction.icon}
80 
          </button>
81 
        ))}
5577 stevensc 82 
      </div>
83 
    </button>
84 
  )
85 
}