preact-arco-design/es/Tooltip/index.js

Arco Design React UI Library.

var __assign = this && this.__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];

      for (var p in s) {
        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
      }
    }

    return t;
  };

  return __assign.apply(this, arguments);
};

var __rest = this && this.__rest || function (s, e) {
  var t = {};

  for (var p in s) {
    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  }

  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};

import React, { forwardRef, useContext, useRef, useImperativeHandle } from "preact/compat";
import cs from "../_util/classNames";
import Trigger, { EventsByTriggerNeed } from "../Trigger";
import { ConfigContext } from "../ConfigProvider";
import pick from "../_util/pick";
import useMergeProps from "../_util/hooks/useMergeProps";
import { isFunction } from "../_util/is";
var defaultProps = {
  position: 'top',
  trigger: 'hover',
  escToClose: false,
  unmountOnExit: true,
  blurToHide: true,
  popupHoverStay: true
};

function Tooltip(baseProps, ref) {
  var _a = useContext(ConfigContext),
      getPrefixCls = _a.getPrefixCls,
      componentConfig = _a.componentConfig;

  var props = useMergeProps(baseProps, defaultProps, componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.Tooltip);

  var style = props.style,
      className = props.className,
      children = props.children,
      trigger = props.trigger,
      escToClose = props.escToClose,
      defaultPopupVisible = props.defaultPopupVisible,
      position = props.position,
      unmountOnExit = props.unmountOnExit,
      popupVisible = props.popupVisible,
      tooltipPrefixCls = props.prefixCls,
      blurToHide = props.blurToHide,
      popupHoverStay = props.popupHoverStay,
      disabled = props.disabled,
      onVisibleChange = props.onVisibleChange,
      triggerProps = props.triggerProps,
      childrenPrefix = props.childrenPrefix,
      getPopupContainer = props.getPopupContainer,
      content = props.content,
      mini = props.mini,
      color = props.color,
      rest = __rest(props, ["style", "className", "children", "trigger", "escToClose", "defaultPopupVisible", "position", "unmountOnExit", "popupVisible", "prefixCls", "blurToHide", "popupHoverStay", "disabled", "onVisibleChange", "triggerProps", "childrenPrefix", "getPopupContainer", "content", "mini", "color"]);

  var refTrigger = useRef();

  var updatePopupPosition = function updatePopupPosition(delay, callback) {
    if (delay === void 0) {
      delay = 0;
    }

    refTrigger.current && refTrigger.current.updatePopupPosition(delay, callback);
  };

  useImperativeHandle(ref, function () {
    return {
      updatePopupPosition: updatePopupPosition
    };
  }, []);
  var prefixCls = tooltipPrefixCls || getPrefixCls('tooltip');

  var otherProps = __assign(__assign({}, pick(rest, EventsByTriggerNeed)), triggerProps);

  var renderedContent = isFunction(content) ? content() : content; // it is important to note that this method has its limitations
  // it fails in cases such as content = <>&nbsp;&nbsp;</>

  var isEmpty = function isEmpty(content) {
    if (content === null || content === undefined || content === false) {
      return true;
    }

    if (typeof content === 'string' && content.trim() === '') {
      return true;
    }

    return false;
  };

  if ('popupVisible' in props) {
    otherProps.popupVisible = popupVisible;
  } else if (isEmpty(renderedContent)) {
    // hide if empty content
    otherProps.popupVisible = false;
  }

  if (otherProps.showArrow !== false || otherProps.arrowProps) {
    otherProps.arrowProps = otherProps.arrowProps || {};

    if (color) {
      otherProps.arrowProps.style = __assign({
        backgroundColor: color
      }, otherProps.arrowProps.style);
    }
  }

  return React.createElement(Trigger, __assign({
    style: __assign({
      maxWidth: 350
    }, style),
    className: className,
    ref: refTrigger,
    classNames: "zoomInFadeOut",
    duration: {
      enter: 300,
      exit: 100
    },
    popup: function popup() {
      var _a;

      return React.createElement("div", {
        style: {
          backgroundColor: color
        },
        className: cs("".concat(prefixCls, "-content"), "".concat(prefixCls, "-content-").concat(position), (_a = {}, _a["".concat(prefixCls, "-mini")] = mini, _a)),
        role: "tooltip"
      }, React.createElement("div", {
        className: "".concat(prefixCls, "-content-inner")
      }, renderedContent));
    },
    position: position,
    disabled: disabled,
    trigger: trigger,
    escToClose: escToClose,
    showArrow: true,
    popupAlign: {
      left: 12,
      right: 12,
      top: 12,
      bottom: 12
    },
    mouseEnterDelay: 200,
    mouseLeaveDelay: 200,
    unmountOnExit: unmountOnExit,
    popupHoverStay: popupHoverStay,
    blurToHide: blurToHide,
    childrenPrefix: childrenPrefix || prefixCls,
    getPopupContainer: getPopupContainer,
    onVisibleChange: onVisibleChange,
    defaultPopupVisible: defaultPopupVisible
  }, otherProps), children);
}

var TooltipComponent = forwardRef(Tooltip);
TooltipComponent.displayName = 'Tooltip';
export default TooltipComponent;