@jbrowse/plugin-config
Version:
JBrowse 2 config utilities
40 lines (39 loc) • 3.52 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const Delete_1 = __importDefault(require("@mui/icons-material/Delete"));
const material_1 = require("@mui/material");
const mobx_react_1 = require("mobx-react");
const StringArrayEditor = (0, mobx_react_1.observer)(function ({ slot, }) {
const [value, setValue] = (0, react_1.useState)('');
const [addNew, setAddNew] = (0, react_1.useState)(false);
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [slot.name ? (0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: slot.name }) : null, (0, jsx_runtime_1.jsxs)(material_1.List, { disablePadding: true, children: [slot.value.map((val, idx) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { disableGutters: true, children: (0, jsx_runtime_1.jsx)(material_1.TextField, { value: val, onChange: evt => {
slot.setAtIndex(idx, evt.target.value);
}, slotProps: {
input: {
endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => {
slot.removeAtIndex(idx);
}, children: (0, jsx_runtime_1.jsx)(Delete_1.default, {}) }) })),
},
} }) }, `${JSON.stringify(val)}-${idx}`))), addNew ? ((0, jsx_runtime_1.jsx)(material_1.ListItem, { disableGutters: true, children: (0, jsx_runtime_1.jsx)(material_1.TextField, { value: value, placeholder: "add new", onChange: event => {
setValue(event.target.value);
}, slotProps: {
input: {
endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { color: "primary", variant: "contained", style: { margin: 2 }, "data-testid": `stringArrayAdd-${slot.name}`, onClick: () => {
setAddNew(false);
slot.add(value);
setValue('');
}, children: "OK" }), (0, jsx_runtime_1.jsx)(material_1.Button, { color: "primary", variant: "contained", style: { margin: 2 }, onClick: () => {
setAddNew(false);
setValue('');
}, children: "Cancel" })] }) })),
},
} }) })) : null, (0, jsx_runtime_1.jsx)(material_1.Button, { color: "primary", variant: "contained", style: { margin: 4 }, disabled: addNew, onClick: () => {
setAddNew(true);
}, children: "Add item" })] }), (0, jsx_runtime_1.jsx)(material_1.FormHelperText, { children: slot.description })] }));
});
exports.default = StringArrayEditor;