pouncejs/dist/esm/components/Tooltip/Tooltip.js

A collection of UI components from Panther labs

import _extends from "@babel/runtime/helpers/extends";
import React from 'react';
import { useTooltip, TooltipPopup } from '@reach/tooltip';
import { useTransition, animated } from 'react-spring';
import { useAlignmentFunction } from '../../utils/useAlignment';
import Box from '../Box';
var AnimatedTooltipPopup = animated(TooltipPopup);

var DefaultWrapper = function DefaultWrapper(_ref) {
  var children = _ref.children;
  return /*#__PURE__*/React.createElement(Box, {
    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.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 = useTooltip(),
      trigger = _useTooltip[0],
      triggerRect = _useTooltip[1].triggerRect,
      isVisible = _useTooltip[2];

  var alignmentFunction = useAlignmentFunction(alignment);
  var transitions = 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.useMemo(function () {
    return /*#__PURE__*/React.cloneElement(children, trigger);
  }, [children, trigger]);
  var Wrapper = wrapper;
  return /*#__PURE__*/React.createElement(React.Fragment, null, childrenWithHandler, transitions.map(function (_ref3) {
    var item = _ref3.item,
        key = _ref3.key,
        styles = _ref3.props;
    return item && /*#__PURE__*/React.createElement(AnimatedTooltipPopup, {
      triggerRect: triggerRect,
      isVisible: item,
      key: key,
      style: _extends({}, styles, {
        zIndex: 11,
        position: 'absolute'
      }),
      ref: ref,
      position: alignmentFunction,
      as: 'div',
      label: /*#__PURE__*/React.createElement(Wrapper, null, content)
    });
  }));
});
export default /*#__PURE__*/React.memo(Tooltip);