dropdown.js 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import _typeof from "@babel/runtime/helpers/esm/typeof";
  3. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  4. import _extends from "@babel/runtime/helpers/esm/extends";
  5. import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
  6. import { computed, defineComponent } from 'vue';
  7. import RcDropdown from '../vc-dropdown';
  8. import DropdownButton from './dropdown-button';
  9. import { cloneElement } from '../_util/vnode';
  10. import classNames from '../_util/classNames';
  11. import { isValidElement, initDefaultProps } from '../_util/props-util';
  12. import { dropdownProps } from './props';
  13. import RightOutlined from "@ant-design/icons-vue/es/icons/RightOutlined";
  14. import useConfigInject from '../_util/hooks/useConfigInject';
  15. import devWarning from '../vc-util/devWarning';
  16. import omit from '../_util/omit';
  17. import getPlacements from '../tooltip/placements';
  18. var Dropdown = defineComponent({
  19. compatConfig: {
  20. MODE: 3
  21. },
  22. name: 'ADropdown',
  23. inheritAttrs: false,
  24. props: initDefaultProps(dropdownProps(), {
  25. mouseEnterDelay: 0.15,
  26. mouseLeaveDelay: 0.1,
  27. placement: 'bottomLeft',
  28. trigger: 'hover'
  29. }),
  30. // emits: ['visibleChange', 'update:visible'],
  31. slots: ['overlay'],
  32. setup: function setup(props, _ref) {
  33. var slots = _ref.slots,
  34. attrs = _ref.attrs,
  35. emit = _ref.emit;
  36. var _useConfigInject = useConfigInject('dropdown', props),
  37. prefixCls = _useConfigInject.prefixCls,
  38. rootPrefixCls = _useConfigInject.rootPrefixCls,
  39. direction = _useConfigInject.direction,
  40. getPopupContainer = _useConfigInject.getPopupContainer;
  41. var transitionName = computed(function () {
  42. var _props$placement = props.placement,
  43. placement = _props$placement === void 0 ? '' : _props$placement,
  44. transitionName = props.transitionName;
  45. if (transitionName !== undefined) {
  46. return transitionName;
  47. }
  48. if (placement.indexOf('top') >= 0) {
  49. return "".concat(rootPrefixCls.value, "-slide-down");
  50. }
  51. return "".concat(rootPrefixCls.value, "-slide-up");
  52. });
  53. var renderOverlay = function renderOverlay() {
  54. var _slots$overlay, _overlayNode$children, _overlayNode$children2;
  55. // rc-dropdown already can process the function of overlay, but we have check logic here.
  56. // So we need render the element to check and pass back to rc-dropdown.
  57. var overlay = props.overlay || ((_slots$overlay = slots.overlay) === null || _slots$overlay === void 0 ? void 0 : _slots$overlay.call(slots));
  58. var overlayNode = Array.isArray(overlay) ? overlay[0] : overlay;
  59. if (!overlayNode) return null;
  60. var overlayProps = overlayNode.props || {};
  61. // Warning if use other mode
  62. devWarning(!overlayProps.mode || overlayProps.mode === 'vertical', 'Dropdown', "mode=\"".concat(overlayProps.mode, "\" is not supported for Dropdown's Menu."));
  63. // menu cannot be selectable in dropdown defaultly
  64. var _overlayProps$selecta = overlayProps.selectable,
  65. selectable = _overlayProps$selecta === void 0 ? false : _overlayProps$selecta,
  66. _overlayProps$expandI = overlayProps.expandIcon,
  67. expandIcon = _overlayProps$expandI === void 0 ? (_overlayNode$children = overlayNode.children) === null || _overlayNode$children === void 0 ? void 0 : (_overlayNode$children2 = _overlayNode$children.expandIcon) === null || _overlayNode$children2 === void 0 ? void 0 : _overlayNode$children2.call(_overlayNode$children) : _overlayProps$expandI;
  68. var overlayNodeExpandIcon = typeof expandIcon !== 'undefined' && isValidElement(expandIcon) ? expandIcon : _createVNode("span", {
  69. "class": "".concat(prefixCls.value, "-menu-submenu-arrow")
  70. }, [_createVNode(RightOutlined, {
  71. "class": "".concat(prefixCls.value, "-menu-submenu-arrow-icon")
  72. }, null)]);
  73. var fixedModeOverlay = isValidElement(overlayNode) ? cloneElement(overlayNode, {
  74. mode: 'vertical',
  75. selectable: selectable,
  76. expandIcon: function expandIcon() {
  77. return overlayNodeExpandIcon;
  78. }
  79. }) : overlayNode;
  80. return fixedModeOverlay;
  81. };
  82. var placement = computed(function () {
  83. var placement = props.placement;
  84. if (!placement) {
  85. return direction.value === 'rtl' ? 'bottomRight' : 'bottomLeft';
  86. }
  87. if (placement.includes('Center')) {
  88. var newPlacement = placement.slice(0, placement.indexOf('Center'));
  89. devWarning(!placement.includes('Center'), 'Dropdown', "You are using '".concat(placement, "' placement in Dropdown, which is deprecated. Try to use '").concat(newPlacement, "' instead."));
  90. return newPlacement;
  91. }
  92. return placement;
  93. });
  94. var handleVisibleChange = function handleVisibleChange(val) {
  95. emit('update:visible', val);
  96. emit('visibleChange', val);
  97. };
  98. return function () {
  99. var _slots$default, _child$props;
  100. var arrow = props.arrow,
  101. trigger = props.trigger,
  102. disabled = props.disabled,
  103. overlayClassName = props.overlayClassName;
  104. var child = (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)[0];
  105. var dropdownTrigger = cloneElement(child, _extends({
  106. class: classNames(child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.class, _defineProperty({}, "".concat(prefixCls.value, "-rtl"), direction.value === 'rtl'), "".concat(prefixCls.value, "-trigger"))
  107. }, disabled ? {
  108. disabled: disabled
  109. } : {}));
  110. var overlayClassNameCustomized = classNames(overlayClassName, _defineProperty({}, "".concat(prefixCls.value, "-rtl"), direction.value === 'rtl'));
  111. var triggerActions = disabled ? [] : trigger;
  112. var alignPoint;
  113. if (triggerActions && triggerActions.indexOf('contextmenu') !== -1) {
  114. alignPoint = true;
  115. }
  116. var builtinPlacements = getPlacements({
  117. arrowPointAtCenter: _typeof(arrow) === 'object' && arrow.pointAtCenter,
  118. autoAdjustOverflow: true
  119. });
  120. var dropdownProps = omit(_objectSpread(_objectSpread(_objectSpread({}, props), attrs), {}, {
  121. builtinPlacements: builtinPlacements,
  122. overlayClassName: overlayClassNameCustomized,
  123. arrow: arrow,
  124. alignPoint: alignPoint,
  125. prefixCls: prefixCls.value,
  126. getPopupContainer: getPopupContainer.value,
  127. transitionName: transitionName.value,
  128. trigger: triggerActions,
  129. onVisibleChange: handleVisibleChange,
  130. placement: placement.value
  131. }), ['overlay', 'onUpdate:visible']);
  132. return _createVNode(RcDropdown, dropdownProps, {
  133. default: function _default() {
  134. return [dropdownTrigger];
  135. },
  136. overlay: renderOverlay
  137. });
  138. };
  139. }
  140. });
  141. Dropdown.Button = DropdownButton;
  142. export default Dropdown;