index.js 3.9 KB

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