Arrow.js 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. import classNames from 'classnames';
  2. import * as React from 'react';
  3. export default function Arrow(props) {
  4. var prefixCls = props.prefixCls,
  5. align = props.align,
  6. arrow = props.arrow,
  7. arrowPos = props.arrowPos;
  8. var _ref = arrow || {},
  9. className = _ref.className,
  10. content = _ref.content;
  11. var _arrowPos$x = arrowPos.x,
  12. x = _arrowPos$x === void 0 ? 0 : _arrowPos$x,
  13. _arrowPos$y = arrowPos.y,
  14. y = _arrowPos$y === void 0 ? 0 : _arrowPos$y;
  15. var arrowRef = React.useRef();
  16. // Skip if no align
  17. if (!align || !align.points) {
  18. return null;
  19. }
  20. var alignStyle = {
  21. position: 'absolute'
  22. };
  23. // Skip if no need to align
  24. if (align.autoArrow !== false) {
  25. var popupPoints = align.points[0];
  26. var targetPoints = align.points[1];
  27. var popupTB = popupPoints[0];
  28. var popupLR = popupPoints[1];
  29. var targetTB = targetPoints[0];
  30. var targetLR = targetPoints[1];
  31. // Top & Bottom
  32. if (popupTB === targetTB || !['t', 'b'].includes(popupTB)) {
  33. alignStyle.top = y;
  34. } else if (popupTB === 't') {
  35. alignStyle.top = 0;
  36. } else {
  37. alignStyle.bottom = 0;
  38. }
  39. // Left & Right
  40. if (popupLR === targetLR || !['l', 'r'].includes(popupLR)) {
  41. alignStyle.left = x;
  42. } else if (popupLR === 'l') {
  43. alignStyle.left = 0;
  44. } else {
  45. alignStyle.right = 0;
  46. }
  47. }
  48. return /*#__PURE__*/React.createElement("div", {
  49. ref: arrowRef,
  50. className: classNames("".concat(prefixCls, "-arrow"), className),
  51. style: alignStyle
  52. }, content);
  53. }