@jbrowse/core
Version:
JBrowse 2 core libraries used by plugins
25 lines (24 loc) • 1.06 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { Tooltip } from '@mui/material';
import { cx, makeStyles } from "../../util/tss-react/index.js";
const useStyles = makeStyles()(theme => ({
fieldDescription: {
'&:hover': {
background: theme.palette.mode === 'dark' ? '#e65100' : 'yellow',
},
},
fieldName: {
wordBreak: 'break-all',
minWidth: 90,
borderBottom: '1px solid #0003',
fontSize: 12,
background: theme.palette.action.disabledBackground,
marginRight: theme.spacing(1),
padding: theme.spacing(0.5),
},
}));
export default function FieldName({ description, name, width, prefix = [], }) {
const { classes } = useStyles();
const val = [...prefix, name].join('.');
return description ? (_jsx(Tooltip, { title: description, placement: "left", children: _jsx("div", { className: cx(classes.fieldDescription, classes.fieldName), children: val }) })) : (_jsx("div", { className: classes.fieldName, style: { width: width }, children: val }));
}