Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5792 | Rev 5815 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

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