Add parameter component
This commit is contained in:
@@ -1,13 +1,13 @@
|
||||
import { Component, Fragment, ReactNode} from "react";
|
||||
import { Component, ReactNode} from "react";
|
||||
import { useSettingWithEvent, IMixinSettingProps } from "@Context/Setting";
|
||||
import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
|
||||
import { Behavior, IBehaviorParameter, isObjectType, isVectorType } from "@Model/Behavior";
|
||||
import { IAnyBehavior } from "@Model/Behavior";
|
||||
import { Message } from "@Component/Message/Message";
|
||||
import { AttrInput } from "@Component/AttrInput/AttrInput";
|
||||
import { ColorInput } from "@Component/ColorInput/ColorInput";
|
||||
import { TogglesInput } from "@Component/TogglesInput/TogglesInput";
|
||||
import { ConfirmPopup } from "@Component/ConfirmPopup/ConfirmPopup";
|
||||
import { ObjectPicker } from "@Component/ObjectPicker/ObjectPicker";
|
||||
import { Parameter } from "@Component/Parameter/Parameter";
|
||||
import "./BehaviorDetails.scss";
|
||||
|
||||
interface IBehaviorDetailsProps {}
|
||||
@@ -16,11 +16,24 @@ interface IBehaviorDetailsProps {}
|
||||
@useStatusWithEvent("focusBehaviorChange", "behaviorAttrChange")
|
||||
class BehaviorDetails extends Component<IBehaviorDetailsProps & IMixinStatusProps & IMixinSettingProps> {
|
||||
|
||||
private renderFrom<T extends IBehaviorParameter>
|
||||
(behavior: Behavior<T, Record<string, any>>): ReactNode {
|
||||
|
||||
const allParameterKeys = Object.getOwnPropertyNames(behavior.parameterOption);
|
||||
private handelDeleteBehavior = (behavior: IAnyBehavior) => {
|
||||
if (this.props.status) {
|
||||
const status = this.props.status;
|
||||
status.popup.showPopup(ConfirmPopup, {
|
||||
infoI18n: "Popup.Delete.Behavior.Confirm",
|
||||
titleI18N: "Popup.Action.Objects.Confirm.Title",
|
||||
yesI18n: "Popup.Action.Objects.Confirm.Delete",
|
||||
red: "yes",
|
||||
yes: () => {
|
||||
status.model.deleteBehavior(behavior);
|
||||
status.setBehaviorObject();
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
private renderFrom(behavior: IAnyBehavior): ReactNode {
|
||||
|
||||
return <>
|
||||
|
||||
<Message i18nKey="Common.Attr.Title.Basic" isTitle first/>
|
||||
@@ -44,145 +57,29 @@ class BehaviorDetails extends Component<IBehaviorDetailsProps & IMixinStatusProp
|
||||
keyI18n="Common.Attr.Key.Delete" red
|
||||
onIconName="delete" offIconName="delete"
|
||||
valueChange={() => {
|
||||
if (this.props.status) {
|
||||
const status = this.props.status;
|
||||
status.popup.showPopup(ConfirmPopup, {
|
||||
infoI18n: "Popup.Delete.Behavior.Confirm",
|
||||
titleI18N: "Popup.Action.Objects.Confirm.Title",
|
||||
yesI18n: "Popup.Action.Objects.Confirm.Delete",
|
||||
red: "yes",
|
||||
yes: () => {
|
||||
status.model.deleteBehavior(behavior);
|
||||
status.setBehaviorObject();
|
||||
}
|
||||
})
|
||||
}
|
||||
this.handelDeleteBehavior(behavior)
|
||||
}}
|
||||
/>
|
||||
|
||||
{
|
||||
allParameterKeys.length > 0 ?
|
||||
<Message
|
||||
isTitle
|
||||
i18nKey="Panel.Info.Behavior.Details.Behavior.Props"
|
||||
options={{
|
||||
behavior: behavior.getTerms(behavior.behaviorName, this.props.setting?.language)
|
||||
}}
|
||||
/> : null
|
||||
}
|
||||
|
||||
{
|
||||
allParameterKeys.map((key) => {
|
||||
return this.renderParameter(behavior, key);
|
||||
})
|
||||
}
|
||||
<Parameter
|
||||
key={behavior.id}
|
||||
option={behavior.parameterOption}
|
||||
value={behavior.parameter}
|
||||
i18n={(option, language) => behavior.getTerms(option.name, language)}
|
||||
title={"Panel.Info.Behavior.Details.Behavior.Props"}
|
||||
titleOption={{
|
||||
behavior: behavior.getTerms(behavior.behaviorName, this.props.setting?.language)
|
||||
}}
|
||||
change={(key, value) => {
|
||||
this.props.status?.changeBehaviorAttrib(
|
||||
behavior.id, key as string, value
|
||||
);
|
||||
}}
|
||||
/>
|
||||
|
||||
</>;
|
||||
}
|
||||
|
||||
private renderParameter<T extends IBehaviorParameter>
|
||||
(behavior: Behavior<T, Record<string, any>>, key: keyof T): ReactNode {
|
||||
const type = behavior.parameterOption[key];
|
||||
const value = behavior.parameter[key];
|
||||
const indexKey = `${behavior.id}-${key}`;
|
||||
|
||||
if (type.type === "number") {
|
||||
return <AttrInput
|
||||
keyI18n="Panel.Info.Behavior.Details.Parameter.Key"
|
||||
keyI18nOption={{ key: behavior.getTerms(type.name, this.props.setting?.language) }}
|
||||
key={indexKey} id={indexKey} isNumber={true} step={type.numberStep} maxLength={type.maxLength}
|
||||
max={type.numberMax} min={type.numberMin}
|
||||
value={(value as number) ?? 0}
|
||||
valueChange={(val) => {
|
||||
this.props.status?.changeBehaviorAttrib(behavior.id, key as string, (val as any) / 1);
|
||||
}}
|
||||
/>
|
||||
}
|
||||
|
||||
if (type.type === "string") {
|
||||
return <AttrInput
|
||||
keyI18n="Panel.Info.Behavior.Details.Parameter.Key"
|
||||
keyI18nOption={{ key: behavior.getTerms(type.name, this.props.setting?.language) }}
|
||||
key={indexKey} id={indexKey} maxLength={type.maxLength}
|
||||
value={(value as string) ?? ""}
|
||||
valueChange={(val) => {
|
||||
this.props.status?.changeBehaviorAttrib(behavior.id, key as string, val);
|
||||
}}
|
||||
/>
|
||||
}
|
||||
|
||||
if (type.type === "boolean") {
|
||||
return <TogglesInput
|
||||
keyI18n="Panel.Info.Behavior.Details.Parameter.Key"
|
||||
keyI18nOption={{ key: behavior.getTerms(type.name, this.props.setting?.language) }}
|
||||
onIconName={type.iconName} key={indexKey} value={(value as boolean) ?? false}
|
||||
valueChange={(val) => {
|
||||
this.props.status?.changeBehaviorAttrib(behavior.id, key as string, val);
|
||||
}}
|
||||
/>
|
||||
}
|
||||
|
||||
if (isObjectType(type.type as any)) {
|
||||
return <ObjectPicker
|
||||
keyI18n="Panel.Info.Behavior.Details.Parameter.Key"
|
||||
keyI18nOption={{ key: behavior.getTerms(type.name, this.props.setting?.language) }}
|
||||
type={type.type} value={(value as any).picker} key={indexKey}
|
||||
valueChange={(obj) => {
|
||||
(value as any).picker = obj;
|
||||
this.props.status?.changeBehaviorAttrib(behavior.id, key as string, value);
|
||||
}}
|
||||
cleanValue={() => {
|
||||
(value as any).picker = undefined;
|
||||
this.props.status?.changeBehaviorAttrib(behavior.id, key as string, value);
|
||||
}}
|
||||
/>
|
||||
}
|
||||
|
||||
if (isVectorType(type.type as any)) {
|
||||
return <Fragment key={indexKey}>
|
||||
|
||||
<AttrInput
|
||||
keyI18n="Panel.Info.Behavior.Details.Parameter.Key.Vec.X"
|
||||
keyI18nOption={{ key: behavior.getTerms(type.name, this.props.setting?.language) }}
|
||||
key={`${indexKey}-X`} id={indexKey} isNumber={true} step={type.numberStep} maxLength={type.maxLength}
|
||||
max={type.numberMax} min={type.numberMin}
|
||||
value={(value as number[])[0] ?? 0}
|
||||
valueChange={(val) => {
|
||||
(value as number[])[0] = (val as any) / 1;
|
||||
this.props.status?.changeBehaviorAttrib(behavior.id, key as string, value);
|
||||
}}
|
||||
/>
|
||||
|
||||
<AttrInput
|
||||
keyI18n="Panel.Info.Behavior.Details.Parameter.Key.Vec.Y"
|
||||
keyI18nOption={{ key: behavior.getTerms(type.name, this.props.setting?.language) }}
|
||||
key={`${indexKey}-Y`} id={indexKey} isNumber={true} step={type.numberStep} maxLength={type.maxLength}
|
||||
max={type.numberMax} min={type.numberMin}
|
||||
value={(value as number[])[1] ?? 0}
|
||||
valueChange={(val) => {
|
||||
(value as number[])[1] = (val as any) / 1;
|
||||
this.props.status?.changeBehaviorAttrib(behavior.id, key as string, value);
|
||||
}}
|
||||
/>
|
||||
|
||||
<AttrInput
|
||||
keyI18n="Panel.Info.Behavior.Details.Parameter.Key.Vec.Z"
|
||||
keyI18nOption={{ key: behavior.getTerms(type.name, this.props.setting?.language) }}
|
||||
key={`${indexKey}-Z`} id={indexKey} isNumber={true} step={type.numberStep} maxLength={type.maxLength}
|
||||
max={type.numberMax} min={type.numberMin}
|
||||
value={(value as number[])[2] ?? 0}
|
||||
valueChange={(val) => {
|
||||
(value as number[])[2] = (val as any) / 1;
|
||||
this.props.status?.changeBehaviorAttrib(behavior.id, key as string, value);
|
||||
}}
|
||||
/>
|
||||
|
||||
</Fragment>
|
||||
}
|
||||
|
||||
return <Fragment key={indexKey}/>
|
||||
}
|
||||
|
||||
public render(): ReactNode {
|
||||
if (this.props.status && this.props.status.focusBehavior) {
|
||||
return this.renderFrom(this.props.status.focusBehavior);
|
||||
|
||||
Reference in New Issue
Block a user