122 lines
4.4 KiB
JavaScript
122 lines
4.4 KiB
JavaScript
import React, {useEffect, useState} from "react";
|
|
import TypeEditor from "./TypeEditor";
|
|
|
|
const ParametersManager = ({ parameters, onChange }) => {
|
|
const [_parameters, setParameters] = useState(parameters || []);
|
|
const [expandedStates, setExpandedStates] = useState({});
|
|
|
|
const handleAdd = () => {
|
|
const updated = [
|
|
..._parameters,
|
|
{
|
|
name: "",
|
|
type: {
|
|
base_type: "string",
|
|
definition: {}
|
|
}
|
|
}
|
|
];
|
|
setParameters(updated);
|
|
onChange(updated);
|
|
};
|
|
|
|
const handleTypeChange = (index, newType) => {
|
|
const updated = [..._parameters];
|
|
if (newType.base_type === "list" && !newType.extend_type) {
|
|
newType.extend_type = {
|
|
base_type: "string",
|
|
definition: {}
|
|
};
|
|
}
|
|
updated[index].type = newType;
|
|
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);
|
|
};
|
|
|
|
const toggleExpand = (index) => {
|
|
setExpandedStates(prev => ({
|
|
...prev,
|
|
[index]: !prev[index]
|
|
}));
|
|
};
|
|
|
|
return (
|
|
<div className="box">
|
|
<div className="field">
|
|
<div className="control">
|
|
<button className="button is-primary" onClick={handleAdd}>
|
|
Add Parameter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div style={{ maxHeight: "50vh", overflowY: "auto" }}>
|
|
{_parameters.map((param, index) => (
|
|
<div key={index} className="box" style={{ marginBottom: "0.5rem" }}>
|
|
<div className="field is-grouped is-align-items-end">
|
|
<div className="control">
|
|
<label className="label">Name:</label>
|
|
</div>
|
|
<div className="control is-expanded">
|
|
<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">
|
|
<div className="is-flex is-justify-content-space-between is-align-items-center mb-1">
|
|
<label className="label mb-0">Type:</label>
|
|
<button
|
|
className="button is-small"
|
|
onClick={() => toggleExpand(index)}
|
|
>
|
|
{expandedStates[index] ? "-" : "+"}
|
|
</button>
|
|
</div>
|
|
{expandedStates[index] && (
|
|
<div className="control">
|
|
<TypeEditor
|
|
type={param.type}
|
|
onChange={(newType) => handleTypeChange(index, newType)}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ParametersManager;
|