SelectTrigger.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  3. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  4. import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
  5. var _excluded = ["prefixCls", "disabled", "visible", "children", "popupElement", "animation", "transitionName", "dropdownStyle", "dropdownClassName", "direction", "placement", "builtinPlacements", "dropdownMatchSelectWidth", "dropdownRender", "dropdownAlign", "getPopupContainer", "empty", "getTriggerDOMNode", "onPopupVisibleChange", "onPopupMouseEnter"];
  6. import Trigger from '@rc-component/trigger';
  7. import classNames from 'classnames';
  8. import * as React from 'react';
  9. var getBuiltInPlacements = function getBuiltInPlacements(dropdownMatchSelectWidth) {
  10. // Enable horizontal overflow auto-adjustment when a custom dropdown width is provided
  11. var adjustX = dropdownMatchSelectWidth === true ? 0 : 1;
  12. return {
  13. bottomLeft: {
  14. points: ['tl', 'bl'],
  15. offset: [0, 4],
  16. overflow: {
  17. adjustX: adjustX,
  18. adjustY: 1
  19. },
  20. htmlRegion: 'scroll'
  21. },
  22. bottomRight: {
  23. points: ['tr', 'br'],
  24. offset: [0, 4],
  25. overflow: {
  26. adjustX: adjustX,
  27. adjustY: 1
  28. },
  29. htmlRegion: 'scroll'
  30. },
  31. topLeft: {
  32. points: ['bl', 'tl'],
  33. offset: [0, -4],
  34. overflow: {
  35. adjustX: adjustX,
  36. adjustY: 1
  37. },
  38. htmlRegion: 'scroll'
  39. },
  40. topRight: {
  41. points: ['br', 'tr'],
  42. offset: [0, -4],
  43. overflow: {
  44. adjustX: adjustX,
  45. adjustY: 1
  46. },
  47. htmlRegion: 'scroll'
  48. }
  49. };
  50. };
  51. var SelectTrigger = function SelectTrigger(props, ref) {
  52. var prefixCls = props.prefixCls,
  53. disabled = props.disabled,
  54. visible = props.visible,
  55. children = props.children,
  56. popupElement = props.popupElement,
  57. animation = props.animation,
  58. transitionName = props.transitionName,
  59. dropdownStyle = props.dropdownStyle,
  60. dropdownClassName = props.dropdownClassName,
  61. _props$direction = props.direction,
  62. direction = _props$direction === void 0 ? 'ltr' : _props$direction,
  63. placement = props.placement,
  64. builtinPlacements = props.builtinPlacements,
  65. dropdownMatchSelectWidth = props.dropdownMatchSelectWidth,
  66. dropdownRender = props.dropdownRender,
  67. dropdownAlign = props.dropdownAlign,
  68. getPopupContainer = props.getPopupContainer,
  69. empty = props.empty,
  70. getTriggerDOMNode = props.getTriggerDOMNode,
  71. onPopupVisibleChange = props.onPopupVisibleChange,
  72. onPopupMouseEnter = props.onPopupMouseEnter,
  73. restProps = _objectWithoutProperties(props, _excluded);
  74. var dropdownPrefixCls = "".concat(prefixCls, "-dropdown");
  75. var popupNode = popupElement;
  76. if (dropdownRender) {
  77. popupNode = dropdownRender(popupElement);
  78. }
  79. var mergedBuiltinPlacements = React.useMemo(function () {
  80. return builtinPlacements || getBuiltInPlacements(dropdownMatchSelectWidth);
  81. }, [builtinPlacements, dropdownMatchSelectWidth]);
  82. // ===================== Motion ======================
  83. var mergedTransitionName = animation ? "".concat(dropdownPrefixCls, "-").concat(animation) : transitionName;
  84. // =================== Popup Width ===================
  85. var isNumberPopupWidth = typeof dropdownMatchSelectWidth === 'number';
  86. var stretch = React.useMemo(function () {
  87. if (isNumberPopupWidth) {
  88. return null;
  89. }
  90. return dropdownMatchSelectWidth === false ? 'minWidth' : 'width';
  91. }, [dropdownMatchSelectWidth, isNumberPopupWidth]);
  92. var popupStyle = dropdownStyle;
  93. if (isNumberPopupWidth) {
  94. popupStyle = _objectSpread(_objectSpread({}, popupStyle), {}, {
  95. width: dropdownMatchSelectWidth
  96. });
  97. }
  98. // ======================= Ref =======================
  99. var triggerPopupRef = React.useRef(null);
  100. React.useImperativeHandle(ref, function () {
  101. return {
  102. getPopupElement: function getPopupElement() {
  103. var _triggerPopupRef$curr;
  104. return (_triggerPopupRef$curr = triggerPopupRef.current) === null || _triggerPopupRef$curr === void 0 ? void 0 : _triggerPopupRef$curr.popupElement;
  105. }
  106. };
  107. });
  108. return /*#__PURE__*/React.createElement(Trigger, _extends({}, restProps, {
  109. showAction: onPopupVisibleChange ? ['click'] : [],
  110. hideAction: onPopupVisibleChange ? ['click'] : [],
  111. popupPlacement: placement || (direction === 'rtl' ? 'bottomRight' : 'bottomLeft'),
  112. builtinPlacements: mergedBuiltinPlacements,
  113. prefixCls: dropdownPrefixCls,
  114. popupTransitionName: mergedTransitionName,
  115. popup: /*#__PURE__*/React.createElement("div", {
  116. onMouseEnter: onPopupMouseEnter
  117. }, popupNode),
  118. ref: triggerPopupRef,
  119. stretch: stretch,
  120. popupAlign: dropdownAlign,
  121. popupVisible: visible,
  122. getPopupContainer: getPopupContainer,
  123. popupClassName: classNames(dropdownClassName, _defineProperty({}, "".concat(dropdownPrefixCls, "-empty"), empty)),
  124. popupStyle: popupStyle,
  125. getTriggerDOMNode: getTriggerDOMNode,
  126. onPopupVisibleChange: onPopupVisibleChange
  127. }), children);
  128. };
  129. var RefSelectTrigger = /*#__PURE__*/React.forwardRef(SelectTrigger);
  130. if (process.env.NODE_ENV !== 'production') {
  131. RefSelectTrigger.displayName = 'SelectTrigger';
  132. }
  133. export default RefSelectTrigger;