mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-06 16:06:28 +08:00
feat: Popconfirm support PurePanel (#36538)
* refactor: move popconfirm content out * fix: lint * chore: use locale
This commit is contained in:
二货机器人
GitHub
parent
b4bbe51ed7
commit
f654b6cce0
@ -1,4 +1,6 @@
|
|||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
|
import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
|
||||||
|
import classNames from 'classnames';
|
||||||
import type { PopconfirmProps } from '.';
|
import type { PopconfirmProps } from '.';
|
||||||
import Button from '../button';
|
import Button from '../button';
|
||||||
import { convertLegacyProps } from '../button/button';
|
import { convertLegacyProps } from '../button/button';
|
||||||
@ -7,6 +9,9 @@ import LocaleReceiver from '../locale-provider/LocaleReceiver';
|
|||||||
import defaultLocale from '../locale/default';
|
import defaultLocale from '../locale/default';
|
||||||
import { getRenderPropValue } from '../_util/getRenderPropValue';
|
import { getRenderPropValue } from '../_util/getRenderPropValue';
|
||||||
import { ConfigContext } from '../config-provider';
|
import { ConfigContext } from '../config-provider';
|
||||||
|
import PopoverPurePanel from '../popover/PurePanel';
|
||||||
|
|
||||||
|
import useStyle from './style';
|
||||||
|
|
||||||
export interface PopconfirmLocale {
|
export interface PopconfirmLocale {
|
||||||
okText: string;
|
okText: string;
|
||||||
@ -39,8 +44,8 @@ export function Overlay(props: OverlayProps) {
|
|||||||
title,
|
title,
|
||||||
cancelText,
|
cancelText,
|
||||||
okText,
|
okText,
|
||||||
okType,
|
okType = 'primary',
|
||||||
icon,
|
icon = <ExclamationCircleFilled />,
|
||||||
showCancel = true,
|
showCancel = true,
|
||||||
close,
|
close,
|
||||||
onConfirm,
|
onConfirm,
|
||||||
@ -79,3 +84,29 @@ export function Overlay(props: OverlayProps) {
|
|||||||
</LocaleReceiver>
|
</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>,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|||||||
@ -1554,3 +1554,145 @@ Array [
|
|||||||
</div>,
|
</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>,
|
||||||
|
]
|
||||||
|
`;
|
||||||
|
|||||||
@ -190,3 +190,145 @@ exports[`renders ./components/popconfirm/demo/promise.md correctly 1`] = `
|
|||||||
</span>
|
</span>
|
||||||
</button>
|
</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>,
|
||||||
|
]
|
||||||
|
`;
|
||||||
|
|||||||
@ -112,17 +112,15 @@ export default App;
|
|||||||
```
|
```
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.code-box-demo .demo {
|
#components-popconfirm-demo-placement .demo {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
.code-box-demo .ant-popover-wrap > a {
|
#components-popconfirm-demo-placement .ant-popover-wrap > a {
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
.code-box-demo .ant-btn {
|
|
||||||
margin-right: 8px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
#components-popconfirm-demo-placement .ant-btn {
|
#components-popconfirm-demo-placement .ant-btn {
|
||||||
|
margin-right: 8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
width: 70px;
|
width: 70px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|||||||
31
components/popconfirm/demo/render-panel.md
Normal file
31
components/popconfirm/demo/render-panel.md
Normal file
@ -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;
|
||||||
|
```
|
||||||
@ -1,4 +1,3 @@
|
|||||||
import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
|
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import useMergedState from 'rc-util/lib/hooks/useMergedState';
|
import useMergedState from 'rc-util/lib/hooks/useMergedState';
|
||||||
import KeyCode from 'rc-util/lib/KeyCode';
|
import KeyCode from 'rc-util/lib/KeyCode';
|
||||||
@ -6,11 +5,10 @@ import * as React from 'react';
|
|||||||
import type { ButtonProps, LegacyButtonType } from '../button/button';
|
import type { ButtonProps, LegacyButtonType } from '../button/button';
|
||||||
import { ConfigContext } from '../config-provider';
|
import { ConfigContext } from '../config-provider';
|
||||||
import Popover from '../popover';
|
import Popover from '../popover';
|
||||||
import genPurePanel from '../_util/PurePanel';
|
|
||||||
import type { AbstractTooltipProps } from '../tooltip';
|
import type { AbstractTooltipProps } from '../tooltip';
|
||||||
import type { RenderFunction } from '../_util/getRenderPropValue';
|
import type { RenderFunction } from '../_util/getRenderPropValue';
|
||||||
import { cloneElement } from '../_util/reactNode';
|
import { cloneElement } from '../_util/reactNode';
|
||||||
import { Overlay } from './PurePanel';
|
import PurePanel, { Overlay } from './PurePanel';
|
||||||
|
|
||||||
import usePopconfirmStyle from './style';
|
import usePopconfirmStyle from './style';
|
||||||
|
|
||||||
@ -126,16 +124,12 @@ const Popconfirm = React.forwardRef<unknown, PopconfirmProps>((props, ref) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
Popconfirm.defaultProps = {
|
Popconfirm.defaultProps = {
|
||||||
placement: 'top' as PopconfirmProps['placement'],
|
|
||||||
trigger: 'click' as PopconfirmProps['trigger'],
|
trigger: 'click' as PopconfirmProps['trigger'],
|
||||||
okType: 'primary' as PopconfirmProps['okType'],
|
|
||||||
icon: <ExclamationCircleFilled />,
|
|
||||||
disabled: false,
|
disabled: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
// We don't care debug panel
|
// We don't care debug panel
|
||||||
/* istanbul ignore next */
|
/* istanbul ignore next */
|
||||||
const PurePanel = genPurePanel(Popconfirm, 'popover', prefixCls => prefixCls);
|
|
||||||
Popconfirm._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
|
Popconfirm._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
|
||||||
|
|
||||||
export default Popconfirm;
|
export default Popconfirm;
|
||||||
|
|||||||
@ -22,11 +22,18 @@ export const getOverlay = (
|
|||||||
};
|
};
|
||||||
|
|
||||||
export interface PurePanelProps extends Omit<PopoverProps, 'children'> {
|
export interface PurePanelProps extends Omit<PopoverProps, 'children'> {
|
||||||
children: React.ReactNode;
|
children?: React.ReactNode;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function PurePanel(props: any) {
|
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 { getPrefixCls } = React.useContext(ConfigContext);
|
||||||
|
|
||||||
const prefixCls = getPrefixCls('popover', customizePrefixCls);
|
const prefixCls = getPrefixCls('popover', customizePrefixCls);
|
||||||
@ -43,7 +50,7 @@ export default function PurePanel(props: any) {
|
|||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<Popup {...props} className={hashId} prefixCls={prefixCls}>
|
<Popup {...props} className={hashId} prefixCls={prefixCls}>
|
||||||
{getOverlay(prefixCls, title, content)}
|
{children || getOverlay(prefixCls, title, content)}
|
||||||
</Popup>
|
</Popup>
|
||||||
</div>,
|
</div>,
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user