diff options
| -rw-r--r-- | src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx | 90 |
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> - ); + } }; |