fixes button hover
This commit is contained in:
parent
17ca93ab30
commit
fe50dc7bb7
2 changed files with 32 additions and 4 deletions
|
@ -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}
|
||||
|
|
24
ui/effects/use-combined-refs.js
Normal file
24
ui/effects/use-combined-refs.js
Normal 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
|
||||
*/
|
Loading…
Reference in a new issue