51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import { FunctionComponent } from "react";
|
|
import { AllI18nKeys, I18N } from "@Component/Localization/Localization";
|
|
import { useSettingWithEvent, IMixinSettingProps, Themes, Language } from "@Context/Setting";
|
|
import "./Message.scss";
|
|
|
|
interface IMessageProps {
|
|
i18nKey?: AllI18nKeys;
|
|
text?: string;
|
|
options?: Record<string, string>;
|
|
className?: string;
|
|
isTitle?: boolean;
|
|
first?: boolean;
|
|
}
|
|
|
|
const MessageView: FunctionComponent<IMessageProps & IMixinSettingProps> = (props) => {
|
|
|
|
let theme = props.setting ? props.setting.themes : Themes.dark;
|
|
let language: Language = props.setting ? props.setting.language : "EN_US";
|
|
let classList: string[] = [
|
|
"panel-error-message",
|
|
theme === Themes.dark ? "dark" : "light",
|
|
];
|
|
|
|
if (props.first) {
|
|
classList.push("first");
|
|
}
|
|
|
|
if (props.isTitle) {
|
|
classList.push("title");
|
|
classList.push("font-lvl3");
|
|
}
|
|
|
|
if (props.className) {
|
|
classList.push(props.className);
|
|
}
|
|
|
|
return <div className={classList.join(" ")}>
|
|
{
|
|
props.text ?
|
|
<span className={language}>{props.text}</span> :
|
|
props.i18nKey ?
|
|
<span className={language}>{
|
|
I18N(language, props.i18nKey, props.options)
|
|
}</span> :
|
|
null
|
|
}
|
|
</div>
|
|
}
|
|
|
|
const Message = useSettingWithEvent("language", "themes")(MessageView);
|
|
export { Message }; |