From 94a3d51cb011085a65e7bf6e4b08a53e1c1175a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Mon, 11 Jul 2022 15:57:05 +0800
Subject: [PATCH] feat: Dropdown support PurePanel (#36461)

* feat: Dropdown support PurePanel

* chore: clean up
---
 .../__snapshots__/demo-extend.test.ts.snap    | 286 ++++++++++++++++++
 .../__tests__/__snapshots__/demo.test.js.snap |  10 +
 components/dropdown/demo/render-panel.md      |  66 ++++
 components/dropdown/dropdown.tsx              |  14 +
 components/select/PurePanel.tsx               |   6 +-
 5 files changed, 381 insertions(+), 1 deletion(-)
 create mode 100644 components/dropdown/demo/render-panel.md

diff --git a/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap
index 74e30e6b48..556288baa7 100644
--- a/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -8194,6 +8194,292 @@ exports[`renders ./components/dropdown/demo/placement.md extend context correctl
 </div>
 `;
 
+exports[`renders ./components/dropdown/demo/render-panel.md extend context correctly 1`] = `
+<div
+  style="padding-bottom:0;position:relative"
+>
+  <span
+    class="ant-dropdown-trigger"
+  />
+  <div>
+    <div
+      class="ant-dropdown"
+      style="opacity:0"
+    >
+      <ul
+        class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
+        data-menu-list="true"
+        role="menu"
+        tabindex="0"
+      >
+        <li
+          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            <a
+              href="https://www.antgroup.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              1st menu item
+            </a>
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+        <li
+          aria-disabled="true"
+          class="ant-dropdown-menu-item ant-dropdown-menu-item-disabled"
+          role="menuitem"
+        >
+          <span
+            aria-label="smile"
+            class="anticon anticon-smile ant-dropdown-menu-item-icon"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="smile"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
+              />
+            </svg>
+          </span>
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            <a
+              href="https://www.aliyun.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              2nd menu item (disabled)
+            </a>
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+        <li
+          aria-disabled="true"
+          class="ant-dropdown-menu-item ant-dropdown-menu-item-disabled ant-dropdown-menu-item-only-child"
+          role="menuitem"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            <a
+              href="https://www.luohanacademy.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              3rd menu item (disabled)
+            </a>
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+        <li
+          class="ant-dropdown-menu-item ant-dropdown-menu-item-danger ant-dropdown-menu-item-only-child"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            a danger item
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+      </ul>
+      <div
+        aria-hidden="true"
+        style="display:none"
+      >
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/dropdown/demo/selectable.md extend context correctly 1`] = `
 Array [
   <a
diff --git a/components/dropdown/__tests__/__snapshots__/demo.test.js.snap b/components/dropdown/__tests__/__snapshots__/demo.test.js.snap
index e63aa57ee7..a5b4388e91 100644
--- a/components/dropdown/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/dropdown/__tests__/__snapshots__/demo.test.js.snap
@@ -858,6 +858,16 @@ exports[`renders ./components/dropdown/demo/placement.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/dropdown/demo/render-panel.md correctly 1`] = `
+<div
+  style="padding-bottom:0;position:relative"
+>
+  <span
+    class="ant-dropdown-trigger"
+  />
+</div>
+`;
+
 exports[`renders ./components/dropdown/demo/selectable.md correctly 1`] = `
 <a
   class="ant-typography ant-dropdown-trigger"
diff --git a/components/dropdown/demo/render-panel.md b/components/dropdown/demo/render-panel.md
new file mode 100644
index 0000000000..cd39f48aa1
--- /dev/null
+++ b/components/dropdown/demo/render-panel.md
@@ -0,0 +1,66 @@
+---
+order: 999
+title:
+  zh-CN: _InternalPanelDoNotUseOrYouWillBeFired
+  en-US: _InternalPanelDoNotUseOrYouWillBeFired
+debug: true
+---
+
+## zh-CN
+
+调试用组件，请勿直接使用。
+
+## en-US
+
+Debug usage. Do not use in your production.
+
+```tsx
+import { SmileOutlined } from '@ant-design/icons';
+import { Dropdown, Menu } from 'antd';
+import React from 'react';
+
+const { _InternalPanelDoNotUseOrYouWillBeFired: InternalDropdown } = Dropdown;
+
+const menu = (
+  <Menu
+    items={[
+      {
+        key: '1',
+        label: (
+          <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
+            1st menu item
+          </a>
+        ),
+      },
+      {
+        key: '2',
+        label: (
+          <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
+            2nd menu item (disabled)
+          </a>
+        ),
+        icon: <SmileOutlined />,
+        disabled: true,
+      },
+      {
+        key: '3',
+        label: (
+          <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
+            3rd menu item (disabled)
+          </a>
+        ),
+        disabled: true,
+      },
+      {
+        key: '4',
+        danger: true,
+        label: 'a danger item',
+      },
+    ]}
+  />
+);
+
+const App: React.FC = () => <InternalDropdown overlay={menu} />;
+
+export default App;
+```
diff --git a/components/dropdown/dropdown.tsx b/components/dropdown/dropdown.tsx
index a05d848990..81f6f2f2f9 100644
--- a/components/dropdown/dropdown.tsx
+++ b/components/dropdown/dropdown.tsx
@@ -6,6 +6,7 @@ import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import * as React from 'react';
 import { ConfigContext } from '../config-provider';
 import { OverrideProvider } from '../menu/OverrideContext';
+import genPurePanel from '../select/PurePanel';
 import getPlacements from '../_util/placements';
 import { cloneElement } from '../_util/reactNode';
 import { tuple } from '../_util/type';
@@ -71,6 +72,7 @@ export interface DropdownProps {
 
 interface DropdownInterface extends React.FC<DropdownProps> {
   Button: typeof DropdownButton;
+  _InternalPanelDoNotUseOrYouWillBeFired: typeof WrapPurePanel;
 }
 
 const Dropdown: DropdownInterface = props => {
@@ -238,4 +240,16 @@ Dropdown.defaultProps = {
   mouseLeaveDelay: 0.1,
 };
 
+// We don't care debug panel
+const PurePanel = genPurePanel(Dropdown, 'dropdown', prefixCls => prefixCls);
+
+/* istanbul ignore next */
+const WrapPurePanel = (props: DropdownProps) => (
+  <PurePanel {...props}>
+    <span />
+  </PurePanel>
+);
+
+Dropdown._InternalPanelDoNotUseOrYouWillBeFired = WrapPurePanel;
+
 export default Dropdown;
diff --git a/components/select/PurePanel.tsx b/components/select/PurePanel.tsx
index 03dc718b2b..408344e958 100644
--- a/components/select/PurePanel.tsx
+++ b/components/select/PurePanel.tsx
@@ -10,6 +10,7 @@ export interface BaseProps {
 export default function genPurePanel<ComponentProps extends BaseProps>(
   Component: any,
   defaultPrefixCls?: string,
+  getDropdownCls?: (prefixCls: string) => string,
 ) {
   return function PurePanel(props: ComponentProps) {
     const { prefixCls: customizePrefixCls, style } = props;
@@ -31,7 +32,10 @@ export default function genPurePanel<ComponentProps extends BaseProps>(
         });
 
         const interval = setInterval(() => {
-          const popup = holderRef.current?.querySelector(`.${prefixCls}-dropdown`);
+          const dropdownCls = getDropdownCls
+            ? `.${getDropdownCls(prefixCls)}`
+            : `.${prefixCls}-dropdown`;
+          const popup = holderRef.current?.querySelector(dropdownCls);
 
           if (popup) {
             clearInterval(interval);