Compare commits
No commits in common. "5ff6987a4b4f23872c8c803ea44a351224c8d96b" and "b6f8828c3b866dedbc84799a5d1e3d4ff08abbb7" have entirely different histories.
5ff6987a4b
...
b6f8828c3b
@ -4,52 +4,7 @@ import { Template } from "./Template";
|
|||||||
const AllBehaviors: IAnyBehaviorRecorder[] = new Array(4).fill(0).map((_, i) => {
|
const AllBehaviors: IAnyBehaviorRecorder[] = new Array(4).fill(0).map((_, i) => {
|
||||||
let behavior = new BehaviorRecorder(Template);
|
let behavior = new BehaviorRecorder(Template);
|
||||||
behavior.behaviorId = behavior.behaviorId + i;
|
behavior.behaviorId = behavior.behaviorId + i;
|
||||||
behavior.behaviorName = behavior.behaviorName + Math.random().toString(36).slice(-6);
|
|
||||||
behavior.category = "Category" + Math.floor(Math.random() * 3).toString();
|
|
||||||
return behavior;
|
return behavior;
|
||||||
});
|
});
|
||||||
|
|
||||||
/**
|
export { AllBehaviors };
|
||||||
* 分类词条
|
|
||||||
*/
|
|
||||||
type ICategory = {key: string, category: Record<string, string>, item: IAnyBehaviorRecorder[]};
|
|
||||||
|
|
||||||
const AllBehaviorsWithCategory: ICategory[] = categoryBehaviors(AllBehaviors);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 将词条进行分类
|
|
||||||
*/
|
|
||||||
function categoryBehaviors(behaviors: IAnyBehaviorRecorder[]): ICategory[] {
|
|
||||||
let res: ICategory[] = [];
|
|
||||||
for (let i = 0; i < behaviors.length; i++) {
|
|
||||||
|
|
||||||
let category: ICategory | undefined = undefined;
|
|
||||||
for (let j = 0; j < res.length; j++) {
|
|
||||||
if (res[j].key === behaviors[i].category) {
|
|
||||||
category = res[j];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!category) {
|
|
||||||
category = {
|
|
||||||
key: behaviors[i].category,
|
|
||||||
category: {},
|
|
||||||
item: []
|
|
||||||
}
|
|
||||||
res.push(category);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (behaviors[i].category[0] === "$") {
|
|
||||||
let terms = behaviors[i].terms[behaviors[i].category];
|
|
||||||
if (terms) {
|
|
||||||
category.category = {...category.category, ...terms}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
category.item.push(behaviors[i]);
|
|
||||||
}
|
|
||||||
|
|
||||||
return res;
|
|
||||||
}
|
|
||||||
|
|
||||||
export { AllBehaviors, AllBehaviorsWithCategory, ICategory as ICategoryBehavior };
|
|
@ -5,7 +5,7 @@ div.behavior-popup {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
span.behavior-popup-select-counter, div.behavior-popup-no-data {
|
span.behavior-popup-select-counter {
|
||||||
opacity: .75;
|
opacity: .75;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,19 +1,19 @@
|
|||||||
import { Component, ReactNode, Fragment } from "react";
|
import { Component, ReactNode } from "react";
|
||||||
import { Popup } from "@Context/Popups";
|
import { Popup } from "@Context/Popups";
|
||||||
import { Localization } from "@Component/Localization/Localization";
|
import { Localization, I18N } from "@Component/Localization/Localization";
|
||||||
import { SearchBox } from "@Component/SearchBox/SearchBox";
|
import { SearchBox } from "@Component/SearchBox/SearchBox";
|
||||||
import { ConfirmContent } from "@Component/ConfirmPopup/ConfirmPopup";
|
import { ConfirmContent } from "@Component/ConfirmPopup/ConfirmPopup";
|
||||||
import { BehaviorList } from "@Component/BehaviorList/BehaviorList";
|
import { BehaviorList } from "@Component/BehaviorList/BehaviorList";
|
||||||
import { AllBehaviorsWithCategory, ICategoryBehavior } from "@Behavior/Behavior";
|
import { AllBehaviors } from "@Behavior/Behavior";
|
||||||
import { Message } from "@Component/Message/Message";
|
import { Message } from "@Component/Message/Message";
|
||||||
import { IRenderBehavior, BehaviorRecorder } from "@Model/Behavior";
|
import { IRenderBehavior } from "@Model/Behavior";
|
||||||
import { useStatus, IMixinStatusProps, randomColor } from "@Context/Status";
|
import { useStatus, IMixinStatusProps } from "@Context/Status";
|
||||||
import { useSettingWithEvent, IMixinSettingProps } from "@Context/Setting";
|
import { useSettingWithEvent, IMixinSettingProps } from "@Context/Setting";
|
||||||
import { ConfirmPopup } from "@Component/ConfirmPopup/ConfirmPopup";
|
import { ConfirmPopup } from "@Component/ConfirmPopup/ConfirmPopup";
|
||||||
import "./BehaviorPopup.scss";
|
import "./BehaviorPopup.scss";
|
||||||
|
|
||||||
interface IBehaviorPopupProps {
|
interface IBehaviorPopupProps {
|
||||||
onDismiss?: () => void;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
interface IBehaviorPopupState {
|
interface IBehaviorPopupState {
|
||||||
@ -21,7 +21,7 @@ interface IBehaviorPopupState {
|
|||||||
focusBehavior: Set<IRenderBehavior>;
|
focusBehavior: Set<IRenderBehavior>;
|
||||||
}
|
}
|
||||||
|
|
||||||
class BehaviorPopup extends Popup {
|
class BehaviorPopup extends Popup<IBehaviorPopupProps> {
|
||||||
|
|
||||||
public minWidth: number = 400;
|
public minWidth: number = 400;
|
||||||
public minHeight: number = 300;
|
public minHeight: number = 300;
|
||||||
@ -34,9 +34,7 @@ class BehaviorPopup extends Popup {
|
|||||||
}
|
}
|
||||||
|
|
||||||
public render(): ReactNode {
|
public render(): ReactNode {
|
||||||
return <BehaviorPopupComponent onDismiss={() => {
|
return <BehaviorPopupComponent {...this.props}/>
|
||||||
this.close();
|
|
||||||
}}/>
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -92,28 +90,21 @@ class BehaviorPopupComponent extends Component<
|
|||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
|
|
||||||
private renderBehaviors = (behaviors: ICategoryBehavior, first: boolean) => {
|
public render(): ReactNode {
|
||||||
|
return <ConfirmContent
|
||||||
let language = this.props.setting?.language ?? "EN_US";
|
className="behavior-popup"
|
||||||
let filterItem = behaviors.item.filter((item) => {
|
actions={[{
|
||||||
let name = item.getTerms(item.behaviorName, this.props.setting?.language);
|
i18nKey: "Popup.Add.Behavior.Action.Add",
|
||||||
if (this.state.searchValue) {
|
disable: this.state.focusBehavior.size <= 0
|
||||||
return name.includes(this.state.searchValue);
|
}]}
|
||||||
} else {
|
header={this.renderHeader}
|
||||||
return true;
|
customFooter={this.renderActionBar}
|
||||||
}
|
headerHeight={46}
|
||||||
})
|
>
|
||||||
|
<Message i18nKey="ZH_CN" isTitle first/>
|
||||||
if (filterItem.length <= 0) return undefined;
|
|
||||||
|
|
||||||
return <Fragment key={behaviors.key}>
|
|
||||||
<Message
|
|
||||||
text={behaviors.category[language] ?? behaviors.key}
|
|
||||||
first={first} isTitle
|
|
||||||
/>
|
|
||||||
<BehaviorList
|
<BehaviorList
|
||||||
focusBehaviors={Array.from(this.state.focusBehavior)}
|
focusBehaviors={Array.from(this.state.focusBehavior)}
|
||||||
behaviors={filterItem}
|
behaviors={AllBehaviors}
|
||||||
action={this.showBehaviorInfo}
|
action={this.showBehaviorInfo}
|
||||||
click={(behavior) => {
|
click={(behavior) => {
|
||||||
if (this.state.focusBehavior.has(behavior)) {
|
if (this.state.focusBehavior.has(behavior)) {
|
||||||
@ -124,56 +115,6 @@ class BehaviorPopupComponent extends Component<
|
|||||||
this.forceUpdate();
|
this.forceUpdate();
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</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,
|
|
||||||
onClick: this.addSelectBehavior
|
|
||||||
}]}
|
|
||||||
header={this.renderHeader}
|
|
||||||
customFooter={this.renderActionBar}
|
|
||||||
headerHeight={46}
|
|
||||||
>
|
|
||||||
{
|
|
||||||
behaviorNodes.length ? behaviorNodes :
|
|
||||||
<Message
|
|
||||||
className="behavior-popup-no-data"
|
|
||||||
i18nKey="Popup.Add.Behavior.Select.Nodata" first
|
|
||||||
options={{ name: this.state.searchValue }}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
</ConfirmContent>
|
</ConfirmContent>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -40,7 +40,6 @@ interface IStatusEvent {
|
|||||||
labelAttrChange: void;
|
labelAttrChange: void;
|
||||||
groupAttrChange: void;
|
groupAttrChange: void;
|
||||||
individualChange: void;
|
individualChange: void;
|
||||||
behaviorChange: void;
|
|
||||||
popupChange: void;
|
popupChange: void;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -103,7 +102,6 @@ class Status extends Emitter<IStatusEvent> {
|
|||||||
// 对象变化事件
|
// 对象变化事件
|
||||||
this.model.on("objectChange", () => this.emit("objectChange"));
|
this.model.on("objectChange", () => this.emit("objectChange"));
|
||||||
this.model.on("labelChange", () => this.emit("labelChange"));
|
this.model.on("labelChange", () => this.emit("labelChange"));
|
||||||
this.model.on("behaviorChange", () => this.emit("behaviorChange"));
|
|
||||||
|
|
||||||
// 弹窗事件
|
// 弹窗事件
|
||||||
this.popup.on("popupChange", () => this.emit("popupChange"));
|
this.popup.on("popupChange", () => this.emit("popupChange"));
|
||||||
@ -279,6 +277,6 @@ const useStatus = superConnect<Status>(StatusConsumer, "status");
|
|||||||
const useStatusWithEvent = superConnectWithEvent<Status, IStatusEvent>(StatusConsumer, "status");
|
const useStatusWithEvent = superConnectWithEvent<Status, IStatusEvent>(StatusConsumer, "status");
|
||||||
|
|
||||||
export {
|
export {
|
||||||
Status, StatusContext, useStatus, useStatusWithEvent, randomColor,
|
Status, StatusContext, useStatus, useStatusWithEvent,
|
||||||
IMixinStatusProps, StatusProvider, StatusConsumer
|
IMixinStatusProps, StatusProvider, StatusConsumer
|
||||||
};
|
};
|
@ -55,7 +55,6 @@ const EN_US = {
|
|||||||
"Popup.Add.Behavior.Title": "Add behavior",
|
"Popup.Add.Behavior.Title": "Add behavior",
|
||||||
"Popup.Add.Behavior.Action.Add": "Add all select behavior",
|
"Popup.Add.Behavior.Action.Add": "Add all select behavior",
|
||||||
"Popup.Add.Behavior.Select.Counter": "Selected {count} 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.Title": "Behavior details: {behavior}",
|
||||||
"Popup.Behavior.Info.Confirm": "OK, I know it",
|
"Popup.Behavior.Info.Confirm": "OK, I know it",
|
||||||
"Build.In.Label.Name.All.Group": "All group",
|
"Build.In.Label.Name.All.Group": "All group",
|
||||||
|
@ -54,8 +54,7 @@ const ZH_CN = {
|
|||||||
"Popup.Setting.Title": "首选项设置",
|
"Popup.Setting.Title": "首选项设置",
|
||||||
"Popup.Add.Behavior.Title": "添加行为",
|
"Popup.Add.Behavior.Title": "添加行为",
|
||||||
"Popup.Add.Behavior.Action.Add": "添加全部选中行为",
|
"Popup.Add.Behavior.Action.Add": "添加全部选中行为",
|
||||||
"Popup.Add.Behavior.Select.Counter": "找不到名为 \"{name}\" 的行为",
|
"Popup.Add.Behavior.Select.Counter": "已选择 {count} 个行为",
|
||||||
"Popup.Add.Behavior.Select.Nodata": "Could not find behavior named \"{name}\"",
|
|
||||||
"Popup.Behavior.Info.Title": "行为详情: {behavior}",
|
"Popup.Behavior.Info.Title": "行为详情: {behavior}",
|
||||||
"Popup.Behavior.Info.Confirm": "好的, 我知道了",
|
"Popup.Behavior.Info.Confirm": "好的, 我知道了",
|
||||||
"Build.In.Label.Name.All.Group": "全部群",
|
"Build.In.Label.Name.All.Group": "全部群",
|
||||||
|
@ -159,11 +159,6 @@ class BehaviorInfo<E extends Record<EventType, any> = {}> extends Emitter<E> {
|
|||||||
*/
|
*/
|
||||||
public describe: string = "";
|
public describe: string = "";
|
||||||
|
|
||||||
/**
|
|
||||||
* 类别
|
|
||||||
*/
|
|
||||||
public category: string = "";
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 提条列表
|
* 提条列表
|
||||||
*/
|
*/
|
||||||
|
Loading…
Reference in New Issue
Block a user