@jbrowse/plugin-config
Version:
JBrowse 2 config utilities
44 lines (43 loc) • 2.74 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from 'react';
import AddIcon from '@mui/icons-material/Add';
import DeleteIcon from '@mui/icons-material/Delete';
import { Card, CardContent, CardHeader, FormHelperText, IconButton, InputAdornment, InputLabel, TextField, } from '@mui/material';
import { observer } from 'mobx-react';
import { makeStyles } from 'tss-react/mui';
import StringArrayEditor from './StringArrayEditor';
const useStyles = makeStyles()(theme => ({
card: {
marginTop: theme.spacing(1),
},
}));
const StringArrayMapEditor = observer(function ({ slot, }) {
const { classes } = useStyles();
const [value, setValue] = useState('');
return (_jsxs(_Fragment, { children: [_jsx(InputLabel, { children: slot.name }), [...slot.value].map(([key, val]) => (_jsxs(Card, { raised: true, className: classes.card, children: [_jsx(CardHeader, { title: key, action: _jsx(IconButton, { onClick: () => {
slot.remove(key);
}, children: _jsx(DeleteIcon, {}) }) }), _jsx(CardContent, { children: _jsx(StringArrayEditor, { slot: {
name: slot.name,
value: val,
description: `Values associated with entry ${key}`,
setAtIndex: (idx, val) => {
slot.setAtKeyIndex(key, idx, val);
},
removeAtIndex: (idx) => {
slot.removeAtKeyIndex(key, idx);
},
add: (val) => {
slot.addToKey(key, val);
},
} }) })] }, key))), _jsx(Card, { raised: true, className: classes.card, children: _jsx(CardHeader, { disableTypography: true, title: _jsx(TextField, { fullWidth: true, value: value, placeholder: "add new", onChange: event => {
setValue(event.target.value);
}, slotProps: {
input: {
endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { disabled: value === '', onClick: () => {
slot.add(value, []);
setValue('');
}, children: _jsx(AddIcon, {}) }) })),
},
} }) }) }), _jsx(FormHelperText, { children: slot.description })] }));
});
export default StringArrayMapEditor;