Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 6623 | | Comparar con el anterior | Ultima modificación | Ver Log |

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