Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 6386 | 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'
6380 stevensc 3 
import RecommendIcon from './reactions/Recommned'
6383 stevensc 4 
import FavoriteIcon from './reactions/LoveIt'
6387 stevensc 5 
import VolunteerActivismIcon from './reactions/Support'
6 
import EmojiEmotionsIcon from './reactions/Fun'
6386 stevensc 7 
import TungstenIcon from './reactions/UserIdea'
6375 stevensc 8 
 
5781 stevensc 9 
import { debounce } from '../../../utils'
5737 stevensc 10 
import useOutsideClick from '../../../hooks/useOutsideClick'
5574 stevensc 11 
 
5946 stevensc 12 
const withReactions = (
13 
  Component,
14 
  { onSelect, onDelete, myReaction, withTitle = false }
15 
) => {
5814 stevensc 16 
  return () => {
5816 stevensc 17 
    const [settedReaction, setSettedReaction] = useState(null)
5814 stevensc 18 
    const [showReactions, setShowReactions] = useState(false)
19 
    const rectionBtn = useRef(null)
20 
    const outsideClick = useOutsideClick(rectionBtn)
5667 stevensc 21 
 
5814 stevensc 22 
    const reactionsOptions = [
23 
      {
24 
        type: 'r',
25 
        icon: RecommendIcon,
26 
        color: '#7405f9',
5815 stevensc 27 
        label: 'Me gusta',
5814 stevensc 28 
      },
29 
      {
30 
        type: 's',
31 
        icon: VolunteerActivismIcon,
32 
        color: '#6495ED',
5815 stevensc 33 
        label: 'Dar apoyo',
5814 stevensc 34 
      },
35 
      {
36 
        type: 'l',
37 
        icon: FavoriteIcon,
38 
        color: '#DF704D',
5815 stevensc 39 
        label: 'Me encanta',
5814 stevensc 40 
      },
41 
      {
42 
        type: 'i',
43 
        icon: TungstenIcon,
44 
        color: '#F5BB5C',
5815 stevensc 45 
        label: 'Me interesa',
5814 stevensc 46 
      },
47 
      {
48 
        type: 'f',
49 
        icon: EmojiEmotionsIcon,
50 
        color: '#FF7F50',
5815 stevensc 51 
        label: 'Me divierte',
5814 stevensc 52 
      },
53 
    ]
5667 stevensc 54 
 
5814 stevensc 55 
    const onHover = debounce(() => setShowReactions(true), 500)
5734 stevensc 56 
 
5814 stevensc 57 
    const onUnhover = debounce(() => setShowReactions(false), 500)
5741 stevensc 58 
 
5814 stevensc 59 
    useEffect(() => {
60 
      if (outsideClick) setShowReactions(false)
61 
    }, [outsideClick])
5737 stevensc 62 
 
5816 stevensc 63 
    useEffect(() => {
64 
      const currentReaction = reactionsOptions.find(
65 
        (reaction) => reaction.type === myReaction
66 
      )
67 
      setSettedReaction(currentReaction)
5817 stevensc 68 
    }, [])
5816 stevensc 69 
 
5814 stevensc 70 
    return (
5817 stevensc 71 
      <Component
5814 stevensc 72 
        onMouseOver={onHover}
73 
        onMouseOut={onUnhover}
74 
        ref={rectionBtn}
5817 stevensc 75 
        Icon={settedReaction ? settedReaction.icon : RecommendIcon}
76 
        color={settedReaction ? settedReaction.color : '#626d7a'}
5854 stevensc 77 
        title={settedReaction ? settedReaction.label : 'Reaccionar'}
5817 stevensc 78 
        onClick={() => {
5818 stevensc 79 
          settedReaction ? onDelete() : onSelect(reactionsOptions[0].type)
5817 stevensc 80 
        }}
5946 stevensc 81 
        withTitle={withTitle}
5814 stevensc 82 
      >
83 
        <div className={`reactions ${showReactions ? 'active' : ''}`}>
84 
          {reactionsOptions.map((reaction) => {
5815 stevensc 85 
            const { icon: Icon, color, type, label } = reaction
5814 stevensc 86 
            return (
87 
              <button
88 
                key={type}
89 
                onClick={(e) => {
90 
                  e.stopPropagation()
5818 stevensc 91 
                  onSelect(type)
5814 stevensc 92 
                }}
5815 stevensc 93 
                title={label}
5814 stevensc 94 
              >
95 
                <Icon style={{ color }} />
96 
              </button>
97 
            )
98 
          })}
99 
        </div>
5817 stevensc 100 
      </Component>
5814 stevensc 101 
    )
102 
  }
5577 stevensc 103 
}
5814 stevensc 104 
 
105 
export default withReactions