From f93d5c8ba76a6587308d35ea61ba8fdc4400bfd4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Tue, 20 Jun 2023 13:42:55 +0800 Subject: [PATCH] refactor(Tag): refactor closeIcon (#43109) * refactor: refactor closeIcon * feat: optimize code * feat: optimize code --- components/drawer/DrawerPanel.tsx | 2 +- components/modal/interface.ts | 2 +- .../__snapshots__/demo-extend.test.ts.snap | 42 +++++++++++-------- .../__tests__/__snapshots__/demo.test.ts.snap | 42 +++++++++++-------- components/tag/__tests__/index.test.tsx | 27 ++++++++++++ components/tag/demo/basic.md | 4 +- components/tag/demo/basic.tsx | 9 ++-- components/tag/index.en-US.md | 15 ++++--- components/tag/index.tsx | 30 +++++++------ components/tag/index.zh-CN.md | 3 +- 10 files changed, 109 insertions(+), 67 deletions(-) diff --git a/components/drawer/DrawerPanel.tsx b/components/drawer/DrawerPanel.tsx index 6146f3962b..79370c3961 100644 --- a/components/drawer/DrawerPanel.tsx +++ b/components/drawer/DrawerPanel.tsx @@ -10,7 +10,7 @@ export interface DrawerPanelProps { footer?: React.ReactNode; extra?: React.ReactNode; /** - * advised to use closeIcon instead + * Recommend to use closeIcon instead * * e.g. * diff --git a/components/modal/interface.ts b/components/modal/interface.ts index 86d0648613..57bda8bac8 100644 --- a/components/modal/interface.ts +++ b/components/modal/interface.ts @@ -8,7 +8,7 @@ export interface ModalProps { confirmLoading?: boolean; /** The modal dialog's title */ title?: React.ReactNode; - /** Whether a close (x) button is visible on top right of the modal dialog or not. Advised to use closeIcon instead. */ + /** Whether a close (x) button is visible on top right of the modal dialog or not. Recommend to use closeIcon instead. */ closable?: boolean; /** Specify a function that will be called when a user clicks the OK button */ onOk?: (e: React.MouseEvent) => void; diff --git a/components/tag/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tag/__tests__/__snapshots__/demo-extend.test.ts.snap index 099f9872df..6c1dc9ff1a 100644 --- a/components/tag/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/tag/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -165,7 +165,7 @@ exports[`renders components/tag/demo/basic.tsx extend context correctly 1`] = ` - Tag 2 + Prevent Default - Prevent Default + Tag 2 - + + diff --git a/components/tag/__tests__/__snapshots__/demo.test.ts.snap b/components/tag/__tests__/__snapshots__/demo.test.ts.snap index 9d033a95a4..5d0d07393a 100644 --- a/components/tag/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/tag/__tests__/__snapshots__/demo.test.ts.snap @@ -165,7 +165,7 @@ exports[`renders components/tag/demo/basic.tsx correctly 1`] = ` - Tag 2 + Prevent Default - Prevent Default + Tag 2 - + + diff --git a/components/tag/__tests__/index.test.tsx b/components/tag/__tests__/index.test.tsx index e2662a9689..a46d9f8cd1 100644 --- a/components/tag/__tests__/index.test.tsx +++ b/components/tag/__tests__/index.test.tsx @@ -62,6 +62,33 @@ describe('Tag', () => { expect(container.querySelectorAll('.ant-tag:not(.ant-tag-hidden)').length).toBe(1); }); + it('show close button by closeIcon', () => { + const { container } = render( + <> + + + + + + + + + + + + + , + ); + + expect(container.querySelectorAll('.ant-tag-close-icon').length).toBe(6); + ['tag1', 'tag2', 'tag3', 'tag4', 'tag9', 'tag10'].forEach((tag) => { + expect(container.querySelector(`.${tag} .ant-tag-close-icon`)).toBeTruthy(); + }); + ['tag5', 'tag6', 'tag7', 'tag8', 'tag11', 'tag12'].forEach((tag) => { + expect(container.querySelector(`.${tag} .ant-tag-close-icon`)).toBeFalsy(); + }); + }); + it('should trigger onClick', () => { const onClick = jest.fn(); const { container } = render(); diff --git a/components/tag/demo/basic.md b/components/tag/demo/basic.md index 0598a96ffd..296fbb2ee3 100644 --- a/components/tag/demo/basic.md +++ b/components/tag/demo/basic.md @@ -1,7 +1,7 @@ ## zh-CN -基本标签的用法，可以通过添加 `closable` 变为可关闭标签。可关闭标签具有 `onClose` 事件。 +基本标签的用法，可以通过设置 `closeIcon` 变为可关闭标签并自定义关闭按钮，设置为 `true` 时将使用默认关闭按钮。可关闭标签具有 `onClose` 事件。 ## en-US -Usage of basic Tag, and it could be closable by set `closable` property. Closable Tag supports `onClose` events. +Usage of basic Tag, and it could be closable and customize close button by set `closeIcon` property, will display default close button when `closeIcon` is setting to `true`. Closable Tag supports `onClose` events. diff --git a/components/tag/demo/basic.tsx b/components/tag/demo/basic.tsx index 24e888218f..2b3dad54e1 100644 --- a/components/tag/demo/basic.tsx +++ b/components/tag/demo/basic.tsx @@ -1,3 +1,4 @@ +import { CloseCircleOutlined } from '@ant-design/icons'; import { Space, Tag } from 'antd'; import React from 'react'; @@ -16,12 +17,12 @@ const App: React.FC = () => ( Link - - Tag 2 - - + Prevent Default + } onClose={log}> + Tag 2 + ); diff --git a/components/tag/index.en-US.md b/components/tag/index.en-US.md index f5c038e06c..91104c4410 100644 --- a/components/tag/index.en-US.md +++ b/components/tag/index.en-US.md @@ -37,14 +37,13 @@ Tag for categorizing or markup. ### Tag -| Property | Description | Type | Default | Version | -| --------- | ------------------------------------ | ----------- | ------- | ------- | -| closable | Whether the Tag can be closed | boolean | false | | -| closeIcon | Custom close icon | ReactNode | - | 4.4.0 | -| color | Color of the Tag | string | - | | -| icon | Set the icon of tag | ReactNode | - | | -| bordered | Whether has border style | boolean | true | 5.4.0 | -| onClose | Callback executed when tag is closed | (e) => void | - | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| closeIcon | Custom close icon. 5.7.0: close button will be hidden when setting to `null` or `false` | ReactNode | false | 4.4.0 | +| color | Color of the Tag | string | - | | +| icon | Set the icon of tag | ReactNode | - | | +| bordered | Whether has border style | boolean | true | 5.4.0 | +| onClose | Callback executed when tag is closed | (e) => void | - | | ### Tag.CheckableTag diff --git a/components/tag/index.tsx b/components/tag/index.tsx index fed78b1619..6a9a685488 100644 --- a/components/tag/index.tsx +++ b/components/tag/index.tsx @@ -3,6 +3,7 @@ import classNames from 'classnames'; import * as React from 'react'; import type { PresetColorType, PresetStatusColorType } from '../_util/colors'; import { isPresetColor, isPresetStatusColor } from '../_util/colors'; +import useClosable from '../_util/hooks/useClosable'; import type { LiteralUnion } from '../_util/type'; import warning from '../_util/warning'; import Wave from '../_util/wave'; @@ -18,7 +19,8 @@ export interface TagProps extends React.HTMLAttributes { rootClassName?: string; color?: LiteralUnion; closable?: boolean; - closeIcon?: React.ReactNode; + /** Advised to use closeIcon instead. */ + closeIcon?: boolean | React.ReactNode; /** @deprecated `visible` will be removed in next major version. */ visible?: boolean; onClose?: (e: React.MouseEvent) => void; @@ -43,7 +45,7 @@ const InternalTag: React.ForwardRefRenderFunction = ( color, onClose, closeIcon, - closable = false, + closable, bordered = true, ...props } = tagProps; @@ -100,18 +102,20 @@ const InternalTag: React.ForwardRefRenderFunction = ( setVisible(false); }; - const closeIconNode = React.useMemo(() => { - if (closable) { - return closeIcon ? ( + const [, mergedCloseIcon] = useClosable( + closable, + closeIcon, + (iconNode: React.ReactNode) => + iconNode === null ? ( + + ) : ( - {closeIcon} + {iconNode} - ) : ( - - ); - } - return null; - }, [closable, closeIcon, prefixCls, handleCloseClick]); + ), + null, + false, + ); const isNeedWave = typeof props.onClick === 'function' || @@ -131,7 +135,7 @@ const InternalTag: React.ForwardRefRenderFunction = ( const tagNode = ( {kids} - {closeIconNode} + {mergedCloseIcon} ); diff --git a/components/tag/index.zh-CN.md b/components/tag/index.zh-CN.md index cfba8e060e..21cc0d7c25 100644 --- a/components/tag/index.zh-CN.md +++ b/components/tag/index.zh-CN.md @@ -39,8 +39,7 @@ demo: | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | -| closable | 标签是否可以关闭（点击默认关闭） | boolean | false | | -| closeIcon | 自定义关闭按钮 | ReactNode | - | 4.4.0 | +| closeIcon | 自定义关闭按钮。5.7.0：设置为 `null` 或 `false` 时隐藏关闭按钮 | boolean \| ReactNode | false | 4.4.0 | | color | 标签色 | string | - | | | icon | 设置图标 | ReactNode | - | | | bordered | 是否有边框 | boolean | true | 5.4.0 |