58 lines
1.4 KiB
TypeScript
58 lines
1.4 KiB
TypeScript
import React, { Component } from "react";
|
|
import { Link } from "react-router-dom";
|
|
|
|
interface Props {
|
|
url: string;
|
|
title: string;
|
|
image: string;
|
|
imageHover?: string;
|
|
}
|
|
|
|
interface State {
|
|
image: string;
|
|
}
|
|
|
|
class LinkImage extends Component<Props, State> {
|
|
constructor(props: Props) {
|
|
super(props);
|
|
this.state = {
|
|
image: props.image,
|
|
};
|
|
this.handleMouseOver = this.handleMouseOver.bind(this);
|
|
this.handleMouseOut = this.handleMouseOut.bind(this);
|
|
}
|
|
|
|
handleMouseOver() {
|
|
const { imageHover } = this.props;
|
|
if (typeof imageHover !== "undefined") {
|
|
this.setState({ image: imageHover });
|
|
}
|
|
}
|
|
|
|
handleMouseOut() {
|
|
const { image: imageNormal, imageHover } = this.props;
|
|
if (typeof imageHover !== "undefined") {
|
|
this.setState({ image: imageNormal });
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { url, title } = this.props;
|
|
const image = <img style={{ verticalAlign: "middle" }} src={this.state.image} alt={title} title={title} />;
|
|
if (url.match(/^(\/|\.)/) === null) {
|
|
return (
|
|
<a href={url} target="_blank" rel="noopener noreferrer" onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
|
|
{image}
|
|
</a>
|
|
);
|
|
}
|
|
return (
|
|
<Link to={url} onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
|
|
{image}
|
|
</Link>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default LinkImage;
|