1 files changed, 39 insertions, 41 deletions
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
index 91b0ad84c..aa2d1c2cc 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
@@ -1,12 +1,13 @@
-import { useState, useEffect } from "react";
 import { TextField, InputAdornment } from "@mui/material";
-
+import { Doc } from '../../../../fields/Doc';
+import React = require('react');
 import TaskAltIcon from "@mui/icons-material/TaskAlt";
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 export interface IInputProps {
   label?: JSX.Element;
   lowerBound: number;
-  changeValue: (val: number) => any;
+  dataDoc: doc;
+  prop: string;
   step: number;
   unit: string;
   upperBound: number;
@@ -21,36 +22,34 @@ export interface IInputProps {
   labelWidth?: string;
 }
 
-export const InputField = (props: IInputProps) => {
-  const {
-    changeValue,
-    correctValue,
-    effect,
-    label,
-    lowerBound,
-    mode,
-    radianEquivalent,
-    showIcon,
-    small,
-    step,
-    unit,
-    upperBound,
-    value,
-    update,
-    labelWidth,
-  } = props;
-  let epsilon: number = 0.01;
+interface IState {
+  tempValue: number,
+  tempRadianValue: number,
+}
 
-  let width = small ? "6em" : "7em";
-  let margin = small ? "0px" : "10px";
+export default class InputField extends React.Component<IInputProps, , IState> {
+  constructor(props: any) {
+    super(props)
+    this.state = {
+      tempValue: this.props.mode != "Freeform" && !this.props.showIcon ? 0 : this.props.value,
+      tempRadianValue: this.props.mode != "Freeform" && !this.props.showIcon ? 0 : (Number(this.props.value) * Math.PI) / 180
+    }
+  }
+
+  epsilon: number = 0;
+  width: string = "6em";
+  margin: string = "6em";
+  componentDidMount() {
+    this.epsilon = 0.01;
+    this.width = this.props.small ? "6em" : "7em";
+    this.margin = this.props.small ? "0px" : "10px";
+  }
+
+
+  componentDidUpdate(prevProps: Readonly<IInputProps>, prevState: Readonly<IState>, snapshot?: any): void {
+  }
 
-  const [tempValue, setTempValue] = useState<any>(
-    mode != "Freeform" && !showIcon ? 0 : value
-  );
 
-  const [tempRadianValue, setTempRadianValue] = useState(
-    mode != "Freeform" && !showIcon ? 0 : (Number(value) * Math.PI) / 180
-  );
 
   useEffect(() => {
     if (mode == "Freeform") {
@@ -60,24 +59,23 @@ export const InputField = (props: IInputProps) => {
     }
   }, [value]);
 
-  const externalUpdate = () => {
-    changeValue(Number(value));
+  externalUpdate = () => {
     setTempValue(Number(value));
     setTempRadianValue((Number(value) * Math.PI) / 180);
   };
 
   useEffect(() => {
-    externalUpdate();
+    this.externalUpdate();
   }, [update]);
 
-  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     let value = event.target.value == "" ? 0 : Number(event.target.value);
-    if (value > upperBound) {
-      value = upperBound;
-    } else if (value < lowerBound) {
-      value = lowerBound;
+    if (value > this.props.upperBound) {
+      value = this.props.upperBound;
+    } else if (value < this.props.lowerBound) {
+      value = this.props.lowerBound;
     }
-    changeValue(value);
+    this.props.dataDoc[this.props.prop] = value
     setTempValue(event.target.value == "" ? event.target.value : value);
     setTempRadianValue((value * Math.PI) / 180);
     if (effect) {
@@ -85,14 +83,14 @@ export const InputField = (props: IInputProps) => {
     }
   };
 
-  const onChangeRadianValue = (event: React.ChangeEvent<HTMLInputElement>) => {
+  onChangeRadianValue = (event: React.ChangeEvent<HTMLInputElement>) => {
     let value = event.target.value === "" ? 0 : Number(event.target.value);
     if (value > 2 * Math.PI) {
       value = 2 * Math.PI;
     } else if (value < 0) {
       value = 0;
     }
-    changeValue((value * 180) / Math.PI);
+    this.props.dataDoc[this.props.prop] = (value * 180) / Math.PI
     setTempValue((value * 180) / Math.PI);
     setTempRadianValue(value);
     if (effect) {