Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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