49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
|
import { css, cx } from "@emotion/css";
|
||
|
|
import type { Node } from "@yozora/ast";
|
||
|
|
import React from "react";
|
||
|
|
import { NodesRenderer } from "../../NodesRenderer";
|
||
|
|
|
||
|
|
interface IProps {
|
||
|
|
url: string;
|
||
|
|
title: string | undefined;
|
||
|
|
childNodes: Node[] | undefined;
|
||
|
|
className: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export class LinkRendererInner extends React.Component<IProps> {
|
||
|
|
public override shouldComponentUpdate(nextProps: Readonly<IProps>): boolean {
|
||
|
|
const props = this.props;
|
||
|
|
return (
|
||
|
|
props.url !== nextProps.url ||
|
||
|
|
props.title !== nextProps.title ||
|
||
|
|
props.childNodes !== nextProps.childNodes ||
|
||
|
|
props.className !== nextProps.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)",
|
||
|
|
},
|
||
|
|
});
|