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

55 lines
1.7 KiB
JavaScript
Raw Normal View History

2016-11-22 21:19:08 +01:00
import React from 'react';
2017-01-21 22:31:41 +01:00
import {Icon} from './common.js';
2016-11-22 21:19:08 +01:00
export let Link = React.createClass({
2017-01-09 05:56:21 +01:00
propTypes: {
label: React.PropTypes.string,
icon: React.PropTypes.string,
button: React.PropTypes.string,
badge: React.PropTypes.string,
hidden: React.PropTypes.bool,
},
getDefaultProps: function() {
return {
hidden: false,
disabled: false,
};
},
handleClick: function(e) {
if (this.props.onClick) {
this.props.onClick(e);
}
},
render: function() {
2017-01-09 05:56:21 +01:00
if (this.props.hidden) {
return null;
}
/* The way the class name is generated here is a mess -- refactor */
2017-01-09 05:56:21 +01:00
const className = (this.props.className || '') +
(!this.props.className && !this.props.button ? 'button-text' : '') + // Non-button links get the same look as text buttons
(this.props.button ? ' button-block button-' + this.props.button + ' button-set-item' : '') +
2017-01-09 05:56:21 +01:00
(this.props.disabled ? ' disabled' : '');
let content;
if (this.props.children) { // Custom content
content = this.props.children;
} else {
content = (
<span {... 'button' in this.props ? {className: 'button__content'} : {}}>
{'icon' in this.props ? <Icon icon={this.props.icon} fixed={true} /> : null}
{<span className="link-label">{this.props.label}</span>}
{'badge' in this.props ? <span className="badge">{this.props.badge}</span> : null}
</span>
);
}
return (
2017-01-09 05:56:21 +01:00
<a className={className} href={this.props.href || 'javascript:;'} title={this.props.title}
onClick={this.handleClick} {... 'style' in this.props ? {style: this.props.style} : {}}>
{content}
</a>
);
}
2017-01-21 22:31:41 +01:00
});