Add behavior intern i18n system

This commit is contained in:
MrKBear 2022-03-29 10:57:28 +08:00
parent 791b554ca0
commit b6f8828c3b
8 changed files with 71 additions and 17 deletions

View File

@ -10,11 +10,22 @@ class Template extends Behavior<ITemplateBehaviorParameter, ITemplateBehaviorEve
public override behaviorId: string = "Template";
public override behaviorName: string = "Behavior.Template.Title";
public override behaviorName: string = "$Title";
public override iconName: string = "Running";
public override describe: string = "Behavior.Template.Intro";
public override describe: string = "$Intro";
terms: Record<string, Record<string, string>> = {
"$Title": {
"ZH_CN": "行为",
"EN_US": "Behavior"
},
"$Intro": {
"ZH_CN": "这是一个模板行为",
"EN_US": "This is a template behavior"
}
};
}
export { Template };

View File

@ -1,8 +1,8 @@
import { Theme } from "@Component/Theme/Theme";
import { Component, ReactNode } from "react";
import { IRenderBehavior, Behavior, BehaviorRecorder } from "@Model/Behavior";
import { useSettingWithEvent, IMixinSettingProps } from "@Context/Setting";
import { Icon } from "@fluentui/react";
import { Localization } from "@Component/Localization/Localization";
import "./BehaviorList.scss";
interface IBehaviorListProps {
@ -13,7 +13,8 @@ interface IBehaviorListProps {
actionType?: "info" | "delete";
}
class BehaviorList extends Component<IBehaviorListProps> {
@useSettingWithEvent("language")
class BehaviorList extends Component<IBehaviorListProps & IMixinSettingProps> {
private isFocus(behavior: IRenderBehavior): boolean {
if (this.props.focusBehaviors) {
@ -57,10 +58,10 @@ class BehaviorList extends Component<IBehaviorListProps> {
</div>
}
private renderTerm(key: string, className: string, needLocal: boolean) {
private renderTerm(behavior: IRenderBehavior, key: string, className: string, needLocal: boolean) {
if (needLocal) {
return <div className={className}>
<Localization i18nKey={key as any}/>
{behavior.getTerms(key, this.props.setting?.language)}
</div>;
} else {
return <div className={className}>
@ -117,8 +118,8 @@ class BehaviorList extends Component<IBehaviorListProps> {
<Icon iconName={icon}/>
</div>
<div className="behavior-content-view">
{this.renderTerm(name, "title-view", needLocal)}
{this.renderTerm(info, "info-view", needLocal)}
{this.renderTerm(behavior, name, "title-view", needLocal)}
{this.renderTerm(behavior, info, "info-view", needLocal)}
</div>
<div className="behavior-action-view">
{this.renderActionButton(behavior)}

View File

@ -66,10 +66,14 @@ class BehaviorPopupComponent extends Component<
if (this.props.status) {
const status = this.props.status;
status.popup.showPopup(ConfirmPopup, {
infoI18n: behavior.describe as any,
renderInfo: () => {
return <Message
text={behavior.getTerms(behavior.describe, this.props.setting?.language)}
/>
},
titleI18N: "Popup.Behavior.Info.Title",
titleI18NOption: {
behavior: I18N(this.props, behavior.behaviorName as any)
behavior: behavior.getTerms(behavior.behaviorName, this.props.setting?.language)
},
yesI18n: "Popup.Behavior.Info.Confirm",
})

View File

@ -11,6 +11,7 @@ interface IConfirmPopupProps {
infoI18n?: AllI18nKeys;
yesI18n?: AllI18nKeys;
noI18n?: AllI18nKeys;
renderInfo?: () => ReactNode;
red?: "yes" | "no";
yes?: () => any;
no?: () => any;
@ -59,7 +60,13 @@ class ConfirmPopup extends Popup<IConfirmPopupProps> {
return <ConfirmContent
actions={actionList}
>
{this.props.infoI18n ? <Message i18nKey={this.props.infoI18n}/> : null}
{
this.props.renderInfo ?
this.props.renderInfo() :
this.props.infoI18n ?
<Message i18nKey={this.props.infoI18n}/> :
null
}
</ConfirmContent>
}
}

View File

@ -4,7 +4,8 @@ import { FunctionComponent } from "react";
import "./Message.scss";
interface IMessageProps {
i18nKey: AllI18nKeys;
i18nKey?: AllI18nKeys;
text?: string;
options?: Record<string, string>;
className?: string;
isTitle?: boolean;
@ -34,7 +35,15 @@ const MessageView: FunctionComponent<IMessageProps & IMixinSettingProps> = (prop
}
return <div className={classList.join(" ")}>
<span className={language}>{I18N(language, props.i18nKey, props.options)}</span>
{
props.text ?
<span className={language}>{props.text}</span> :
props.i18nKey ?
<span className={language}>{
I18N(language, props.i18nKey, props.options)
}</span> :
null
}
</div>
}

View File

@ -59,8 +59,6 @@ const EN_US = {
"Popup.Behavior.Info.Confirm": "OK, I know it",
"Build.In.Label.Name.All.Group": "All group",
"Build.In.Label.Name.All.Range": "All range",
"Behavior.Template.Title": "Behavior",
"Behavior.Template.Intro": "This is a template behavior",
"Common.Search.Placeholder": "Search in here...",
"Common.No.Data": "No Data",
"Common.No.Unknown.Error": "Unknown error",

View File

@ -59,8 +59,6 @@ const ZH_CN = {
"Popup.Behavior.Info.Confirm": "好的, 我知道了",
"Build.In.Label.Name.All.Group": "全部群",
"Build.In.Label.Name.All.Range": "全部范围",
"Behavior.Template.Title": "行为",
"Behavior.Template.Intro": "这是一个模板行为",
"Common.Search.Placeholder": "在此处搜索...",
"Common.No.Data": "暂无数据",
"Common.No.Unknown.Error": "未知错误",

View File

@ -132,6 +132,8 @@ type IBehaviorConstructor<
type IAnyBehavior = Behavior<any, any>;
type IAnyBehaviorRecorder = BehaviorRecorder<any, any>;
type Language = "ZH_CN" | "EN_US";
/**
*
*/
@ -156,6 +158,29 @@ class BehaviorInfo<E extends Record<EventType, any> = {}> extends Emitter<E> {
*
*/
public describe: string = "";
/**
*
*/
public terms: Record<string, Record<Language | string, string>> = {};
/**
*
*/
public getTerms(key: string, language?: Language | string): string {
if (key[0] === "$" && this.terms[key]) {
let res: string = "";
if (language) {
res = this.terms[key][language];
} else {
res = this.terms[key]["EN_US"];
}
if (res) {
return res;
}
}
return key;
}
}
class BehaviorRecorder<
@ -239,6 +264,7 @@ class BehaviorRecorder<
this.behaviorId = this.behaviorInstance.behaviorId;
this.behaviorName = this.behaviorInstance.behaviorName;
this.describe = this.behaviorInstance.describe;
this.terms = this.behaviorInstance.terms;
}
}