Detach form components to a separate directory

This commit is contained in:
2022-04-08 15:24:50 +08:00
parent 7556ea983e
commit 47d097e94a
61 changed files with 169 additions and 168 deletions
+20
View File
@@ -0,0 +1,20 @@
div.panel-error-message {
transition: none !important;
padding-top: 5px;
padding-bottom: 5px;
min-height: 26px;
display: flex;
align-items: center;
span {
display: block;
}
}
div.panel-error-message.title {
padding: 15px 0 5px 0;
}
div.panel-error-message.title.first {
padding: 5px 0 5px 0;
}
+51
View File
@@ -0,0 +1,51 @@
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 };