Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 7074 Rev 7075
Línea 12... Línea 12...
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 defaultReaction = {
 15 
const defaultReaction = {
16 
  label: 'Reaccionar',
 16 
  label: 'Reaccionar',
17 
  icon: ReactionIcon,
 17 
  icon: <ReactionIcon />,
18 
  type: 'default',
 18 
  type: 'default',
Línea 19... Línea 19...
19 
}
 19 
}
20 
 
 20 
 
Línea 29... Línea 29...
29 
  const [showReactions, setShowReactions] = useState(false)
 29 
  const [showReactions, setShowReactions] = useState(false)
30 
  const rectionBtn = useRef(null)
 30 
  const rectionBtn = useRef(null)
31 
  const dispatch = useDispatch()
 31 
  const dispatch = useDispatch()
32 
  useOutsideClick(rectionBtn, () => setShowReactions(false))
 32 
  useOutsideClick(rectionBtn, () => setShowReactions(false))
Línea 33... Línea -...
33 
 
 - 
 
34 
  const { icon: Icon } = settedReaction
 - 
 
35 
 
 33 
 
36 
  const reactionsOptions = [
 34 
  const reactionsOptions = [
37 
    {
 35 
    {
38 
      type: 'r',
 36 
      type: 'r',
39 
      icon: RecommendIcon,
 37 
      icon: <RecommendIcon />,
40 
      label: 'Me gusta',
 38 
      label: 'Me gusta',
41 
    },
 39 
    },
42 
    {
 40 
    {
43 
      type: 's',
 41 
      type: 's',
44 
      icon: SupportIcon,
 42 
      icon: <SupportIcon />,
45 
      label: 'Dar apoyo',
 43 
      label: 'Dar apoyo',
46 
    },
 44 
    },
47 
    {
 45 
    {
48 
      type: 'l',
 46 
      type: 'l',
49 
      icon: LoveItIcon,
 47 
      icon: <LoveItIcon />,
50 
      label: 'Me encanta',
 48 
      label: 'Me encanta',
51 
    },
 49 
    },
52 
    {
 50 
    {
53 
      type: 'i',
 51 
      type: 'i',
54 
      icon: InterestIcon,
 52 
      icon: <InterestIcon />,
55 
      label: 'Me interesa',
 53 
      label: 'Me interesa',
56 
    },
 54 
    },
57 
    {
 55 
    {
58 
      type: 'f',
 56 
      type: 'f',
59 
      icon: FunIcon,
 57 
      icon: <FunIcon />,
60 
      label: 'Me divierte',
 58 
      label: 'Me divierte',
61 
    },
 59 
    },
Línea 62... Línea 60...
62 
  ]
 60 
  ]
Línea 73... Línea 71...
73 
      const typeIndex = reactionsOptions.findIndex(
 71 
      const typeIndex = reactionsOptions.findIndex(
74 
        (option) => option.type === type
 72 
        (option) => option.type === type
75 
      )
 73 
      )
76 
      const newReaction = reactionsOptions[typeIndex]
 74 
      const newReaction = reactionsOptions[typeIndex]
77 
      console.log(newReaction)
 75 
      console.log(newReaction)
- 
 
 76 
 
78 
      onChange(data.reactions)
 77 
      onChange(data.reactions)
79 
      setSettedReaction(newReaction)
 78 
      setSettedReaction(newReaction)
80 
    })
 79 
    })
81 
  }
 80 
  }
Línea 117... Línea 116...
117 
        className="btn position-relative"
 116 
        className="btn position-relative"
118 
        onMouseOver={onHover}
 117 
        onMouseOver={onHover}
119 
        onMouseOut={onUnhover}
 118 
        onMouseOut={onUnhover}
120 
        ref={rectionBtn}
 119 
        ref={rectionBtn}
121 
        onClick={() =>
 120 
        onClick={() =>
122 
          settedReaction.type !== 'default'
 121 
          settedReaction.type === 'default'
123 
            ? deleteReaction()
 122 
            ? saveReaction(reactionsOptions[0].type)
124 
            : saveReaction(reactionsOptions[0].type)
 123 
            : deleteReaction()
125 
        }
 124 
        }
126 
      >
 125 
      >
127 
        <Icon />
 126 
        {settedReaction.icon}
128 
        {withLabel && settedReaction.label}
 127 
        {withLabel && settedReaction.label}
129 
        <div className={`reactions ${showReactions ? 'active' : ''}`}>
 128 
        <div className={`reactions ${showReactions ? 'active' : ''}`}>
130 
          {reactionsOptions.map((reaction) => {
 129 
          {reactionsOptions.map(({ icon, type, label }) => (
131 
            const { icon: Icon, color, type, label } = reaction
 - 
 
132 
 
 - 
 
133 
            return (
 - 
 
134 
              <button
 130 
            <button
135 
                key={type}
 131 
              key={type}
136 
                onClick={(e) => {
 132 
              onClick={(e) => {
137 
                  e.stopPropagation()
 133 
                e.stopPropagation()
138 
                  saveReaction(type)
 134 
                saveReaction(type)
139 
                }}
 135 
              }}
140 
                title={label}
 136 
              title={label}
141 
              >
 137 
            >
142 
                <Icon style={{ color }} />
 - 
 
143 
              </button>
 138 
              {icon}
144 
            )
 139 
            </button>
145 
          })}
 140 
          ))}
146 
        </div>
 141 
        </div>
147 
      </button>
 142 
      </button>
148 
    </>
 143 
    </>
149 
  )
 144 
  )
150 
}
 145 
}