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 ? : null,
{this.props.label},
'badge' in this.props ? {this.props.badge} : null,
];
}
return (
{('button' in this.props) && this.props.button != 'text'
? {content}
: content}
);
}
});
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 ? : '',
className = this.props.className +
(this.props.button ? ' button-block button-' + this.props.button : '') +
(this.props.hidden ? ' hidden' : '') +
(this.props.disabled ? ' disabled' : '');
return (
{this.props.icon ? icon : '' }
{this.props.label}
{(!this.props.tooltip ? null :
{this.props.tooltip}
)}
);
}
});