mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 11:08:45 +08:00
feat(modal): PureRender support custom footer callback (#44985)
* demo: update debug demo * chore: improve typo * Revert "chore: improve typo" This reverts commit d5163f98ececa6266d34d68d9d4bc9f83cf06095. * chore: update * chore: update demo * chore: update snapshots * chore: update
This commit is contained in:
红
GitHub
parent
b3cb6b30ed
commit
5ac3f57b7c
@ -13,8 +13,8 @@ import { Footer, renderCloseIcon } from './shared';
|
||||
import useStyle from './style';
|
||||
|
||||
export interface PurePanelProps
|
||||
extends Omit<PanelProps, 'prefixCls'>,
|
||||
Pick<ModalFuncProps, 'type'> {
|
||||
extends Omit<PanelProps, 'prefixCls' | 'footer'>,
|
||||
Pick<ModalFuncProps, 'type' | 'footer'> {
|
||||
prefixCls?: string;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
@ -28,6 +28,7 @@ const PurePanel: React.FC<PurePanelProps> = (props) => {
|
||||
type,
|
||||
title,
|
||||
children,
|
||||
footer,
|
||||
...restProps
|
||||
} = props;
|
||||
const { getPrefixCls } = React.useContext(ConfigContext);
|
||||
@ -60,7 +61,7 @@ const PurePanel: React.FC<PurePanelProps> = (props) => {
|
||||
additionalProps = {
|
||||
closable: closable ?? true,
|
||||
title,
|
||||
footer: props.footer === undefined ? <Footer {...props} /> : props.footer,
|
||||
footer: footer !== null && <Footer {...props} />,
|
||||
children,
|
||||
};
|
||||
}
|
||||
|
||||
@ -972,6 +972,164 @@ exports[`renders components/modal/demo/render-panel.tsx extend context correctly
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-modal="true"
|
||||
class="ant-modal ant-modal-pure-panel"
|
||||
role="dialog"
|
||||
style="width: 380px; height: 200px;"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="ant-modal-content"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="ant-modal-close"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-modal-close-x"
|
||||
>
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close ant-modal-close-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close"
|
||||
fill="currentColor"
|
||||
fill-rule="evenodd"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-modal-header"
|
||||
>
|
||||
<div
|
||||
class="ant-modal-title"
|
||||
>
|
||||
Custom Footer Render
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-modal-body"
|
||||
>
|
||||
<div
|
||||
class="ant-typography"
|
||||
>
|
||||
<a
|
||||
class="ant-typography"
|
||||
href="https://github.com/ant-design/ant-design/pull/44318"
|
||||
>
|
||||
Feature #44318
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-modal-footer"
|
||||
>
|
||||
<div
|
||||
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Cancel
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
OK
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Cancel
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-dangerous"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Custom
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
OK
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
@ -938,6 +938,164 @@ exports[`renders components/modal/demo/render-panel.tsx correctly 1`] = `
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-modal="true"
|
||||
class="ant-modal ant-modal-pure-panel"
|
||||
role="dialog"
|
||||
style="width:380px;height:200px"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
style="width:0;height:0;overflow:hidden;outline:none"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="ant-modal-content"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="ant-modal-close"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-modal-close-x"
|
||||
>
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close ant-modal-close-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close"
|
||||
fill="currentColor"
|
||||
fill-rule="evenodd"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-modal-header"
|
||||
>
|
||||
<div
|
||||
class="ant-modal-title"
|
||||
>
|
||||
Custom Footer Render
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-modal-body"
|
||||
>
|
||||
<div
|
||||
class="ant-typography"
|
||||
>
|
||||
<a
|
||||
class="ant-typography"
|
||||
href="https://github.com/ant-design/ant-design/pull/44318"
|
||||
>
|
||||
Feature #44318
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-modal-footer"
|
||||
>
|
||||
<div
|
||||
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Cancel
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
OK
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Cancel
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-dangerous"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Custom
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
OK
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
style="width:0;height:0;overflow:hidden;outline:none"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
@ -1,9 +1,23 @@
|
||||
import React from 'react';
|
||||
import { Modal } from 'antd';
|
||||
import { Button, Modal, Space, Typography } from 'antd';
|
||||
import type { ModalFuncProps } from 'antd/es/modal/interface';
|
||||
|
||||
/** Test usage. Do not use in your production. */
|
||||
const { _InternalPanelDoNotUseOrYouWillBeFired: InternalPanel } = Modal;
|
||||
|
||||
const customFooterFn: ModalFuncProps['footer'] = (originNode, { OkBtn, CancelBtn }) => (
|
||||
<Space direction="vertical">
|
||||
<Space>{originNode}</Space>
|
||||
<Space>
|
||||
<CancelBtn />
|
||||
<Button danger type="primary">
|
||||
Custom
|
||||
</Button>
|
||||
<OkBtn />
|
||||
</Space>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default () => (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', rowGap: 16 }}>
|
||||
<InternalPanel title="Hello World!" style={{ width: '100%', height: 200 }}>
|
||||
@ -15,5 +29,17 @@ export default () => (
|
||||
<InternalPanel title="Confirm This?" type="confirm" style={{ width: 300, height: 200 }}>
|
||||
Some descriptions.
|
||||
</InternalPanel>
|
||||
|
||||
<InternalPanel
|
||||
title="Custom Footer Render"
|
||||
style={{ width: 380, height: 200 }}
|
||||
footer={customFooterFn}
|
||||
>
|
||||
<Typography.Paragraph>
|
||||
<Typography.Link href="https://github.com/ant-design/ant-design/pull/44318">
|
||||
Feature #44318
|
||||
</Typography.Link>
|
||||
</Typography.Paragraph>
|
||||
</InternalPanel>
|
||||
</div>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user