update dropdown

components/dropdown/__tests__/dropdown-button.test.js

@@ -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();
+  });
 });

components/dropdown/dropdown-button.jsx

@@ -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}>

components/dropdown/dropdown.jsx

@@ -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>
     );
   },

components/dropdown/getDropdownProps.js

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

components/dropdown/index.en-US.md

@@ -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<`click`\|`hover`\|`contextmenu`> | `['hover']` |
+| trigger | the trigger mode which executes the drop-down action, hover doesn't work on mobile device | Array<`click`\|`hover`\|`contextmenu`> | `['hover']` |
 | visible(v-model) | whether the dropdown menu is visible | boolean | - |
 
 ### events

components/dropdown/index.zh-CN.md

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