Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 2155 Rev 2156
Línea 1... Línea 1...
1 
import React, { useCallback, useMemo } from 'react'
 1 
import React, { useCallback, useMemo, useState } from 'react'
2 
import { useDispatch } from 'react-redux'
 2 
import { useDispatch } from 'react-redux'
3 
import { Box, styled } from '@mui/material'
 3 
import { Box, styled } from '@mui/material'
Línea 4... Línea 4...
4 
 
 4 
 
5 
import { axios } from '@app/utils'
 5 
import { axios } from '@app/utils'
6 
import { REACTIONS } from '@app/constants/feed'
 6 
import { REACTIONS } from '@app/constants/feed'
- 
 
 7 
import { addNotification } from '@app/redux/notification/notification.actions'
Línea 7... Línea 8...
7 
import { addNotification } from '@app/redux/notification/notification.actions'
 8 
import useDebounce from '@app/hooks/useDebounce'
8 
 
 9 
 
9 
const ReactionsBox = styled(Box)(({ theme }) => ({
 10 
const ReactionsBox = styled(Box)(({ theme }) => ({
10 
  position: 'absolute',
 11 
  position: 'absolute',
Línea 44... Línea 45...
44 
    saveUrl = '',
 45 
    saveUrl = '',
45 
    deleteUrl = '',
 46 
    deleteUrl = '',
46 
    currentReactionType = null,
 47 
    currentReactionType = null,
47 
    onReaction = () => null
 48 
    onReaction = () => null
48 
  }) => {
 49 
  }) => {
- 
 
 50 
    const [isHover, setIsHover] = useState(false)
- 
 
 51 
    const debounceHover = useDebounce(isHover, 500)
49 
    const dispatch = useDispatch()
 52 
    const dispatch = useDispatch()
Línea 50... Línea 53...
50 
 
 53 
 
51 
    const currentReaction = useMemo(
 54 
    const currentReaction = useMemo(
52 
      () => REACTIONS.find((r) => r.type === currentReactionType),
 55 
      () => REACTIONS.find((r) => r.type === currentReactionType),
Línea 90... Línea 93...
90 
        })
 93 
        })
91 
      })
 94 
      })
92 
    }, [])
 95 
    }, [])
Línea 93... Línea 96...
93 
 
 96 
 
- 
 
 97 
    return (
94 
    return (
 98 
      <Component
- 
 
 99 
        onClick={currentReaction ? deleteReaction : saveReaction}
- 
 
 100 
        onMouseEnter={() => setIsHover(true)}
- 
 
 101 
        onMouseLeave={() => setIsHover(false)}
95 
      <Component onClick={currentReaction ? deleteReaction : saveReaction}>
 102 
      >
96 
        {currentReaction ? (
 103 
        {currentReaction ? (
97 
          <Icon style={{ color: currentReaction.color }} />
 104 
          <Icon style={{ color: currentReaction.color }} />
98 
        ) : (
 105 
        ) : (
99 
          <Icon />
 106 
          <Icon />
Línea 100... Línea 107...
100 
        )}
 107 
        )}
Línea 101... Línea 108...
101 
 
 108 
 
- 
 
 109 
        {currentReaction ? currentReaction.label : 'Reaccionar'}
- 
 
 110 
 
102 
        {currentReaction ? currentReaction.label : 'Reaccionar'}
 111 
        <ReactionsBox
103 
 
 112 
          sx={{ transform: debounceHover ? 'scale(1)' : 'scale(0)' }}
104 
        <ReactionsBox>
 113 
        >
105 
          {REACTIONS.map(({ type, label, icon: Icon, color }) => (
 114 
          {REACTIONS.map(({ type, label, icon: Icon, color }) => (
106 
            <button
 115 
            <button