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$$conc;

    var lightColor = token["".concat(currentValue, "-6")];
    previousValue["&".concat(componentCls, "-").concat(currentValue)] = (_previousValue$$conc = {}, _defineProperty(_previousValue$$conc, "".concat(componentCls, "-inner"), {
      backgroundColor: lightColor
    }), _defineProperty(_previousValue$$conc, "".concat(componentCls, "-arrow"), {
      '--antd-arrow-background-color': lightColor
    }), _previousValue$$conc);
    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, "".concat(componentCls, "-inner"), {
    minWidth: controlHeight,
    minHeight: controlHeight,
    padding: "".concat(paddingSM / 2, "px ").concat(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({}, "".concat(componentCls, "-inner"), {
    borderRadius: tooltipBorderRadius > MAX_VERTICAL_CONTENT_RADIUS ? MAX_VERTICAL_CONTENT_RADIUS : tooltipBorderRadius
  })), _defineProperty(_extends2, "".concat(componentCls, "-content"), {
    position: 'relative'
  }), _extends2)), generatorTooltipPresetColor(token)), {
    // RTL
    '&-rtl': {
      direction: 'rtl'
    }
  })), // Arrow Style
  getArrowStyle(mergeToken(token, {
    radiusOuter: tooltipRadiusOuter
  }), {
    colorBg: 'var(--antd-arrow-background-color)',
    showArrowCls: '',
    contentRadius: tooltipBorderRadius,
    limitVerticalRadius: true
  }), // Pure Render
  _defineProperty({}, "".concat(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 radiusBase = token.radiusBase,
        colorTextLightSolid = token.colorTextLightSolid,
        colorBgDefault = token.colorBgDefault,
        radiusOuter = token.radiusOuter;
    var TooltipToken = mergeToken(token, {
      // default variables
      tooltipMaxWidth: 250,
      tooltipColor: colorTextLightSolid,
      tooltipBorderRadius: radiusBase,
      tooltipBg: colorBgDefault,
      tooltipRadiusOuter: radiusOuter > 4 ? 4 : radiusOuter
    });
    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);
});