@jbrowse/plugin-config
Version:
JBrowse 2 config utilities
56 lines (55 loc) • 2.52 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const material_1 = require("@mui/material");
const mobx_react_1 = require("mobx-react");
const mui_1 = require("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 = (0, mui_1.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 = (0, mobx_react_1.observer)(function JsonEditor({ slot, }) {
const { classes } = useStyles();
const [contents, setContents] = (0, react_1.useState)(JSON.stringify(slot.value, null, 2));
const [error, setError] = (0, react_1.useState)();
(0, react_1.useEffect)(() => {
try {
setError(undefined);
slot.set(JSON.parse(contents));
}
catch (e) {
console.error({ e });
setError(e);
}
}, [contents, slot]);
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [error ? (0, jsx_runtime_1.jsx)("p", { className: classes.error, children: `${error}` }) : null, (0, jsx_runtime_1.jsxs)("div", { className: classes.callbackContainer, children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { shrink: true, htmlFor: "json-editor", children: slot.name }), (0, jsx_runtime_1.jsx)(material_1.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,
},
},
} })] })] }));
});
exports.default = JsonEditor;