mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 05:28:20 +08:00
43d7b9ca92
* 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
368 lines
8.0 KiB
TypeScript
Executable File
368 lines
8.0 KiB
TypeScript
Executable File
import { render } from 'rc-util/lib/React/render';
|
|
import * as React from 'react';
|
|
import ConfigProvider, { globalConfig, warnContext } from '../config-provider';
|
|
import PurePanel from './PurePanel';
|
|
import type {
|
|
ArgsProps,
|
|
ConfigOptions,
|
|
MessageInstance,
|
|
MessageType,
|
|
NoticeType,
|
|
TypeOpen,
|
|
} from './interface';
|
|
import useMessage, { useInternalMessage } from './useMessage';
|
|
import { wrapPromiseFn } from './util';
|
|
|
|
export { ArgsProps };
|
|
|
|
let message: GlobalMessage | null = null;
|
|
|
|
let act: (callback: VoidFunction) => Promise<void> | void = (callback) => callback();
|
|
|
|
interface GlobalMessage {
|
|
fragment: DocumentFragment;
|
|
instance?: MessageInstance | null;
|
|
sync?: VoidFunction;
|
|
}
|
|
|
|
interface OpenTask {
|
|
type: 'open';
|
|
config: ArgsProps;
|
|
resolve: VoidFunction;
|
|
setCloseFn: (closeFn: VoidFunction) => void;
|
|
skipped?: boolean;
|
|
}
|
|
|
|
interface TypeTask {
|
|
type: NoticeType;
|
|
args: Parameters<TypeOpen>;
|
|
resolve: VoidFunction;
|
|
setCloseFn: (closeFn: VoidFunction) => void;
|
|
skipped?: boolean;
|
|
}
|
|
|
|
type Task =
|
|
| OpenTask
|
|
| TypeTask
|
|
| {
|
|
type: 'destroy';
|
|
key: React.Key;
|
|
skipped?: boolean;
|
|
};
|
|
|
|
let taskQueue: Task[] = [];
|
|
|
|
let defaultGlobalConfig: ConfigOptions = {};
|
|
|
|
function getGlobalContext() {
|
|
const {
|
|
prefixCls: globalPrefixCls,
|
|
getContainer: globalGetContainer,
|
|
duration,
|
|
rtl,
|
|
maxCount,
|
|
top,
|
|
} = defaultGlobalConfig;
|
|
const mergedPrefixCls = globalPrefixCls ?? globalConfig().getPrefixCls('message');
|
|
const mergedContainer = globalGetContainer?.() || document.body;
|
|
|
|
return {
|
|
prefixCls: mergedPrefixCls,
|
|
container: mergedContainer,
|
|
duration,
|
|
rtl,
|
|
maxCount,
|
|
top,
|
|
};
|
|
}
|
|
|
|
interface GlobalHolderRef {
|
|
instance: MessageInstance;
|
|
sync: () => void;
|
|
}
|
|
|
|
const GlobalHolder = React.forwardRef<GlobalHolderRef, {}>((_, ref) => {
|
|
const initializeMessageConfig: () => ConfigOptions = () => {
|
|
const { prefixCls, container, maxCount, duration, rtl, top } = getGlobalContext();
|
|
|
|
return {
|
|
prefixCls,
|
|
getContainer: () => container!,
|
|
maxCount,
|
|
duration,
|
|
rtl,
|
|
top,
|
|
};
|
|
};
|
|
|
|
const [messageConfig, setMessageConfig] = React.useState<ConfigOptions>(initializeMessageConfig);
|
|
|
|
const [api, holder] = useInternalMessage(messageConfig);
|
|
|
|
const global = globalConfig();
|
|
const rootPrefixCls = global.getRootPrefixCls();
|
|
const rootIconPrefixCls = global.getIconPrefixCls();
|
|
const theme = global.getTheme();
|
|
|
|
const sync = () => {
|
|
setMessageConfig(initializeMessageConfig);
|
|
};
|
|
|
|
React.useEffect(sync, []);
|
|
|
|
React.useImperativeHandle(ref, () => {
|
|
const instance: MessageInstance = { ...api };
|
|
|
|
Object.keys(instance).forEach((method: keyof MessageInstance) => {
|
|
instance[method] = (...args: any[]) => {
|
|
sync();
|
|
return (api as any)[method](...args);
|
|
};
|
|
});
|
|
|
|
return {
|
|
instance,
|
|
sync,
|
|
};
|
|
});
|
|
|
|
return (
|
|
<ConfigProvider prefixCls={rootPrefixCls} iconPrefixCls={rootIconPrefixCls} theme={theme}>
|
|
{holder}
|
|
</ConfigProvider>
|
|
);
|
|
});
|
|
|
|
function flushNotice() {
|
|
if (!message) {
|
|
const holderFragment = document.createDocumentFragment();
|
|
|
|
const newMessage: GlobalMessage = {
|
|
fragment: holderFragment,
|
|
};
|
|
|
|
message = newMessage;
|
|
|
|
// Delay render to avoid sync issue
|
|
act(() => {
|
|
render(
|
|
<GlobalHolder
|
|
ref={(node) => {
|
|
const { instance, sync } = node || {};
|
|
|
|
// React 18 test env will throw if call immediately in ref
|
|
Promise.resolve().then(() => {
|
|
if (!newMessage.instance && instance) {
|
|
newMessage.instance = instance;
|
|
newMessage.sync = sync;
|
|
flushNotice();
|
|
}
|
|
});
|
|
}}
|
|
/>,
|
|
holderFragment,
|
|
);
|
|
});
|
|
|
|
return;
|
|
}
|
|
|
|
// Notification not ready
|
|
if (!message.instance) {
|
|
return;
|
|
}
|
|
|
|
// >>> Execute task
|
|
taskQueue.forEach((task) => {
|
|
const { type, skipped } = task;
|
|
|
|
// Only `skipped` when user call notice but cancel it immediately
|
|
// and instance not ready
|
|
if (!skipped) {
|
|
switch (type) {
|
|
case 'open': {
|
|
act(() => {
|
|
const closeFn = message!.instance!.open({
|
|
...defaultGlobalConfig,
|
|
...task.config,
|
|
});
|
|
|
|
closeFn?.then(task.resolve);
|
|
task.setCloseFn(closeFn);
|
|
});
|
|
break;
|
|
}
|
|
|
|
case 'destroy':
|
|
act(() => {
|
|
message?.instance!.destroy(task.key);
|
|
});
|
|
break;
|
|
|
|
// Other type open
|
|
default: {
|
|
act(() => {
|
|
const closeFn = message!.instance![type](...task.args);
|
|
|
|
closeFn?.then(task.resolve);
|
|
task.setCloseFn(closeFn);
|
|
});
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Clean up
|
|
taskQueue = [];
|
|
}
|
|
|
|
// ==============================================================================
|
|
// == Export ==
|
|
// ==============================================================================
|
|
|
|
function setMessageGlobalConfig(config: ConfigOptions) {
|
|
defaultGlobalConfig = {
|
|
...defaultGlobalConfig,
|
|
...config,
|
|
};
|
|
|
|
// Trigger sync for it
|
|
act(() => {
|
|
message?.sync?.();
|
|
});
|
|
}
|
|
|
|
function open(config: ArgsProps): MessageType {
|
|
const result = wrapPromiseFn((resolve) => {
|
|
let closeFn: VoidFunction;
|
|
|
|
const task: OpenTask = {
|
|
type: 'open',
|
|
config,
|
|
resolve,
|
|
setCloseFn: (fn) => {
|
|
closeFn = fn;
|
|
},
|
|
};
|
|
taskQueue.push(task);
|
|
|
|
return () => {
|
|
if (closeFn) {
|
|
act(() => {
|
|
closeFn();
|
|
});
|
|
} else {
|
|
task.skipped = true;
|
|
}
|
|
};
|
|
});
|
|
|
|
flushNotice();
|
|
|
|
return result;
|
|
}
|
|
|
|
function typeOpen(type: NoticeType, args: Parameters<TypeOpen>): MessageType {
|
|
// Warning if exist theme
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
warnContext('message');
|
|
}
|
|
|
|
const result = wrapPromiseFn((resolve) => {
|
|
let closeFn: VoidFunction;
|
|
|
|
const task: TypeTask = {
|
|
type,
|
|
args,
|
|
resolve,
|
|
setCloseFn: (fn) => {
|
|
closeFn = fn;
|
|
},
|
|
};
|
|
|
|
taskQueue.push(task);
|
|
|
|
return () => {
|
|
if (closeFn) {
|
|
act(() => {
|
|
closeFn();
|
|
});
|
|
} else {
|
|
task.skipped = true;
|
|
}
|
|
};
|
|
});
|
|
|
|
flushNotice();
|
|
|
|
return result;
|
|
}
|
|
|
|
function destroy(key: React.Key) {
|
|
taskQueue.push({
|
|
type: 'destroy',
|
|
key,
|
|
});
|
|
flushNotice();
|
|
}
|
|
|
|
interface BaseMethods {
|
|
open: (config: ArgsProps) => MessageType;
|
|
destroy: (key?: React.Key) => void;
|
|
config: typeof setMessageGlobalConfig;
|
|
useMessage: typeof useMessage;
|
|
/** @private Internal Component. Do not use in your production. */
|
|
_InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel;
|
|
}
|
|
|
|
interface MessageMethods {
|
|
info: TypeOpen;
|
|
success: TypeOpen;
|
|
error: TypeOpen;
|
|
warning: TypeOpen;
|
|
loading: TypeOpen;
|
|
}
|
|
|
|
const methods: (keyof MessageMethods)[] = ['success', 'info', 'warning', 'error', 'loading'];
|
|
|
|
const baseStaticMethods: BaseMethods = {
|
|
open,
|
|
destroy,
|
|
config: setMessageGlobalConfig,
|
|
useMessage,
|
|
_InternalPanelDoNotUseOrYouWillBeFired: PurePanel,
|
|
};
|
|
|
|
const staticMethods = baseStaticMethods as MessageMethods & BaseMethods;
|
|
|
|
methods.forEach((type: keyof MessageMethods) => {
|
|
staticMethods[type] = (...args: Parameters<TypeOpen>) => typeOpen(type, args);
|
|
});
|
|
|
|
// ==============================================================================
|
|
// == Test ==
|
|
// ==============================================================================
|
|
const noop = () => {};
|
|
|
|
/** @internal Only Work in test env */
|
|
// eslint-disable-next-line import/no-mutable-exports
|
|
export let actWrapper: (wrapper: any) => void = noop;
|
|
|
|
if (process.env.NODE_ENV === 'test') {
|
|
actWrapper = (wrapper) => {
|
|
act = wrapper;
|
|
};
|
|
}
|
|
|
|
/** @internal Only Work in test env */
|
|
// eslint-disable-next-line import/no-mutable-exports
|
|
export let actDestroy = noop;
|
|
|
|
if (process.env.NODE_ENV === 'test') {
|
|
actDestroy = () => {
|
|
message = null;
|
|
};
|
|
}
|
|
|
|
export default staticMethods;
|