refactor input

1 files changed, 43 insertions, 47 deletions

diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
index aa2d1c2cc..645c1995e 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
@@ -6,7 +6,7 @@ import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 export interface IInputProps {
   label?: JSX.Element;
   lowerBound: number;
-  dataDoc: doc;
+  dataDoc: Doc;
   prop: string;
   step: number;
   unit: string;
@@ -47,27 +47,23 @@ export default class InputField extends React.Component<IInputProps, , IState> {
 
 
   componentDidUpdate(prevProps: Readonly<IInputProps>, prevState: Readonly<IState>, snapshot?: any): void {
-  }
-
-
-
-  useEffect(() => {
-    if (mode == "Freeform") {
-      if (Math.abs(tempValue - Number(value)) > 1) {
-        setTempValue(Number(value));
+    if (prevProps.value != this.props.value) {
+      if (this.props.mode == "Freeform") {
+        if (Math.abs(this.state.tempValue - Number(this.props.value)) > 1) {
+          this.setState({tempValue: Number(this.props.value)})
+        }
       }
     }
-  }, [value]);
+    if (prevProps.update != this.props.update) {
+      this.externalUpdate();
+    }
+  }
 
   externalUpdate = () => {
-    setTempValue(Number(value));
-    setTempRadianValue((Number(value) * Math.PI) / 180);
+    this.setState({tempValue: Number(this.props.value)})
+    this.setState({tempRadianValue: Number(this.props.value) * Math.PI / 180})
   };
 
-  useEffect(() => {
-    this.externalUpdate();
-  }, [update]);
-
   onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     let value = event.target.value == "" ? 0 : Number(event.target.value);
     if (value > this.props.upperBound) {
@@ -76,10 +72,10 @@ export default class InputField extends React.Component<IInputProps, , IState> {
       value = this.props.lowerBound;
     }
     this.props.dataDoc[this.props.prop] = value
-    setTempValue(event.target.value == "" ? event.target.value : value);
-    setTempRadianValue((value * Math.PI) / 180);
-    if (effect) {
-      effect(value);
+    this.setState({tempValue: event.target.value == "" ? event.target.value : value})
+    this.setState({tempRadianValue: (value * Math.PI) / 180})
+    if (this.props.effect) {
+      this.props.effect(value);
     }
   };
 
@@ -91,14 +87,14 @@ export default class InputField extends React.Component<IInputProps, , IState> {
       value = 0;
     }
     this.props.dataDoc[this.props.prop] = (value * 180) / Math.PI
-    setTempValue((value * 180) / Math.PI);
-    setTempRadianValue(value);
-    if (effect) {
-      effect((value * 180) / Math.PI);
+    this.setState({tempValue: (value * 180) / Math.PI})
+    this.setState({tempRadianValue: value})
+    if (this.props.effect) {
+      this.props.effect((value * 180) / Math.PI);
     }
   };
 
-  return (
+  render () { 
     <div
       style={{
         display: "flex",
@@ -107,63 +103,63 @@ export default class InputField extends React.Component<IInputProps, , IState> {
         alignItems: "center",
       }}
     >
-      {label && (
+      {this.props.label && (
         <div
           style={{
             marginTop: "0.3em",
             marginBottom: "-0.5em",
-            width: labelWidth ?? "2em",
+            width: this.props.labelWidth ?? "2em",
           }}
         >
-          {label}
+          {this.props.label}
         </div>
       )}
       <TextField
         type="number"
         variant="standard"
-        value={tempValue}
-        onChange={onChange}
+        value={this.state.tempValue}
+        onChange={this.onChange}
         sx={{
           height: "1em",
-          width: { width },
-          marginLeft: { margin },
+          width: { this.width },
+          marginLeft: { this.margin },
           zIndex: "modal",
         }}
         inputProps={{
-          step: step,
-          min: lowerBound,
-          max: upperBound,
+          step: this.props.step,
+          min: this.props.lowerBound,
+          max: this.props.upperBound,
           type: "number",
         }}
         InputProps={{
           startAdornment: (
             <InputAdornment position="start">
-              {Math.abs(Number(value) - (correctValue ?? 0)) < epsilon &&
-                showIcon && <TaskAltIcon color={"success"} />}
-              {Math.abs(Number(value) - (correctValue ?? 0)) >= epsilon &&
-                showIcon && <ErrorOutlineIcon color={"error"} />}
+              {Math.abs(Number(this.props.value) - (this.props.correctValue ?? 0)) < this.epsilon &&
+                this.props.showIcon && <TaskAltIcon color={"success"} />}
+              {Math.abs(Number(this.props.value) - (this.props.correctValue ?? 0)) >= this.epsilon &&
+                this.props.showIcon && <ErrorOutlineIcon color={"error"} />}
             </InputAdornment>
           ),
-          endAdornment: <InputAdornment position="end">{unit}</InputAdornment>,
+          endAdornment: <InputAdornment position="end">{this.props.unit}</InputAdornment>,
         }}
       />
-      {radianEquivalent && (
+      {this.props.radianEquivalent && (
         <div
           style={{ marginTop: "0.3em", marginBottom: "-0.5em", width: "1em" }}
         >
           <p>≈</p>
         </div>
       )}
-      {radianEquivalent && (
+      {this.props.radianEquivalent && (
         <TextField
           type="number"
           variant="standard"
-          value={tempRadianValue}
-          onChange={onChangeRadianValue}
+          value={this.state.tempRadianValue}
+          onChange={this.onChangeRadianValue}
           sx={{
             height: "1em",
-            width: { width },
-            marginLeft: { margin },
+            width: { this.width },
+            marginLeft: { this.margin },
             zIndex: "modal",
           }}
           inputProps={{
@@ -178,5 +174,5 @@ export default class InputField extends React.Component<IInputProps, , IState> {
         />
       )}
     </div>
-  );
+  }
 };