@wordpress/components/build/range-control/tooltip.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = SimpleTooltip;
var _clsx = _interopRequireDefault(require("clsx"));
var _element = require("@wordpress/element");
var _rangeControlStyles = require("./styles/range-control-styles");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function SimpleTooltip(props) {
  const {
    className,
    inputRef,
    tooltipPosition,
    show = false,
    style = {},
    value = 0,
    renderTooltipContent = v => v,
    zIndex = 100,
    ...restProps
  } = props;
  const position = useTooltipPosition({
    inputRef,
    tooltipPosition
  });
  const classes = (0, _clsx.default)('components-simple-tooltip', className);
  const styles = {
    ...style,
    zIndex
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_rangeControlStyles.Tooltip, {
    ...restProps,
    "aria-hidden": "false",
    className: classes,
    position: position,
    show: show,
    role: "tooltip",
    style: styles,
    children: renderTooltipContent(value)
  });
}
function useTooltipPosition({
  inputRef,
  tooltipPosition
}) {
  const [position, setPosition] = (0, _element.useState)();
  const setTooltipPosition = (0, _element.useCallback)(() => {
    if (inputRef && inputRef.current) {
      setPosition(tooltipPosition);
    }
  }, [tooltipPosition, inputRef]);
  (0, _element.useEffect)(() => {
    setTooltipPosition();
  }, [setTooltipPosition]);
  (0, _element.useEffect)(() => {
    window.addEventListener('resize', setTooltipPosition);
    return () => {
      window.removeEventListener('resize', setTooltipPosition);
    };
  });
  return position;
}
//# sourceMappingURL=tooltip.js.map