b2fd38a1c8
After moving the padding to the content of buttons, we ended up with extra padding around text buttons that wasn't there before. The "Download" bar doesn't look great with no padding at all, but it needs to match the text buttons so the text doesn't jump to the right when it switches from "Download" (text button) to "Connecting" (progress bar). So we pad both text buttons and progress bars just a little bit, less than a standard button but enough that progress bars look OK.
55 lines
1.7 KiB
JavaScript
55 lines
1.7 KiB
JavaScript
import React from 'react';
|
|
import {Icon} from './common.js';
|
|
|
|
export let Link = React.createClass({
|
|
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() {
|
|
if (this.props.hidden) {
|
|
return null;
|
|
}
|
|
|
|
/* The way the class name is generated here is a mess -- refactor */
|
|
|
|
const className = (this.props.className || '') +
|
|
(!this.props.className && !this.props.button ? 'button-block button-text' : '') + // Non-button links get the same look as text buttons
|
|
(this.props.button ? 'button-block button-' + this.props.button : '') +
|
|
(this.props.disabled ? ' disabled' : '');
|
|
|
|
let content;
|
|
if (this.props.children) { // Custom content
|
|
content = this.props.children;
|
|
} else {
|
|
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,
|
|
];
|
|
}
|
|
|
|
return (
|
|
<a className={className} href={this.props.href || 'javascript:;'} title={this.props.title}
|
|
onClick={this.handleClick} {... 'style' in this.props ? {style: this.props.style} : {}}>
|
|
{'button' in this.props
|
|
? <span className="button__content">{content}</span>
|
|
: content}
|
|
</a>
|
|
);
|
|
}
|
|
}); |