Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 766 Rev 767
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 6... Línea 5...
6 
 
 5 
 
7 
import FunIcon from '../components/UI/icons/Fun'
 6 
import FunIcon from '../components/UI/icons/Fun'
8 
import LoveItIcon from '../components/UI/icons/LoveIt'
 7 
import LoveItIcon from '../components/UI/icons/LoveIt'
9 
import SupportIcon from '../components/UI/icons/Support'
 8 
import SupportIcon from '../components/UI/icons/Support'
Línea 36... Línea 35...
36 
    label: 'Me divierte',
 35 
    label: 'Me divierte',
37 
    type: 'f'
 36 
    type: 'f'
38 
  }
 37 
  }
39 
}
 38 
}
Línea 40... Línea -...
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 
`
 - 
 
65 
 
 39 
 
66 
export default function withReactions(Component) {
 40 
export default function withReactions(Component) {
67 
  const HOC = ({
 41 
  const HOC = ({
68 
    saveUrl = '',
 42 
    saveUrl = '',
69 
    deleteUrl = '',
 43 
    deleteUrl = '',
Línea 117... Línea 91...
117 
        }
 91 
        }
118 
        label={
 92 
        label={
119 
          currentReaction ? reactions[currentReaction].label : 'Reaccionar'
 93 
          currentReaction ? reactions[currentReaction].label : 'Reaccionar'
120 
        }
 94 
        }
121 
      >
 95 
      >
122 
        <StyledReactionsContainer>
 96 
        <div className='reactions'>
123 
          {Object.values(reactions).map(({ type, label, icon: Icon }) => (
 97 
          {Object.values(reactions).map(({ type, label, icon: Icon }) => (
124 
            <button
 98 
            <button
125 
              key={type}
 99 
              key={type}
126 
              title={label}
 100 
              title={label}
127 
              onClick={(e) => {
 101 
              onClick={(e) => {
Línea 131... Línea 105...
131 
              }}
 105 
              }}
132 
            >
 106 
            >
133 
              <Icon />
 107 
              <Icon />
134 
            </button>
 108 
            </button>
135 
          ))}
 109 
          ))}
136 
        </StyledReactionsContainer>
 110 
        </div>
137 
      </Component>
 111 
      </Component>
138 
    )
 112 
    )
139 
  }
 113 
  }
Línea 140... Línea 114...
140 
 
 114