index.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import { initZoomMotion } from '../../style/motion';
  3. import { genComponentStyleHook, mergeToken } from '../../theme/internal';
  4. import { genPresetColor, resetComponent } from '../../style';
  5. import getArrowStyle, { MAX_VERTICAL_CONTENT_RADIUS } from '../../style/placementArrow';
  6. import 'vue';
  7. const genTooltipStyle = token => {
  8. const {
  9. componentCls,
  10. // ant-tooltip
  11. tooltipMaxWidth,
  12. tooltipColor,
  13. tooltipBg,
  14. tooltipBorderRadius,
  15. zIndexPopup,
  16. controlHeight,
  17. boxShadowSecondary,
  18. paddingSM,
  19. paddingXS,
  20. tooltipRadiusOuter
  21. } = token;
  22. return [{
  23. [componentCls]: _extends(_extends(_extends(_extends({}, resetComponent(token)), {
  24. position: 'absolute',
  25. zIndex: zIndexPopup,
  26. display: 'block',
  27. '&': [{
  28. width: 'max-content'
  29. }, {
  30. width: 'intrinsic'
  31. }],
  32. maxWidth: tooltipMaxWidth,
  33. visibility: 'visible',
  34. '&-hidden': {
  35. display: 'none'
  36. },
  37. '--antd-arrow-background-color': tooltipBg,
  38. // Wrapper for the tooltip content
  39. [`${componentCls}-inner`]: {
  40. minWidth: controlHeight,
  41. minHeight: controlHeight,
  42. padding: `${paddingSM / 2}px ${paddingXS}px`,
  43. color: tooltipColor,
  44. textAlign: 'start',
  45. textDecoration: 'none',
  46. wordWrap: 'break-word',
  47. backgroundColor: tooltipBg,
  48. borderRadius: tooltipBorderRadius,
  49. boxShadow: boxShadowSecondary
  50. },
  51. // Limit left and right placement radius
  52. [[`&-placement-left`, `&-placement-leftTop`, `&-placement-leftBottom`, `&-placement-right`, `&-placement-rightTop`, `&-placement-rightBottom`].join(',')]: {
  53. [`${componentCls}-inner`]: {
  54. borderRadius: Math.min(tooltipBorderRadius, MAX_VERTICAL_CONTENT_RADIUS)
  55. }
  56. },
  57. [`${componentCls}-content`]: {
  58. position: 'relative'
  59. }
  60. }), genPresetColor(token, (colorKey, _ref) => {
  61. let {
  62. darkColor
  63. } = _ref;
  64. return {
  65. [`&${componentCls}-${colorKey}`]: {
  66. [`${componentCls}-inner`]: {
  67. backgroundColor: darkColor
  68. },
  69. [`${componentCls}-arrow`]: {
  70. '--antd-arrow-background-color': darkColor
  71. }
  72. }
  73. };
  74. })), {
  75. // RTL
  76. '&-rtl': {
  77. direction: 'rtl'
  78. }
  79. })
  80. },
  81. // Arrow Style
  82. getArrowStyle(mergeToken(token, {
  83. borderRadiusOuter: tooltipRadiusOuter
  84. }), {
  85. colorBg: 'var(--antd-arrow-background-color)',
  86. showArrowCls: '',
  87. contentRadius: tooltipBorderRadius,
  88. limitVerticalRadius: true
  89. }),
  90. // Pure Render
  91. {
  92. [`${componentCls}-pure`]: {
  93. position: 'relative',
  94. maxWidth: 'none'
  95. }
  96. }];
  97. };
  98. // ============================== Export ==============================
  99. export default ((prefixCls, injectStyle) => {
  100. const useOriginHook = genComponentStyleHook('Tooltip', token => {
  101. // Popover use Tooltip as internal component. We do not need to handle this.
  102. if ((injectStyle === null || injectStyle === void 0 ? void 0 : injectStyle.value) === false) {
  103. return [];
  104. }
  105. const {
  106. borderRadius,
  107. colorTextLightSolid,
  108. colorBgDefault,
  109. borderRadiusOuter
  110. } = token;
  111. const TooltipToken = mergeToken(token, {
  112. // default variables
  113. tooltipMaxWidth: 250,
  114. tooltipColor: colorTextLightSolid,
  115. tooltipBorderRadius: borderRadius,
  116. tooltipBg: colorBgDefault,
  117. tooltipRadiusOuter: borderRadiusOuter > 4 ? 4 : borderRadiusOuter
  118. });
  119. return [genTooltipStyle(TooltipToken), initZoomMotion(token, 'zoom-big-fast')];
  120. }, _ref2 => {
  121. let {
  122. zIndexPopupBase,
  123. colorBgSpotlight
  124. } = _ref2;
  125. return {
  126. zIndexPopup: zIndexPopupBase + 70,
  127. colorBgDefault: colorBgSpotlight
  128. };
  129. });
  130. return useOriginHook(prefixCls);
  131. });