2022-05-11 14:26:18 +08:00
|
|
|
import { render } from 'rc-util/lib/React/render';
|
2022-06-13 17:55:00 +08:00
|
|
|
import * as React from 'react';
|
2021-06-09 15:36:59 +08:00
|
|
|
import ConfigProvider, { globalConfig } from '../config-provider';
|
2022-06-13 17:55:00 +08:00
|
|
|
import type { ArgsProps, GlobalConfigProps, NotificationInstance } from './interface';
|
2022-06-08 17:01:26 +08:00
|
|
|
import PurePanel from './PurePanel';
|
2022-06-13 17:55:00 +08:00
|
|
|
import useNotification, { useInternalNotification } from './useNotification';
|
2017-08-17 15:23:47 +08:00
|
|
|
|
2022-05-11 14:26:18 +08:00
|
|
|
let notification: GlobalNotification | null = null;
|
|
|
|
|
|
|
|
let act: (callback: VoidFunction) => Promise<void> | void = (callback: VoidFunction) => callback();
|
|
|
|
|
|
|
|
interface GlobalNotification {
|
|
|
|
fragment: DocumentFragment;
|
|
|
|
instance?: NotificationInstance | null;
|
|
|
|
sync?: VoidFunction;
|
2017-08-17 15:23:47 +08:00
|
|
|
}
|
2019-01-05 21:33:07 +08:00
|
|
|
|
2022-05-11 14:26:18 +08:00
|
|
|
type Task =
|
|
|
|
| {
|
|
|
|
type: 'open';
|
|
|
|
config: ArgsProps;
|
|
|
|
}
|
|
|
|
| {
|
|
|
|
type: 'destroy';
|
|
|
|
key: React.Key;
|
|
|
|
};
|
|
|
|
|
|
|
|
let taskQueue: Task[] = [];
|
|
|
|
|
|
|
|
let defaultGlobalConfig: GlobalConfigProps = {};
|
|
|
|
|
|
|
|
function getGlobalContext() {
|
|
|
|
const {
|
|
|
|
prefixCls: globalPrefixCls,
|
|
|
|
getContainer: globalGetContainer,
|
|
|
|
rtl,
|
|
|
|
maxCount,
|
|
|
|
top,
|
|
|
|
bottom,
|
|
|
|
} = defaultGlobalConfig;
|
|
|
|
const mergedPrefixCls = globalPrefixCls ?? globalConfig().getPrefixCls('notification');
|
|
|
|
const mergedContainer = globalGetContainer?.() || document.body;
|
|
|
|
|
|
|
|
return {
|
|
|
|
prefixCls: mergedPrefixCls,
|
|
|
|
container: mergedContainer,
|
|
|
|
rtl,
|
|
|
|
maxCount,
|
|
|
|
top,
|
|
|
|
bottom,
|
|
|
|
};
|
2017-08-17 15:23:47 +08:00
|
|
|
}
|
|
|
|
|
2022-05-11 14:26:18 +08:00
|
|
|
interface GlobalHolderRef {
|
|
|
|
instance: NotificationInstance;
|
|
|
|
sync: () => void;
|
2017-01-27 17:12:25 +08:00
|
|
|
}
|
2015-08-03 18:00:22 +08:00
|
|
|
|
2022-05-11 14:26:18 +08:00
|
|
|
const GlobalHolder = React.forwardRef<GlobalHolderRef, {}>((_, ref) => {
|
|
|
|
const [prefixCls, setPrefixCls] = React.useState<string>();
|
|
|
|
const [container, setContainer] = React.useState<HTMLElement>();
|
2023-01-16 09:55:52 +08:00
|
|
|
const [maxCount, setMaxCount] = React.useState<number>();
|
|
|
|
const [rtl, setRTL] = React.useState<boolean>();
|
|
|
|
const [top, setTop] = React.useState<number>();
|
|
|
|
const [bottom, setBottom] = React.useState<number>();
|
2022-05-11 14:26:18 +08:00
|
|
|
|
|
|
|
const [api, holder] = useInternalNotification({
|
|
|
|
prefixCls,
|
|
|
|
getContainer: () => container!,
|
|
|
|
maxCount,
|
|
|
|
rtl,
|
2019-05-06 12:04:39 +08:00
|
|
|
top,
|
|
|
|
bottom,
|
2022-05-11 14:26:18 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
const global = globalConfig();
|
|
|
|
const rootPrefixCls = global.getRootPrefixCls();
|
|
|
|
const rootIconPrefixCls = global.getIconPrefixCls();
|
|
|
|
|
|
|
|
const sync = () => {
|
|
|
|
const {
|
|
|
|
prefixCls: nextGlobalPrefixCls,
|
|
|
|
container: nextGlobalContainer,
|
|
|
|
maxCount: nextGlobalMaxCount,
|
|
|
|
rtl: nextGlobalRTL,
|
|
|
|
top: nextTop,
|
|
|
|
bottom: nextBottom,
|
|
|
|
} = getGlobalContext();
|
|
|
|
|
|
|
|
setPrefixCls(nextGlobalPrefixCls);
|
|
|
|
setContainer(nextGlobalContainer);
|
|
|
|
setMaxCount(nextGlobalMaxCount);
|
|
|
|
setRTL(nextGlobalRTL);
|
|
|
|
setTop(nextTop);
|
|
|
|
setBottom(nextBottom);
|
|
|
|
};
|
|
|
|
|
|
|
|
React.useEffect(sync, []);
|
|
|
|
|
|
|
|
React.useImperativeHandle(ref, () => {
|
2023-02-23 16:38:06 +08:00
|
|
|
const instance: NotificationInstance = { ...api };
|
2022-05-11 14:26:18 +08:00
|
|
|
|
2023-02-23 16:38:06 +08:00
|
|
|
Object.keys(instance).forEach((method: keyof NotificationInstance) => {
|
2022-05-11 14:26:18 +08:00
|
|
|
instance[method] = (...args: any[]) => {
|
|
|
|
sync();
|
|
|
|
return (api as any)[method](...args);
|
|
|
|
};
|
|
|
|
});
|
|
|
|
|
|
|
|
return {
|
|
|
|
instance,
|
|
|
|
sync,
|
|
|
|
};
|
|
|
|
});
|
|
|
|
|
|
|
|
return (
|
|
|
|
<ConfigProvider prefixCls={rootPrefixCls} iconPrefixCls={rootIconPrefixCls}>
|
|
|
|
{holder}
|
|
|
|
</ConfigProvider>
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
function flushNotice() {
|
|
|
|
if (!notification) {
|
|
|
|
const holderFragment = document.createDocumentFragment();
|
|
|
|
|
|
|
|
const newNotification: GlobalNotification = {
|
|
|
|
fragment: holderFragment,
|
|
|
|
};
|
|
|
|
|
|
|
|
notification = newNotification;
|
|
|
|
|
|
|
|
// Delay render to avoid sync issue
|
|
|
|
act(() => {
|
|
|
|
render(
|
|
|
|
<GlobalHolder
|
2022-11-18 23:34:07 +08:00
|
|
|
ref={(node) => {
|
2022-05-11 14:26:18 +08:00
|
|
|
const { instance, sync } = node || {};
|
|
|
|
|
|
|
|
Promise.resolve().then(() => {
|
|
|
|
if (!newNotification.instance && instance) {
|
|
|
|
newNotification.instance = instance;
|
|
|
|
newNotification.sync = sync;
|
|
|
|
flushNotice();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}}
|
|
|
|
/>,
|
|
|
|
holderFragment,
|
|
|
|
);
|
2020-02-23 00:02:48 +08:00
|
|
|
});
|
|
|
|
|
2017-10-11 12:03:19 +08:00
|
|
|
return;
|
2017-08-17 15:23:47 +08:00
|
|
|
}
|
2019-11-08 20:03:27 +08:00
|
|
|
|
2022-05-11 14:26:18 +08:00
|
|
|
// Notification not ready
|
2022-11-18 23:34:07 +08:00
|
|
|
if (!notification.instance) {
|
2022-05-11 14:26:18 +08:00
|
|
|
return;
|
|
|
|
}
|
2020-04-13 15:45:49 +08:00
|
|
|
|
2022-05-11 14:26:18 +08:00
|
|
|
// >>> Execute task
|
2022-11-18 23:34:07 +08:00
|
|
|
taskQueue.forEach((task) => {
|
2022-05-11 14:26:18 +08:00
|
|
|
// eslint-disable-next-line default-case
|
|
|
|
switch (task.type) {
|
|
|
|
case 'open': {
|
|
|
|
act(() => {
|
|
|
|
notification!.instance!.open({
|
|
|
|
...defaultGlobalConfig,
|
|
|
|
...task.config,
|
|
|
|
});
|
2020-02-23 00:02:48 +08:00
|
|
|
});
|
2022-05-11 14:26:18 +08:00
|
|
|
break;
|
|
|
|
}
|
2017-08-17 15:23:47 +08:00
|
|
|
|
2022-05-11 14:26:18 +08:00
|
|
|
case 'destroy':
|
|
|
|
act(() => {
|
|
|
|
notification?.instance!.destroy(task.key);
|
|
|
|
});
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
});
|
2017-08-17 15:23:47 +08:00
|
|
|
|
2022-05-11 14:26:18 +08:00
|
|
|
// Clean up
|
|
|
|
taskQueue = [];
|
2016-08-15 12:00:05 +08:00
|
|
|
}
|
2019-01-05 21:33:07 +08:00
|
|
|
|
2022-05-11 14:26:18 +08:00
|
|
|
// ==============================================================================
|
|
|
|
// == Export ==
|
|
|
|
// ==============================================================================
|
2016-08-28 17:45:27 +08:00
|
|
|
|
2022-05-11 14:26:18 +08:00
|
|
|
function setNotificationGlobalConfig(config: GlobalConfigProps) {
|
|
|
|
defaultGlobalConfig = {
|
|
|
|
...defaultGlobalConfig,
|
|
|
|
...config,
|
|
|
|
};
|
2021-10-02 14:14:31 +08:00
|
|
|
|
2022-05-11 14:26:18 +08:00
|
|
|
// Trigger sync for it
|
|
|
|
act(() => {
|
|
|
|
notification?.sync?.();
|
|
|
|
});
|
|
|
|
}
|
2017-04-22 01:28:54 +08:00
|
|
|
|
2022-05-11 14:26:18 +08:00
|
|
|
function open(config: ArgsProps) {
|
|
|
|
taskQueue.push({
|
|
|
|
type: 'open',
|
|
|
|
config,
|
|
|
|
});
|
|
|
|
flushNotice();
|
2015-07-31 18:13:32 +08:00
|
|
|
}
|
2015-07-28 15:40:28 +08:00
|
|
|
|
2022-05-11 14:26:18 +08:00
|
|
|
function destroy(key: React.Key) {
|
|
|
|
taskQueue.push({
|
|
|
|
type: 'destroy',
|
|
|
|
key,
|
2020-07-15 19:51:56 +08:00
|
|
|
});
|
2022-05-11 14:26:18 +08:00
|
|
|
flushNotice();
|
2020-07-15 19:51:56 +08:00
|
|
|
}
|
|
|
|
|
2023-02-22 10:41:06 +08:00
|
|
|
interface BaseMethods {
|
2022-05-11 14:26:18 +08:00
|
|
|
open: (config: ArgsProps) => void;
|
|
|
|
destroy: (key?: React.Key) => void;
|
|
|
|
config: any;
|
|
|
|
useNotification: typeof useNotification;
|
2022-06-08 17:01:26 +08:00
|
|
|
/** @private Internal Component. Do not use in your production. */
|
2022-06-13 17:55:00 +08:00
|
|
|
_InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel;
|
2023-02-22 10:41:06 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
type StaticFn = (config: ArgsProps) => void;
|
|
|
|
|
|
|
|
interface NoticeMethods {
|
|
|
|
success: StaticFn;
|
|
|
|
info: StaticFn;
|
|
|
|
warning: StaticFn;
|
|
|
|
error: StaticFn;
|
|
|
|
}
|
|
|
|
|
|
|
|
const methods: (keyof NoticeMethods)[] = ['success', 'info', 'warning', 'error'];
|
|
|
|
|
|
|
|
const baseStaticMethods: BaseMethods = {
|
2022-05-11 14:26:18 +08:00
|
|
|
open,
|
|
|
|
destroy,
|
|
|
|
config: setNotificationGlobalConfig,
|
|
|
|
useNotification,
|
2022-06-13 17:55:00 +08:00
|
|
|
_InternalPanelDoNotUseOrYouWillBeFired: PurePanel,
|
2015-07-31 18:13:32 +08:00
|
|
|
};
|
2015-08-04 15:16:10 +08:00
|
|
|
|
2023-02-22 10:41:06 +08:00
|
|
|
const staticMethods = baseStaticMethods as NoticeMethods & BaseMethods;
|
2022-05-11 14:26:18 +08:00
|
|
|
|
2023-02-22 10:41:06 +08:00
|
|
|
methods.forEach((type: keyof NoticeMethods) => {
|
|
|
|
staticMethods[type] = (config) => open({ ...config, type });
|
2015-08-04 15:16:10 +08:00
|
|
|
});
|
|
|
|
|
2022-05-11 14:26:18 +08:00
|
|
|
// ==============================================================================
|
|
|
|
// == Test ==
|
|
|
|
// ==============================================================================
|
|
|
|
const noop = () => {};
|
2016-03-28 18:03:00 +08:00
|
|
|
|
2022-05-11 14:26:18 +08:00
|
|
|
/** @private Only Work in test env */
|
|
|
|
// eslint-disable-next-line import/no-mutable-exports
|
|
|
|
export let actWrapper: (wrapper: any) => void = noop;
|
2020-02-07 17:55:27 +08:00
|
|
|
|
2022-05-11 14:26:18 +08:00
|
|
|
if (process.env.NODE_ENV === 'test') {
|
2022-11-18 23:34:07 +08:00
|
|
|
actWrapper = (wrapper) => {
|
2022-05-11 14:26:18 +08:00
|
|
|
act = wrapper;
|
|
|
|
};
|
2017-08-17 15:23:47 +08:00
|
|
|
}
|
2019-01-05 21:33:07 +08:00
|
|
|
|
2022-05-11 14:26:18 +08:00
|
|
|
export default staticMethods;
|