@jbrowse/plugin-config
Version:
JBrowse 2 config utilities
36 lines (35 loc) • 2.25 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 NumberEditor from './NumberEditor';
const useStyles = makeStyles()(theme => ({
card: {
marginTop: theme.spacing(1),
},
}));
const NumberMapEditor = 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(NumberEditor, { slot: {
value: val,
set: (val) => {
slot.add(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, 0);
setValue('');
}, children: _jsx(AddIcon, {}) }) })),
},
} }) }) }), _jsx(FormHelperText, { children: slot.description })] }));
});
export default NumberMapEditor;