placementArrow.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.MAX_VERTICAL_CONTENT_RADIUS = void 0;
  6. exports.default = getArrowStyle;
  7. exports.getArrowOffsetToken = getArrowOffsetToken;
  8. var _cssinjs = require("@ant-design/cssinjs");
  9. var _roundedArrow = require("./roundedArrow");
  10. const MAX_VERTICAL_CONTENT_RADIUS = exports.MAX_VERTICAL_CONTENT_RADIUS = 8;
  11. function getArrowOffsetToken(options) {
  12. const {
  13. contentRadius,
  14. limitVerticalRadius
  15. } = options;
  16. const arrowOffset = contentRadius > 12 ? contentRadius + 2 : 12;
  17. const arrowOffsetVertical = limitVerticalRadius ? MAX_VERTICAL_CONTENT_RADIUS : arrowOffset;
  18. return {
  19. arrowOffsetHorizontal: arrowOffset,
  20. arrowOffsetVertical
  21. };
  22. }
  23. function isInject(valid, code) {
  24. if (!valid) {
  25. return {};
  26. }
  27. return code;
  28. }
  29. function getArrowStyle(token, colorBg, options) {
  30. const {
  31. componentCls,
  32. boxShadowPopoverArrow,
  33. arrowOffsetVertical,
  34. arrowOffsetHorizontal
  35. } = token;
  36. const {
  37. arrowDistance = 0,
  38. arrowPlacement = {
  39. left: true,
  40. right: true,
  41. top: true,
  42. bottom: true
  43. }
  44. } = options || {};
  45. return {
  46. [componentCls]: Object.assign(Object.assign(Object.assign(Object.assign({
  47. // ============================ Basic ============================
  48. [`${componentCls}-arrow`]: [Object.assign(Object.assign({
  49. position: 'absolute',
  50. zIndex: 1,
  51. display: 'block'
  52. }, (0, _roundedArrow.genRoundedArrow)(token, colorBg, boxShadowPopoverArrow)), {
  53. '&:before': {
  54. background: colorBg
  55. }
  56. })]
  57. }, isInject(!!arrowPlacement.top, {
  58. [[`&-placement-top > ${componentCls}-arrow`, `&-placement-topLeft > ${componentCls}-arrow`, `&-placement-topRight > ${componentCls}-arrow`].join(',')]: {
  59. bottom: arrowDistance,
  60. transform: 'translateY(100%) rotate(180deg)'
  61. },
  62. [`&-placement-top > ${componentCls}-arrow`]: {
  63. left: {
  64. _skip_check_: true,
  65. value: '50%'
  66. },
  67. transform: 'translateX(-50%) translateY(100%) rotate(180deg)'
  68. },
  69. '&-placement-topLeft': {
  70. '--arrow-offset-horizontal': arrowOffsetHorizontal,
  71. [`> ${componentCls}-arrow`]: {
  72. left: {
  73. _skip_check_: true,
  74. value: arrowOffsetHorizontal
  75. }
  76. }
  77. },
  78. '&-placement-topRight': {
  79. '--arrow-offset-horizontal': `calc(100% - ${(0, _cssinjs.unit)(arrowOffsetHorizontal)})`,
  80. [`> ${componentCls}-arrow`]: {
  81. right: {
  82. _skip_check_: true,
  83. value: arrowOffsetHorizontal
  84. }
  85. }
  86. }
  87. })), isInject(!!arrowPlacement.bottom, {
  88. [[`&-placement-bottom > ${componentCls}-arrow`, `&-placement-bottomLeft > ${componentCls}-arrow`, `&-placement-bottomRight > ${componentCls}-arrow`].join(',')]: {
  89. top: arrowDistance,
  90. transform: `translateY(-100%)`
  91. },
  92. [`&-placement-bottom > ${componentCls}-arrow`]: {
  93. left: {
  94. _skip_check_: true,
  95. value: '50%'
  96. },
  97. transform: `translateX(-50%) translateY(-100%)`
  98. },
  99. '&-placement-bottomLeft': {
  100. '--arrow-offset-horizontal': arrowOffsetHorizontal,
  101. [`> ${componentCls}-arrow`]: {
  102. left: {
  103. _skip_check_: true,
  104. value: arrowOffsetHorizontal
  105. }
  106. }
  107. },
  108. '&-placement-bottomRight': {
  109. '--arrow-offset-horizontal': `calc(100% - ${(0, _cssinjs.unit)(arrowOffsetHorizontal)})`,
  110. [`> ${componentCls}-arrow`]: {
  111. right: {
  112. _skip_check_: true,
  113. value: arrowOffsetHorizontal
  114. }
  115. }
  116. }
  117. })), isInject(!!arrowPlacement.left, {
  118. [[`&-placement-left > ${componentCls}-arrow`, `&-placement-leftTop > ${componentCls}-arrow`, `&-placement-leftBottom > ${componentCls}-arrow`].join(',')]: {
  119. right: {
  120. _skip_check_: true,
  121. value: arrowDistance
  122. },
  123. transform: 'translateX(100%) rotate(90deg)'
  124. },
  125. [`&-placement-left > ${componentCls}-arrow`]: {
  126. top: {
  127. _skip_check_: true,
  128. value: '50%'
  129. },
  130. transform: 'translateY(-50%) translateX(100%) rotate(90deg)'
  131. },
  132. [`&-placement-leftTop > ${componentCls}-arrow`]: {
  133. top: arrowOffsetVertical
  134. },
  135. [`&-placement-leftBottom > ${componentCls}-arrow`]: {
  136. bottom: arrowOffsetVertical
  137. }
  138. })), isInject(!!arrowPlacement.right, {
  139. [[`&-placement-right > ${componentCls}-arrow`, `&-placement-rightTop > ${componentCls}-arrow`, `&-placement-rightBottom > ${componentCls}-arrow`].join(',')]: {
  140. left: {
  141. _skip_check_: true,
  142. value: arrowDistance
  143. },
  144. transform: 'translateX(-100%) rotate(-90deg)'
  145. },
  146. [`&-placement-right > ${componentCls}-arrow`]: {
  147. top: {
  148. _skip_check_: true,
  149. value: '50%'
  150. },
  151. transform: 'translateY(-50%) translateX(-100%) rotate(-90deg)'
  152. },
  153. [`&-placement-rightTop > ${componentCls}-arrow`]: {
  154. top: arrowOffsetVertical
  155. },
  156. [`&-placement-rightBottom > ${componentCls}-arrow`]: {
  157. bottom: arrowOffsetVertical
  158. }
  159. }))
  160. };
  161. }