ant-design/components/modal/confirm.tsx
二货爱吃白萝卜 43d7b9ca92
feat: ConfigProvider.config support theme config (#42473)
* chore: static config of theme

* chore: static all method

* test: add test case

* docs: comment

* docs: more info

* test: update snapshot

* test: fix test logic
2023-05-18 23:53:34 +08:00

168 lines
4.3 KiB
TypeScript
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { render as reactRender, unmount as reactUnmount } from 'rc-util/lib/React/render';
import * as React from 'react';
import warning from '../_util/warning';
import { globalConfig, warnContext } from '../config-provider';
import ConfirmDialog from './ConfirmDialog';
import type { ModalFuncProps } from './Modal';
import destroyFns from './destroyFns';
import { getConfirmLocale } from './locale';
let defaultRootPrefixCls = '';
function getRootPrefixCls() {
return defaultRootPrefixCls;
}
type ConfigUpdate = ModalFuncProps | ((prevConfig: ModalFuncProps) => ModalFuncProps);
export type ModalFunc = (props: ModalFuncProps) => {
destroy: () => void;
update: (configUpdate: ConfigUpdate) => void;
};
export type ModalStaticFunctions = Record<NonNullable<ModalFuncProps['type']>, ModalFunc>;
export default function confirm(config: ModalFuncProps) {
// Warning if exist theme
if (process.env.NODE_ENV !== 'production') {
warnContext('Modal');
}
const container = document.createDocumentFragment();
// eslint-disable-next-line @typescript-eslint/no-use-before-define
let currentConfig = { ...config, close, open: true } as any;
let timeoutId: NodeJS.Timeout;
function destroy(...args: any[]) {
const triggerCancel = args.some((param) => param && param.triggerCancel);
if (config.onCancel && triggerCancel) {
config.onCancel(() => {}, ...args.slice(1));
}
for (let i = 0; i < destroyFns.length; i++) {
const fn = destroyFns[i];
// eslint-disable-next-line @typescript-eslint/no-use-before-define
if (fn === close) {
destroyFns.splice(i, 1);
break;
}
}
reactUnmount(container);
}
function render({ okText, cancelText, prefixCls: customizePrefixCls, ...props }: any) {
clearTimeout(timeoutId);
/**
* https://github.com/ant-design/ant-design/issues/23623
*
* Sync render blocks React event. Let's make this async.
*/
timeoutId = setTimeout(() => {
const runtimeLocale = getConfirmLocale();
const { getPrefixCls, getIconPrefixCls, getTheme } = globalConfig();
// because Modal.config  set rootPrefixCls, which is different from other components
const rootPrefixCls = getPrefixCls(undefined, getRootPrefixCls());
const prefixCls = customizePrefixCls || `${rootPrefixCls}-modal`;
const iconPrefixCls = getIconPrefixCls();
const theme = getTheme();
reactRender(
<ConfirmDialog
{...props}
prefixCls={prefixCls}
rootPrefixCls={rootPrefixCls}
iconPrefixCls={iconPrefixCls}
okText={okText}
locale={runtimeLocale}
theme={theme}
cancelText={cancelText || runtimeLocale.cancelText}
/>,
container,
);
});
}
function close(...args: any[]) {
currentConfig = {
...currentConfig,
open: false,
afterClose: () => {
if (typeof config.afterClose === 'function') {
config.afterClose();
}
destroy.apply(this, args);
},
};
// Legacy support
if (currentConfig.visible) {
delete currentConfig.visible;
}
render(currentConfig);
}
function update(configUpdate: ConfigUpdate) {
if (typeof configUpdate === 'function') {
currentConfig = configUpdate(currentConfig);
} else {
currentConfig = {
...currentConfig,
...configUpdate,
};
}
render(currentConfig);
}
render(currentConfig);
destroyFns.push(close);
return {
destroy: close,
update,
};
}
export function withWarn(props: ModalFuncProps): ModalFuncProps {
return {
...props,
type: 'warning',
};
}
export function withInfo(props: ModalFuncProps): ModalFuncProps {
return {
...props,
type: 'info',
};
}
export function withSuccess(props: ModalFuncProps): ModalFuncProps {
return {
...props,
type: 'success',
};
}
export function withError(props: ModalFuncProps): ModalFuncProps {
return {
...props,
type: 'error',
};
}
export function withConfirm(props: ModalFuncProps): ModalFuncProps {
return {
...props,
type: 'confirm',
};
}
export function modalGlobalConfig({ rootPrefixCls }: { rootPrefixCls: string }) {
warning(false, 'Modal', 'Modal.config is deprecated. Please use ConfigProvider.config instead.');
defaultRootPrefixCls = rootPrefixCls;
}