66 lines
2.6 KiB
JavaScript
66 lines
2.6 KiB
JavaScript
import React, { useState } from "react";
|
|
|
|
const EnumsEditor = ({ enums, onChange }) => {
|
|
const [_enums, setEnums] = useState(enums || []);
|
|
|
|
return (
|
|
<div className="box">
|
|
<ul>
|
|
{_enums.map((item, index) => (
|
|
<li key={index} className="field has-addons" style={{ marginBottom: "0.5rem" }}>
|
|
<div className="control is-expanded">
|
|
<input
|
|
className="input is-small"
|
|
type="text"
|
|
value={item}
|
|
onChange={(e) => {
|
|
const updated = [..._enums];
|
|
updated[index] = e.target.value;
|
|
setEnums(updated);
|
|
onChange(updated);
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="control">
|
|
<button
|
|
className="button is-small is-danger"
|
|
type="button"
|
|
onClick={() => {
|
|
const updated = [..._enums];
|
|
updated.splice(index, 1);
|
|
setEnums(updated);
|
|
onChange(updated);
|
|
}}
|
|
>
|
|
<span className="icon is-small">
|
|
<i className="fas fa-times" />
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<div className="field">
|
|
<div className="control">
|
|
<button
|
|
className="button is-small is-primary"
|
|
type="button"
|
|
onClick={() => {
|
|
const updated = [..._enums, ""];
|
|
setEnums(updated);
|
|
onChange(updated);
|
|
}}
|
|
>
|
|
<span className="icon is-small">
|
|
<i className="fas fa-plus" />
|
|
</span>
|
|
<span>Add Enum</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default EnumsEditor;
|