@grafana/ui/dist/cjs/components/Slider/HandleTooltip.cjs

Grafana Components Library

'use strict';

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var Tooltip = require('@rc-component/tooltip');
var React = require('react');
var ThemeContext = require('../../themes/ThemeContext.cjs');

function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

var Tooltip__default = /*#__PURE__*/_interopDefaultCompat(Tooltip);

"use strict";
const HandleTooltip = (props) => {
  const { value, children, visible, placement, tipFormatter, ...restProps } = props;
  const tooltipRef = React.useRef(null);
  const rafRef = React.useRef(null);
  const styles = ThemeContext.useStyles2(tooltipStyles);
  function cancelKeepAlign() {
    if (rafRef.current !== null) {
      cancelAnimationFrame(rafRef.current);
    }
  }
  function keepAlign() {
    rafRef.current = requestAnimationFrame(() => {
      var _a;
      (_a = tooltipRef.current) == null ? void 0 : _a.forceAlign();
    });
  }
  React.useEffect(() => {
    if (visible) {
      keepAlign();
    } else {
      cancelKeepAlign();
    }
    return cancelKeepAlign;
  }, [value, visible]);
  return /* @__PURE__ */ jsxRuntime.jsx(
    Tooltip__default.default,
    {
      classNames: {
        container: styles.container,
        root: styles.tooltip
      },
      placement,
      overlay: tipFormatter != null ? tipFormatter : value,
      ref: tooltipRef,
      visible,
      ...restProps,
      children
    }
  );
};
const tooltipStyles = (theme) => {
  return {
    tooltip: css.css({
      position: "absolute",
      display: "block",
      visibility: "visible",
      fontSize: theme.typography.bodySmall.fontSize,
      opacity: 0.9,
      padding: 3,
      zIndex: theme.zIndex.tooltip
    }),
    container: css.css({
      minHeight: "auto"
    })
  };
};

module.exports = HandleTooltip;
//# sourceMappingURL=HandleTooltip.cjs.map