lbry-desktop/ui/js/component/link/view.jsx

58 lines
1.3 KiB
React
Raw Normal View History

2017-06-06 23:19:12 +02:00
import React from "react";
import { Icon } from "component/common.js";
2017-04-07 07:15:22 +02:00
2017-06-06 06:21:55 +02:00
const Link = props => {
2017-04-07 07:15:22 +02:00
const {
href,
title,
style,
label,
icon,
badge,
button,
disabled,
2017-05-05 07:10:37 +02:00
children,
2017-08-20 23:42:00 +02:00
navigate,
doNavigate,
2017-06-06 23:19:12 +02:00
} = props;
2017-04-07 07:15:22 +02:00
2017-06-06 23:19:12 +02:00
const className =
(props.className || "") +
2017-08-15 23:42:48 +02:00
(!props.className && !button ? "button-text" : "") + // Non-button links get the same look as text buttons
(button ? " button-block button-" + button + " button-set-item" : "") +
(disabled ? " disabled" : "");
2017-04-07 07:15:22 +02:00
2017-08-26 05:21:26 +02:00
const onClick = !props.onClick && navigate
? () => {
2017-08-20 23:42:00 +02:00
doNavigate(navigate);
2017-08-26 05:21:26 +02:00
}
: props.onClick;
2017-08-20 23:42:00 +02:00
2017-04-07 07:15:22 +02:00
let content;
2017-05-05 07:10:37 +02:00
if (children) {
2017-06-06 23:19:12 +02:00
content = children;
2017-04-07 07:15:22 +02:00
} else {
content = (
2017-06-06 23:19:12 +02:00
<span {...("button" in props ? { className: "button__content" } : {})}>
{"icon" in props ? <Icon icon={icon} fixed={true} /> : null}
2017-04-07 07:15:22 +02:00
{label ? <span className="link-label">{label}</span> : null}
2017-06-06 23:19:12 +02:00
{"badge" in props ? <span className="badge">{badge}</span> : null}
2017-04-07 07:15:22 +02:00
</span>
2017-06-06 23:19:12 +02:00
);
2017-04-07 07:15:22 +02:00
}
return (
2017-06-06 23:19:12 +02:00
<a
className={className}
href={href || "javascript:;"}
title={title}
2017-04-07 07:15:22 +02:00
onClick={onClick}
2017-06-06 23:19:12 +02:00
{...("style" in props ? { style: style } : {})}
>
2017-04-07 07:15:22 +02:00
{content}
</a>
);
2017-06-06 06:21:55 +02:00
};
2017-04-07 07:15:22 +02:00
2017-06-06 06:21:55 +02:00
export default Link;