UNPKG

@jbrowse/plugin-config

Version:

JBrowse 2 config utilities

35 lines (34 loc) 2.89 kB
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime"; import { useState } from 'react'; import DeleteIcon from '@mui/icons-material/Delete'; import { Button, FormHelperText, IconButton, InputAdornment, InputLabel, List, ListItem, TextField, } from '@mui/material'; import { observer } from 'mobx-react'; const StringArrayEditor = observer(function ({ slot, }) { const [value, setValue] = useState(''); const [addNew, setAddNew] = useState(false); return (_jsxs(_Fragment, { children: [slot.name ? _jsx(InputLabel, { children: slot.name }) : null, _jsxs(List, { disablePadding: true, children: [slot.value.map((val, idx) => (_jsx(ListItem, { disableGutters: true, children: _jsx(TextField, { value: val, onChange: evt => { slot.setAtIndex(idx, evt.target.value); }, slotProps: { input: { endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { onClick: () => { slot.removeAtIndex(idx); }, children: _jsx(DeleteIcon, {}) }) })), }, } }) }, `${JSON.stringify(val)}-${idx}`))), addNew ? (_jsx(ListItem, { disableGutters: true, children: _jsx(TextField, { value: value, placeholder: "add new", onChange: event => { setValue(event.target.value); }, slotProps: { input: { endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsxs(_Fragment, { children: [_jsx(Button, { color: "primary", variant: "contained", style: { margin: 2 }, "data-testid": `stringArrayAdd-${slot.name}`, onClick: () => { setAddNew(false); slot.add(value); setValue(''); }, children: "OK" }), _jsx(Button, { color: "primary", variant: "contained", style: { margin: 2 }, onClick: () => { setAddNew(false); setValue(''); }, children: "Cancel" })] }) })), }, } }) })) : null, _jsx(Button, { color: "primary", variant: "contained", style: { margin: 4 }, disabled: addNew, onClick: () => { setAddNew(true); }, children: "Add item" })] }), _jsx(FormHelperText, { children: slot.description })] })); }); export default StringArrayEditor;