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

UI components for WordPress.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@wordpress/element";

/**
 * External dependencies
 */
import classnames from 'classnames';
/**
 * WordPress dependencies
 */

import { useCallback, useEffect, useState } from '@wordpress/element';
/**
 * Internal dependencies
 */

import { Tooltip } from './styles/range-control-styles';
export default 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 = classnames('components-simple-tooltip', className);
  const styles = { ...style,
    zIndex
  };
  return createElement(Tooltip, _extends({}, restProps, {
    "aria-hidden": show,
    className: classes,
    position: position,
    show: show,
    role: "tooltip",
    style: styles
  }), renderTooltipContent(value));
}

function useTooltipPosition(_ref) {
  let {
    inputRef,
    tooltipPosition
  } = _ref;
  const [position, setPosition] = useState();
  const setTooltipPosition = useCallback(() => {
    if (inputRef && inputRef.current) {
      setPosition(tooltipPosition);
    }
  }, [tooltipPosition, inputRef]);
  useEffect(() => {
    setTooltipPosition();
  }, [setTooltipPosition]);
  useEffect(() => {
    window.addEventListener('resize', setTooltipPosition);
    return () => {
      window.removeEventListener('resize', setTooltipPosition);
    };
  });
  return position;
}
//# sourceMappingURL=tooltip.js.map