Dropdown.js 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
  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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
  9. var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
  10. var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
  11. var _trigger = _interopRequireDefault(require("@rc-component/trigger"));
  12. var _classnames = _interopRequireDefault(require("classnames"));
  13. var _ref = require("rc-util/lib/ref");
  14. var _react = _interopRequireDefault(require("react"));
  15. var _useAccessibility = _interopRequireDefault(require("./hooks/useAccessibility"));
  16. var _Overlay = _interopRequireDefault(require("./Overlay"));
  17. var _placements = _interopRequireDefault(require("./placements"));
  18. var _excluded = ["arrow", "prefixCls", "transitionName", "animation", "align", "placement", "placements", "getPopupContainer", "showAction", "hideAction", "overlayClassName", "overlayStyle", "visible", "trigger", "autoFocus", "overlay", "children", "onVisibleChange"];
  19. function Dropdown(props, ref) {
  20. var _children$props;
  21. var _props$arrow = props.arrow,
  22. arrow = _props$arrow === void 0 ? false : _props$arrow,
  23. _props$prefixCls = props.prefixCls,
  24. prefixCls = _props$prefixCls === void 0 ? 'rc-dropdown' : _props$prefixCls,
  25. transitionName = props.transitionName,
  26. animation = props.animation,
  27. align = props.align,
  28. _props$placement = props.placement,
  29. placement = _props$placement === void 0 ? 'bottomLeft' : _props$placement,
  30. _props$placements = props.placements,
  31. placements = _props$placements === void 0 ? _placements.default : _props$placements,
  32. getPopupContainer = props.getPopupContainer,
  33. showAction = props.showAction,
  34. hideAction = props.hideAction,
  35. overlayClassName = props.overlayClassName,
  36. overlayStyle = props.overlayStyle,
  37. visible = props.visible,
  38. _props$trigger = props.trigger,
  39. trigger = _props$trigger === void 0 ? ['hover'] : _props$trigger,
  40. autoFocus = props.autoFocus,
  41. overlay = props.overlay,
  42. children = props.children,
  43. onVisibleChange = props.onVisibleChange,
  44. otherProps = (0, _objectWithoutProperties2.default)(props, _excluded);
  45. var _React$useState = _react.default.useState(),
  46. _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
  47. triggerVisible = _React$useState2[0],
  48. setTriggerVisible = _React$useState2[1];
  49. var mergedVisible = 'visible' in props ? visible : triggerVisible;
  50. var triggerRef = _react.default.useRef(null);
  51. var overlayRef = _react.default.useRef(null);
  52. var childRef = _react.default.useRef(null);
  53. _react.default.useImperativeHandle(ref, function () {
  54. return triggerRef.current;
  55. });
  56. var handleVisibleChange = function handleVisibleChange(newVisible) {
  57. setTriggerVisible(newVisible);
  58. onVisibleChange === null || onVisibleChange === void 0 || onVisibleChange(newVisible);
  59. };
  60. (0, _useAccessibility.default)({
  61. visible: mergedVisible,
  62. triggerRef: childRef,
  63. onVisibleChange: handleVisibleChange,
  64. autoFocus: autoFocus,
  65. overlayRef: overlayRef
  66. });
  67. var onClick = function onClick(e) {
  68. var onOverlayClick = props.onOverlayClick;
  69. setTriggerVisible(false);
  70. if (onOverlayClick) {
  71. onOverlayClick(e);
  72. }
  73. };
  74. var getMenuElement = function getMenuElement() {
  75. return /*#__PURE__*/_react.default.createElement(_Overlay.default, {
  76. ref: overlayRef,
  77. overlay: overlay,
  78. prefixCls: prefixCls,
  79. arrow: arrow
  80. });
  81. };
  82. var getMenuElementOrLambda = function getMenuElementOrLambda() {
  83. if (typeof overlay === 'function') {
  84. return getMenuElement;
  85. }
  86. return getMenuElement();
  87. };
  88. var getMinOverlayWidthMatchTrigger = function getMinOverlayWidthMatchTrigger() {
  89. var minOverlayWidthMatchTrigger = props.minOverlayWidthMatchTrigger,
  90. alignPoint = props.alignPoint;
  91. if ('minOverlayWidthMatchTrigger' in props) {
  92. return minOverlayWidthMatchTrigger;
  93. }
  94. return !alignPoint;
  95. };
  96. var getOpenClassName = function getOpenClassName() {
  97. var openClassName = props.openClassName;
  98. if (openClassName !== undefined) {
  99. return openClassName;
  100. }
  101. return "".concat(prefixCls, "-open");
  102. };
  103. var childrenNode = /*#__PURE__*/_react.default.cloneElement(children, {
  104. className: (0, _classnames.default)((_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.className, mergedVisible && getOpenClassName()),
  105. ref: (0, _ref.supportRef)(children) ? (0, _ref.composeRef)(childRef, (0, _ref.getNodeRef)(children)) : undefined
  106. });
  107. var triggerHideAction = hideAction;
  108. if (!triggerHideAction && trigger.indexOf('contextMenu') !== -1) {
  109. triggerHideAction = ['click'];
  110. }
  111. return /*#__PURE__*/_react.default.createElement(_trigger.default, (0, _extends2.default)({
  112. builtinPlacements: placements
  113. }, otherProps, {
  114. prefixCls: prefixCls,
  115. ref: triggerRef,
  116. popupClassName: (0, _classnames.default)(overlayClassName, (0, _defineProperty2.default)({}, "".concat(prefixCls, "-show-arrow"), arrow)),
  117. popupStyle: overlayStyle,
  118. action: trigger,
  119. showAction: showAction,
  120. hideAction: triggerHideAction,
  121. popupPlacement: placement,
  122. popupAlign: align,
  123. popupTransitionName: transitionName,
  124. popupAnimation: animation,
  125. popupVisible: mergedVisible,
  126. stretch: getMinOverlayWidthMatchTrigger() ? 'minWidth' : '',
  127. popup: getMenuElementOrLambda(),
  128. onPopupVisibleChange: handleVisibleChange,
  129. onPopupClick: onClick,
  130. getPopupContainer: getPopupContainer
  131. }), childrenNode);
  132. }
  133. var _default = exports.default = /*#__PURE__*/_react.default.forwardRef(Dropdown);