@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 _element = require("@wordpress/element");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _classnames = _interopRequireDefault(require("classnames"));

var _rangeControlStyles = require("./styles/range-control-styles");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const TOOLTIP_OFFSET_HEIGHT = 32;

function SimpleTooltip({
  className,
  inputRef,
  position: positionProp = 'auto',
  show = false,
  style = {},
  value = 0,
  renderTooltipContent = v => v,
  zIndex = 100,
  ...restProps
}) {
  const position = useTooltipPosition({
    inputRef,
    position: positionProp
  });
  const classes = (0, _classnames.default)('components-simple-tooltip', className);
  const styles = { ...style,
    zIndex
  };
  return (0, _element.createElement)(_rangeControlStyles.Tooltip, (0, _extends2.default)({}, restProps, {
    "aria-hidden": show,
    className: classes,
    position: position,
    show: show,
    role: "tooltip",
    style: styles
  }), renderTooltipContent(value));
}

function useTooltipPosition({
  inputRef,
  position: positionProp
}) {
  const [position, setPosition] = (0, _element.useState)('top');
  const calculatePosition = (0, _element.useCallback)(() => {
    if (inputRef && inputRef.current) {
      let nextPosition = positionProp;

      if (positionProp === 'auto') {
        const {
          top
        } = inputRef.current.getBoundingClientRect();
        const isOffscreenTop = top - TOOLTIP_OFFSET_HEIGHT < 0;
        nextPosition = isOffscreenTop ? 'bottom' : 'top';
      }

      setPosition(nextPosition);
    }
  }, [positionProp]);
  (0, _element.useEffect)(() => {
    calculatePosition();
  }, [calculatePosition]);
  (0, _element.useEffect)(() => {
    window.addEventListener('resize', calculatePosition);
    return () => {
      window.removeEventListener('resize', calculatePosition);
    };
  });
  return position;
}
//# sourceMappingURL=tooltip.js.map