Add behavior i18n & behavior can filter by name & behavior list panel #29

Merged
MrKBear merged 4 commits from dev-mrkbear into master 2022-03-29 20:14:23 +08:00
5 changed files with 50 additions and 16 deletions
Showing only changes of commit 5ff6987a4b - Show all commits

View File

@ -5,7 +5,7 @@ div.behavior-popup {
height: 100%;
}
span.behavior-popup-select-counter {
span.behavior-popup-select-counter, div.behavior-popup-no-data {
opacity: .75;
}

View File

@ -6,14 +6,14 @@ import { ConfirmContent } from "@Component/ConfirmPopup/ConfirmPopup";
import { BehaviorList } from "@Component/BehaviorList/BehaviorList";
import { AllBehaviorsWithCategory, ICategoryBehavior } from "@Behavior/Behavior";
import { Message } from "@Component/Message/Message";
import { IRenderBehavior } from "@Model/Behavior";
import { useStatus, IMixinStatusProps } from "@Context/Status";
import { IRenderBehavior, BehaviorRecorder } from "@Model/Behavior";
import { useStatus, IMixinStatusProps, randomColor } from "@Context/Status";
import { useSettingWithEvent, IMixinSettingProps } from "@Context/Setting";
import { ConfirmPopup } from "@Component/ConfirmPopup/ConfirmPopup";
import "./BehaviorPopup.scss";
interface IBehaviorPopupProps {
onDismiss?: () => void;
}
interface IBehaviorPopupState {
@ -21,7 +21,7 @@ interface IBehaviorPopupState {
focusBehavior: Set<IRenderBehavior>;
}
class BehaviorPopup extends Popup<IBehaviorPopupProps> {
class BehaviorPopup extends Popup {
public minWidth: number = 400;
public minHeight: number = 300;
@ -34,7 +34,9 @@ class BehaviorPopup extends Popup<IBehaviorPopupProps> {
}
public render(): ReactNode {
return <BehaviorPopupComponent {...this.props}/>
return <BehaviorPopupComponent onDismiss={() => {
this.close();
}}/>
}
}
@ -125,25 +127,53 @@ class BehaviorPopupComponent extends Component<
</Fragment>
}
private addSelectBehavior = () => {
this.state.focusBehavior.forEach((recorder) => {
if (this.props.status && recorder instanceof BehaviorRecorder) {
let newBehavior = this.props.status.model.addBehavior(recorder);
// 初始化名字
newBehavior.name = recorder.getTerms(
recorder.behaviorName, this.props.setting?.language
) + " " + (recorder.nameIndex - 1).toString();
// 赋予一个随机颜色
let color = randomColor(true);
newBehavior.color = `rgb(${color[0]},${color[1]},${color[2]})`;
}
});
this.props.onDismiss ? this.props.onDismiss() : undefined;
}
public render(): ReactNode {
let first: boolean = true;
let behaviorNodes = AllBehaviorsWithCategory.map((behavior) => {
let renderItem = this.renderBehaviors(behavior, first);
if (renderItem) {
first = false;
}
return renderItem;
}).filter((x) => !!x);
return <ConfirmContent
className="behavior-popup"
actions={[{
i18nKey: "Popup.Add.Behavior.Action.Add",
disable: this.state.focusBehavior.size <= 0
disable: this.state.focusBehavior.size <= 0,
onClick: this.addSelectBehavior
}]}
header={this.renderHeader}
customFooter={this.renderActionBar}
headerHeight={46}
>
{AllBehaviorsWithCategory.map((behavior) => {
let renderItem = this.renderBehaviors(behavior, first);
if (renderItem) {
first = false;
}
return renderItem;
}).filter((x) => !!x)}
{
behaviorNodes.length ? behaviorNodes :
<Message
className="behavior-popup-no-data"
i18nKey="Popup.Add.Behavior.Select.Nodata" first
options={{ name: this.state.searchValue }}
/>
}
</ConfirmContent>
}
}

View File

@ -40,6 +40,7 @@ interface IStatusEvent {
labelAttrChange: void;
groupAttrChange: void;
individualChange: void;
behaviorChange: void;
popupChange: void;
}
@ -102,6 +103,7 @@ class Status extends Emitter<IStatusEvent> {
// 对象变化事件
this.model.on("objectChange", () => this.emit("objectChange"));
this.model.on("labelChange", () => this.emit("labelChange"));
this.model.on("behaviorChange", () => this.emit("behaviorChange"));
// 弹窗事件
this.popup.on("popupChange", () => this.emit("popupChange"));
@ -277,6 +279,6 @@ const useStatus = superConnect<Status>(StatusConsumer, "status");
const useStatusWithEvent = superConnectWithEvent<Status, IStatusEvent>(StatusConsumer, "status");
export {
Status, StatusContext, useStatus, useStatusWithEvent,
Status, StatusContext, useStatus, useStatusWithEvent, randomColor,
IMixinStatusProps, StatusProvider, StatusConsumer
};

View File

@ -55,6 +55,7 @@ const EN_US = {
"Popup.Add.Behavior.Title": "Add behavior",
"Popup.Add.Behavior.Action.Add": "Add all select behavior",
"Popup.Add.Behavior.Select.Counter": "Selected {count} behavior",
"Popup.Add.Behavior.Select.Nodata": "Could not find behavior named \"{name}\"",
"Popup.Behavior.Info.Title": "Behavior details: {behavior}",
"Popup.Behavior.Info.Confirm": "OK, I know it",
"Build.In.Label.Name.All.Group": "All group",

View File

@ -54,7 +54,8 @@ const ZH_CN = {
"Popup.Setting.Title": "首选项设置",
"Popup.Add.Behavior.Title": "添加行为",
"Popup.Add.Behavior.Action.Add": "添加全部选中行为",
"Popup.Add.Behavior.Select.Counter": "已选择 {count} 个行为",
"Popup.Add.Behavior.Select.Counter": "找不到名为 \"{name}\" 的行为",
"Popup.Add.Behavior.Select.Nodata": "Could not find behavior named \"{name}\"",
"Popup.Behavior.Info.Title": "行为详情: {behavior}",
"Popup.Behavior.Info.Confirm": "好的, 我知道了",
"Build.In.Label.Name.All.Group": "全部群",