refactor(Drawer): refactor drawer closeIcon (#42993)

* feat: optimize closeIcon * refactor: refactor closeIcon * docs: update docs * feat: optimize code * feat: update test case * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * docs: update docs
1 year ago · cf961b2c8c
4 changed files with 102 additions and 13 deletions
--- a/components/drawer/DrawerPanel.tsx
+++ b/components/drawer/DrawerPanel.tsx
@ -9,9 +9,15 @@ export interface DrawerPanelProps {
  title?: React.ReactNode;
  footer?: React.ReactNode;
  extra?: React.ReactNode;
-
+  /**
+   * advised to use closeIcon instead
+   *
+   * e.g.
+   *
+   * `<Drawer closeIcon={false} />`
+   */
  closable?: boolean;
-  closeIcon?: React.ReactNode;
+  closeIcon?: boolean | React.ReactNode;
  onClose?: RCDrawerProps['onClose'];

  /** Wrapper dom node style of header and body */
@ -28,8 +34,8 @@ const DrawerPanel: React.FC<DrawerPanelProps> = (props) => {
    title,
    footer,
    extra,
-    closable = true,
-    closeIcon = <CloseOutlined />,
+    closeIcon,
+    closable,
    onClose,
    headerStyle,
    drawerStyle,
@ -38,21 +44,39 @@ const DrawerPanel: React.FC<DrawerPanelProps> = (props) => {
    children,
  } = props;

-  const closeIconNode = closable && (
+  const mergedClosable = React.useMemo(() => {
+    if (typeof closable === 'boolean') {
+      return closable;
+    }
+
+    return closeIcon !== null && closeIcon !== false;
+  }, [closable, closeIcon]);
+
+  const mergedCloseIcon = React.useMemo(() => {
+    if (!mergedClosable) {
+      return null;
+    }
+    if (closeIcon === undefined || closeIcon === true) {
+      return <CloseOutlined />;
+    }
+    return closeIcon;
+  }, [closeIcon, mergedClosable]);
+
+  const closeIconNode = mergedClosable && (
    <button type="button" onClick={onClose} aria-label="Close" className={`${prefixCls}-close`}>
-      {closeIcon}
+      {mergedCloseIcon}
    </button>
  );

  const headerNode = React.useMemo<React.ReactNode>(() => {
-    if (!title && !closable) {
+    if (!title && !mergedClosable) {
      return null;
    }
    return (
      <div
        style={headerStyle}
        className={classNames(`${prefixCls}-header`, {
-          [`${prefixCls}-header-close-only`]: closable && !title && !extra,
+          [`${prefixCls}-header-close-only`]: mergedClosable && !title && !extra,
        })}
      >
        <div className={`${prefixCls}-header-title`}>
@ -62,7 +86,7 @@ const DrawerPanel: React.FC<DrawerPanelProps> = (props) => {
        {extra && <div className={`${prefixCls}-extra`}>{extra}</div>}
      </div>
    );
-  }, [closable, closeIconNode, extra, headerStyle, prefixCls, title]);
+  }, [mergedClosable, closeIconNode, extra, headerStyle, prefixCls, title]);

  const footerNode = React.useMemo<React.ReactNode>(() => {
    if (!footer) {
--- a/components/drawer/tests/Drawer.test.tsx
+++ b/components/drawer/tests/Drawer.test.tsx
@ -242,5 +242,72 @@ describe('Drawer', () => {

      errorSpy.mockRestore();
    });
+
+    it('should hide close button when closeIcon is null or false', async () => {
+      const { baseElement, rerender } = render(
+        <Drawer open closeIcon={null}>
+          Here is content of Drawer
+        </Drawer>,
+      );
+      expect(baseElement.querySelector('.ant-drawer-close')).toBeNull();
+
+      rerender(
+        <Drawer open closeIcon={false}>
+          Here is content of Drawer
+        </Drawer>,
+      );
+      expect(baseElement.querySelector('.ant-drawer-close')).toBeNull();
+
+      rerender(
+        <Drawer open closeIcon={<span className="custom-close">Close</span>}>
+          Here is content of Drawer
+        </Drawer>,
+      );
+      expect(baseElement.querySelector('.custom-close')).not.toBeNull();
+
+      rerender(
+        <Drawer open closable={false} closeIcon={<span className="custom-close2">Close</span>}>
+          Here is content of Drawer
+        </Drawer>,
+      );
+      expect(baseElement.querySelector('.custom-close2')).toBeNull();
+
+      rerender(
+        <Drawer open closable closeIcon={<span className="custom-close3">Close</span>}>
+          Here is content of Drawer
+        </Drawer>,
+      );
+      expect(baseElement.querySelector('.custom-close3')).not.toBeNull();
+
+      rerender(
+        <Drawer open closeIcon={0} className="custom-drawer1">
+          Here is content of Drawer
+        </Drawer>,
+      );
+      expect(baseElement.querySelector('.custom-drawer1 .ant-drawer-close')).not.toBeNull();
+      expect(baseElement.querySelector('.custom-drawer1 .anticon-close')).toBeNull();
+
+      rerender(
+        <Drawer open closeIcon="" className="custom-drawer2">
+          Here is content of Drawer
+        </Drawer>,
+      );
+      expect(baseElement.querySelector('.custom-drawer2 .ant-drawer-close')).not.toBeNull();
+      expect(baseElement.querySelector('.custom-drawer2 .anticon-close')).toBeNull();
+
+      rerender(
+        <Drawer open closeIcon className="custom-drawer3">
+          Here is content of Drawer
+        </Drawer>,
+      );
+      expect(baseElement.querySelector('.custom-drawer3 .anticon-close')).not.toBeNull();
+
+      rerender(
+        <Drawer open closable>
+          Here is content of Drawer
+        </Drawer>,
+      );
+      expect(baseElement.querySelector('.anticon-close')).not.toBeNull();
+    });
  });
 });
--- a/components/drawer/index.en-US.md
+++ b/components/drawer/index.en-US.md
@ -46,8 +46,7 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
 | afterOpenChange | Callback after the animation ends when switching drawers | function(open) | - |  |
 | bodyStyle | Style of the drawer content part | CSSProperties | - |  |
 | className | Config Drawer Panel className. Use `rootClassName` if want to config top dom style | string | - |  |
-| closable | Whether a close (x) button is visible on top left of the Drawer dialog or not | boolean | true |  |
-| closeIcon | Custom close icon | ReactNode | &lt;CloseOutlined /> |  |
+| closeIcon | Custom close icon. 5.7.0: close button will be hidden when setting to `null` or `false` | boolean \| ReactNode | &lt;CloseOutlined /> |  |
 | contentWrapperStyle | Style of the drawer wrapper of content part | CSSProperties | - |  |
 | destroyOnClose | Whether to unmount child components on closing drawer or not | boolean | false |  |
 | extra | Extra actions area at corner | ReactNode | - | 4.17.0 |
--- a/components/drawer/index.zh-CN.md
+++ b/components/drawer/index.zh-CN.md
@ -45,8 +45,7 @@ demo:
 | afterOpenChange | 切换抽屉时动画结束后的回调 | function(open) | - |  |
 | bodyStyle | 可用于设置 Drawer 内容部分的样式 | CSSProperties | - |  |
 | className | Drawer 容器外层 className 设置，如果需要设置最外层，请使用 rootClassName | string | - |  |
-| closable | 是否显示左上角的关闭按钮 | boolean | true |  |
-| closeIcon | 自定义关闭图标 | ReactNode | &lt;CloseOutlined /> |  |
+| closeIcon | 自定义关闭图标。5.7.0：设置为 `null` 或 `false` 时隐藏关闭按钮 | boolean \| ReactNode | &lt;CloseOutlined /> |  |
 | contentWrapperStyle | 可用于设置 Drawer 包裹内容部分的样式 | CSSProperties | - |  |
 | destroyOnClose | 关闭时销毁 Drawer 里的子元素 | boolean | false |  |
 | extra | 抽屉右上角的操作区域 | ReactNode | - | 4.17.0 |