dropdown.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. import _extends from 'babel-runtime/helpers/extends';
  2. import RcDropdown from '../vc-dropdown/src/index';
  3. import DropdownButton from './dropdown-button';
  4. import PropTypes from '../_util/vue-types';
  5. import { cloneElement } from '../_util/vnode';
  6. import { getOptionProps, getPropsData, getComponentFromProp, getListeners } from '../_util/props-util';
  7. import getDropdownProps from './getDropdownProps';
  8. import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
  9. import Icon from '../icon';
  10. var DropdownProps = getDropdownProps();
  11. var Dropdown = {
  12. name: 'ADropdown',
  13. props: _extends({}, DropdownProps, {
  14. prefixCls: PropTypes.string,
  15. mouseEnterDelay: PropTypes.number.def(0.15),
  16. mouseLeaveDelay: PropTypes.number.def(0.1),
  17. placement: DropdownProps.placement.def('bottomLeft')
  18. }),
  19. model: {
  20. prop: 'visible',
  21. event: 'visibleChange'
  22. },
  23. provide: function provide() {
  24. return {
  25. savePopupRef: this.savePopupRef
  26. };
  27. },
  28. inject: {
  29. configProvider: { 'default': function _default() {
  30. return ConfigConsumerProps;
  31. } }
  32. },
  33. methods: {
  34. savePopupRef: function savePopupRef(ref) {
  35. this.popupRef = ref;
  36. },
  37. getTransitionName: function getTransitionName() {
  38. var _$props = this.$props,
  39. _$props$placement = _$props.placement,
  40. placement = _$props$placement === undefined ? '' : _$props$placement,
  41. transitionName = _$props.transitionName;
  42. if (transitionName !== undefined) {
  43. return transitionName;
  44. }
  45. if (placement.indexOf('top') >= 0) {
  46. return 'slide-down';
  47. }
  48. return 'slide-up';
  49. },
  50. renderOverlay: function renderOverlay(prefixCls) {
  51. var h = this.$createElement;
  52. var overlay = getComponentFromProp(this, 'overlay');
  53. var overlayNode = Array.isArray(overlay) ? overlay[0] : overlay;
  54. // menu cannot be selectable in dropdown defaultly
  55. // menu should be focusable in dropdown defaultly
  56. var overlayProps = overlayNode && getPropsData(overlayNode);
  57. var _ref = overlayProps || {},
  58. _ref$selectable = _ref.selectable,
  59. selectable = _ref$selectable === undefined ? false : _ref$selectable,
  60. _ref$focusable = _ref.focusable,
  61. focusable = _ref$focusable === undefined ? true : _ref$focusable;
  62. var expandIcon = h(
  63. 'span',
  64. { 'class': prefixCls + '-menu-submenu-arrow' },
  65. [h(Icon, {
  66. attrs: { type: 'right' },
  67. 'class': prefixCls + '-menu-submenu-arrow-icon' })]
  68. );
  69. var fixedModeOverlay = overlayNode && overlayNode.componentOptions ? cloneElement(overlayNode, {
  70. props: {
  71. mode: 'vertical',
  72. selectable: selectable,
  73. focusable: focusable,
  74. expandIcon: expandIcon
  75. }
  76. }) : overlay;
  77. return fixedModeOverlay;
  78. }
  79. },
  80. render: function render() {
  81. var h = arguments[0];
  82. var $slots = this.$slots;
  83. var props = getOptionProps(this);
  84. var customizePrefixCls = props.prefixCls,
  85. trigger = props.trigger,
  86. disabled = props.disabled,
  87. getPopupContainer = props.getPopupContainer;
  88. var getContextPopupContainer = this.configProvider.getPopupContainer;
  89. var getPrefixCls = this.configProvider.getPrefixCls;
  90. var prefixCls = getPrefixCls('dropdown', customizePrefixCls);
  91. var dropdownTrigger = cloneElement($slots['default'], {
  92. 'class': prefixCls + '-trigger',
  93. props: {
  94. disabled: disabled
  95. }
  96. });
  97. var triggerActions = disabled ? [] : trigger;
  98. var alignPoint = void 0;
  99. if (triggerActions && triggerActions.indexOf('contextmenu') !== -1) {
  100. alignPoint = true;
  101. }
  102. var dropdownProps = {
  103. props: _extends({
  104. alignPoint: alignPoint
  105. }, props, {
  106. prefixCls: prefixCls,
  107. getPopupContainer: getPopupContainer || getContextPopupContainer,
  108. transitionName: this.getTransitionName(),
  109. trigger: triggerActions
  110. }),
  111. on: getListeners(this)
  112. };
  113. return h(
  114. RcDropdown,
  115. dropdownProps,
  116. [dropdownTrigger, h(
  117. 'template',
  118. { slot: 'overlay' },
  119. [this.renderOverlay(prefixCls)]
  120. )]
  121. );
  122. }
  123. };
  124. Dropdown.Button = DropdownButton;
  125. export default Dropdown;
  126. export { DropdownProps };