Optimize attr inputer

source/Panel/RangeDetails/RangeDetails.tsx

@@ -1,6 +1,6 @@
 import { Component, ReactNode } from "react";
 import { AttrInput } from "@Component/AttrInput/AttrInput";
-import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
+import { useStatusWithEvent, IMixinStatusProps, Status } from "@Context/Status";
 import { AllI18nKeys } from "@Component/Localization/Localization";
 import { Range } from "@Model/Range";
 import { ObjectID } from "@Model/Renderer";
@@ -8,65 +8,82 @@ import "./RangeDetails.scss";
 
 @useStatusWithEvent("rangeAttrChange", "focusObjectChange")
 class RangeDetails extends Component<IMixinStatusProps> {
+    
+    public readonly AttrI18nKey: AllI18nKeys[] = [
+        "Common.Attr.Key.Display.Name",
+        "Common.Attr.Key.Position.X",
+        "Common.Attr.Key.Position.Y",
+        "Common.Attr.Key.Position.Z",
+        "Common.Attr.Key.Radius.X",
+        "Common.Attr.Key.Radius.Y",
+        "Common.Attr.Key.Radius.Z"
+    ]
 
     private renderErrorFrom(error: AllI18nKeys) {
         return <>
-			<AttrInput keyI18n="Common.Attr.Key.Display.Name" disable disableI18n={error}/>
-			<AttrInput keyI18n="Common.Attr.Key.Position.X" disable disableI18n={error}/>
-            <AttrInput keyI18n="Common.Attr.Key.Position.Y" disable disableI18n={error}/>
-            <AttrInput keyI18n="Common.Attr.Key.Position.Z" disable disableI18n={error}/>
-		</>
+            {this.AttrI18nKey.map((key, index) => {
+                return <AttrInput key={index} keyI18n={key} disable disableI18n={error}/>
+            })}
+        </>
+    }
+
+    private renderAttrInput(
+        id: ObjectID, key: number, val: string | number | undefined,
+        change: (val: string, status: Status) => any,
+        step?: number, max?: number, min?: number
+    ) {
+        // console.log(id, key, val, step, max, min)
+        const handelFunc = (e: string) => {
+            if (this.props.status) {
+                change(e, this.props.status);
+            }
+        }
+        if (step) {
+            return <AttrInput
+                id={id} isNumber={true} step={step} keyI18n={this.AttrI18nKey[key]}
+                value={val} max={max} min={min}
+                valueChange={handelFunc}
+            />
+        } else {
+            return <AttrInput
+                id={id} keyI18n={this.AttrI18nKey[key]} value={val}
+                valueChange={handelFunc}
+            />
+        }
     }
 
     private renderFrom(range: Range) {
+        // console.log(range);
         return <>
-			<AttrInput
-                id={range.id}
-                keyI18n="Common.Attr.Key.Display.Name"
-                value={range.displayName}
-                valueChange={(e) => {
-                    this.props.status ? this.props.status.changeRangeAttrib(range.id, "displayName", e) : null;
-                }}
-            />
-			<AttrInput
-                id={range.id}
-                isNumber={true}
-                step={.1}
-                keyI18n="Common.Attr.Key.Position.X"
-                value={range.position[0]}
-                valueChange={(e) => {
-                    if (this.props.status) {
-                        range.position[0] = (e as any) / 1;
-                        this.props.status.changeRangeAttrib(range.id, "position", range.position);
-                    }
-                }}
-            />
-            <AttrInput
-                id={range.id}
-                isNumber={true}
-                step={.1}
-                keyI18n="Common.Attr.Key.Position.Y"
-                value={range.position[1]}
-                valueChange={(e) => {
-                    if (this.props.status) {
-                        range.position[1] = (e as any) / 1;
-                        this.props.status.changeRangeAttrib(range.id, "position", range.position);
-                    }
-                }}
-            />
-            <AttrInput
-                id={range.id}
-                isNumber={true}
-                step={.1}
-                keyI18n="Common.Attr.Key.Position.Z"
-                value={range.position[2]}
-                valueChange={(e) => {
-                    if (this.props.status) {
-                        range.position[2] = (e as any) / 1;
-                        this.props.status.changeRangeAttrib(range.id, "position", range.position);
-                    }
-                }}
-            />
+            {this.renderAttrInput(range.id, 0, range.displayName, (val, status) => {
+                status.changeRangeAttrib(range.id, "displayName", val);
+            })}
+
+            {this.renderAttrInput(range.id, 1, range.position[0], (val, status) => {
+                range.position[0] = (val as any) / 1;
+                status.changeRangeAttrib(range.id, "position", range.position);
+            }, .1)}
+            {this.renderAttrInput(range.id, 2, range.position[1], (val, status) => {
+                range.position[1] = (val as any) / 1;
+                status.changeRangeAttrib(range.id, "position", range.position);
+            }, .1)}
+            {this.renderAttrInput(range.id, 3, range.position[2], (val, status) => {
+                range.position[2] = (val as any) / 1;
+                status.changeRangeAttrib(range.id, "position", range.position);
+            }, .1)}
+			
+            {this.renderAttrInput(range.id, 4, range.radius[0], (val, status) => {
+                range.radius[0] = (val as any) / 1;
+                status.changeRangeAttrib(range.id, "radius", range.radius);
+            }, .1, undefined, 0)}
+            {this.renderAttrInput(range.id, 5, range.radius[1], (val, status) => {
+                range.radius[1] = (val as any) / 1;
+                status.changeRangeAttrib(range.id, "radius", range.radius);
+            }, .1, undefined, 0)}
+            {this.renderAttrInput(range.id, 6, range.radius[2], (val, status) => {
+                range.radius[2] = (val as any) / 1;
+                status.changeRangeAttrib(range.id, "radius", range.radius);
+            }, .1, undefined, 0)}
 		</>
     }