refactor(Tag): refactor closeIcon (#43109)

* refactor: refactor closeIcon * feat: optimize code * feat: optimize code
2024-12-02 03:59:01 +08:00 · 2023-06-20 13:42:55 +08:00 · 2023-06-20 13:42:55 +08:00 · f93d5c8ba7
commit f93d5c8ba7
parent 4ad5cbff66
10 changed files with 110 additions and 68 deletions
--- 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.
   *
--- 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<HTMLButtonElement>) => void;
--- 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`] = `
    <span
      class="ant-tag"
    >
-      Tag 2
+      Prevent Default
      <span
        aria-label="close"
        class="anticon anticon-close ant-tag-close-icon"
@ -195,26 +195,32 @@ exports[`renders components/tag/demo/basic.tsx extend context correctly 1`] = `
    <span
      class="ant-tag"
    >
-      Prevent Default
+      Tag 2
      <span
-        aria-label="close"
-        class="anticon anticon-close ant-tag-close-icon"
-        role="img"
-        tabindex="-1"
+        class="ant-tag-close-icon"
      >
-        <svg
-          aria-hidden="true"
-          data-icon="close"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
+        <span
+          aria-label="close-circle"
+          class="anticon anticon-close-circle"
+          role="img"
        >
-          <path
-            d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-          />
-        </svg>
+          <svg
+            aria-hidden="true"
+            data-icon="close-circle"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 00-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"
+            />
+            <path
+              d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+            />
+          </svg>
+        </span>
      </span>
    </span>
  </div>
--- 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`] = `
    <span
      class="ant-tag"
    >
-      Tag 2
+      Prevent Default
      <span
        aria-label="close"
        class="anticon anticon-close ant-tag-close-icon"
@ -195,26 +195,32 @@ exports[`renders components/tag/demo/basic.tsx correctly 1`] = `
    <span
      class="ant-tag"
    >
-      Prevent Default
+      Tag 2
      <span
-        aria-label="close"
-        class="anticon anticon-close ant-tag-close-icon"
-        role="img"
-        tabindex="-1"
+        class="ant-tag-close-icon"
      >
-        <svg
-          aria-hidden="true"
-          data-icon="close"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
+        <span
+          aria-label="close-circle"
+          class="anticon anticon-close-circle"
+          role="img"
        >
-          <path
-            d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-          />
-        </svg>
+          <svg
+            aria-hidden="true"
+            data-icon="close-circle"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 00-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"
+            />
+            <path
+              d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+            />
+          </svg>
+        </span>
      </span>
    </span>
  </div>
--- 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(
+      <>
+        <Tag className="tag1" closable closeIcon="close" />
+        <Tag className="tag2" closable closeIcon />
+        <Tag className="tag3" closable closeIcon={false} />
+        <Tag className="tag4" closable closeIcon={null} />
+        <Tag className="tag5" closable={false} closeIcon="close" />
+        <Tag className="tag6" closable={false} closeIcon />
+        <Tag className="tag7" closable={false} closeIcon={false} />
+        <Tag className="tag8" closable={false} closeIcon={null} />
+        <Tag className="tag9" closeIcon="close" />
+        <Tag className="tag10" closeIcon />
+        <Tag className="tag11" closeIcon={false} />
+        <Tag className="tag12" closeIcon={null} />
+      </>,
+    );
+
+    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(<Tag onClick={onClick} />);
--- 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.
--- 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 = () => (
    <Tag>
      <a href="https://github.com/ant-design/ant-design/issues/1862">Link</a>
    </Tag>
-    <Tag closable onClose={log}>
-      Tag 2
-    </Tag>
-    <Tag closable onClose={preventDefault}>
+    <Tag closeIcon onClose={preventDefault}>
      Prevent Default
    </Tag>
+    <Tag closeIcon={<CloseCircleOutlined />} onClose={log}>
+      Tag 2
+    </Tag>
  </Space>
 );

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

--- 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<HTMLSpanElement> {
  rootClassName?: string;
  color?: LiteralUnion<PresetColorType | PresetStatusColorType>;
  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<HTMLElement>) => void;
@ -43,7 +45,7 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
    color,
    onClose,
    closeIcon,
-    closable = false,
+    closable,
    bordered = true,
    ...props
  } = tagProps;
@ -100,18 +102,20 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
    setVisible(false);
  };

-  const closeIconNode = React.useMemo<React.ReactNode>(() => {
-    if (closable) {
-      return closeIcon ? (
-        <span className={`${prefixCls}-close-icon`} onClick={handleCloseClick}>
-          {closeIcon}
-        </span>
-      ) : (
+  const [, mergedCloseIcon] = useClosable(
+    closable,
+    closeIcon,
+    (iconNode: React.ReactNode) =>
+      iconNode === null ? (
        <CloseOutlined className={`${prefixCls}-close-icon`} onClick={handleCloseClick} />
-      );
-    }
-    return null;
-  }, [closable, closeIcon, prefixCls, handleCloseClick]);
+      ) : (
+        <span className={`${prefixCls}-close-icon`} onClick={handleCloseClick}>
+          {iconNode}
+        </span>
+      ),
+    null,
+    false,
+  );

  const isNeedWave =
    typeof props.onClick === 'function' ||
@ -131,7 +135,7 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
  const tagNode = (
    <span {...props} ref={ref} className={tagClassName} style={tagStyle}>
      {kids}
-      {closeIconNode}
+      {mergedCloseIcon}
    </span>
  );

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