@vx/tooltip/esm/tooltips/TooltipWithBounds.js

vx tooltip

import _pt from "prop-types";

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import React from 'react';
import { withBoundingRects } from '@vx/bounds';
import Tooltip, { defaultStyles } from './Tooltip';

function TooltipWithBounds(_ref) {
  var _ref$left = _ref.left,
      initialLeft = _ref$left === void 0 ? 0 : _ref$left,
      _ref$top = _ref.top,
      initialTop = _ref$top === void 0 ? 0 : _ref$top,
      _ref$offsetLeft = _ref.offsetLeft,
      offsetLeft = _ref$offsetLeft === void 0 ? 10 : _ref$offsetLeft,
      _ref$offsetTop = _ref.offsetTop,
      offsetTop = _ref$offsetTop === void 0 ? 10 : _ref$offsetTop,
      children = _ref.children,
      ownBounds = _ref.rect,
      parentBounds = _ref.parentRect,
      getRects = _ref.getRects,
      _ref$style = _ref.style,
      style = _ref$style === void 0 ? defaultStyles : _ref$style,
      _ref$unstyled = _ref.unstyled,
      unstyled = _ref$unstyled === void 0 ? false : _ref$unstyled,
      otherProps = _objectWithoutPropertiesLoose(_ref, ["left", "top", "offsetLeft", "offsetTop", "children", "rect", "parentRect", "getRects", "style", "unstyled"]);

  var left = initialLeft;
  var top = initialTop;

  if (ownBounds && parentBounds) {
    var placeTooltipLeft = offsetLeft + ownBounds.right > parentBounds.right || offsetLeft + ownBounds.right > window.innerWidth;
    var placeTooltipUp = offsetTop + ownBounds.bottom > parentBounds.bottom || offsetTop + ownBounds.bottom > window.innerHeight;
    left = placeTooltipLeft ? left - ownBounds.width - offsetLeft : left + offsetLeft;
    top = placeTooltipUp ? top - ownBounds.height - offsetTop : top + offsetTop;
  }

  left = Math.round(left);
  top = Math.round(top);
  return /*#__PURE__*/React.createElement(Tooltip, _extends({
    style: _extends({
      top: 0,
      left: 0,
      transform: "translate(" + left + "px, " + top + "px)"
    }, !unstyled && style),
    unstyled: unstyled
  }, otherProps), children);
}

TooltipWithBounds.propTypes = {
  offsetLeft: _pt.number,
  offsetTop: _pt.number
};
export default withBoundingRects(TooltipWithBounds);