From 1658c303d36fba255dd414cf9834b3f1b96554a0 Mon Sep 17 00:00:00 2001 From: lihang Date: Thu, 24 Sep 2020 13:29:06 +0800 Subject: [PATCH] fix(dropdown): auto close after click overlay element affects: @gio-design/components, website --- .../src/components/dropdown/Dropdown.tsx | 14 +++++++++++++- .../components/dropdown/__test__/Dropdown.test.js | 4 ++-- .../src/components/dropdown/interface.ts | 4 +++- .../components/functional/dropdown/demo/filter.tsx | 4 ++-- .../functional/dropdown/demo/function.tsx | 4 ++-- .../components/functional/dropdown/index.zh-CN.md | 12 ++++++++---- 6 files changed, 30 insertions(+), 12 deletions(-) diff --git a/packages/components/src/components/dropdown/Dropdown.tsx b/packages/components/src/components/dropdown/Dropdown.tsx index 63d9fa0785..ad7d6acc3f 100644 --- 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 ( { 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 index a48ca89e62..cec0a2fbee 100644 --- 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 内容主体}> ); @@ -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:
overlay update
}); 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 index 764f23a719..e38e192dff 100644 --- 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; +export interface DropdownProps extends Omit { + 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 index 41a2e1a09a..7a96ec5115 100644 --- a/packages/website/src/components/functional/dropdown/demo/filter.tsx +++ b/packages/website/src/components/functional/dropdown/demo/filter.tsx @@ -21,7 +21,7 @@ export default () => { return ( +
{ 确定
- + } > - + } > diff --git a/packages/website/src/components/functional/dropdown/index.zh-CN.md b/packages/website/src/components/functional/dropdown/index.zh-CN.md index dfcfa799e2..f1a029209d 100644 --- 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] 点击触点，出现下拉菜单，在列表中选择相应的命令执行，点击相应命令后自动收起列表，点击区域为整条列表项，点击空白处列表收起。 @@ -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)