@confi/conflux-react-ui-test-package/esm/tooltip/tooltip-content.js

Modern and minimalist React UI library.

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _extends from "@babel/runtime/helpers/esm/extends";
import _JSXStyle from "styled-jsx/style";
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import useTheme from '../styles/use-theme';
import usePortal from '../utils/use-portal';
import useResize from '../utils/use-resize';
import CSSTransition from '../shared/css-transition';
import useClickAnyWhere from '../utils/use-click-anywhere';
import { getColors } from './styles';
import { getPosition, defaultTooltipPosition } from './placement';
import TooltipIcon from './tooltip-icon';
var defaultRect = {
  top: -1000,
  left: -1000,
  right: -1000,
  bottom: -1000,
  width: 0,
  height: 0
};

var getRect = function getRect(ref) {
  if (!ref || !ref.current) return defaultRect;
  var rect = ref.current.getBoundingClientRect();
  return _extends(_extends({}, rect), {}, {
    width: rect.width || rect.right - rect.left,
    height: rect.height || rect.bottom - rect.top,
    top: rect.top + document.documentElement.scrollTop,
    bottom: rect.bottom + document.documentElement.scrollTop,
    left: rect.left + document.documentElement.scrollLeft,
    right: rect.right + document.documentElement.scrollLeft
  });
};

var TooltipContent = function TooltipContent(_ref) {
  var children = _ref.children,
      parent = _ref.parent,
      visible = _ref.visible,
      offset = _ref.offset,
      placement = _ref.placement,
      type = _ref.type,
      className = _ref.className,
      hideArrow = _ref.hideArrow;
  var theme = useTheme();
  var el = usePortal('tooltip');
  var selfRef = useRef(null);

  var _useState = useState(defaultTooltipPosition),
      _useState2 = _slicedToArray(_useState, 2),
      rect = _useState2[0],
      setRect = _useState2[1];

  var colors = useMemo(function () {
    return getColors(type, theme.palette);
  }, [type, theme.palette]);
  var hasShadow = type === 'default';
  if (!parent) return null;

  var updateRect = function updateRect() {
    var position = getPosition(placement, getRect(parent), offset);
    setRect(position);
  };

  useResize(updateRect);
  useClickAnyWhere(function () {
    return updateRect();
  });
  useEffect(function () {
    updateRect();
  }, [visible]);

  var preventHandler = function preventHandler(event) {
    event.stopPropagation();
    event.nativeEvent.stopImmediatePropagation();
  };

  if (!el) return null;
  return createPortal( /*#__PURE__*/React.createElement(CSSTransition, {
    visible: visible
  }, /*#__PURE__*/React.createElement("div", {
    ref: selfRef,
    onClick: preventHandler,
    className: _JSXStyle.dynamic([["1075003048", [rect.top, rect.left, rect.transform, colors.bgColor, colors.color, theme.layout.radius, hasShadow ? theme.expressiveness.shadowMedium : 'none', theme.layout.gapHalf, theme.layout.gap]]]) + " " + "tooltip-content ".concat(className)
  }, /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["1075003048", [rect.top, rect.left, rect.transform, colors.bgColor, colors.color, theme.layout.radius, hasShadow ? theme.expressiveness.shadowMedium : 'none', theme.layout.gapHalf, theme.layout.gap]]]) + " " + "inner"
  }, !hideArrow && /*#__PURE__*/React.createElement(TooltipIcon, {
    placement: placement,
    bgColor: colors.bgColor,
    shadow: hasShadow
  }), children), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "1075003048",
    dynamic: [rect.top, rect.left, rect.transform, colors.bgColor, colors.color, theme.layout.radius, hasShadow ? theme.expressiveness.shadowMedium : 'none', theme.layout.gapHalf, theme.layout.gap]
  }, ".tooltip-content.__jsx-style-dynamic-selector{position:absolute;width:auto;top:".concat(rect.top, ";left:").concat(rect.left, ";-webkit-transform:").concat(rect.transform, ";-ms-transform:").concat(rect.transform, ";transform:").concat(rect.transform, ";background-color:").concat(colors.bgColor, ";color:").concat(colors.color, ";border-radius:").concat(theme.layout.radius, ";padding:0;z-index:1000;box-shadow:").concat(hasShadow ? theme.expressiveness.shadowMedium : 'none', ";}.inner.__jsx-style-dynamic-selector{padding:").concat(theme.layout.gapHalf, " ").concat(theme.layout.gap, ";position:relative;}")))), el);
};

export default TooltipContent;