update dropdown

pull/802/head
wangxueliang 2019-04-10 10:09:00 +08:00
parent b22dfe297b
commit 05907aaff9
6 changed files with 62 additions and 30 deletions

View File

@ -44,4 +44,22 @@ describe('DropdownButton', () => {
expect('visible' in dropdownProps).toBe(false);
});
it('should support href like Button', () => {
const wrapper = mount({
render() {
return (
<Dropdown.Button
href="https://ant.design"
overlay={
<Menu>
<Menu.Item>foo</Menu.Item>
</Menu>
}
/>
);
},
});
expect(wrapper.html()).toMatchSnapshot();
});
});

View File

@ -5,6 +5,7 @@ import Dropdown from './dropdown';
import PropTypes from '../_util/vue-types';
import { hasProp, getComponentFromProp } from '../_util/props-util';
import getDropdownProps from './getDropdownProps';
import { ConfigConsumerProps } from '../config-provider';
const ButtonTypesProps = buttonTypes();
const DropdownProps = getDropdownProps();
const ButtonGroup = Button.Group;
@ -13,8 +14,9 @@ const DropdownButtonProps = {
...DropdownProps,
type: PropTypes.oneOf(['primary', 'ghost', 'dashed', 'danger', 'default']).def('default'),
htmlType: ButtonTypesProps.htmlType,
href: PropTypes.string,
disabled: PropTypes.bool,
prefixCls: PropTypes.string.def('ant-dropdown-button'),
prefixCls: PropTypes.string,
placement: DropdownProps.placement.def('bottomRight'),
};
export { DropdownButtonProps };
@ -41,15 +43,18 @@ export default {
type,
disabled,
htmlType,
prefixCls,
prefixCls: customizePrefixCls,
trigger,
align,
visible,
placement,
getPopupContainer,
href,
...restProps
} = this.$props;
const { getPopupContainer: getContextPopupContainer } = this.configProvider;
const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
const prefixCls = getPrefixCls('dropdown-button', customizePrefixCls);
const dropdownProps = {
props: {
align,
@ -68,7 +73,7 @@ export default {
return (
<ButtonGroup {...restProps} class={prefixCls}>
<Button type={type} disabled={disabled} onClick={this.onClick} htmlType={htmlType}>
<Button type={type} disabled={disabled} onClick={this.onClick} htmlType={htmlType} href={href}>
{this.$slots.default}
</Button>
<Dropdown {...dropdownProps}>

View File

@ -4,6 +4,7 @@ import PropTypes from '../_util/vue-types';
import { cloneElement } from '../_util/vnode';
import { getOptionProps, getPropsData } from '../_util/props-util';
import getDropdownProps from './getDropdownProps';
import { ConfigConsumerProps } from '../config-provider';
import Icon from '../icon';
const DropdownProps = getDropdownProps();
@ -34,40 +35,46 @@ const Dropdown = {
}
return 'slide-up';
},
renderOverlay(prefixCls) {
const { $slots } = this;
const overlay = this.overlay || ($slots.overlay && $slots.overlay[0]);
// menu cannot be selectable in dropdown defaultly
// menu should be focusable in dropdown defaultly
const overlayProps = overlay && getPropsData(overlay);
const { selectable = false, focusable = true } = overlayProps || {};
const expandIcon = (
<span class={`${prefixCls}-menu-submenu-arrow`}>
<Icon type="right" class={`${prefixCls}-menu-submenu-arrow-icon`} />
</span>
);
const fixedModeOverlay =
overlay && overlay.componentOptions
? cloneElement(overlay, {
props: {
mode: 'vertical',
selectable,
focusable,
expandIcon,
},
})
: overlay;
return fixedModeOverlay;
},
},
render() {
const { $slots, $listeners } = this;
const props = getOptionProps(this);
const { prefixCls, trigger, disabled, getPopupContainer } = props;
const { prefixCls: customizePrefixCls, trigger, disabled, getPopupContainer } = props;
const { getPopupContainer: getContextPopupContainer } = this.configProvider;
const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
const prefixCls = getPrefixCls('dropdown', customizePrefixCls);
const dropdownTrigger = cloneElement($slots.default, {
class: `${prefixCls}-trigger`,
disabled,
});
const overlay = this.overlay || ($slots.overlay && $slots.overlay[0]);
// menu cannot be selectable in dropdown defaultly
// menu should be focusable in dropdown defaultly
const overlayProps = overlay && getPropsData(overlay);
const { selectable = false, focusable = true } = overlayProps || {};
const expandIcon = (
<span class={`${prefixCls}-menu-submenu-arrow`}>
<Icon type="right" class={`${prefixCls}-menu-submenu-arrow-icon`} />
</span>
);
const fixedModeOverlay =
overlay && overlay.componentOptions
? cloneElement(overlay, {
props: {
mode: 'vertical',
selectable,
focusable,
expandIcon,
},
})
: overlay;
const triggerActions = disabled ? [] : trigger;
let alignPoint;
if (triggerActions && triggerActions.indexOf('contextmenu') !== -1) {
@ -77,6 +84,7 @@ const Dropdown = {
props: {
alignPoint,
...props,
prefixCls,
getPopupContainer: getPopupContainer || getContextPopupContainer,
transitionName: this.getTransitionName(),
trigger: triggerActions,
@ -86,7 +94,7 @@ const Dropdown = {
return (
<RcDropdown {...dropdownProps}>
{dropdownTrigger}
<template slot="overlay">{fixedModeOverlay}</template>
<template slot="overlay">{this.renderOverlay(prefixCls)}</template>
</RcDropdown>
);
},

View File

@ -21,4 +21,5 @@ export default () => ({
forceRender: PropTypes.bool,
mouseEnterDelay: PropTypes.number,
mouseLeaveDelay: PropTypes.number,
openClassName: PropTypes.string,
});

View File

@ -10,7 +10,7 @@
| overlayClassName | Class name of the dropdown root element | string | - |
| overlayStyle | Style of the dropdown root element | object | - |
| placement | placement of pop menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` |
| trigger | the trigger mode which executes the drop-down action | Array&lt;`click`\|`hover`\|`contextmenu`> | `['hover']` |
| trigger | the trigger mode which executes the drop-down action, hover doesn't work on mobile device | Array&lt;`click`\|`hover`\|`contextmenu`> | `['hover']` |
| visible(v-model) | whether the dropdown menu is visible | boolean | - |
### events

View File

@ -10,7 +10,7 @@
| overlayClassName | 下拉根元素的类名称 | string | - |
| overlayStyle | 下拉根元素的样式 | object | - |
| placement | 菜单弹出位置:`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` |
| trigger | 触发下拉的行为 | Array&lt;`click`\|`hover`\|`contextmenu`> | `['hover']` |
| trigger | 触发下拉的行为, 移动端不支持 hover | Array&lt;`click`\|`hover`\|`contextmenu`> | `['hover']` |
| visible(v-model) | 菜单是否显示 | boolean | - |
`overlay` 菜单使用 [Menu](/components/menu-cn/),还包括菜单项 `Menu.Item`,分割线 `Menu.Divider`