105 lines
3 KiB
JavaScript
105 lines
3 KiB
JavaScript
import React from 'react';
|
|
import {Icon, ToolTip} 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.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) && this.props.button != 'text'
|
|
? <span className="button__content">{content}</span>
|
|
: content}
|
|
</a>
|
|
);
|
|
}
|
|
});
|
|
|
|
var linkContainerStyle = {
|
|
position: 'relative',
|
|
};
|
|
|
|
export let ToolTipLink = React.createClass({
|
|
getInitialState: function() {
|
|
return {
|
|
showTooltip: false,
|
|
};
|
|
},
|
|
handleClick: function() {
|
|
if (this.props.tooltip) {
|
|
this.setState({
|
|
showTooltip: !this.state.showTooltip,
|
|
});
|
|
}
|
|
if (this.props.onClick) {
|
|
this.props.onClick();
|
|
}
|
|
},
|
|
handleTooltipMouseOut: function() {
|
|
this.setState({
|
|
showTooltip: false,
|
|
});
|
|
},
|
|
render: function() {
|
|
var href = this.props.href ? this.props.href : 'javascript:;',
|
|
icon = this.props.icon ? <Icon icon={this.props.icon} /> : '',
|
|
className = this.props.className +
|
|
(this.props.button ? ' button-block button-' + this.props.button : '') +
|
|
(this.props.hidden ? ' hidden' : '') +
|
|
(this.props.disabled ? ' disabled' : '');
|
|
|
|
return (
|
|
<span style={linkContainerStyle}>
|
|
<a className={className ? className : 'button-text'} href={href} style={this.props.style ? this.props.style : {}}
|
|
title={this.props.title} onClick={this.handleClick}>
|
|
{this.props.icon ? icon : '' }
|
|
{this.props.label}
|
|
</a>
|
|
{(!this.props.tooltip ? null :
|
|
<ToolTip open={this.state.showTooltip} onMouseOut={this.handleTooltipMouseOut}>
|
|
{this.props.tooltip}
|
|
</ToolTip>
|
|
)}
|
|
</span>
|
|
);
|
|
}
|
|
});
|