89 lines
2.2 KiB
JavaScript
89 lines
2.2 KiB
JavaScript
import { useMemo, useState } from "react";
|
|
import LoadingIcon from "./LoadingIcon";
|
|
import {
|
|
OPT_STYLE_LINE,
|
|
OPT_STYLE_DOTLINE,
|
|
OPT_STYLE_DASHLINE,
|
|
OPT_STYLE_WAVYLINE,
|
|
OPT_STYLE_FUZZY,
|
|
OPT_STYLE_HIGHTLIGHT,
|
|
} from "../../config";
|
|
import { useTranslate } from "../../hooks/Translate";
|
|
|
|
export default function Content({ q, rule }) {
|
|
const [hover, setHover] = useState(false);
|
|
const { text, sameLang, loading, textStyle } = useTranslate(q, rule);
|
|
|
|
const handleMouseEnter = () => {
|
|
setHover(true);
|
|
};
|
|
|
|
const handleMouseLeave = () => {
|
|
setHover(false);
|
|
};
|
|
|
|
const style = useMemo(() => {
|
|
switch (textStyle) {
|
|
case OPT_STYLE_LINE: // 下划线
|
|
return {
|
|
opacity: hover ? 1 : 0.6,
|
|
textDecoration: "underline 2px",
|
|
textUnderlineOffset: "0.3em",
|
|
};
|
|
case OPT_STYLE_DOTLINE: // 点状线
|
|
return {
|
|
opacity: hover ? 1 : 0.6,
|
|
textDecoration: "dotted underline 2px",
|
|
textUnderlineOffset: "0.3em",
|
|
};
|
|
case OPT_STYLE_DASHLINE: // 虚线
|
|
return {
|
|
opacity: hover ? 1 : 0.6,
|
|
textDecoration: "dashed underline 2px",
|
|
textUnderlineOffset: "0.3em",
|
|
};
|
|
case OPT_STYLE_WAVYLINE: // 波浪线
|
|
return {
|
|
opacity: hover ? 1 : 0.6,
|
|
textDecoration: "wavy underline 2px",
|
|
textUnderlineOffset: "0.3em",
|
|
};
|
|
case OPT_STYLE_FUZZY: // 模糊
|
|
return {
|
|
filter: hover ? "none" : "blur(5px)",
|
|
transition: "filter 0.2s ease-in-out",
|
|
};
|
|
case OPT_STYLE_HIGHTLIGHT: // 高亮
|
|
return {
|
|
color: "#FFF",
|
|
backgroundColor: "#209CEE",
|
|
};
|
|
default:
|
|
return {};
|
|
}
|
|
}, [textStyle, hover]);
|
|
|
|
if (loading) {
|
|
return (
|
|
<>
|
|
{q.length > 40 ? <br /> : " "}
|
|
<LoadingIcon />
|
|
</>
|
|
);
|
|
}
|
|
|
|
if (text && !sameLang) {
|
|
return (
|
|
<>
|
|
{q.length > 40 ? <br /> : " "}
|
|
<span
|
|
style={style}
|
|
onMouseEnter={handleMouseEnter}
|
|
onMouseLeave={handleMouseLeave}
|
|
dangerouslySetInnerHTML={{ __html: text }}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
}
|