ant-design/components/modal/shared.tsx
3bb3485ac7
fix(Modal): custom footer render error (#44929)
* Revert "refactor: fix compiling (#44616)"

This reverts commit b284648f11.

* feat: modal purepanel support footer render

* demo: update debug demo

* test: update test case

* Revert "test: update test case"

This reverts commit 34d151f86689f8da232af3e6e21b47cd13188161.

* chore: add more unit test case

* Revert "Revert "refactor: fix compiling (#44616)""

This reverts commit 0e054de42176ea0a6baca25cb2d03566af81f269.

* fix(Modal): custom footer render errors

* chore: fix TS error

* chore: improvement type

* chore: update

* chore: update

* Revert "chore: update"

This reverts commit c72bb07db980d241c0a552b94938feb47912b4c7.

* Revert "chore: update"

This reverts commit 9a4276078ca0e4bccd5cfb4d4ebd2ac76c402fd1.

* Revert "chore: improvement type"

This reverts commit 159e3dc7547cdda6a47683ba26f176e31a26749e.

* Revert "chore: fix TS error"

This reverts commit f1a9aa59b283862d5d75e1bd3a9cc697f7458baa.

* Revert "feat: modal purepanel support footer render"

This reverts commit 68de65e76adf2cd84af00786467c3164198e223b.

* Revert "demo: update debug demo"

This reverts commit 6741af239b709552fb4023fc9096f2298bb10c54.

* Update components/modal/__tests__/Modal.test.tsx

Co-authored-by: 红 <wxh16144@qq.com>
Signed-off-by: afc163 <afc163@gmail.com>

---------

Signed-off-by: afc163 <afc163@gmail.com>
Co-authored-by: afc163 <afc163@gmail.com>
2023-09-18 18:33:25 +08:00

94 lines
2.4 KiB
TypeScript

import React from 'react';
import CloseOutlined from '@ant-design/icons/CloseOutlined';
import { DisabledContextProvider } from '../config-provider/DisabledContext';
import { useLocale } from '../locale';
import NormalCancelBtn from './components/NormalCancelBtn';
import NormalOkBtn from './components/NormalOkBtn';
import type { ModalContextProps } from './context';
import { ModalContextProvider } from './context';
import type { ModalProps } from './interface';
import { getConfirmLocale } from './locale';
export function renderCloseIcon(prefixCls: string, closeIcon?: React.ReactNode) {
return (
<span className={`${prefixCls}-close-x`}>
{closeIcon || <CloseOutlined className={`${prefixCls}-close-icon`} />}
</span>
);
}
interface FooterProps {
onOk?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
onCancel?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
}
export const Footer: React.FC<
FooterProps &
Pick<
ModalProps,
| 'footer'
| 'okText'
| 'okType'
| 'cancelText'
| 'confirmLoading'
| 'okButtonProps'
| 'cancelButtonProps'
>
> = (props) => {
const {
okText,
okType = 'primary',
cancelText,
confirmLoading,
onOk,
onCancel,
okButtonProps,
cancelButtonProps,
footer,
} = props;
const [locale] = useLocale('Modal', getConfirmLocale());
// ================== Locale Text ==================
const okTextLocale = okText || locale?.okText;
const cancelTextLocale = cancelText || locale?.cancelText;
// ================= Context Value =================
const btnCtxValue: ModalContextProps = {
confirmLoading,
okButtonProps,
cancelButtonProps,
okTextLocale,
cancelTextLocale,
okType,
onOk,
onCancel,
};
const btnCtxValueMemo = React.useMemo(() => btnCtxValue, [...Object.values(btnCtxValue)]);
let footerNode;
if (typeof footer === 'function' || typeof footer === 'undefined') {
footerNode = (
<>
<NormalCancelBtn />
<NormalOkBtn />
</>
);
if (typeof footer === 'function') {
footerNode = footer(footerNode, {
OkBtn: NormalOkBtn,
CancelBtn: NormalCancelBtn,
});
}
footerNode = <ModalContextProvider value={btnCtxValueMemo}>{footerNode}</ModalContextProvider>;
} else {
footerNode = footer;
}
return <DisabledContextProvider disabled={false}>{footerNode}</DisabledContextProvider>;
};