Spaces:
Running
Running
File size: 3,473 Bytes
227c43a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Button, Form } from 'react-bootstrap';
const PluginParameterForm = ({ parameters, initialValues, onSubmit, loading }) => {
const [values, setValues] = useState(initialValues || {});
const [errors, setErrors] = useState({});
const handleChange = (e, param) => {
const { name, value, type, checked } = e.target;
setValues((prev) => ({
...prev,
[name]: type === 'checkbox' ? checked : value,
}));
};
const handleSubmit = (e) => {
e.preventDefault();
setErrors({});
onSubmit(values);
};
return (
<Form onSubmit={handleSubmit} className="plugin-parameter-form">
{parameters.map((param) => (
<Form.Group className="mb-3" controlId={`param-${param.name}`} key={param.name}>
<Form.Label>{param.description || param.name} {param.type === 'int' && <span className="text-muted">(int{param.min !== undefined ? `, min: ${param.min}` : ''}{param.max !== undefined ? `, max: ${param.max}` : ''})</span>} {param.type === 'float' && <span className="text-muted">(float{param.min !== undefined ? `, min: ${param.min}` : ''}{param.max !== undefined ? `, max: ${param.max}` : ''})</span>}</Form.Label>
{param.type === 'int' || param.type === 'float' ? (
<Form.Control
type="number"
name={param.name}
value={values[param.name] ?? param.default ?? ''}
min={param.min}
max={param.max}
step={param.type === 'float' ? 'any' : '1'}
onChange={(e) => handleChange(e, param)}
required={param.default === undefined}
/>
) : param.type === 'bool' ? (
<Form.Check
type="checkbox"
name={param.name}
label="Yes"
checked={!!values[param.name]}
onChange={(e) => handleChange(e, param)}
/>
) : param.type === 'select' ? (
<Form.Select
name={param.name}
value={values[param.name] ?? param.default ?? ''}
onChange={(e) => handleChange(e, param)}
>
{param.options.map((opt) => (
<option value={opt} key={opt}>{opt}</option>
))}
</Form.Select>
) : (
<Form.Control
type="text"
name={param.name}
value={values[param.name] ?? param.default ?? ''}
maxLength={param.max_length}
onChange={(e) => handleChange(e, param)}
required={param.default === undefined}
/>
)}
{errors[param.name] && <Form.Text className="text-danger">{errors[param.name]}</Form.Text>}
</Form.Group>
))}
<Button variant="primary" type="submit" disabled={loading} className="w-100 mb-2">
{loading ? 'Running...' : 'Run Simulation'}
</Button>
<Button variant="outline-secondary" type="button" className="w-100" onClick={() => setValues(initialValues || {})}>
Reset Parameters
</Button>
</Form>
);
};
PluginParameterForm.propTypes = {
parameters: PropTypes.array.isRequired,
initialValues: PropTypes.object,
onSubmit: PropTypes.func.isRequired,
loading: PropTypes.bool,
};
export default PluginParameterForm; |