index.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = void 0;
  7. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  8. var _motion = require("../../style/motion");
  9. var _internal = require("../../theme/internal");
  10. var _style = require("../../style");
  11. var _placementArrow = _interopRequireDefault(require("../../style/placementArrow"));
  12. const genBaseStyle = token => {
  13. const {
  14. componentCls,
  15. popoverBg,
  16. popoverColor,
  17. width,
  18. fontWeightStrong,
  19. popoverPadding,
  20. boxShadowSecondary,
  21. colorTextHeading,
  22. borderRadiusLG: borderRadius,
  23. zIndexPopup,
  24. marginXS,
  25. colorBgElevated
  26. } = token;
  27. return [{
  28. [componentCls]: (0, _extends2.default)((0, _extends2.default)({}, (0, _style.resetComponent)(token)), {
  29. position: 'absolute',
  30. top: 0,
  31. // use `left` to fix https://github.com/ant-design/ant-design/issues/39195
  32. left: {
  33. _skip_check_: true,
  34. value: 0
  35. },
  36. zIndex: zIndexPopup,
  37. fontWeight: 'normal',
  38. whiteSpace: 'normal',
  39. textAlign: 'start',
  40. cursor: 'auto',
  41. userSelect: 'text',
  42. '--antd-arrow-background-color': colorBgElevated,
  43. '&-rtl': {
  44. direction: 'rtl'
  45. },
  46. '&-hidden': {
  47. display: 'none'
  48. },
  49. [`${componentCls}-content`]: {
  50. position: 'relative'
  51. },
  52. [`${componentCls}-inner`]: {
  53. backgroundColor: popoverBg,
  54. backgroundClip: 'padding-box',
  55. borderRadius,
  56. boxShadow: boxShadowSecondary,
  57. padding: popoverPadding
  58. },
  59. [`${componentCls}-title`]: {
  60. minWidth: width,
  61. marginBottom: marginXS,
  62. color: colorTextHeading,
  63. fontWeight: fontWeightStrong
  64. },
  65. [`${componentCls}-inner-content`]: {
  66. color: popoverColor
  67. }
  68. })
  69. },
  70. // Arrow Style
  71. (0, _placementArrow.default)(token, {
  72. colorBg: 'var(--antd-arrow-background-color)'
  73. }),
  74. // Pure Render
  75. {
  76. [`${componentCls}-pure`]: {
  77. position: 'relative',
  78. maxWidth: 'none',
  79. [`${componentCls}-content`]: {
  80. display: 'inline-block'
  81. }
  82. }
  83. }];
  84. };
  85. const genColorStyle = token => {
  86. const {
  87. componentCls
  88. } = token;
  89. return {
  90. [componentCls]: _internal.PresetColors.map(colorKey => {
  91. const lightColor = token[`${colorKey}-6`];
  92. return {
  93. [`&${componentCls}-${colorKey}`]: {
  94. '--antd-arrow-background-color': lightColor,
  95. [`${componentCls}-inner`]: {
  96. backgroundColor: lightColor
  97. },
  98. [`${componentCls}-arrow`]: {
  99. background: 'transparent'
  100. }
  101. }
  102. };
  103. })
  104. };
  105. };
  106. const genWireframeStyle = token => {
  107. const {
  108. componentCls,
  109. lineWidth,
  110. lineType,
  111. colorSplit,
  112. paddingSM,
  113. controlHeight,
  114. fontSize,
  115. lineHeight,
  116. padding
  117. } = token;
  118. const titlePaddingBlockDist = controlHeight - Math.round(fontSize * lineHeight);
  119. const popoverTitlePaddingBlockTop = titlePaddingBlockDist / 2;
  120. const popoverTitlePaddingBlockBottom = titlePaddingBlockDist / 2 - lineWidth;
  121. const popoverPaddingHorizontal = padding;
  122. return {
  123. [componentCls]: {
  124. [`${componentCls}-inner`]: {
  125. padding: 0
  126. },
  127. [`${componentCls}-title`]: {
  128. margin: 0,
  129. padding: `${popoverTitlePaddingBlockTop}px ${popoverPaddingHorizontal}px ${popoverTitlePaddingBlockBottom}px`,
  130. borderBottom: `${lineWidth}px ${lineType} ${colorSplit}`
  131. },
  132. [`${componentCls}-inner-content`]: {
  133. padding: `${paddingSM}px ${popoverPaddingHorizontal}px`
  134. }
  135. }
  136. };
  137. };
  138. var _default = exports.default = (0, _internal.genComponentStyleHook)('Popover', token => {
  139. const {
  140. colorBgElevated,
  141. colorText,
  142. wireframe
  143. } = token;
  144. const popoverToken = (0, _internal.mergeToken)(token, {
  145. popoverBg: colorBgElevated,
  146. popoverColor: colorText,
  147. popoverPadding: 12 // Fixed Value
  148. });
  149. return [genBaseStyle(popoverToken), genColorStyle(popoverToken), wireframe && genWireframeStyle(popoverToken), (0, _motion.initZoomMotion)(popoverToken, 'zoom-big')];
  150. }, _ref => {
  151. let {
  152. zIndexPopupBase
  153. } = _ref;
  154. return {
  155. zIndexPopup: zIndexPopupBase + 30,
  156. width: 177
  157. };
  158. });