feat: PurePanel and refactor naming (#36834)

* docs: PurePanel * docs: Update API * docs: Update doc * chore: correct style naming * test: Update snapshot
2025-01-18 22:36:31 +08:00 · 2022-08-01 23:20:04 +08:00 · 2022-08-01 23:20:04 +08:00 · 0dc7c99e7d
commit 0dc7c99e7d
parent b9a9757b5e
10 changed files with 241 additions and 18 deletions
--- a/components/drawer/tests/Drawer.test.js
+++ b/components/drawer/tests/Drawer.test.js
@ -114,7 +114,7 @@ describe('Drawer', () => {

  it('className is test_drawer', () => {
    const { container: wrapper } = render(
-      <Drawer destroyOnClose visible className="test_drawer" getContainer={false}>
+      <Drawer destroyOnClose visible rootClassName="test_drawer" getContainer={false}>
        Here is content of Drawer
      </Drawer>,
    );
@ -130,7 +130,7 @@ describe('Drawer', () => {
    const { container: wrapper } = render(
      <Drawer
        visible
-        style={style}
+        rootStyle={style}
        drawerStyle={style}
        headerStyle={style}
        bodyStyle={style}
--- a/components/drawer/tests/snapshots/demo-extend.test.tsx.snap
+++ b/components/drawer/tests/snapshots/demo-extend.test.tsx.snap
@ -2906,7 +2906,6 @@ exports[`renders ./components/drawer/demo/render-in-current.md extend context co
  </div>
  <div
    class="ant-drawer ant-drawer-right ant-drawer-open ant-drawer-inline"
-    style="position: absolute;"
    tabindex="-1"
  >
    <div
@ -2963,6 +2962,91 @@ exports[`renders ./components/drawer/demo/render-in-current.md extend context co
 </div>
 `;

+exports[`renders ./components/drawer/demo/render-panel.md extend context correctly 1`] = `
+<div
+  style="position: relative; min-height: 100px; overflow: hidden; height: 300px; box-shadow: 0 0 5px red;"
+>
+  <div
+    class="ant-drawer ant-drawer-right ant-drawer-open ant-drawer-inline"
+    tabindex="-1"
+  >
+    <div
+      class="ant-drawer-mask"
+    />
+    <div
+      aria-hidden="true"
+      data-sentinel="start"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
+      tabindex="0"
+    />
+    <div
+      class="ant-drawer-content-wrapper"
+      style="width: 378px;"
+    >
+      <div
+        aria-modal="true"
+        class="ant-drawer-content"
+        role="dialog"
+      >
+        <div
+          class="ant-drawer-wrapper-body"
+        >
+          <div
+            class="ant-drawer-header"
+          >
+            <div
+              class="ant-drawer-header-title"
+            >
+              <button
+                aria-label="Close"
+                class="ant-drawer-close"
+                type="button"
+              >
+                <span
+                  aria-label="close"
+                  class="anticon anticon-close"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="close"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <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>
+                </span>
+              </button>
+              <div
+                class="ant-drawer-title"
+              >
+                Hello Title
+              </div>
+            </div>
+          </div>
+          <div
+            class="ant-drawer-body"
+          >
+            Hello Content
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      data-sentinel="end"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
+      tabindex="0"
+    />
+  </div>
+</div>
+`;
+
 exports[`renders ./components/drawer/demo/size.md extend context correctly 1`] = `
 HTMLCollection [
  <div
--- a/components/drawer/tests/snapshots/demo.test.js.snap
+++ b/components/drawer/tests/snapshots/demo.test.js.snap
@ -311,7 +311,6 @@ exports[`renders ./components/drawer/demo/render-in-current.md correctly 1`] = `
  </div>
  <div
    class="ant-drawer ant-drawer-right ant-drawer-inline"
-    style="position:absolute"
    tabindex="-1"
  >
    <div
@ -330,6 +329,91 @@ exports[`renders ./components/drawer/demo/render-in-current.md correctly 1`] = `
 </div>
 `;

+exports[`renders ./components/drawer/demo/render-panel.md correctly 1`] = `
+<div
+  style="position:relative;min-height:100px;overflow:hidden;height:300px;box-shadow:0 0 5px red"
+>
+  <div
+    class="ant-drawer ant-drawer-right ant-drawer-open ant-drawer-inline"
+    tabindex="-1"
+  >
+    <div
+      class="ant-drawer-mask"
+    />
+    <div
+      aria-hidden="true"
+      data-sentinel="start"
+      style="width:0;height:0;overflow:hidden;outline:none;position:absolute"
+      tabindex="0"
+    />
+    <div
+      class="ant-drawer-content-wrapper"
+      style="width:378px"
+    >
+      <div
+        aria-modal="true"
+        class="ant-drawer-content"
+        role="dialog"
+      >
+        <div
+          class="ant-drawer-wrapper-body"
+        >
+          <div
+            class="ant-drawer-header"
+          >
+            <div
+              class="ant-drawer-header-title"
+            >
+              <button
+                aria-label="Close"
+                class="ant-drawer-close"
+                type="button"
+              >
+                <span
+                  aria-label="close"
+                  class="anticon anticon-close"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="close"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <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>
+                </span>
+              </button>
+              <div
+                class="ant-drawer-title"
+              >
+                Hello Title
+              </div>
+            </div>
+          </div>
+          <div
+            class="ant-drawer-body"
+          >
+            Hello Content
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      data-sentinel="end"
+      style="width:0;height:0;overflow:hidden;outline:none;position:absolute"
+      tabindex="0"
+    />
+  </div>
+</div>
+`;
+
 exports[`renders ./components/drawer/demo/size.md correctly 1`] = `
 <div
  class="ant-space ant-space-horizontal ant-space-align-center"
--- a/components/drawer/demo/config-provider.md
+++ b/components/drawer/demo/config-provider.md
@ -37,7 +37,7 @@ const App: React.FC = () => {
          Open
        </Button>
        <Drawer
-          style={{ position: 'absolute' }}
+          rootStyle={{ position: 'absolute' }}
          title="ConfigProvider"
          placement="right"
          onClose={onClose}
--- a/components/drawer/demo/render-in-current.md
+++ b/components/drawer/demo/render-in-current.md
@ -43,7 +43,6 @@ const App: React.FC = () => {
        onClose={onClose}
        visible={visible}
        getContainer={false}
-        style={{ position: 'absolute' }}
      >
        <p>Some contents...</p>
      </Drawer>
--- a/components/drawer/demo/render-panel.md
+++ b/components/drawer/demo/render-panel.md
@ -0,0 +1,29 @@
+---
+order: 99
+title:
+  zh-CN: _InternalPanelDoNotUseOrYouWillBeFired
+  en-US: _InternalPanelDoNotUseOrYouWillBeFired
+debug: true
+---
+
+## zh-CN
+
+调试用组件，请勿直接使用。
+
+## en-US
+
+Debug usage. Do not use in your production.
+
+```tsx
+import React from 'react';
+import { Drawer } from 'antd';
+
+/** Test usage. Do not use in your production. */
+const { _InternalPanelDoNotUseOrYouWillBeFired: InternalDrawer } = Drawer;
+
+export default () => (
+  <InternalDrawer title="Hello Title" style={{ height: 300, boxShadow: '0 0 5px red' }}>
+    Hello Content
+  </InternalDrawer>
+);
+```
--- a/components/drawer/index.en-US.md
+++ b/components/drawer/index.en-US.md
@ -18,17 +18,18 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr

 ## API

+**🚨 Note:** v5 use `rootClassName` & `rootStyle` to config wrapper style instead of `className` & `style` in v4 to align the API with Modal.
+
 | Props | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | autoFocus | Whether Drawer should get focused after open | boolean | true | 4.17.0 |
 | afterVisibleChange | Callback after the animation ends when switching drawers | function(visible) | - |  |
 | bodyStyle | Style of the drawer content part | CSSProperties | - |  |
-| className | The class name of the container of the Drawer dialog | string | - |  |
+| 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 /> |  |
 | contentWrapperStyle | Style of the drawer wrapper of content part | CSSProperties | - |  |
 | destroyOnClose | Whether to unmount child components on closing drawer or not | boolean | false |  |
-| drawerStyle | Style of the popup layer element | CSSProperties | - |  |
 | extra | Extra actions area at corner | ReactNode | - | 4.17.0 |
 | footer | The footer for Drawer | ReactNode | - |  |
 | footerStyle | Style of the drawer footer part | CSSProperties | - |  |
@ -42,7 +43,9 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
 | maskStyle | Style for Drawer's mask element | CSSProperties | {} |  |
 | placement | The placement of the Drawer | `top` \| `right` \| `bottom` \| `left` | `right` |  |
 | push | Nested drawers push behavior | boolean \| { distance: string \| number } | { distance: 180 } | 4.5.0+ |
-| style | Style of wrapper element which **contains mask** compare to `drawerStyle` | CSSProperties | - |  |
+| rootClassName | The class name of the container of the Drawer dialog | string | - |  |
+| rootStyle | Style of wrapper element which **contains mask** compare to `style` | CSSProperties | - |  |
+| style | Style of Drawer panel. Use `bodyStyle` if want to config body only | CSSProperties | - |  |
 | size | presetted size of drawer, default `378px` and large `736px` | 'default' \| 'large' | 'default' | 4.17.0 |
 | title | The title for Drawer | ReactNode | - |  |
 | visible | Whether the Drawer dialog is visible or not | boolean | false |  |
--- a/components/drawer/index.tsx
+++ b/components/drawer/index.tsx
@ -43,6 +43,7 @@ export interface DrawerProps extends RcDrawerProps {
 const defaultPushState: PushState = { distance: 180 };

 function Drawer({
+  rootClassName,
  width,
  height,
  size = 'default',
@ -52,11 +53,9 @@ function Drawer({
  closeIcon = <CloseOutlined />,
  bodyStyle,
  drawerStyle,
-  className,
  visible,
  children,
  zIndex,
-  style,
  title,
  headerStyle,
  onClose,
@ -125,7 +124,7 @@ function Drawer({
      'no-mask': !mask,
      [`${prefixCls}-rtl`]: direction === 'rtl',
    },
-    className,
+    rootClassName,
    hashId,
  );

@ -157,6 +156,8 @@ function Drawer({
      <RcDrawer
        prefixCls={prefixCls}
        onClose={onClose}
+        maskMotion={maskMotion}
+        motion={panelMotion}
        {...rest}
        open={visible}
        mask={mask}
@ -168,9 +169,6 @@ function Drawer({
        afterOpenChange={open => {
          afterVisibleChange?.(open);
        }}
-        maskMotion={maskMotion}
-        motion={panelMotion}
-        rootStyle={style}
      >
        <div className={`${prefixCls}-wrapper-body`} style={{ ...drawerStyle }}>
          {renderHeader()}
@ -188,4 +186,26 @@ if (process.env.NODE_ENV !== 'production') {
  Drawer.displayName = 'Drawer';
 }

+interface PurePanelProps extends DrawerProps {}
+
+function PurePanel({ style, ...restProps }: PurePanelProps) {
+  const containerRef = React.useRef<HTMLDivElement>(null);
+
+  return (
+    <div
+      ref={containerRef}
+      style={{
+        position: 'relative',
+        minHeight: 100,
+        overflow: 'hidden',
+        ...style,
+      }}
+    >
+      <Drawer {...restProps} getContainer={false} maskMotion={{}} motion={{}} visible />
+    </div>
+  );
+}
+
+Drawer._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
+
 export default Drawer;
--- a/components/drawer/index.zh-CN.md
+++ b/components/drawer/index.zh-CN.md
@ -17,17 +17,18 @@ cover: https://img.alicdn.com/imgextra/i4/O1CN019djdZP1OHwXSRGCOW_!!600000000168

 ## API

+**🚨 注意：** v5 使用 `rootClassName` 与 `rootStyle` 来配置最外层元素样式。原 v4 `className` 与 `style` 改至配置 Drawer 窗体样式以和 Modal 对齐。
+
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | autoFocus | 抽屉展开后是否将焦点切换至其 Dom 节点 | boolean | true | 4.17.0 |
 | afterVisibleChange | 切换抽屉时动画结束后的回调 | function(visible) | - |  |
 | bodyStyle | 可用于设置 Drawer 内容部分的样式 | CSSProperties | - |  |
-| className | 对话框外层容器的类名 | string | - |  |
+| className | Drawer 容器外层 className 设置，如果需要设置最外层，请使用 rootClassName | string | - |  |
 | closable | 是否显示左上角的关闭按钮 | boolean | true |  |
 | closeIcon | 自定义关闭图标 | ReactNode | &lt;CloseOutlined /> |  |
 | contentWrapperStyle | 可用于设置 Drawer 包裹内容部分的样式 | CSSProperties | - |  |
 | destroyOnClose | 关闭时销毁 Drawer 里的子元素 | boolean | false |  |
-| drawerStyle | 用于设置 Drawer 弹出层的样式 | CSSProperties | - |  |
 | extra | 抽屉右上角的操作区域 | ReactNode | - | 4.17.0 |
 | footer | 抽屉的页脚 | ReactNode | - |  |
 | footerStyle | 抽屉页脚部件的样式 | CSSProperties | - |  |
@ -41,8 +42,10 @@ cover: https://img.alicdn.com/imgextra/i4/O1CN019djdZP1OHwXSRGCOW_!!600000000168
 | maskStyle | 遮罩样式 | CSSProperties | {} |  |
 | placement | 抽屉的方向 | `top` \| `right` \| `bottom` \| `left` | `right` |  |
 | push | 用于设置多层 Drawer 的推动行为 | boolean \| { distance: string \| number } | { distance: 180 } | 4.5.0+ |
+| rootClassName | 对话框外层容器的类名 | string | - |  |
+| rootStyle | 可用于设置 Drawer 最外层容器的样式，和 `style` 的区别是作用节点包括 `mask` | CSSProperties | - |  |
 | size | 预设抽屉宽度（或高度），default `378px` 和 large `736px` | 'default' \| 'large' | 'default' | 4.17.0 |
-| style | 可用于设置 Drawer 最外层容器的样式，和 `drawerStyle` 的区别是作用节点包括 `mask` | CSSProperties | - |  |
+| style | 设计 Drawer 容器样式，如果你只需要设置内容部分请使用 `bodyStyle` | CSSProperties | - |  |
 | title | 标题 | ReactNode | - |  |
 | visible | Drawer 是否可见 | boolean | - |  |
 | width | 宽度 | string \| number | 378 |  |
--- a/v5-note.md
+++ b/v5-note.md
@ -8,3 +8,4 @@
 - Notification
  - 静态方法不在允许在 `open` 中动态设置 `prefixCls` `maxCount` `top` `bottom` `getContainer`，Notification 静态方法现在将只有一个实例。如果需要不同配置，请使用 `useNotification`。
  - close 改名为 destroy 和 message 保持一致
+- Drawer style & className 迁移至 Drawer Panel 中，原属性替换为 `rootClassName` 和 `rootStyle`