Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 764 Rev 766
Línea 1... Línea 1...
1 
import React, { useCallback } from 'react'
 1 
import React, { useCallback } from 'react'
2 
import { useDispatch } from 'react-redux'
 2 
import { useDispatch } from 'react-redux'
3 
import { axios } from '../utils'
 3 
import { axios } from '../utils'
4 
import { addNotification } from 'store/notification/notification.actions'
 4 
import { addNotification } from 'store/notification/notification.actions'
- 
 
 5 
import styled from 'styled-components'
Línea 5... Línea 6...
5 
 
 6 
 
6 
import FunIcon from '../components/UI/icons/Fun'
 7 
import FunIcon from '../components/UI/icons/Fun'
7 
import LoveItIcon from '../components/UI/icons/LoveIt'
 8 
import LoveItIcon from '../components/UI/icons/LoveIt'
8 
import SupportIcon from '../components/UI/icons/Support'
 9 
import SupportIcon from '../components/UI/icons/Support'
Línea 35... Línea 36...
35 
    label: 'Me divierte',
 36 
    label: 'Me divierte',
36 
    type: 'f'
 37 
    type: 'f'
37 
  }
 38 
  }
38 
}
 39 
}
Línea -... Línea 40...
- 
 
 40 
 
- 
 
 41 
const StyledReactionsContainer = styled.div`
- 
 
 42 
  position: absolute;
- 
 
 43 
  bottom: 100%;
- 
 
 44 
  background-color: var(--bg-color);
- 
 
 45 
  box-shadow: 0px 0px 3px #000;
- 
 
 46 
  gap: 0.5rem;
- 
 
 47 
  left: 0;
- 
 
 48 
  display: flex;
- 
 
 49 
  padding: 0.2rem;
- 
 
 50 
  width: fit-content;
- 
 
 51 
  border-radius: var(--border-radius);
- 
 
 52 
  transform: scale(0);
- 
 
 53 
  transform-origin: left bottom;
- 
 
 54 
  transition: all 0.2s ease-out;
- 
 
 55 
  button {
- 
 
 56 
    transition: all 0.2s ease-in;
- 
 
 57 
    svg {
- 
 
 58 
      font-size: 32px;
- 
 
 59 
    }
- 
 
 60 
    &:hover {
- 
 
 61 
      transform: scale(1.1) translateY(-4px);
- 
 
 62 
    }
- 
 
 63 
  }
- 
 
 64 
`
39 
 
 65 
 
40 
export default function withReactions(Component) {
 66 
export default function withReactions(Component) {
41 
  const HOC = ({
 67 
  const HOC = ({
42 
    saveUrl = '',
 68 
    saveUrl = '',
43 
    deleteUrl = '',
 69 
    deleteUrl = '',
Línea 91... Línea 117...
91 
        }
 117 
        }
92 
        label={
 118 
        label={
93 
          currentReaction ? reactions[currentReaction].label : 'Reaccionar'
 119 
          currentReaction ? reactions[currentReaction].label : 'Reaccionar'
94 
        }
 120 
        }
95 
      >
 121 
      >
96 
        <div className='reactions'>
 122 
        <StyledReactionsContainer>
97 
          {Object.values(reactions).map(({ type, label, icon: Icon }) => (
 123 
          {Object.values(reactions).map(({ type, label, icon: Icon }) => (
98 
            <button
 124 
            <button
99 
              key={type}
 125 
              key={type}
100 
              title={label}
 126 
              title={label}
101 
              onClick={(e) => {
 127 
              onClick={(e) => {
102 
                e.stopPropagation()
 128 
                e.stopPropagation()
103 
                saveReaction(type)
 129 
                saveReaction(type)
- 
 
 130 
                e.currentTarget.blur()
104 
              }}
 131 
              }}
105 
            >
 132 
            >
106 
              <Icon />
 133 
              <Icon />
107 
            </button>
 134 
            </button>
108 
          ))}
 135 
          ))}
109 
        </div>
 136 
        </StyledReactionsContainer>
110 
      </Component>
 137 
      </Component>
111 
    )
 138 
    )
112 
  }
 139 
  }
Línea 113... Línea 140...
113 
 
 140