fix(dropdown): auto close after click overlay element (#252)

affects: @gio-design/components, website
growingio · Sep 25, 2020 · 4fe82a7 · 4fe82a7
1 parent c51c371
commit 4fe82a7
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 12 deletions.
diff --git a/packages/components/src/components/dropdown/Dropdown.tsx b/packages/components/src/components/dropdown/Dropdown.tsx
@@ -1,8 +1,9 @@
-import React, { useContext } from 'react';
+import React, { useContext, cloneElement } from 'react';
 import Tooltip from '../tooltip';
 import { DropdownProps } from './interface';
 import { ConfigContext } from '../config-provider';
 import useControlledState from '../../utils/hooks/useControlledState';
+import { isFunction } from 'lodash';
 
 const Dropdown = (props: DropdownProps) => {
   const {
@@ -12,18 +13,29 @@ const Dropdown = (props: DropdownProps) => {
     trigger = 'click',
     visible,
     onVisibleChange,
+    overlay,
     ...rest
   } = props;
   const { getPrefixCls } = useContext(ConfigContext);
   const prefixCls = getPrefixCls('dropdown', customizePrefixCls);
   const [controlledVisible, setControlledVisible] = useControlledState(visible, false);
 
+  const getOverlay = () => {
+    const _overlay: React.ReactElement = isFunction(overlay) ? overlay() : overlay;
+    const onOverlayClick = (e: React.MouseEvent) => {
+      setControlledVisible(false, true);
+      _overlay.props.onClick?.(e);
+    };
+    return cloneElement(_overlay, { onClick: onOverlayClick });
+  };
+
   return (
     <Tooltip
       prefixCls={prefixCls}
       trigger={trigger}
       placement={placement}
       visible={controlledVisible}
+      overlay={getOverlay()}
       onVisibleChange={(_visible) => {
         setControlledVisible(_visible);
         onVisibleChange?.(_visible);

diff --git a/packages/components/src/components/dropdown/__test__/Dropdown.test.js b/packages/components/src/components/dropdown/__test__/Dropdown.test.js
@@ -10,7 +10,7 @@ async function waitForComponentToPaint(wrapper, amount = 500) {
 
 describe('Testing dropdown', () => {
   const getDropdown = () => (
-    <Dropdown overlay="Dropdown 内容主体">
+    <Dropdown overlay={<div>Dropdown 内容主体</div>}>
       <Button>Test</Button>
     </Dropdown>
   );
@@ -23,7 +23,7 @@ describe('Testing dropdown', () => {
   it('should be mount, setProps, unmount with no error', () => {
     expect(() => {
       const wrapper = mount(getDropdown());
-      wrapper.setProps({ overlay: 'overlay update' });
+      wrapper.setProps({ overlay: <div>overlay update</div> });
       wrapper.setProps({ trigger: 'hover' });
       wrapper.setProps({ visible: 'true' });
       wrapper.unmount();

diff --git a/packages/components/src/components/dropdown/interface.ts b/packages/components/src/components/dropdown/interface.ts
@@ -1,3 +1,5 @@
 import { TooltipProps } from '../tooltip/interface';
 
-export type DropdownProps = Omit<TooltipProps, 'title' | 'tooltipLink' | 'arrowPointAtCenter'>;
+export interface DropdownProps extends Omit<TooltipProps, 'title' | 'tooltipLink' | 'arrowPointAtCenter' | 'overlay'> {
+  overlay: (() => React.ReactElement) | React.ReactElement;
+}
diff --git a/packages/website/src/components/functional/dropdown/demo/filter.tsx b/packages/website/src/components/functional/dropdown/demo/filter.tsx
@@ -22,7 +22,7 @@ export default () => {
       visible={visible}
       onVisibleChange={setVisible}
       overlay={
-        <>
+        <div>
           <SearchBar
             id="demo"
             value={searchvalue}
@@ -59,7 +59,7 @@ export default () => {
               确定
             </Button>
           </div>
-        </>
+        </div>
       }
     >
       <Button type="assist" icon={<FilterOutlined />} />

diff --git a/packages/website/src/components/functional/dropdown/demo/function.tsx b/packages/website/src/components/functional/dropdown/demo/function.tsx
@@ -18,7 +18,7 @@ export default () => {
   return (
     <Dropdown
       overlay={
-        <>
+        <div>
           <SearchBar
             id="demo"
             value={searchvalue}
@@ -31,7 +31,7 @@ export default () => {
               新建活动
             </Button>
           </div>
-        </>
+        </div>
       }
     >
       <Button type="secondary">这是一个 Select</Button>

diff --git a/packages/website/src/components/functional/dropdown/index.zh-CN.md b/packages/website/src/components/functional/dropdown/index.zh-CN.md
@@ -15,6 +15,7 @@ group:
 向下弹出的列表。当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。
 
 [1] 用于收罗一组命令操作。
+
 [2] Select 用于选择，而 Dropdown 是命令集合。
 
 ## 应用场景
@@ -33,6 +34,7 @@ group:
 ## 代码演示
 
 [1] 当页面上的操作命令过多时，常使用 Dropdown 收纳操作元素。
+
 [2] 点击触点，出现下拉菜单，在列表中选择相应的命令执行，点击相应命令后自动收起列表，点击区域为整条列表项，点击空白处列表收起。
 
 <code src='./demo/base.tsx' title='自定义内容样式' />
@@ -46,9 +48,11 @@ group:
 
 ## 参数说明
 
-| 参数          | 说明                                                                                                                                           | 类型             | 默认值   |
-| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | -------- |
-| **placement** | 气泡框位置, 可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string           | `bottom` |
-| **trigger**   | 触发行为，可选 hover,focus,click,contextMenu                                                                                                   | string\|string[] | `click`  |
+| 参数          | 说明                                                                                                                                           | 类型                               | 默认值   |
+| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | -------- |
+| **placement** | 气泡框位置, 可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string                             | `bottom` |
+| **trigger**   | 触发行为，可选 hover,focus,click,contextMenu                                                                                                   | string\|string[]                   | `click`  |
+| **overlay**   | 下拉区域                                                                                                                                       | ReactElement \| () => ReactElement | -        |
 
+注意，请确保 overlay 的元素能接受 onClick 事件，否则点击下拉区域不会关闭下拉菜单。
 更多参数参考[Tooltip](/components/basic/tooltip)