Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 6625 Rev 6626
Línea 1... Línea 1...
1 
import React, { useRef, useState } from 'react'
 1 
import React, { useRef, useState, useEffect } 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 50... Línea 50...
50 
  color: '#626d7a',
 50 
  color: '#626d7a',
51 
  type: 'default',
 51 
  type: 'default',
52 
}
 52 
}
Línea 53... Línea 53...
53 
 
 53 
 
54 
const ReactionsButton = ({
 54 
const ReactionsButton = ({
55 
  currentReaction = defaultReaction,
 55 
  currentReaction,
56 
  onChange,
 56 
  onChange,
57 
  withLabel,
 57 
  withLabel,
58 
  reactionTypesUrl,
 58 
  reactionTypesUrl,
59 
  deleteUrl,
 59 
  deleteUrl,
60 
}) => {
 60 
}) => {
61 
  const [settedReaction, setSettedReaction] = useState(currentReaction)
 61 
  const [settedReaction, setSettedReaction] = useState(defaultReaction)
62 
  const [showReactions, setShowReactions] = useState(false)
 62 
  const [showReactions, setShowReactions] = useState(false)
63 
  const rectionBtn = useRef(null)
 63 
  const rectionBtn = useRef(null)
Línea 64... Línea -...
64 
  const dispatch = useDispatch()
 - 
 
65 
 
 - 
 
66 
  const { icon: Icon } = settedReaction
 64 
  const dispatch = useDispatch()
Línea 67... Línea 65...
67 
 
 65 
 
68 
  useOutsideClick(rectionBtn, () => setShowReactions(false))
 66 
  useOutsideClick(rectionBtn, () => setShowReactions(false))
69 
 
 67 
 
Línea 96... Línea 94...
96 
 
 94 
 
Línea 97... Línea 95...
97 
  const onHover = debounce(() => setShowReactions(true), 500)
 95 
  const onHover = debounce(() => setShowReactions(true), 500)
Línea -... Línea 96...
- 
 
 96 
 
- 
 
 97 
  const onUnhover = debounce(() => setShowReactions(false), 500)
- 
 
 98 
 
- 
 
 99 
  useEffect(() => {
- 
 
 100 
    const currentOption = reactionsOptions.find(
- 
 
 101 
      (reaction) => reaction.icon === currentReaction
- 
 
 102 
    )
- 
 
 103 
    if (!currentOption) {
- 
 
 104 
      setSettedReaction(defaultReaction)
- 
 
 105 
      return
- 
 
 106 
    }
- 
 
 107 
 
98 
 
 108 
    setSettedReaction(currentOption)
99 
  const onUnhover = debounce(() => setShowReactions(false), 500)
 109 
  }, [currentReaction])
100 
 
 110 
 
101 
  return (
 111 
  return (
102 
    <>
 112 
    <>
Línea 109... Línea 119...
109 
          settedReaction.type !== 'default'
 119 
          settedReaction.type !== 'default'
110 
            ? deleteReaction()
 120 
            ? deleteReaction()
111 
            : saveReaction(reactionsOptions[0].type)
 121 
            : saveReaction(reactionsOptions[0].type)
112 
        }
 122 
        }
113 
      >
 123 
      >
114 
        <Icon />
 - 
 
115 
        {withLabel && settedReaction.label}
 124 
        {withLabel && settedReaction.label}
116 
        <div className={`reactions ${showReactions ? 'active' : ''}`}>
 125 
        <div className={`reactions ${showReactions ? 'active' : ''}`}>
117 
          {reactionsOptions.map((reaction) => {
 126 
          {reactionsOptions.map((reaction) => {
118 
            const { icon: Icon, color, type, label } = reaction
 127 
            const { icon: Icon, color, type, label } = reaction