Refactor and clean up Link component
This commit is contained in:
parent
1e61af3b24
commit
d067a6e006
1 changed files with 29 additions and 10 deletions
|
@ -5,25 +5,44 @@ import {Icon, ToolTip} from './common.js';
|
||||||
|
|
||||||
|
|
||||||
export let Link = React.createClass({
|
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() {
|
handleClick: function() {
|
||||||
if (this.props.onClick) {
|
if (this.props.onClick) {
|
||||||
this.props.onClick();
|
this.props.onClick();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
render: function() {
|
render: function() {
|
||||||
var href = this.props.href ? this.props.href : 'javascript:;',
|
if (this.props.hidden) {
|
||||||
icon = this.props.icon ? <Icon icon={this.props.icon} fixed={true} /> : '',
|
return null;
|
||||||
className = (this.props.className ? this.props.className : '') +
|
}
|
||||||
(this.props.button ? ' button-block button-' + this.props.button : '') +
|
|
||||||
(this.props.hidden ? ' hidden' : '') +
|
const className = (this.props.className || '') +
|
||||||
(this.props.disabled ? ' disabled' : '');
|
(this.props.button ? ' button-block button-' + this.props.button : '') +
|
||||||
|
(!this.props.className && !this.props.button ? 'button-text' : '') +
|
||||||
|
(this.props.disabled ? ' disabled' : '');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<a className={className ? className : 'button-text'} href={href} style={this.props.style ? this.props.style : {}}
|
<a className={className} href={this.props.href || 'javascript:;'} title={this.props.title}
|
||||||
title={this.props.title} onClick={this.handleClick}>
|
onClick={this.handleClick} {... 'style' in this.props ? {style: this.props.style} : {}}>
|
||||||
{this.props.icon ? icon : '' }
|
{'icon' in this.props
|
||||||
|
? <Icon icon={this.props.icon} fixed={true} />
|
||||||
|
: null}
|
||||||
<span className="link-label">{this.props.label}</span>
|
<span className="link-label">{this.props.label}</span>
|
||||||
{this.props.badge ? <span className="badge">{this.props.badge}</span> : '' }
|
{'badge' in this.props
|
||||||
|
? <span className="badge">{this.props.badge}</span>
|
||||||
|
: null}
|
||||||
</a>
|
</a>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue