lbry-desktop/ui/component/button/view.jsx

216 lines
5.3 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
import type { Node } from 'react';
2019-11-15 22:53:31 +01:00
import React, { forwardRef, useRef } from 'react';
2018-03-26 23:32:43 +02:00
import Icon from 'component/common/icon';
import classnames from 'classnames';
2019-04-04 23:05:23 +02:00
import { NavLink } from 'react-router-dom';
import { formatLbryUrlForWeb } from 'util/url';
2019-04-01 16:30:19 +02:00
import { OutboundLink } from 'react-ga';
import * as PAGES from 'constants/pages';
2019-11-15 22:53:31 +01:00
import useCombinedRefs from 'effects/use-combined-refs';
2018-03-26 23:32:43 +02:00
type Props = {
id: ?string,
2018-03-26 23:32:43 +02:00
href: ?string,
title: ?string,
label: ?string,
largestLabel: ?string,
2018-03-26 23:32:43 +02:00
icon: ?string,
iconRight: ?string,
disabled: ?boolean,
children: ?Node,
2018-03-26 23:32:43 +02:00
navigate: ?string,
className: ?string,
description: ?string,
type: string,
button: ?string, // primary, secondary, alt, link
iconSize?: number,
iconColor?: string,
2019-03-28 17:53:13 +01:00
activeClass?: string,
2019-06-05 08:07:53 +02:00
innerRef: ?any,
// Events
onClick: ?(any) => any,
onMouseEnter: ?(any) => any,
onMouseLeave: ?(any) => any,
pathname: string,
emailVerified: boolean,
requiresAuth: ?boolean,
myref: any,
dispatch: any,
2018-03-26 23:32:43 +02:00
};
// use forwardRef to allow consumers to pass refs to the button content if they want to
// flow requires forwardRef have default type arguments passed to it
const Button = forwardRef<any, {}>((props: Props, ref: any) => {
const {
type = 'button',
onClick,
href,
title,
label,
largestLabel,
icon,
// This should rarely be used. Regular buttons should just use `icon`
// `iconRight` is used for the header (home) button with the LBRY icon and external links that are displayed inline
iconRight,
disabled,
children,
navigate,
className,
description,
button,
iconSize,
iconColor,
activeClass,
emailVerified,
requiresAuth,
myref,
dispatch, // <button> doesn't know what to do with dispatch
pathname,
...otherProps
} = props;
2018-03-26 23:32:43 +02:00
const combinedClassName = classnames(
'button',
button
? {
'button--primary': button === 'primary',
'button--secondary': button === 'secondary',
'button--alt': button === 'alt',
'button--inverse': button === 'inverse',
'button--close': button === 'close',
'button--disabled': disabled,
'button--link': button === 'link',
}
: 'button--no-style',
className
);
2018-03-26 23:32:43 +02:00
2019-11-15 22:53:31 +01:00
const innerRef = useRef(null);
const combinedRef = useCombinedRefs(ref, innerRef, myref);
const size = iconSize || (!label && !children) ? 18 : undefined; // Fall back to default
2019-11-15 22:53:31 +01:00
const content = (
2020-04-11 02:46:03 +02:00
<span className="button__content">
{icon && <Icon icon={icon} iconColor={iconColor} size={iconSize} />}
2020-04-11 02:24:23 +02:00
{!largestLabel && label && <span className="button__label">{label}</span>}
{/* largestLabel is used when a single button has two different labels based on hover state */}
{largestLabel && (
<div className="button__label" style={{ position: 'relative' }}>
2020-04-11 02:24:23 +02:00
<div
style={{
position: 'relative',
left: '50%',
top: '50%',
transform: `translate(-50%, 0%)`,
}}
>
<span style={{ visibility: 'hidden' }}>
{largestLabel || label}
<div
style={{
2020-04-11 02:24:23 +02:00
position: 'absolute',
left: '50%',
2020-04-11 02:24:23 +02:00
top: '50%',
transform: `translate(-50%, -50%)`,
}}
>
<span style={{ visibility: 'visible' }}>{label}</span>
</div>
2020-04-11 02:24:23 +02:00
</span>
</div>
</div>
2020-04-11 02:24:23 +02:00
)}
{children && children}
{iconRight && <Icon icon={iconRight} iconColor={iconColor} size={size} />}
</span>
);
2018-03-26 23:32:43 +02:00
if (href) {
return (
<OutboundLink
eventLabel="outboundClick"
to={href}
target="_blank"
className={combinedClassName}
onClick={onClick}
{...otherProps}
>
{content}
</OutboundLink>
2018-03-26 23:32:43 +02:00
);
}
2018-03-26 23:32:43 +02:00
// Handle lbry:// uris passed in, or already formatted web urls
let path = navigate;
if (path) {
if (path.startsWith('lbry://')) {
path = formatLbryUrlForWeb(path);
} else if (!path.startsWith('/')) {
// Force a leading slash so new paths aren't appended on to the current path
path = `/${path}`;
2019-03-28 17:53:13 +01:00
}
2018-03-26 23:32:43 +02:00
}
if (requiresAuth && !emailVerified) {
return (
<NavLink
exact
onClick={e => {
2019-10-23 20:59:33 +02:00
e.stopPropagation();
}}
to={`/$/${PAGES.AUTH}?redirect=${pathname}`}
title={title}
disabled={disabled}
className={combinedClassName}
activeClassName={activeClass}
>
{content}
</NavLink>
);
}
return path ? (
<NavLink
exact
to={path}
title={title}
disabled={disabled}
onClick={e => {
e.stopPropagation();
if (onClick) {
onClick();
}
}}
className={combinedClassName}
activeClassName={activeClass}
2020-01-06 19:32:35 +01:00
{...otherProps}
>
{content}
</NavLink>
) : (
<button
2019-11-15 22:53:31 +01:00
ref={combinedRef}
title={title}
aria-label={description || label || title}
className={combinedClassName}
onClick={e => {
2019-08-13 07:35:13 +02:00
if (onClick) {
e.stopPropagation();
onClick(e);
}
}}
disabled={disabled}
type={type}
{...otherProps}
>
{content}
</button>
);
});
2018-03-26 23:32:43 +02:00
export default Button;