PopupTrigger.js 3.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  2. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  3. import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  4. import * as React from 'react';
  5. import Trigger from '@rc-component/trigger';
  6. import classNames from 'classnames';
  7. import raf from "rc-util/es/raf";
  8. import { MenuContext } from "../context/MenuContext";
  9. import { placements, placementsRtl } from "../placements";
  10. import { getMotion } from "../utils/motionUtil";
  11. var popupPlacementMap = {
  12. horizontal: 'bottomLeft',
  13. vertical: 'rightTop',
  14. 'vertical-left': 'rightTop',
  15. 'vertical-right': 'leftTop'
  16. };
  17. export default function PopupTrigger(_ref) {
  18. var prefixCls = _ref.prefixCls,
  19. visible = _ref.visible,
  20. children = _ref.children,
  21. popup = _ref.popup,
  22. popupStyle = _ref.popupStyle,
  23. popupClassName = _ref.popupClassName,
  24. popupOffset = _ref.popupOffset,
  25. disabled = _ref.disabled,
  26. mode = _ref.mode,
  27. onVisibleChange = _ref.onVisibleChange;
  28. var _React$useContext = React.useContext(MenuContext),
  29. getPopupContainer = _React$useContext.getPopupContainer,
  30. rtl = _React$useContext.rtl,
  31. subMenuOpenDelay = _React$useContext.subMenuOpenDelay,
  32. subMenuCloseDelay = _React$useContext.subMenuCloseDelay,
  33. builtinPlacements = _React$useContext.builtinPlacements,
  34. triggerSubMenuAction = _React$useContext.triggerSubMenuAction,
  35. forceSubMenuRender = _React$useContext.forceSubMenuRender,
  36. rootClassName = _React$useContext.rootClassName,
  37. motion = _React$useContext.motion,
  38. defaultMotions = _React$useContext.defaultMotions;
  39. var _React$useState = React.useState(false),
  40. _React$useState2 = _slicedToArray(_React$useState, 2),
  41. innerVisible = _React$useState2[0],
  42. setInnerVisible = _React$useState2[1];
  43. var placement = rtl ? _objectSpread(_objectSpread({}, placementsRtl), builtinPlacements) : _objectSpread(_objectSpread({}, placements), builtinPlacements);
  44. var popupPlacement = popupPlacementMap[mode];
  45. var targetMotion = getMotion(mode, motion, defaultMotions);
  46. var targetMotionRef = React.useRef(targetMotion);
  47. if (mode !== 'inline') {
  48. /**
  49. * PopupTrigger is only used for vertical and horizontal types.
  50. * When collapsed is unfolded, the inline animation will destroy the vertical animation.
  51. */
  52. targetMotionRef.current = targetMotion;
  53. }
  54. var mergedMotion = _objectSpread(_objectSpread({}, targetMotionRef.current), {}, {
  55. leavedClassName: "".concat(prefixCls, "-hidden"),
  56. removeOnLeave: false,
  57. motionAppear: true
  58. });
  59. // Delay to change visible
  60. var visibleRef = React.useRef();
  61. React.useEffect(function () {
  62. visibleRef.current = raf(function () {
  63. setInnerVisible(visible);
  64. });
  65. return function () {
  66. raf.cancel(visibleRef.current);
  67. };
  68. }, [visible]);
  69. return /*#__PURE__*/React.createElement(Trigger, {
  70. prefixCls: prefixCls,
  71. popupClassName: classNames("".concat(prefixCls, "-popup"), _defineProperty({}, "".concat(prefixCls, "-rtl"), rtl), popupClassName, rootClassName),
  72. stretch: mode === 'horizontal' ? 'minWidth' : null,
  73. getPopupContainer: getPopupContainer,
  74. builtinPlacements: placement,
  75. popupPlacement: popupPlacement,
  76. popupVisible: innerVisible,
  77. popup: popup,
  78. popupStyle: popupStyle,
  79. popupAlign: popupOffset && {
  80. offset: popupOffset
  81. },
  82. action: disabled ? [] : [triggerSubMenuAction],
  83. mouseEnterDelay: subMenuOpenDelay,
  84. mouseLeaveDelay: subMenuCloseDelay,
  85. onPopupVisibleChange: onVisibleChange,
  86. forceRender: forceSubMenuRender,
  87. popupMotion: mergedMotion,
  88. fresh: true
  89. }, children);
  90. }