Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev Autor Línea Nro. Línea
5814 stevensc 1 
/* eslint-disable react/display-name */
5737 stevensc 2 
import React, { useEffect, useRef, useState } from 'react'
5577 stevensc 3 
import RecommendIcon from '@mui/icons-material/Recommend'
5747 stevensc 4 
import FavoriteIcon from '@mui/icons-material/FavoriteTwoTone'
5577 stevensc 5 
import VolunteerActivismIcon from '@mui/icons-material/VolunteerActivism'
5746 stevensc 6 
import EmojiEmotionsIcon from '@mui/icons-material/EmojiEmotions'
7 
import TungstenIcon from '@mui/icons-material/Tungsten'
5781 stevensc 8 
import { debounce } from '../../../utils'
5737 stevensc 9 
import useOutsideClick from '../../../hooks/useOutsideClick'
5574 stevensc 10 
 
5814 stevensc 11 
const withReactions = (Component, { onSelect, onDelete, myReaction }) => {
12 
  return () => {
13 
    const [settedReaction, setSettedReaction] = useState(myReaction)
14 
    const [showReactions, setShowReactions] = useState(false)
15 
    const rectionBtn = useRef(null)
16 
    const outsideClick = useOutsideClick(rectionBtn)
5667 stevensc 17 
 
5814 stevensc 18 
    const reactionsOptions = [
19 
      {
20 
        type: 'r',
21 
        icon: RecommendIcon,
22 
        color: '#7405f9',
23 
      },
24 
      {
25 
        type: 's',
26 
        icon: VolunteerActivismIcon,
27 
        color: '#6495ED',
28 
      },
29 
      {
30 
        type: 'l',
31 
        icon: FavoriteIcon,
32 
        color: '#DF704D',
33 
      },
34 
      {
35 
        type: 'i',
36 
        icon: TungstenIcon,
37 
        color: '#F5BB5C',
38 
      },
39 
      {
40 
        type: 'f',
41 
        icon: EmojiEmotionsIcon,
42 
        color: '#FF7F50',
43 
      },
44 
    ]
5667 stevensc 45 
 
5814 stevensc 46 
    const selectReactionHandler = (reaction) => {
47 
      onSelect(reaction.type)
48 
      setSettedReaction(reaction)
49 
    }
5771 stevensc 50 
 
5814 stevensc 51 
    const deleteReactionHandler = () => {
52 
      onDelete()
53 
      setSettedReaction('')
54 
    }
5778 stevensc 55 
 
5814 stevensc 56 
    const onHover = debounce(() => setShowReactions(true), 500)
5734 stevensc 57 
 
5814 stevensc 58 
    const onUnhover = debounce(() => setShowReactions(false), 500)
5741 stevensc 59 
 
5814 stevensc 60 
    useEffect(() => {
61 
      if (outsideClick) setShowReactions(false)
62 
    }, [outsideClick])
5737 stevensc 63 
 
5814 stevensc 64 
    return (
65 
      <div
66 
        className="reaction-btn"
67 
        onMouseOver={onHover}
68 
        onMouseOut={onUnhover}
69 
        ref={rectionBtn}
70 
      >
71 
        <Component
72 
          Icon={settedReaction ? settedReaction.icon : RecommendIcon}
73 
          onClick={() => {
74 
            settedReaction
75 
              ? deleteReactionHandler()
76 
              : selectReactionHandler(reactionsOptions[0].type)
77 
          }}
78 
        />
79 
 
80 
        <div className={`reactions ${showReactions ? 'active' : ''}`}>
81 
          {reactionsOptions.map((reaction) => {
82 
            const { icon: Icon, color, type } = reaction
83 
            return (
84 
              <button
85 
                key={type}
86 
                onClick={(e) => {
87 
                  e.stopPropagation()
88 
                  selectReactionHandler(reaction)
89 
                }}
90 
              >
91 
                <Icon style={{ color }} />
92 
              </button>
93 
            )
94 
          })}
95 
        </div>
5577 stevensc 96 
      </div>
5814 stevensc 97 
    )
98 
  }
5577 stevensc 99 
}
5814 stevensc 100 
 
101 
export default withReactions