feat: Popconfirm support PurePanel (#36538)

* refactor: move popconfirm content out

* fix: lint

* chore: use locale

components/popconfirm/PurePanel.tsx

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
+import classNames from 'classnames';
 import type { PopconfirmProps } from '.';
 import Button from '../button';
 import { convertLegacyProps } from '../button/button';
@@ -7,6 +9,9 @@ import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import defaultLocale from '../locale/default';
 import { getRenderPropValue } from '../_util/getRenderPropValue';
 import { ConfigContext } from '../config-provider';
+import PopoverPurePanel from '../popover/PurePanel';
+
+import useStyle from './style';
 
 export interface PopconfirmLocale {
   okText: string;
@@ -39,8 +44,8 @@ export function Overlay(props: OverlayProps) {
     title,
     cancelText,
     okText,
-    okType,
-    icon,
+    okType = 'primary',
+    icon = <ExclamationCircleFilled />,
     showCancel = true,
     close,
     onConfirm,
@@ -79,3 +84,29 @@ export function Overlay(props: OverlayProps) {
     </LocaleReceiver>
   );
 }
+
+export interface PurePanelProps
+  extends Omit<OverlayProps, 'prefixCls'>,
+    Pick<PopconfirmProps, 'placement'> {
+  className?: string;
+  style?: React.CSSProperties;
+  prefixCls?: string;
+}
+
+export default function PurePanel(props: PurePanelProps) {
+  const { prefixCls: customizePrefixCls, placement, className, style, ...restProps } = props;
+
+  const { getPrefixCls } = React.useContext(ConfigContext);
+  const prefixCls = getPrefixCls('popconfirm', customizePrefixCls);
+  const [wrapSSR] = useStyle(prefixCls);
+
+  return wrapSSR(
+    <PopoverPurePanel
+      placement={placement}
+      className={classNames(prefixCls, className)}
+      style={style}
+    >
+      <Overlay {...restProps} prefixCls={prefixCls} />
+    </PopoverPurePanel>,
+  );
+}

components/popconfirm/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -1554,3 +1554,145 @@ Array [
   </div>,
 ]
 `;
+
+exports[`renders ./components/popconfirm/demo/render-panel.md extend context correctly 1`] = `
+Array [
+  <div
+    class="ant-popover ant-popover-pure ant-popover-placement-top ant-popconfirm"
+  >
+    <div
+      class="ant-popover-content"
+    >
+      <div
+        class="ant-popover-arrow"
+      />
+      <div
+        class="ant-popover-inner"
+        role="tooltip"
+      >
+        <div
+          class="ant-popconfirm-inner-content"
+        >
+          <div
+            class="ant-popconfirm-message"
+          >
+            <span
+              aria-label="exclamation-circle"
+              class="anticon anticon-exclamation-circle"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="exclamation-circle"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                />
+              </svg>
+            </span>
+            <div
+              class="ant-popconfirm-message-title"
+            >
+              Are you OK?
+            </div>
+          </div>
+          <div
+            class="ant-popconfirm-buttons"
+          >
+            <button
+              class="ant-btn ant-btn-default ant-btn-sm"
+              type="button"
+            >
+              <span>
+                Cancel
+              </span>
+            </button>
+            <button
+              class="ant-btn ant-btn-primary ant-btn-sm"
+              type="button"
+            >
+              <span>
+                OK
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <div
+    class="ant-popover ant-popover-pure ant-popover-placement-bottomRight ant-popconfirm"
+  >
+    <div
+      class="ant-popover-content"
+      style="width:250px"
+    >
+      <div
+        class="ant-popover-arrow"
+      />
+      <div
+        class="ant-popover-inner"
+        role="tooltip"
+      >
+        <div
+          class="ant-popconfirm-inner-content"
+        >
+          <div
+            class="ant-popconfirm-message"
+          >
+            <span
+              aria-label="exclamation-circle"
+              class="anticon anticon-exclamation-circle"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="exclamation-circle"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                />
+              </svg>
+            </span>
+            <div
+              class="ant-popconfirm-message-title"
+            >
+              Are you OK?
+            </div>
+          </div>
+          <div
+            class="ant-popconfirm-buttons"
+          >
+            <button
+              class="ant-btn ant-btn-default ant-btn-sm"
+              type="button"
+            >
+              <span>
+                Cancel
+              </span>
+            </button>
+            <button
+              class="ant-btn ant-btn-primary ant-btn-sm"
+              type="button"
+            >
+              <span>
+                OK
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+]
+`;

components/popconfirm/__tests__/__snapshots__/demo.test.js.snap

@@ -190,3 +190,145 @@ exports[`renders ./components/popconfirm/demo/promise.md correctly 1`] = `
   </span>
 </button>
 `;
+
+exports[`renders ./components/popconfirm/demo/render-panel.md correctly 1`] = `
+Array [
+  <div
+    class="ant-popover ant-popover-pure ant-popover-placement-top ant-popconfirm"
+  >
+    <div
+      class="ant-popover-content"
+    >
+      <div
+        class="ant-popover-arrow"
+      />
+      <div
+        class="ant-popover-inner"
+        role="tooltip"
+      >
+        <div
+          class="ant-popconfirm-inner-content"
+        >
+          <div
+            class="ant-popconfirm-message"
+          >
+            <span
+              aria-label="exclamation-circle"
+              class="anticon anticon-exclamation-circle"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="exclamation-circle"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                />
+              </svg>
+            </span>
+            <div
+              class="ant-popconfirm-message-title"
+            >
+              Are you OK?
+            </div>
+          </div>
+          <div
+            class="ant-popconfirm-buttons"
+          >
+            <button
+              class="ant-btn ant-btn-default ant-btn-sm"
+              type="button"
+            >
+              <span>
+                Cancel
+              </span>
+            </button>
+            <button
+              class="ant-btn ant-btn-primary ant-btn-sm"
+              type="button"
+            >
+              <span>
+                OK
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <div
+    class="ant-popover ant-popover-pure ant-popover-placement-bottomRight ant-popconfirm"
+  >
+    <div
+      class="ant-popover-content"
+      style="width:250px"
+    >
+      <div
+        class="ant-popover-arrow"
+      />
+      <div
+        class="ant-popover-inner"
+        role="tooltip"
+      >
+        <div
+          class="ant-popconfirm-inner-content"
+        >
+          <div
+            class="ant-popconfirm-message"
+          >
+            <span
+              aria-label="exclamation-circle"
+              class="anticon anticon-exclamation-circle"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="exclamation-circle"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                />
+              </svg>
+            </span>
+            <div
+              class="ant-popconfirm-message-title"
+            >
+              Are you OK?
+            </div>
+          </div>
+          <div
+            class="ant-popconfirm-buttons"
+          >
+            <button
+              class="ant-btn ant-btn-default ant-btn-sm"
+              type="button"
+            >
+              <span>
+                Cancel
+              </span>
+            </button>
+            <button
+              class="ant-btn ant-btn-primary ant-btn-sm"
+              type="button"
+            >
+              <span>
+                OK
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+]
+`;

components/popconfirm/demo/placement.md

@@ -112,17 +112,15 @@ export default App;
 ```
 
 <style>
-.code-box-demo .demo {
+#components-popconfirm-demo-placement .demo {
   overflow: auto;
 }
-.code-box-demo .ant-popover-wrap > a {
+#components-popconfirm-demo-placement .ant-popover-wrap > a {
   margin-right: 8px;
 }
-.code-box-demo .ant-btn {
-  margin-right: 8px;
-  margin-bottom: 8px;
-}
 #components-popconfirm-demo-placement .ant-btn {
+  margin-right: 8px;
+  margin-bottom: 8px;
   width: 70px;
   text-align: center;
   padding: 0;

components/popconfirm/demo/render-panel.md

@@ -0,0 +1,31 @@
+---
+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 { Popconfirm } from 'antd';
+import React from 'react';
+
+const { _InternalPanelDoNotUseOrYouWillBeFired: InternalPopconfirm } = Popconfirm;
+
+const App: React.FC = () => (
+  <>
+    <InternalPopconfirm title="Are you OK?" />
+    <InternalPopconfirm title="Are you OK?" placement="bottomRight" style={{ width: 250 }} />
+  </>
+);
+
+export default App;
+```

components/popconfirm/index.tsx

@@ -1,4 +1,3 @@
-import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
 import classNames from 'classnames';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import KeyCode from 'rc-util/lib/KeyCode';
@@ -6,11 +5,10 @@ import * as React from 'react';
 import type { ButtonProps, LegacyButtonType } from '../button/button';
 import { ConfigContext } from '../config-provider';
 import Popover from '../popover';
-import genPurePanel from '../_util/PurePanel';
 import type { AbstractTooltipProps } from '../tooltip';
 import type { RenderFunction } from '../_util/getRenderPropValue';
 import { cloneElement } from '../_util/reactNode';
-import { Overlay } from './PurePanel';
+import PurePanel, { Overlay } from './PurePanel';
 
 import usePopconfirmStyle from './style';
 
@@ -126,16 +124,12 @@ const Popconfirm = React.forwardRef<unknown, PopconfirmProps>((props, ref) => {
 };
 
 Popconfirm.defaultProps = {
-  placement: 'top' as PopconfirmProps['placement'],
   trigger: 'click' as PopconfirmProps['trigger'],
-  okType: 'primary' as PopconfirmProps['okType'],
-  icon: <ExclamationCircleFilled />,
   disabled: false,
 };
 
 // We don't care debug panel
 /* istanbul ignore next */
-const PurePanel = genPurePanel(Popconfirm, 'popover', prefixCls => prefixCls);
 Popconfirm._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
 
 export default Popconfirm;

components/popover/PurePanel.tsx

@@ -22,11 +22,18 @@ export const getOverlay = (
 };
 
 export interface PurePanelProps extends Omit<PopoverProps, 'children'> {
-  children: React.ReactNode;
+  children?: React.ReactNode;
 }
 
 export default function PurePanel(props: any) {
-  const { prefixCls: customizePrefixCls, className, placement = 'top', title, content } = props;
+  const {
+    prefixCls: customizePrefixCls,
+    className,
+    placement = 'top',
+    title,
+    content,
+    children,
+  } = props;
   const { getPrefixCls } = React.useContext(ConfigContext);
 
   const prefixCls = getPrefixCls('popover', customizePrefixCls);
@@ -43,7 +50,7 @@ export default function PurePanel(props: any) {
       )}
     >
       <Popup {...props} className={hashId} prefixCls={prefixCls}>
-        {getOverlay(prefixCls, title, content)}
+        {children || getOverlay(prefixCls, title, content)}
       </Popup>
     </div>,
   );