Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 7076 Rev 7077
Línea 1... Línea 1...
1 
import React, { useRef, useState } from 'react'
 1 
import React, { useEffect, useRef, useState } from 'react'
2 
import { useDispatch } from 'react-redux'
 2 
import { useDispatch } from 'react-redux'
3 
import { axios, debounce } from '../../../utils'
 3 
import { axios, debounce } from '../../../utils'
4 
import useOutsideClick from '../../../hooks/useOutsideClick'
 4 
import useOutsideClick from '../../../hooks/useOutsideClick'
Línea 5... Línea 5...
5 
 
 5 
 
Línea 11... Línea 11...
11 
import SupportIcon from '../icons/Support'
 11 
import SupportIcon from '../icons/Support'
12 
import InterestIcon from '../icons/Interest'
 12 
import InterestIcon from '../icons/Interest'
13 
import RecommendIcon from '../icons/Recommned'
 13 
import RecommendIcon from '../icons/Recommned'
Línea 14... Línea 14...
14 
 
 14 
 
15 
const ReactionsButton = ({
 15 
const ReactionsButton = ({
16 
  currentReaction = 0,
 16 
  currentReaction,
17 
  onChange,
 17 
  onChange,
18 
  withLabel,
 18 
  withLabel,
19 
  reactionTypesUrl,
 19 
  reactionTypesUrl,
20 
  deleteUrl,
 20 
  deleteUrl,
21 
}) => {
 21 
}) => {
22 
  const [reactionIndex, setReactionIndex] = useState(currentReaction)
 22 
  const [reactionIndex, setReactionIndex] = useState(0)
23 
  const [showReactions, setShowReactions] = useState(false)
 23 
  const [showReactions, setShowReactions] = useState(false)
24 
  const rectionBtn = useRef(null)
 24 
  const rectionBtn = useRef(null)
25 
  const dispatch = useDispatch()
 25 
  const dispatch = useDispatch()
Línea 92... Línea 92...
92 
 
 92 
 
Línea 93... Línea 93...
93 
  const onHover = debounce(() => setShowReactions(true), 500)
 93 
  const onHover = debounce(() => setShowReactions(true), 500)
Línea -... Línea 94...
- 
 
 94 
 
- 
 
 95 
  const onUnhover = debounce(() => setShowReactions(false), 500)
- 
 
 96 
 
- 
 
 97 
  useEffect(() => {
- 
 
 98 
    const currentIndex = reactionsOptions.findIndex(
- 
 
 99 
      ({ type }) => type === currentReaction
- 
 
 100 
    )
94 
 
 101 
    setReactionIndex(currentIndex)
95 
  const onUnhover = debounce(() => setShowReactions(false), 500)
 - 
 
96 
 
 102 
  }, [currentReaction])
97 
  return (
 103 
 
98 
    <>
 104 
  return (
99 
      <button
 105 
    <button
100 
        className="btn position-relative"
 106 
      className="btn position-relative"
101 
        onMouseOver={onHover}
 107 
      onMouseOver={onHover}
102 
        onMouseOut={onUnhover}
 108 
      onMouseOut={onUnhover}
103 
        ref={rectionBtn}
 109 
      ref={rectionBtn}
104 
        onClick={() => {
 110 
      onClick={() => {
105 
          reactionIndex
 111 
        reactionIndex
106 
            ? deleteReaction()
 112 
          ? deleteReaction()
107 
            : saveReaction(reactionsOptions[0].type)
 113 
          : saveReaction(reactionsOptions[0].type)
108 
        }}
 114 
      }}
109 
      >
 115 
    >
110 
        {reactionsOptions[reactionIndex].icon}
 116 
      {reactionsOptions[reactionIndex].icon}
111 
        {withLabel && reactionsOptions[reactionIndex].label}
 117 
      {withLabel && reactionsOptions[reactionIndex].label}
112 
 
 118 
 
113 
        <div className={`reactions ${showReactions ? 'active' : ''}`}>
 119 
      <div className={`reactions ${showReactions ? 'active' : ''}`}>
114 
          {reactionsOptions.map(({ icon, type, label }) => (
 120 
        {reactionsOptions.map(({ icon, type, label }) => (
115 
            <button
 121 
          <button
116 
              key={type}
 122 
            key={type}
117 
              onClick={(e) => {
 123 
            onClick={(e) => {
118 
                e.stopPropagation()
 124 
              e.stopPropagation()
119 
                saveReaction(type)
 125 
              saveReaction(type)
120 
              }}
 126 
            }}
121 
              title={label}
 127 
            title={label}
122 
            >
 128 
          >
123 
              {icon}
 129 
            {icon}
124 
            </button>
 130 
          </button>
125 
          ))}
 - 
 
126 
        </div>
 131 
        ))}
127 
      </button>
 132 
      </div>
Línea 128... Línea 133...
128 
    </>
 133 
    </button>