fixes button hover

This commit is contained in:
jessop 2019-11-15 16:53:31 -05:00 committed by Sean Yesmunt
parent 17ca93ab30
commit fe50dc7bb7
2 changed files with 32 additions and 4 deletions

View file

@ -1,12 +1,13 @@
// @flow
import type { Node } from 'react';
import React, { forwardRef } from 'react';
import React, { forwardRef, useRef } from 'react';
import Icon from 'component/common/icon';
import classnames from 'classnames';
import { NavLink } from 'react-router-dom';
import { formatLbryUriForWeb } from 'util/uri';
import { OutboundLink } from 'react-ga';
import * as PAGES from 'constants/pages';
import useCombinedRefs from 'effects/use-combined-refs';
type Props = {
id: ?string,
@ -86,6 +87,9 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
className
);
const innerRef = useRef(null);
const combinedRef = useCombinedRefs(ref, innerRef, myref);
const content = (
<span className="button__content">
{icon && <Icon icon={icon} iconColor={iconColor} size={iconSize} />}
@ -117,7 +121,7 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
if (requiresAuth && !emailVerified) {
return (
<NavLink
ref={ref}
ref={combinedRef}
exact
onClick={e => {
e.stopPropagation();
@ -135,7 +139,7 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
return path ? (
<NavLink
ref={ref}
ref={combinedRef}
exact
to={path}
title={title}
@ -153,7 +157,7 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
</NavLink>
) : (
<button
ref={ref}
ref={combinedRef}
title={title}
aria-label={description || label || title}
className={combinedClassName}

View file

@ -0,0 +1,24 @@
import React from 'react';
export default function useCombinedRefs(...refs) {
const targetRef = React.useRef();
React.useEffect(() => {
refs.forEach(ref => {
if (!ref) return;
if (typeof ref === 'function') {
ref(targetRef.current);
} else {
ref.current = targetRef.current;
}
});
}, [refs]);
return targetRef;
}
/*
Problem described in
https://itnext.io/reusing-the-ref-from-forwardref-with-react-hooks-4ce9df693dd
*/