pouncejs/dist/cjs/components/Tooltip/Tooltip.js

A collection of UI components from Panther labs

"use strict";

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

exports.__esModule = true;
exports.default = void 0;

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

var _react = _interopRequireDefault(require("react"));

var _tooltip = require("@reach/tooltip");

var _reactSpring = require("react-spring");

var _useAlignment = require("../../utils/useAlignment");

var _Box = _interopRequireDefault(require("../Box"));

var AnimatedTooltipPopup = (0, _reactSpring.animated)(_tooltip.TooltipPopup);

var DefaultWrapper = function DefaultWrapper(_ref) {
  var children = _ref.children;
  return /*#__PURE__*/_react.default.createElement(_Box.default, {
    borderRadius: "medium",
    bg: "navyblue-300",
    p: 4,
    m: 2,
    fontSize: "small",
    boxShadow: "dark250"
  }, children);
};

/** A tooltip is a helper that shows some helping text when hovering or clicking something */
var Tooltip = /*#__PURE__*/_react.default.forwardRef(function Tooltip(_ref2, ref) {
  var content = _ref2.content,
      _ref2$alignment = _ref2.alignment,
      alignment = _ref2$alignment === void 0 ? 'right-center' : _ref2$alignment,
      _ref2$wrapper = _ref2.wrapper,
      wrapper = _ref2$wrapper === void 0 ? DefaultWrapper : _ref2$wrapper,
      children = _ref2.children;

  var _useTooltip = (0, _tooltip.useTooltip)(),
      trigger = _useTooltip[0],
      triggerRect = _useTooltip[1].triggerRect,
      isVisible = _useTooltip[2];

  var alignmentFunction = (0, _useAlignment.useAlignmentFunction)(alignment);
  var transitions = (0, _reactSpring.useTransition)(isVisible, null, {
    from: {
      opacity: 0,
      transform: 'scale(0.95, 0.95)'
    },
    enter: {
      opacity: 1,
      transform: 'scale(1, 1)'
    },
    leave: {
      opacity: 0,
      transform: 'scale(0.95, 0.95)'
    },
    config: {
      duration: 150
    }
  });

  var childrenWithHandler = _react.default.useMemo(function () {
    return /*#__PURE__*/_react.default.cloneElement(children, trigger);
  }, [children, trigger]);

  var Wrapper = wrapper;
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, childrenWithHandler, transitions.map(function (_ref3) {
    var item = _ref3.item,
        key = _ref3.key,
        styles = _ref3.props;
    return item && /*#__PURE__*/_react.default.createElement(AnimatedTooltipPopup, {
      triggerRect: triggerRect,
      isVisible: item,
      key: key,
      style: (0, _extends2.default)({}, styles, {
        zIndex: 11,
        position: 'absolute'
      }),
      ref: ref,
      position: alignmentFunction,
      as: 'div',
      label: /*#__PURE__*/_react.default.createElement(Wrapper, null, content)
    });
  }));
});

var _default = /*#__PURE__*/_react.default.memo(Tooltip);

exports.default = _default;