Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 5734 Rev 5737
Línea 1... Línea 1...
1 
import React, { 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/Favorite'
4 
import VolunteerActivismIcon from '@mui/icons-material/VolunteerActivism'
 4 
import VolunteerActivismIcon from '@mui/icons-material/VolunteerActivism'
5 
import { debounce } from '../../../utils'
 5 
import { debounce } from '../../../utils'
- 
 
 6 
import useOutsideClick from '../../../hooks/useOutsideClick'
Línea 6... Línea 7...
6 
 
 7 
 
7 
export const ReactionButton = () => {
 8 
export const ReactionButton = () => {
8 
  const [settedReaction, setSettedReaction] = useState('r')
 9 
  const [settedReaction, setSettedReaction] = useState('r')
- 
 
 10 
  const [showReactions, setShowReactions] = useState(false)
- 
 
 11 
  const rectionBtn = useRef(null)
Línea 9... Línea 12...
9 
  const [showReactions, setShowReactions] = useState(false)
 12 
  const outsideClick = useOutsideClick(rectionBtn)
10 
 
 13 
 
11 
  const reactions = [
 14 
  const reactions = [
12 
    {
 15 
    {
Línea 23... Línea 26...
23 
    },
 26 
    },
24 
  ]
 27 
  ]
Línea 25... Línea 28...
25 
 
 28 
 
Línea -... Línea 29...
- 
 
 29 
  const onHover = debounce(() => setShowReactions(true), 1000)
- 
 
 30 
 
- 
 
 31 
  useEffect(() => {
- 
 
 32 
    if (outsideClick) {
- 
 
 33 
      setShowReactions(false)
- 
 
 34 
    }
26 
  const onHover = debounce(() => setShowReactions(true), 1000)
 35 
  }, [outsideClick])
27 
 
 36 
 
- 
 
 37 
  return (
- 
 
 38 
    <button type="button" className="reaction-btn" onMouseEnter={onHover}>
- 
 
 39 
      {reactions.map((reaction) =>
28 
  return (
 40 
        reaction.type === settedReaction ? reaction.icon : null
29 
    <button type="button" className="reaction-btn" onMouseEnter={onHover}>
 41 
      )}
30 
      <div className={`reactions ${showReactions ? 'active' : ''}`}>
 42 
      <div className={`reactions ${showReactions ? 'active' : ''}`}>
31 
        {reactions.map((reaction) => (
 43 
        {reactions.map((reaction) => (
32 
          <button
 44 
          <button
33 
            key={reaction.type}
 45 
            key={reaction.type}
34 
            onClick={() => setSettedReaction(reaction.type)}
 46 
            onClick={() => setSettedReaction(reaction.type)}
35 
          >
 47 
          >
36 
            {reaction.icon}
 48 
            {reaction.icon}
37 
          </button>
 49 
          </button>
38 
        ))}
 - 
 
39 
      </div>
 - 
 
40 
      {reactions.map((reaction) =>
 - 
 
41 
        reaction.type === settedReaction ? reaction.icon : null
 50 
        ))}
42 
      )}
 51 
      </div>
43 
    </button>
 52 
    </button>