ant-design/components/notification/index.tsx

269 lines
6.4 KiB
TypeScript
Raw Normal View History

import { render } from 'rc-util/lib/React/render';
import * as React from 'react';
import ConfigProvider, { globalConfig } from '../config-provider';
import type { ArgsProps, GlobalConfigProps, NotificationInstance } from './interface';
import PurePanel from './PurePanel';
import useNotification, { useInternalNotification } from './useNotification';
let notification: GlobalNotification | null = null;
let act: (callback: VoidFunction) => Promise<void> | void = (callback: VoidFunction) => callback();
interface GlobalNotification {
fragment: DocumentFragment;
instance?: NotificationInstance | null;
sync?: VoidFunction;
}
2019-01-05 21:33:07 +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,
};
}
interface GlobalHolderRef {
instance: NotificationInstance;
sync: () => void;
}
2015-08-03 18:00:22 +08:00
const GlobalHolder = React.forwardRef<GlobalHolderRef, {}>((_, ref) => {
const [prefixCls, setPrefixCls] = React.useState<string>();
const [container, setContainer] = React.useState<HTMLElement>();
const [maxCount, setMaxCount] = React.useState<number>();
const [rtl, setRTL] = React.useState<boolean>();
const [top, setTop] = React.useState<number>();
const [bottom, setBottom] = React.useState<number>();
const [api, holder] = useInternalNotification({
prefixCls,
getContainer: () => container!,
maxCount,
rtl,
meger feature to master (#16421) * use ul in list * update snapshot * update comment * feat: TreeSelect support `showSearch` in multiple mode (#15933) * update rc-tree-select * typo * update desc & snapshot * update desc & snapshot * check default showSearch * feat: table customizing variable (#15971) * feat: added table selected row color variable * fix: @table-selected-row-color default is inherit * feat: Upload support customize previewFile (#15984) * support preview file * use promise * dealy load * use canvas of render * use domHook of test * update demo * add snapshot * update types * update testcase * feat: form customizing variables (#15954) * fix: added styling form input background-color * feat: added '@form-warning-input-bg' variable * feat: added '@form-error-input-bg' variable * use li wrap with comment * feat: Support append theme less file with less-variable (#16118) * add override * add override support * update doc * feat: dropdown support set right icon * docs: update doc of dropdown component * style: format dropdown-button.md * test: update updateSnapshot * style: format dropdown-button.md * test: update updateSnapshot * test: update updateSnapshot * style: change style of dropdown-button demo * fix: fix document table order * feat: Support SkeletonAvatarProps.size accept number (#16078) (#16128) * chore:update style of demo * feat: Notification functions accept top, bottom and getContainer as arguments * drawer: add afterVisibleChange * rm onVisibleChange * update * feat: 🇭🇷 hr_HR locale (#16258) * Added Croatian locale * fixed lint error * :white_check_mark: Add test cases for hr_HR * :memo: update i18n documentation * feat: add `htmlFor` in Form.Item (#16278) * add htmlFor in Form.Item * update doc * feat: Button support `link` type (#16289) close #15892 * feat: Add Timeline.Item.position (#16148) (#16193) * fix: Timeline.pendingDot interface documentation there is a small problem (#16177) * feat: Add Timeline.Item.position (#16148) * doc: add version infomation for Timeline.Item.position * refactor: Update Tree & TreeSelect deps (#16330) * use CSSMotion * update snapshot * feat: Collapse support `expandIconPosition` (#16365) * update doc * support expandIconPosition * update snapshot * feat: Breadcrumb support DropDown (#16315) * breadcrumbs support drop down menu * update doc * add require less * fix test * fix md doc * less code * fix style warning * update snap * add children render test * feat: TreeNode support checkable * feat: add optional to support top and left slick dots (#16186) (#16225) * add optional to support top and left slick dots * update carousel snapshot * Update doc, add placement demo * update carousel placement demo snapshots * rename dots placement to position * update vertical as deprecated * rename dotsPosition to dotPosition * refine code * add warning testcase for vertical * remove unused warning * update expression * Additional test case for dotPosition * refactor: Upgrade `rc-tree-select` to support pure React motion (#16402) * upgrade `rc-tree-select` * update snapshot * 3.17.0 changelog * fix warning * fix review warning
2019-05-06 12:04:39 +08:00
top,
bottom,
});
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 };
2023-02-23 16:38:06 +08:00
Object.keys(instance).forEach((method: keyof NotificationInstance) => {
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) => {
const { instance, sync } = node || {};
Promise.resolve().then(() => {
if (!newNotification.instance && instance) {
newNotification.instance = instance;
newNotification.sync = sync;
flushNotice();
}
});
}}
/>,
holderFragment,
);
});
return;
}
// Notification not ready
2022-11-18 23:34:07 +08:00
if (!notification.instance) {
return;
}
// >>> Execute task
2022-11-18 23:34:07 +08:00
taskQueue.forEach((task) => {
// eslint-disable-next-line default-case
switch (task.type) {
case 'open': {
act(() => {
notification!.instance!.open({
...defaultGlobalConfig,
...task.config,
});
});
break;
}
case 'destroy':
act(() => {
notification?.instance!.destroy(task.key);
});
break;
}
});
// Clean up
taskQueue = [];
}
2019-01-05 21:33:07 +08:00
// ==============================================================================
// == Export ==
// ==============================================================================
function setNotificationGlobalConfig(config: GlobalConfigProps) {
defaultGlobalConfig = {
...defaultGlobalConfig,
...config,
};
// Trigger sync for it
act(() => {
notification?.sync?.();
});
}
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
function destroy(key: React.Key) {
taskQueue.push({
type: 'destroy',
key,
});
flushNotice();
}
interface BaseMethods {
open: (config: ArgsProps) => void;
destroy: (key?: React.Key) => void;
config: any;
useNotification: typeof useNotification;
/** @private Internal Component. Do not use in your production. */
_InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel;
}
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 = {
open,
destroy,
config: setNotificationGlobalConfig,
useNotification,
_InternalPanelDoNotUseOrYouWillBeFired: PurePanel,
2015-07-31 18:13:32 +08:00
};
2015-08-04 15:16:10 +08:00
const staticMethods = baseStaticMethods as NoticeMethods & BaseMethods;
methods.forEach((type: keyof NoticeMethods) => {
staticMethods[type] = (config) => open({ ...config, type });
2015-08-04 15:16:10 +08:00
});
// ==============================================================================
// == Test ==
// ==============================================================================
const noop = () => {};
2016-03-28 18:03:00 +08:00
/** @private 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') {
2022-11-18 23:34:07 +08:00
actWrapper = (wrapper) => {
act = wrapper;
};
}
2019-01-05 21:33:07 +08:00
export default staticMethods;