feat: dropdown add overlayClassName overlayStyle,

Author: tangjinzhou

components/dropdown/__tests__/__snapshots__/demo.test.js.snap

@@ -14,7 +14,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
   <div class="ant-btn-group ant-dropdown-button"><button type="button" class="ant-btn ant-btn-default"><span>Dropdown</span></button><button type="button" class="ant-btn ant-btn-default ant-dropdown-trigger"><i class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
           <path d="M176 511a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"></path>
         </svg></i></button></div>
-  <div class="ant-btn-group ant-dropdown-button" style="margin-left: 8px;"><button type="button" disabled="disabled" class="ant-btn ant-btn-default"><span>Dropdown</span></button><button type="button" class="ant-btn ant-btn-default ant-dropdown-trigger"><i class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+  <div class="ant-btn-group ant-dropdown-button" style="margin-left: 8px;"><button disabled="disabled" type="button" class="ant-btn ant-btn-default"><span>Dropdown</span></button><button type="button" class="ant-btn ant-btn-default ant-dropdown-trigger"><i class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
           <path d="M176 511a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"></path>
         </svg></i></button></div> <button type="button" class="ant-btn ant-btn-default ant-dropdown-trigger" style="margin-left: 8px;">
     Button <i class="anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">

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

@@ -1,5 +1,6 @@
 import { mount } from '@vue/test-utils'
 import Dropdown from '..'
+import Menu from '../../menu'
 
 describe('DropdownButton', () => {
   it('pass appropriate props to Dropdown', () => {
@@ -26,7 +27,17 @@ describe('DropdownButton', () => {
   })
 
   it('don\'t pass visible to Dropdown if it\'s not exits', () => {
-    const wrapper = mount(Dropdown.Button)
+    const wrapper = mount({
+      render () {
+        return (
+          <Dropdown.Button
+            overlay={<Menu>
+              <Menu.Item>foo</Menu.Item>
+            </Menu>}
+          />
+        )
+      },
+    })
     const dropdownProps = wrapper.find({ name: 'ADropdown' }).props()
 
     expect('visible' in dropdownProps).toBe(false)

components/dropdown/dropdown-button.jsx

@@ -34,21 +34,24 @@ export default {
     prop: 'visible',
     event: 'visibleChange',
   },
+  inject: {
+    configProvider: { default: {}},
+  },
   render () {
     const {
       type, disabled, htmlType,
       prefixCls, trigger, align,
       visible, placement, getPopupContainer,
       ...restProps
     } = this.$props
-
+    const { getPopupContainer: getContextPopupContainer } = this.configProvider
     const dropdownProps = {
       props: {
         align,
         disabled,
         trigger: disabled ? [] : trigger,
         placement,
-        getPopupContainer,
+        getPopupContainer: getPopupContainer || getContextPopupContainer,
       },
       on: {
         visibleChange: this.onVisibleChange,

components/dropdown/dropdown.jsx

@@ -21,6 +21,9 @@ const Dropdown = {
     prop: 'visible',
     event: 'visibleChange',
   },
+  inject: {
+    configProvider: { default: {}},
+  },
   methods: {
     getTransitionName () {
       const { placement = '', transitionName } = this.$props
@@ -35,7 +38,15 @@ const Dropdown = {
   },
 
   render () {
-    const { $slots, prefixCls, trigger, disabled, $listeners } = this
+    const { $slots, $listeners } = this
+    const props = getOptionProps(this)
+    const {
+      prefixCls,
+      trigger,
+      disabled,
+      getPopupContainer,
+    } = props
+    const { getPopupContainer: getContextPopupContainer } = this.configProvider
     const dropdownTrigger = cloneElement($slots.default, {
       class: `${prefixCls}-trigger`,
       disabled,
@@ -68,7 +79,8 @@ const Dropdown = {
     const dropdownProps = {
       props: {
         alignPoint,
-        ...getOptionProps(this),
+        ...props,
+        getPopupContainer: getPopupContainer || getContextPopupContainer,
         transitionName: this.getTransitionName(),
         trigger: triggerActions,
       },

components/dropdown/getDropdownProps.js

@@ -9,5 +9,9 @@ export default () => ({
   prefixCls: PropTypes.string,
   transitionName: PropTypes.string,
   placement: PropTypes.oneOf(['topLeft', 'topCenter', 'topRight', 'bottomLeft', 'bottomCenter', 'bottomRight']),
+  overlayClassName: PropTypes.string,
+  overlayStyle: PropTypes.object,
   forceRender: PropTypes.bool,
+  mouseEnterDelay: PropTypes.number,
+  mouseLeaveDelay: PropTypes.number,
 })

components/dropdown/index.en-US.md

@@ -7,6 +7,8 @@
 | disabled | whether the dropdown menu is disabled | boolean | - |
 | getPopupContainer | to set the container of the dropdown menu. The default is to create a `div` element in `body`, you can reset it to the scrolling area and make a relative reposition. [example](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | `() => document.body` |
 | overlay(slot) | the dropdown menu | [Menu](/ant-design-vue/components/menu) | - |
+| 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']` |
 | visible(v-model) | whether the dropdown menu is visible | boolean | - |

components/dropdown/index.zh-CN.md

@@ -7,6 +7,8 @@
 | disabled | 菜单是否禁用 | boolean | - |
 | getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 | Function(triggerNode) | `() => document.body` |
 | overlay(slot) | 菜单 | [Menu](/ant-design-vue/components/menu-cn) | - |
+| overlayClassName | 下拉根元素的类名称 | string | - |
+| overlayStyle | 下拉根元素的样式 | object | - |
 | placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` |
 | trigger | 触发下拉的行为 | Array<`click`\|`hover`\|`contextmenu`> | `['hover']` |
 | visible(v-model) | 菜单是否显示 | boolean | - |