@jbrowse/core
Version:
JBrowse 2 core libraries used by plugins
47 lines (46 loc) • 2.14 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = BaseTooltip;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("@floating-ui/react");
const material_1 = require("@mui/material");
const mui_1 = require("tss-react/mui");
function round(value) {
return Math.round(value * 1e5) / 1e5;
}
const useStyles = (0, mui_1.makeStyles)()(theme => ({
tooltip: {
position: 'absolute',
pointerEvents: 'none',
backgroundColor: (0, material_1.alpha)(theme.palette.grey[700], 0.9),
borderRadius: theme.shape.borderRadius,
color: theme.palette.common.white,
fontFamily: theme.typography.fontFamily,
padding: '4px 8px',
fontSize: theme.typography.fontSize,
lineHeight: `${round(14 / 10)}em`,
maxWidth: 300,
wordWrap: 'break-word',
},
}));
function BaseTooltip({ clientPoint: clientPointCoords, children, placement = 'right', }) {
var _a, _b;
const theme = (0, material_1.useTheme)();
const popperTheme = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
const { classes } = useStyles();
const { refs, floatingStyles, context } = (0, react_1.useFloating)({
placement,
strategy: 'fixed',
middleware: [(0, react_1.offset)(5)],
});
const clientPoint = (0, react_1.useClientPoint)(context, clientPointCoords);
const { getFloatingProps } = (0, react_1.useInteractions)([clientPoint]);
return ((0, jsx_runtime_1.jsx)(material_1.Portal, { container: (_b = popperTheme === null || popperTheme === void 0 ? void 0 : popperTheme.defaultProps) === null || _b === void 0 ? void 0 : _b.container, children: (0, jsx_runtime_1.jsx)("div", { className: classes.tooltip, ref: refs.setFloating, style: {
...floatingStyles,
zIndex: 100000,
visibility: floatingStyles.transform === 'translate(0px, 0px)'
? 'hidden'
: undefined,
pointerEvents: 'none',
}, ...getFloatingProps(), children: children }) }));
}