Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 5746 Rev 5747
Línea 1... Línea 1...
1 
import React, { useEffect, useRef, useState } from 'react'
 1 
import React, { useEffect, useRef, useState } from 'react'
2 
import RecommendIcon from '@mui/icons-material/Recommend'
 2 
import RecommendIcon from '@mui/icons-material/Recommend'
3 
import FavoriteIcon from '@mui/icons-material/Favorite'
 3 
import FavoriteIcon from '@mui/icons-material/FavoriteTwoTone'
4 
import VolunteerActivismIcon from '@mui/icons-material/VolunteerActivism'
 4 
import VolunteerActivismIcon from '@mui/icons-material/VolunteerActivism'
5 
import EmojiEmotionsIcon from '@mui/icons-material/EmojiEmotions'
 5 
import EmojiEmotionsIcon from '@mui/icons-material/EmojiEmotions'
6 
import TungstenIcon from '@mui/icons-material/Tungsten'
 6 
import TungstenIcon from '@mui/icons-material/Tungsten'
7 
import { debounce } from '../../../utils'
 7 
import { debounce } from '../../../utils'
8 
import useOutsideClick from '../../../hooks/useOutsideClick'
 8 
import useOutsideClick from '../../../hooks/useOutsideClick'
Línea 9... Línea 9...
9 
 
 9 
 
10 
export const ReactionButton = () => {
 10 
export const ReactionButton = () => {
11 
  const [settedReaction, setSettedReaction] = useState('r')
 11 
  const [settedReaction, setSettedReaction] = useState(null)
12 
  const [showReactions, setShowReactions] = useState(false)
 12 
  const [showReactions, setShowReactions] = useState(false)
13 
  const rectionBtn = useRef(null)
 13 
  const rectionBtn = useRef(null)
Línea 14... Línea 14...
14 
  const outsideClick = useOutsideClick(rectionBtn)
 14 
  const outsideClick = useOutsideClick(rectionBtn)
15 
 
 15 
 
16 
  const reactions = [
 - 
 
17 
    {
 - 
 
18 
      type: 'd',
 - 
 
19 
      icon: <RecommendIcon style={{ color: '#7405f9' }} />,
 - 
 
20 
    },
 16 
  const reactions = [
21 
    {
 17 
    {
22 
      type: 'r',
 18 
      type: 'r',
23 
      icon: <RecommendIcon style={{ color: '#7405f9' }} />,
 19 
      icon: <RecommendIcon style={{ color: '#7405f9' }} />,
24 
    },
 20 
    },
25 
    {
 21 
    {
26 
      type: 's',
 22 
      type: 's',
27 
      icon: <VolunteerActivismIcon style={{ color: '#493D57' }} />,
 23 
      icon: <VolunteerActivismIcon style={{ color: '#6495ED' }} />,
28 
    },
 24 
    },
29 
    {
 25 
    {
30 
      type: 'l',
 26 
      type: 'l',
Línea 38... Línea 34...
38 
        />
 34 
        />
39 
      ),
 35 
      ),
40 
    },
 36 
    },
41 
    {
 37 
    {
42 
      type: 'f',
 38 
      type: 'f',
43 
      icon: <EmojiEmotionsIcon style={{ color: '##79DEEE' }} />,
 39 
      icon: <EmojiEmotionsIcon style={{ color: '#FF7F50' }} />,
44 
    },
 40 
    },
45 
  ]
 41 
  ]
Línea 46... Línea 42...
46 
 
 42 
 
Línea 65... Línea 61...
65 
      className="reaction-btn"
 61 
      className="reaction-btn"
66 
      onMouseOver={onHover}
 62 
      onMouseOver={onHover}
67 
      onMouseOut={onUnhover}
 63 
      onMouseOut={onUnhover}
68 
      ref={rectionBtn}
 64 
      ref={rectionBtn}
69 
    >
 65 
    >
70 
      {reactions.map((reaction) =>
 66 
      {reactions.map((reaction, index) =>
71 
        reaction.type === settedReaction ? reaction.icon : null
 67 
        reaction.type === settedReaction ? (
- 
 
 68 
          reaction.icon
- 
 
 69 
        ) : (
- 
 
 70 
          <RecommendIcon key={index} style={{ color: '#626d7a' }} />
- 
 
 71 
        )
72 
      )}
 72 
      )}
73 
      <div className={`reactions ${showReactions ? 'active' : ''}`}>
 73 
      <div className={`reactions ${showReactions ? 'active' : ''}`}>
74 
        {reactions.map((reaction) => (
 74 
        {reactions.map((reaction) => (
75 
          <button
 75 
          <button
76 
            key={reaction.type}
 76 
            key={reaction.type}