antd/es/tooltip/style/index.js

An enterprise-class UI design language and React components implementation

import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import { initZoomMotion } from '../../style/motion';
import { genComponentStyleHook, mergeToken, PresetColors } from '../../theme';
import { resetComponent } from '../../style';
import getArrowStyle, { MAX_VERTICAL_CONTENT_RADIUS } from '../../style/placementArrow';
var generatorTooltipPresetColor = function generatorTooltipPresetColor(token) {
  var componentCls = token.componentCls;
  return PresetColors.reduce(function (previousValue, currentValue) {
    var _previousValue;
    var lightColor = token[currentValue + "-6"];
    previousValue["&" + componentCls + "-" + currentValue] = (_previousValue = {}, _defineProperty(_previousValue, componentCls + "-inner", {
      backgroundColor: lightColor
    }), _defineProperty(_previousValue, componentCls + "-arrow", {
      '--antd-arrow-background-color': lightColor
    }), _previousValue);
    return previousValue;
  }, {});
};
var genTooltipStyle = function genTooltipStyle(token) {
  var _extends2;
  var componentCls = token.componentCls,
    tooltipMaxWidth = token.tooltipMaxWidth,
    tooltipColor = token.tooltipColor,
    tooltipBg = token.tooltipBg,
    tooltipBorderRadius = token.tooltipBorderRadius,
    zIndexPopup = token.zIndexPopup,
    controlHeight = token.controlHeight,
    boxShadowSecondary = token.boxShadowSecondary,
    paddingSM = token.paddingSM,
    paddingXS = token.paddingXS,
    tooltipRadiusOuter = token.tooltipRadiusOuter;
  return [_defineProperty({}, componentCls, _extends(_extends(_extends(_extends({}, resetComponent(token)), (_extends2 = {
    position: 'absolute',
    zIndex: zIndexPopup,
    display: 'block',
    '&': [{
      width: 'max-content'
    }, {
      width: 'intrinsic'
    }],
    maxWidth: tooltipMaxWidth,
    visibility: 'visible',
    '&-hidden': {
      display: 'none'
    },
    '--antd-arrow-background-color': tooltipBg
  }, _defineProperty(_extends2, componentCls + "-inner", {
    minWidth: controlHeight,
    minHeight: controlHeight,
    padding: paddingSM / 2 + "px " + paddingXS + "px",
    color: tooltipColor,
    textAlign: 'start',
    textDecoration: 'none',
    wordWrap: 'break-word',
    backgroundColor: tooltipBg,
    borderRadius: tooltipBorderRadius,
    boxShadow: boxShadowSecondary
  }), _defineProperty(_extends2, ["&-placement-left", "&-placement-leftTop", "&-placement-leftBottom", "&-placement-right", "&-placement-rightTop", "&-placement-rightBottom"].join(','), _defineProperty({}, componentCls + "-inner", {
    borderRadius: tooltipBorderRadius > MAX_VERTICAL_CONTENT_RADIUS ? MAX_VERTICAL_CONTENT_RADIUS : tooltipBorderRadius
  })), _defineProperty(_extends2, componentCls + "-content", {
    position: 'relative'
  }), _extends2)), generatorTooltipPresetColor(token)), {
    // RTL
    '&-rtl': {
      direction: 'rtl'
    }
  })),
  // Arrow Style
  getArrowStyle(mergeToken(token, {
    borderRadiusOuter: tooltipRadiusOuter
  }), {
    colorBg: 'var(--antd-arrow-background-color)',
    showArrowCls: '',
    contentRadius: tooltipBorderRadius,
    limitVerticalRadius: true
  }), // Pure Render
  _defineProperty({}, componentCls + "-pure", {
    position: 'relative',
    maxWidth: 'none'
  })];
};
// ============================== Export ==============================
export default (function (prefixCls, injectStyle) {
  var useOriginHook = genComponentStyleHook('Tooltip', function (token) {
    // Popover use Tooltip as internal component. We do not need to handle this.
    if (injectStyle === false) {
      return [];
    }
    var borderRadius = token.borderRadius,
      colorTextLightSolid = token.colorTextLightSolid,
      colorBgDefault = token.colorBgDefault,
      borderRadiusOuter = token.borderRadiusOuter;
    var TooltipToken = mergeToken(token, {
      // default variables
      tooltipMaxWidth: 250,
      tooltipColor: colorTextLightSolid,
      tooltipBorderRadius: borderRadius,
      tooltipBg: colorBgDefault,
      tooltipRadiusOuter: borderRadiusOuter > 4 ? 4 : borderRadiusOuter
    });
    return [genTooltipStyle(TooltipToken), initZoomMotion(token, 'zoom-big-fast')];
  }, function (_ref3) {
    var zIndexPopupBase = _ref3.zIndexPopupBase,
      colorBgSpotlight = _ref3.colorBgSpotlight;
    return {
      zIndexPopup: zIndexPopupBase + 70,
      colorBgDefault: colorBgSpotlight
    };
  });
  return useOriginHook(prefixCls);
});