index.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  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 _style = require("../../style");
  8. var _motion = require("../../style/motion");
  9. var _placementArrow = _interopRequireWildcard(require("../../style/placementArrow"));
  10. var _roundedArrow = require("../../style/roundedArrow");
  11. var _internal = require("../../theme/internal");
  12. const genBaseStyle = token => {
  13. const {
  14. componentCls,
  15. popoverColor,
  16. titleMinWidth,
  17. fontWeightStrong,
  18. innerPadding,
  19. boxShadowSecondary,
  20. colorTextHeading,
  21. borderRadiusLG,
  22. zIndexPopup,
  23. titleMarginBottom,
  24. colorBgElevated,
  25. popoverBg,
  26. titleBorderBottom,
  27. innerContentPadding,
  28. titlePadding
  29. } = token;
  30. return [{
  31. [componentCls]: Object.assign(Object.assign({}, (0, _style.resetComponent)(token)), {
  32. position: 'absolute',
  33. top: 0,
  34. // use `left` to fix https://github.com/ant-design/ant-design/issues/39195
  35. left: {
  36. _skip_check_: true,
  37. value: 0
  38. },
  39. zIndex: zIndexPopup,
  40. fontWeight: 'normal',
  41. whiteSpace: 'normal',
  42. textAlign: 'start',
  43. cursor: 'auto',
  44. userSelect: 'text',
  45. // When use `autoArrow`, origin will follow the arrow position
  46. '--valid-offset-x': 'var(--arrow-offset-horizontal, var(--arrow-x))',
  47. transformOrigin: [`var(--valid-offset-x, 50%)`, `var(--arrow-y, 50%)`].join(' '),
  48. '--antd-arrow-background-color': colorBgElevated,
  49. width: 'max-content',
  50. maxWidth: '100vw',
  51. '&-rtl': {
  52. direction: 'rtl'
  53. },
  54. '&-hidden': {
  55. display: 'none'
  56. },
  57. [`${componentCls}-content`]: {
  58. position: 'relative'
  59. },
  60. [`${componentCls}-inner`]: {
  61. backgroundColor: popoverBg,
  62. backgroundClip: 'padding-box',
  63. borderRadius: borderRadiusLG,
  64. boxShadow: boxShadowSecondary,
  65. padding: innerPadding
  66. },
  67. [`${componentCls}-title`]: {
  68. minWidth: titleMinWidth,
  69. marginBottom: titleMarginBottom,
  70. color: colorTextHeading,
  71. fontWeight: fontWeightStrong,
  72. borderBottom: titleBorderBottom,
  73. padding: titlePadding
  74. },
  75. [`${componentCls}-inner-content`]: {
  76. color: popoverColor,
  77. padding: innerContentPadding
  78. }
  79. })
  80. },
  81. // Arrow Style
  82. (0, _placementArrow.default)(token, 'var(--antd-arrow-background-color)'),
  83. // Pure Render
  84. {
  85. [`${componentCls}-pure`]: {
  86. position: 'relative',
  87. maxWidth: 'none',
  88. margin: token.sizePopupArrow,
  89. display: 'inline-block',
  90. [`${componentCls}-content`]: {
  91. display: 'inline-block'
  92. }
  93. }
  94. }];
  95. };
  96. const genColorStyle = token => {
  97. const {
  98. componentCls
  99. } = token;
  100. return {
  101. [componentCls]: _internal.PresetColors.map(colorKey => {
  102. const lightColor = token[`${colorKey}6`];
  103. return {
  104. [`&${componentCls}-${colorKey}`]: {
  105. '--antd-arrow-background-color': lightColor,
  106. [`${componentCls}-inner`]: {
  107. backgroundColor: lightColor
  108. },
  109. [`${componentCls}-arrow`]: {
  110. background: 'transparent'
  111. }
  112. }
  113. };
  114. })
  115. };
  116. };
  117. const prepareComponentToken = token => {
  118. const {
  119. lineWidth,
  120. controlHeight,
  121. fontHeight,
  122. padding,
  123. wireframe,
  124. zIndexPopupBase,
  125. borderRadiusLG,
  126. marginXS,
  127. lineType,
  128. colorSplit,
  129. paddingSM
  130. } = token;
  131. const titlePaddingBlockDist = controlHeight - fontHeight;
  132. const popoverTitlePaddingBlockTop = titlePaddingBlockDist / 2;
  133. const popoverTitlePaddingBlockBottom = titlePaddingBlockDist / 2 - lineWidth;
  134. const popoverPaddingHorizontal = padding;
  135. return Object.assign(Object.assign(Object.assign({
  136. titleMinWidth: 177,
  137. zIndexPopup: zIndexPopupBase + 30
  138. }, (0, _roundedArrow.getArrowToken)(token)), (0, _placementArrow.getArrowOffsetToken)({
  139. contentRadius: borderRadiusLG,
  140. limitVerticalRadius: true
  141. })), {
  142. // internal
  143. innerPadding: wireframe ? 0 : 12,
  144. titleMarginBottom: wireframe ? 0 : marginXS,
  145. titlePadding: wireframe ? `${popoverTitlePaddingBlockTop}px ${popoverPaddingHorizontal}px ${popoverTitlePaddingBlockBottom}px` : 0,
  146. titleBorderBottom: wireframe ? `${lineWidth}px ${lineType} ${colorSplit}` : 'none',
  147. innerContentPadding: wireframe ? `${paddingSM}px ${popoverPaddingHorizontal}px` : 0
  148. });
  149. };
  150. exports.prepareComponentToken = prepareComponentToken;
  151. var _default = exports.default = (0, _internal.genStyleHooks)('Popover', token => {
  152. const {
  153. colorBgElevated,
  154. colorText
  155. } = token;
  156. const popoverToken = (0, _internal.mergeToken)(token, {
  157. popoverBg: colorBgElevated,
  158. popoverColor: colorText
  159. });
  160. return [genBaseStyle(popoverToken), genColorStyle(popoverToken), (0, _motion.initZoomMotion)(popoverToken, 'zoom-big')];
  161. }, prepareComponentToken, {
  162. resetStyle: false,
  163. deprecatedTokens: [['width', 'titleMinWidth'], ['minWidth', 'titleMinWidth']]
  164. });