@alicloud/console-components-truncate/esm/components/Tooltip.js

React component for Alibaba Cloud.

import { __assign } from 'tslib';
import React, { useMemo } from 'react';
import classnames from 'classnames';
import { Balloon } from '@alicloud/console-components';
import { TOOLTIP_POPUP_CLASS_NAME, ORIGINAL_CONTENT_CLASS_NAME } from '../constants.js';

function Tooltip(props) {
  var showTooltip = props.showTooltip,
    tooltipMaxWidth = props.tooltipMaxWidth,
    align = props.align,
    originalContent = props.originalContent,
    truncatedContent = props.truncatedContent,
    _a = props.popupStyle,
    popupStyle = _a === void 0 ? {} : _a,
    _b = props.popupClassName,
    popupClassName = _b === void 0 ? '' : _b,
    patchPopupProps = props.patchPopupProps;
  var balloonProps = useMemo(function () {
    var actualPopupStyle = __assign({}, popupStyle);
    if (showTooltip && typeof tooltipMaxWidth === 'number' && tooltipMaxWidth > 0) {
      actualPopupStyle.maxWidth = tooltipMaxWidth;
    }
    var originalProps = {
      trigger: truncatedContent,
      align: align,
      popupStyle: actualPopupStyle,
      popupClassName: classnames(TOOLTIP_POPUP_CLASS_NAME, popupClassName),
      alignEdge: true,
      needAdjust: true,
      closable: false
    };
    if (!showTooltip) {
      // showTooltip:true时，使用balloon默认的非受控模式；
      // showTooltip:false时，使用balloon的受控模式来阻止弹层
      originalProps.visible = false;
    }
    return !patchPopupProps ? originalProps : patchPopupProps(originalProps);
  }, [showTooltip, tooltipMaxWidth, align, truncatedContent, popupStyle, popupClassName, patchPopupProps]);
  return /*#__PURE__*/React.createElement(Balloon, __assign({}, balloonProps), /*#__PURE__*/React.createElement("span", {
    style: {
      display: 'inline-block'
    },
    className: ORIGINAL_CONTENT_CLASS_NAME
  }, originalContent));
}

export { Tooltip as default };