Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 2154 Rev 2155
Línea 1... Línea 1...
1 
import React, { useCallback, useMemo } from 'react'
 1 
import React, { useCallback, useMemo } from 'react'
2 
import { useDispatch } from 'react-redux'
 2 
import { useDispatch } from 'react-redux'
- 
 
 3 
import { Box, styled } from '@mui/material'
Línea 3... Línea 4...
3 
 
 4 
 
4 
import { axios } from '@app/utils'
 5 
import { axios } from '@app/utils'
5 
import { REACTIONS } from '@app/constants/feed'
 6 
import { REACTIONS } from '@app/constants/feed'
Línea -... Línea 7...
- 
 
 7 
import { addNotification } from '@app/redux/notification/notification.actions'
- 
 
 8 
 
- 
 
 9 
const ReactionsBox = styled(Box)(({ theme }) => ({
- 
 
 10 
  position: 'absolute',
- 
 
 11 
  bottom: '100%',
- 
 
 12 
  backgroundColor: 'var(--bg-color)',
- 
 
 13 
  boxShadow: theme.shadows[1],
- 
 
 14 
  gap: 1,
- 
 
 15 
  left: 0,
- 
 
 16 
  display: 'flex',
- 
 
 17 
  padding: 1,
- 
 
 18 
  width: 'fit-content',
- 
 
 19 
  borderRadius: theme.shape.borderRadius,
- 
 
 20 
  transform: 'scale(0)',
- 
 
 21 
  transformOrigin: 'left bottom',
- 
 
 22 
  transition: theme.transitions.create('transform', {
- 
 
 23 
    duration: theme.transitions.duration.short,
- 
 
 24 
    easing: theme.transitions.easing.easeInOut,
- 
 
 25 
    delay: theme.transitions.duration.short
- 
 
 26 
  }),
- 
 
 27 
 
- 
 
 28 
  '& > button': {
- 
 
 29 
    transition: theme.transitions.create('transform', {
- 
 
 30 
      duration: theme.transitions.duration.short,
- 
 
 31 
      easing: theme.transitions.easing.easeInOut
- 
 
 32 
    }),
- 
 
 33 
    '&:hover': {
- 
 
 34 
      transform: 'scale(1.1) translateY(-4px)'
- 
 
 35 
    },
- 
 
 36 
    svg: {
- 
 
 37 
      fontSize: '32px'
- 
 
 38 
    }
- 
 
 39 
  }
6 
import { addNotification } from '@app/redux/notification/notification.actions'
 40 
}))
7 
 
 41 
 
8 
export default function withReactions(Component) {
 42 
export default function withReactions(Component) {
9 
  const HOC = ({
 43 
  const HOC = ({
10 
    saveUrl = '',
 44 
    saveUrl = '',
Línea 56... Línea 90...
56 
        })
 90 
        })
57 
      })
 91 
      })
58 
    }, [])
 92 
    }, [])
Línea 59... Línea 93...
59 
 
 93 
 
60 
    return (
 - 
 
61 
      <Component
 - 
 
62 
        onClick={() =>
 94 
    return (
63 
          currentReaction ? deleteReaction() : saveReaction(REACTIONS[0].type)
 - 
 
64 
        }
 - 
 
65 
      >
 95 
      <Component onClick={currentReaction ? deleteReaction : saveReaction}>
66 
        {currentReaction ? (
 96 
        {currentReaction ? (
67 
          <Icon style={{ color: currentReaction.color }} />
 97 
          <Icon style={{ color: currentReaction.color }} />
68 
        ) : (
 98 
        ) : (
69 
          <Icon />
 99 
          <Icon />
Línea 70... Línea 100...
70 
        )}
 100 
        )}
Línea 71... Línea 101...
71 
 
 101 
 
72 
        {currentReaction ? currentReaction.label : 'Reaccionar'}
 102 
        {currentReaction ? currentReaction.label : 'Reaccionar'}
73 
 
 103 
 
74 
        <div className='reactions'>
 104 
        <ReactionsBox>
75 
          {REACTIONS.map(({ type, label, icon: Icon, color }) => (
 105 
          {REACTIONS.map(({ type, label, icon: Icon, color }) => (
76 
            <button
 - 
 
77 
              key={type}
 - 
 
78 
              title={label}
 - 
 
79 
              onClick={(e) => {
 106 
            <button
80 
                e.stopPropagation()
 - 
 
81 
                e.currentTarget.blur()
 107 
              key={type}
82 
                saveReaction(type)
 108 
              title={label}
83 
              }}
 109 
              onClickCapture={(e) => saveReaction(type)}
84 
            >
 110 
            >
85 
              <Icon style={{ color }} />
 111 
              <Icon style={{ color }} />
86 
            </button>
 112 
            </button>
87 
          ))}
 113 
          ))}
88 
        </div>
 114 
        </ReactionsBox>
Línea 89... Línea 115...
89 
      </Component>
 115 
      </Component>