index.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. "use strict";
  2. var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.prepareComponentToken = exports.default = void 0;
  7. var _cssinjs = require("@ant-design/cssinjs");
  8. var _style = require("../../style");
  9. var _motion = require("../../style/motion");
  10. var _placementArrow = _interopRequireWildcard(require("../../style/placementArrow"));
  11. var _roundedArrow = require("../../style/roundedArrow");
  12. var _internal = require("../../theme/internal");
  13. const genTooltipStyle = token => {
  14. const {
  15. calc,
  16. componentCls,
  17. // ant-tooltip
  18. tooltipMaxWidth,
  19. tooltipColor,
  20. tooltipBg,
  21. tooltipBorderRadius,
  22. zIndexPopup,
  23. controlHeight,
  24. boxShadowSecondary,
  25. paddingSM,
  26. paddingXS,
  27. arrowOffsetHorizontal,
  28. sizePopupArrow
  29. } = token;
  30. // arrowOffsetHorizontal + arrowWidth + borderRadius
  31. const edgeAlignMinWidth = calc(tooltipBorderRadius).add(sizePopupArrow).add(arrowOffsetHorizontal).equal();
  32. // borderRadius * 2 + arrowWidth
  33. const centerAlignMinWidth = calc(tooltipBorderRadius).mul(2).add(sizePopupArrow).equal();
  34. return [{
  35. [componentCls]: Object.assign(Object.assign(Object.assign(Object.assign({}, (0, _style.resetComponent)(token)), {
  36. position: 'absolute',
  37. zIndex: zIndexPopup,
  38. display: 'block',
  39. width: 'max-content',
  40. maxWidth: tooltipMaxWidth,
  41. visibility: 'visible',
  42. // When use `autoArrow`, origin will follow the arrow position
  43. '--valid-offset-x': 'var(--arrow-offset-horizontal, var(--arrow-x))',
  44. transformOrigin: [`var(--valid-offset-x, 50%)`, `var(--arrow-y, 50%)`].join(' '),
  45. '&-hidden': {
  46. display: 'none'
  47. },
  48. '--antd-arrow-background-color': tooltipBg,
  49. // Wrapper for the tooltip content
  50. [`${componentCls}-inner`]: {
  51. minWidth: centerAlignMinWidth,
  52. minHeight: controlHeight,
  53. padding: `${(0, _cssinjs.unit)(token.calc(paddingSM).div(2).equal())} ${(0, _cssinjs.unit)(paddingXS)}`,
  54. color: `var(--ant-tooltip-color, ${tooltipColor})`,
  55. textAlign: 'start',
  56. textDecoration: 'none',
  57. wordWrap: 'break-word',
  58. backgroundColor: tooltipBg,
  59. borderRadius: tooltipBorderRadius,
  60. boxShadow: boxShadowSecondary,
  61. boxSizing: 'border-box'
  62. },
  63. // Align placement should have another min width
  64. [[`&-placement-topLeft`, `&-placement-topRight`, `&-placement-bottomLeft`, `&-placement-bottomRight`].join(',')]: {
  65. minWidth: edgeAlignMinWidth
  66. },
  67. // Limit left and right placement radius
  68. [[`&-placement-left`, `&-placement-leftTop`, `&-placement-leftBottom`, `&-placement-right`, `&-placement-rightTop`, `&-placement-rightBottom`].join(',')]: {
  69. [`${componentCls}-inner`]: {
  70. borderRadius: token.min(tooltipBorderRadius, _placementArrow.MAX_VERTICAL_CONTENT_RADIUS)
  71. }
  72. },
  73. [`${componentCls}-content`]: {
  74. position: 'relative'
  75. }
  76. }), (0, _internal.genPresetColor)(token, (colorKey, {
  77. darkColor
  78. }) => ({
  79. [`&${componentCls}-${colorKey}`]: {
  80. [`${componentCls}-inner`]: {
  81. backgroundColor: darkColor
  82. },
  83. [`${componentCls}-arrow`]: {
  84. '--antd-arrow-background-color': darkColor
  85. }
  86. }
  87. }))), {
  88. // RTL
  89. '&-rtl': {
  90. direction: 'rtl'
  91. }
  92. })
  93. },
  94. // Arrow Style
  95. (0, _placementArrow.default)(token, 'var(--antd-arrow-background-color)'),
  96. // Pure Render
  97. {
  98. [`${componentCls}-pure`]: {
  99. position: 'relative',
  100. maxWidth: 'none',
  101. margin: token.sizePopupArrow
  102. }
  103. }];
  104. };
  105. // ============================== Export ==============================
  106. const prepareComponentToken = token => Object.assign(Object.assign({
  107. zIndexPopup: token.zIndexPopupBase + 70
  108. }, (0, _placementArrow.getArrowOffsetToken)({
  109. contentRadius: token.borderRadius,
  110. limitVerticalRadius: true
  111. })), (0, _roundedArrow.getArrowToken)((0, _internal.mergeToken)(token, {
  112. borderRadiusOuter: Math.min(token.borderRadiusOuter, 4)
  113. })));
  114. exports.prepareComponentToken = prepareComponentToken;
  115. var _default = (prefixCls, injectStyle = true) => {
  116. const useStyle = (0, _internal.genStyleHooks)('Tooltip', token => {
  117. const {
  118. borderRadius,
  119. colorTextLightSolid,
  120. colorBgSpotlight
  121. } = token;
  122. const TooltipToken = (0, _internal.mergeToken)(token, {
  123. // default variables
  124. tooltipMaxWidth: 250,
  125. tooltipColor: colorTextLightSolid,
  126. tooltipBorderRadius: borderRadius,
  127. tooltipBg: colorBgSpotlight
  128. });
  129. return [genTooltipStyle(TooltipToken), (0, _motion.initZoomMotion)(token, 'zoom-big-fast')];
  130. }, prepareComponentToken, {
  131. resetStyle: false,
  132. // Popover use Tooltip as internal component. We do not need to handle this.
  133. injectStyle
  134. });
  135. return useStyle(prefixCls);
  136. };
  137. exports.default = _default;