48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
import { css, cx } from "@emotion/css";
|
|
import type { Node } from "@yozora/ast";
|
|
import React from "react";
|
|
import { NodesRenderer } from "../../NodesRenderer";
|
|
|
|
interface IProperties {
|
|
url: string;
|
|
title: string | undefined;
|
|
childNodes: Node[] | undefined;
|
|
className: string;
|
|
}
|
|
|
|
export class LinkRendererInner extends React.Component<IProperties> {
|
|
public override shouldComponentUpdate(nextProperties: Readonly<IProperties>): boolean {
|
|
const properties = this.props;
|
|
return (
|
|
properties.url !== nextProperties.url ||
|
|
properties.title !== nextProperties.title ||
|
|
properties.childNodes !== nextProperties.childNodes ||
|
|
properties.className !== nextProperties.className
|
|
);
|
|
}
|
|
|
|
public override render(): React.ReactElement {
|
|
const { url, title, childNodes, className } = this.props;
|
|
return (
|
|
<a className={cx(cls, className)} href={url} title={title} rel="noopener, noreferrer" target="_blank">
|
|
<NodesRenderer nodes={childNodes} />
|
|
</a>
|
|
);
|
|
}
|
|
}
|
|
|
|
const cls = css({
|
|
padding: "0.2rem 0",
|
|
color: "var(--colorLink)",
|
|
textDecoration: "none",
|
|
"&:active": {
|
|
color: "var(--colorLinkActive)",
|
|
},
|
|
"&&:hover": {
|
|
color: "var(--colorLinkHover)",
|
|
textDecoration: "underline",
|
|
},
|
|
"&:visited": {
|
|
color: "var(--colorLinkVisited)",
|
|
},
|
|
});
|