Jerald-Golden-B
74094aee9f
- Implemented `useAssemblyHandler` to manage assembly actions for humans. - Enhanced `useHumanActions` to include assembly action handling. - Updated `HumanInstance` to support assembly processes and animations. - Modified `HumanUi` to allow for assembly point configuration and rotation. - Created `AssemblyAction` component for setting process time and material swap options. - Updated simulation types to include assembly action properties. - Adjusted existing action handlers to accommodate assembly actions alongside worker actions. - Refactored `MaterialAnimator` and `VehicleAnimator` to manage attachment states and visibility based on load. - Updated product store types to include human point actions.
93 lines
2.5 KiB
TypeScript
93 lines
2.5 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import * as CONSTANTS from "../../../types/world/worldConstants";
|
|
interface InputToggleProps {
|
|
label: string; // Represents the toggle state (on/off)
|
|
min?: number;
|
|
max?: number;
|
|
onClick?: () => void; // Function to handle toggle clicks
|
|
onChange?: (value: number) => void; // Function to handle toggle clicks
|
|
disabled?: boolean;
|
|
value?: number;
|
|
onPointerUp?: (value: number) => void;
|
|
}
|
|
|
|
const InputRange: React.FC<InputToggleProps> = ({
|
|
label,
|
|
onClick,
|
|
onChange,
|
|
min,
|
|
max,
|
|
disabled,
|
|
value,
|
|
onPointerUp,
|
|
}) => {
|
|
const [rangeValue, setRangeValue] = useState<number>(value ? value : 5);
|
|
|
|
function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
|
|
const newValue = parseInt(e.target.value); // Parse the value to an integer
|
|
|
|
setRangeValue(newValue); // Update the local state
|
|
|
|
if (onChange) {
|
|
onChange(newValue); // Call the onChange function if it exists
|
|
}
|
|
}
|
|
useEffect(() => {
|
|
value && setRangeValue(value);
|
|
}, [value]);
|
|
function handlePointerUp(e: React.PointerEvent<HTMLInputElement>) {
|
|
const newValue = parseInt(e.currentTarget.value, 10); // Parse value correctly
|
|
|
|
if (onPointerUp) {
|
|
onPointerUp(newValue); // Call the callback function if it exists
|
|
}
|
|
}
|
|
function handlekey(e: React.KeyboardEvent<HTMLInputElement>) {
|
|
const newValue = parseInt(e.currentTarget.value, 10); // Parse value correctly
|
|
|
|
if (onPointerUp) {
|
|
onPointerUp(newValue); // Call the callback function if it exists
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="input-range-container">
|
|
<label
|
|
htmlFor={`range-input ${value}`}
|
|
className="label"
|
|
onClick={onClick}
|
|
>
|
|
{label}
|
|
</label>
|
|
<div className="input-container">
|
|
<input
|
|
id={`range-input ${value}`}
|
|
type="range"
|
|
min={min}
|
|
max={max}
|
|
onChange={handleChange}
|
|
disabled={disabled}
|
|
value={rangeValue}
|
|
onPointerUp={handlePointerUp}
|
|
/>
|
|
<input
|
|
type="number"
|
|
min={min}
|
|
className="input-value"
|
|
max={max}
|
|
value={rangeValue}
|
|
onChange={handleChange}
|
|
disabled={disabled}
|
|
onKeyUp={(e) => {
|
|
if (e.key === "ArrowUp" || e.key === "ArrowDown") {
|
|
handlekey(e);
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default InputRange;
|