dropdown.js 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = void 0;
  7. var _vue = require("vue");
  8. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  9. var _vcDropdown = _interopRequireDefault(require("../vc-dropdown"));
  10. var _dropdownButton = _interopRequireDefault(require("./dropdown-button"));
  11. var _vnode = require("../_util/vnode");
  12. var _classNames = _interopRequireDefault(require("../_util/classNames"));
  13. var _propsUtil = require("../_util/props-util");
  14. var _props = require("./props");
  15. var _RightOutlined = _interopRequireDefault(require("@ant-design/icons-vue/lib/icons/RightOutlined"));
  16. var _useConfigInject = _interopRequireDefault(require("../config-provider/hooks/useConfigInject"));
  17. var _devWarning = _interopRequireDefault(require("../vc-util/devWarning"));
  18. var _omit = _interopRequireDefault(require("../_util/omit"));
  19. var _placements = _interopRequireDefault(require("../_util/placements"));
  20. var _warning = _interopRequireDefault(require("../_util/warning"));
  21. var _style = _interopRequireDefault(require("./style"));
  22. var _OverrideContext = require("../menu/src/OverrideContext");
  23. const Dropdown = (0, _vue.defineComponent)({
  24. compatConfig: {
  25. MODE: 3
  26. },
  27. name: 'ADropdown',
  28. inheritAttrs: false,
  29. props: (0, _propsUtil.initDefaultProps)((0, _props.dropdownProps)(), {
  30. mouseEnterDelay: 0.15,
  31. mouseLeaveDelay: 0.1,
  32. placement: 'bottomLeft',
  33. trigger: 'hover'
  34. }),
  35. // emits: ['visibleChange', 'update:visible'],
  36. slots: Object,
  37. setup(props, _ref) {
  38. let {
  39. slots,
  40. attrs,
  41. emit
  42. } = _ref;
  43. const {
  44. prefixCls,
  45. rootPrefixCls,
  46. direction,
  47. getPopupContainer
  48. } = (0, _useConfigInject.default)('dropdown', props);
  49. const [wrapSSR, hashId] = (0, _style.default)(prefixCls);
  50. // Warning for deprecated usage
  51. if (process.env.NODE_ENV !== 'production') {
  52. [['visible', 'open'], ['onVisibleChange', 'onOpenChange'], ['onUpdate:visible', 'onUpdate:open']].forEach(_ref2 => {
  53. let [deprecatedName, newName] = _ref2;
  54. (0, _warning.default)(props[deprecatedName] === undefined, 'Dropdown', `\`${deprecatedName}\` is deprecated which will be removed in next major version, please use \`${newName}\` instead.`);
  55. });
  56. }
  57. const transitionName = (0, _vue.computed)(() => {
  58. const {
  59. placement = '',
  60. transitionName
  61. } = props;
  62. if (transitionName !== undefined) {
  63. return transitionName;
  64. }
  65. if (placement.includes('top')) {
  66. return `${rootPrefixCls.value}-slide-down`;
  67. }
  68. return `${rootPrefixCls.value}-slide-up`;
  69. });
  70. (0, _OverrideContext.useProvideOverride)({
  71. prefixCls: (0, _vue.computed)(() => `${prefixCls.value}-menu`),
  72. expandIcon: (0, _vue.computed)(() => {
  73. return (0, _vue.createVNode)("span", {
  74. "class": `${prefixCls.value}-menu-submenu-arrow`
  75. }, [(0, _vue.createVNode)(_RightOutlined.default, {
  76. "class": `${prefixCls.value}-menu-submenu-arrow-icon`
  77. }, null)]);
  78. }),
  79. mode: (0, _vue.computed)(() => 'vertical'),
  80. selectable: (0, _vue.computed)(() => false),
  81. onClick: () => {},
  82. validator: _ref3 => {
  83. let {
  84. mode
  85. } = _ref3;
  86. // Warning if use other mode
  87. (0, _warning.default)(!mode || mode === 'vertical', 'Dropdown', `mode="${mode}" is not supported for Dropdown's Menu.`);
  88. }
  89. });
  90. const renderOverlay = () => {
  91. var _a, _b, _c;
  92. // rc-dropdown already can process the function of overlay, but we have check logic here.
  93. // So we need render the element to check and pass back to rc-dropdown.
  94. const overlay = props.overlay || ((_a = slots.overlay) === null || _a === void 0 ? void 0 : _a.call(slots));
  95. const overlayNode = Array.isArray(overlay) ? overlay[0] : overlay;
  96. if (!overlayNode) return null;
  97. const overlayProps = overlayNode.props || {};
  98. // Warning if use other mode
  99. (0, _devWarning.default)(!overlayProps.mode || overlayProps.mode === 'vertical', 'Dropdown', `mode="${overlayProps.mode}" is not supported for Dropdown's Menu.`);
  100. // menu cannot be selectable in dropdown defaultly
  101. const {
  102. selectable = false,
  103. expandIcon = (_c = (_b = overlayNode.children) === null || _b === void 0 ? void 0 : _b.expandIcon) === null || _c === void 0 ? void 0 : _c.call(_b)
  104. } = overlayProps;
  105. const overlayNodeExpandIcon = typeof expandIcon !== 'undefined' && (0, _propsUtil.isValidElement)(expandIcon) ? expandIcon : (0, _vue.createVNode)("span", {
  106. "class": `${prefixCls.value}-menu-submenu-arrow`
  107. }, [(0, _vue.createVNode)(_RightOutlined.default, {
  108. "class": `${prefixCls.value}-menu-submenu-arrow-icon`
  109. }, null)]);
  110. const fixedModeOverlay = (0, _propsUtil.isValidElement)(overlayNode) ? (0, _vnode.cloneElement)(overlayNode, {
  111. mode: 'vertical',
  112. selectable,
  113. expandIcon: () => overlayNodeExpandIcon
  114. }) : overlayNode;
  115. return fixedModeOverlay;
  116. };
  117. const placement = (0, _vue.computed)(() => {
  118. const placement = props.placement;
  119. if (!placement) {
  120. return direction.value === 'rtl' ? 'bottomRight' : 'bottomLeft';
  121. }
  122. if (placement.includes('Center')) {
  123. const newPlacement = placement.slice(0, placement.indexOf('Center'));
  124. (0, _devWarning.default)(!placement.includes('Center'), 'Dropdown', `You are using '${placement}' placement in Dropdown, which is deprecated. Try to use '${newPlacement}' instead.`);
  125. return newPlacement;
  126. }
  127. return placement;
  128. });
  129. const mergedVisible = (0, _vue.computed)(() => {
  130. return typeof props.visible === 'boolean' ? props.visible : props.open;
  131. });
  132. const handleVisibleChange = val => {
  133. emit('update:visible', val);
  134. emit('visibleChange', val);
  135. emit('update:open', val);
  136. emit('openChange', val);
  137. };
  138. return () => {
  139. var _a, _b;
  140. const {
  141. arrow,
  142. trigger,
  143. disabled,
  144. overlayClassName
  145. } = props;
  146. const child = (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)[0];
  147. const dropdownTrigger = (0, _vnode.cloneElement)(child, (0, _extends2.default)({
  148. class: (0, _classNames.default)((_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.class, {
  149. [`${prefixCls.value}-rtl`]: direction.value === 'rtl'
  150. }, `${prefixCls.value}-trigger`)
  151. }, disabled ? {
  152. disabled
  153. } : {}));
  154. const overlayClassNameCustomized = (0, _classNames.default)(overlayClassName, hashId.value, {
  155. [`${prefixCls.value}-rtl`]: direction.value === 'rtl'
  156. });
  157. const triggerActions = disabled ? [] : trigger;
  158. let alignPoint;
  159. if (triggerActions && triggerActions.includes('contextmenu')) {
  160. alignPoint = true;
  161. }
  162. const builtinPlacements = (0, _placements.default)({
  163. arrowPointAtCenter: typeof arrow === 'object' && arrow.pointAtCenter,
  164. autoAdjustOverflow: true
  165. });
  166. const dropdownProps = (0, _omit.default)((0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({}, props), attrs), {
  167. visible: mergedVisible.value,
  168. builtinPlacements,
  169. overlayClassName: overlayClassNameCustomized,
  170. arrow: !!arrow,
  171. alignPoint,
  172. prefixCls: prefixCls.value,
  173. getPopupContainer: getPopupContainer === null || getPopupContainer === void 0 ? void 0 : getPopupContainer.value,
  174. transitionName: transitionName.value,
  175. trigger: triggerActions,
  176. onVisibleChange: handleVisibleChange,
  177. placement: placement.value
  178. }), ['overlay', 'onUpdate:visible']);
  179. return wrapSSR((0, _vue.createVNode)(_vcDropdown.default, dropdownProps, {
  180. default: () => [dropdownTrigger],
  181. overlay: renderOverlay
  182. }));
  183. };
  184. }
  185. });
  186. Dropdown.Button = _dropdownButton.default;
  187. var _default = exports.default = Dropdown;