Dropdown.js 5.2 KB

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