88 lines
3.1 KiB
JavaScript
88 lines
3.1 KiB
JavaScript
import React, {useEffect, useState} from "react";
|
|
import TypeEditor from "./TypeEditor";
|
|
|
|
const ParametersManager = ({ parameters, onChange }) => {
|
|
const [_parameters, setParameters] = useState(parameters || []);
|
|
|
|
const handleAdd = () => {
|
|
const updated = [
|
|
..._parameters,
|
|
{
|
|
name: "",
|
|
type: { base_type: "string" }
|
|
}
|
|
];
|
|
setParameters(updated);
|
|
onChange(updated);
|
|
};
|
|
useEffect(() => {
|
|
setParameters(parameters);
|
|
}, [parameters]);
|
|
|
|
const handleNameChange = (index, newName) => {
|
|
const updated = [..._parameters];
|
|
updated[index].name = newName;
|
|
setParameters(updated);
|
|
onChange(updated);
|
|
};
|
|
|
|
const handleDelete = (index) => {
|
|
const updated = [..._parameters];
|
|
updated.splice(index, 1);
|
|
setParameters(updated);
|
|
onChange(updated);
|
|
};
|
|
|
|
return (
|
|
<div className="box">
|
|
<div className="field">
|
|
<div className="control">
|
|
<button className="button is-primary" onClick={handleAdd}>
|
|
Add Parameter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{_parameters.map((param, index) => (
|
|
<div key={index} className="box" style={{ marginBottom: "1rem" }}>
|
|
<div className="field is-grouped is-grouped-multiline">
|
|
<div className="control is-expanded">
|
|
<label className="label">Name:</label>
|
|
<input
|
|
type="text"
|
|
className="input"
|
|
value={param.name}
|
|
onChange={(e) => handleNameChange(index, e.target.value)}
|
|
placeholder="Parameter name"
|
|
/>
|
|
</div>
|
|
<div className="control">
|
|
<button
|
|
className="button is-danger"
|
|
onClick={() => handleDelete(index)}
|
|
>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="field">
|
|
<label className="label">Type:</label>
|
|
<div className="control">
|
|
<TypeEditor
|
|
type={param.type}
|
|
onChange={(newType) => {
|
|
const updated = [..._parameters];
|
|
updated[index].type = newType;
|
|
setParameters(updated);
|
|
onChange(updated);
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ParametersManager;
|