Function ParameterInput

frontend/src/components/tool/ParameterForm.tsx:49–131

({ parameter, value, onChange }: ParameterInputProps)

}

function ParameterInput({ parameter, value, onChange }: ParameterInputProps) {
  const { type, name } = parameter;

  // Boolean type: checkbox
  if (type === 'boolean') {
    const [localChecked, setLocalChecked] = useState<boolean>(value === true || value === 'true');

    // Sync local state when value prop changes
    useEffect(() => {
      const newChecked = value === true || value === 'true';
      setLocalChecked(newChecked);
    }, [value]);

    return (
      <div className="flex items-center h-10">
        <Checkbox
          checked={localChecked}
          onCheckedChange={(checked) => {
            setLocalChecked(checked);
            onChange(checked);
          }}
        />
      </div>
    );
  }

  // Integer type: number input with step=1
  if (type === 'integer') {
    return (
      <Input
        type="number"
        step={1}
        value={value ?? ''}
        onChange={(e) => {
          const val = e.target.value;
          onChange(val === '' ? undefined : parseInt(val, 10));
        }}
        placeholder={`Enter ${name}`}
      />
    );
  }

  // Float type: number input with step=any
  if (type === 'float' || type === 'number') {
    return (
      <Input
        type="number"
        step="any"
        value={value ?? ''}
        onChange={(e) => {
          const val = e.target.value;
          onChange(val === '' ? undefined : parseFloat(val));
        }}
        placeholder={`Enter ${name}`}
      />
    );
  }