@jbrowse/plugin-config
Version:
JBrowse 2 config utilities
54 lines (53 loc) • 2.31 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { InputLabel, TextField } from '@mui/material';
import { observer } from 'mobx-react';
import { makeStyles } from 'tss-react/mui';
const fontSize = '12px';
const fontFamily = 'Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace';
const useStyles = makeStyles()(theme => ({
error: {
color: 'red',
fontSize: '0.8em',
},
callbackEditor: {
fontFamily,
fontSize,
background: theme.palette.background.default,
width: 800,
marginTop: '16px',
border: '1px solid rgba(0,0,0,0.42)',
},
callbackContainer: {
width: '100%',
overflowX: 'auto',
},
textAreaFont: {
fontFamily,
},
}));
const JsonEditor = observer(function JsonEditor({ slot, }) {
const { classes } = useStyles();
const [contents, setContents] = useState(JSON.stringify(slot.value, null, 2));
const [error, setError] = useState();
useEffect(() => {
try {
setError(undefined);
slot.set(JSON.parse(contents));
}
catch (e) {
console.error({ e });
setError(e);
}
}, [contents, slot]);
return (_jsxs(_Fragment, { children: [error ? _jsx("p", { className: classes.error, children: `${error}` }) : null, _jsxs("div", { className: classes.callbackContainer, children: [_jsx(InputLabel, { shrink: true, htmlFor: "json-editor", children: slot.name }), _jsx(TextField, { id: "json-editor", className: classes.callbackEditor, value: contents, helperText: slot.description, multiline: true, onChange: event => {
setContents(event.target.value);
}, style: { background: error ? '#fdd' : undefined }, slotProps: {
input: {
classes: {
input: classes.textAreaFont,
},
},
} })] })] }));
});
export default JsonEditor;