ant-design/components/notification/useNotification.tsx

169 lines
4.9 KiB
TypeScript
Raw Normal View History

import * as React from 'react';
import { useNotification as useRcNotification } from 'rc-notification';
import type { NotificationAPI } from 'rc-notification/lib';
import classNames from 'classnames';
import { ConfigContext } from '../config-provider';
import type {
NotificationInstance,
ArgsProps,
NotificationPlacement,
NotificationConfig,
} from './interface';
import { getPlacementStyle, getMotion } from './util';
2022-05-11 16:00:22 +08:00
import warning from '../_util/warning';
import useStyle from './style';
import { getCloseIcon, PureContent } from './PurePanel';
const DEFAULT_OFFSET = 24;
const DEFAULT_DURATION = 4.5;
// ==============================================================================
// == Holder ==
// ==============================================================================
type HolderProps = NotificationConfig & {
onAllRemoved?: VoidFunction;
};
interface HolderRef extends NotificationAPI {
prefixCls: string;
hashId: string;
}
const Holder = React.forwardRef<HolderRef, HolderProps>((props, ref) => {
const {
top,
bottom,
prefixCls: staticPrefixCls,
getContainer: staticGetContainer,
maxCount,
rtl,
onAllRemoved,
} = props;
const { getPrefixCls, getPopupContainer } = React.useContext(ConfigContext);
const prefixCls = staticPrefixCls || getPrefixCls('notification');
// =============================== Style ===============================
const getStyle = (placement: NotificationPlacement) =>
getPlacementStyle(placement, top ?? DEFAULT_OFFSET, bottom ?? DEFAULT_OFFSET);
// Style
const [, hashId] = useStyle(prefixCls);
const getClassName = () => classNames(hashId, { [`${prefixCls}-rtl`]: rtl });
// ============================== Motion ===============================
const getNotificationMotion = () => getMotion(prefixCls);
// ============================== Origin ===============================
const [api, holder] = useRcNotification({
prefixCls,
style: getStyle,
className: getClassName,
motion: getNotificationMotion,
closable: true,
closeIcon: getCloseIcon(prefixCls),
duration: DEFAULT_DURATION,
getContainer: () => staticGetContainer?.() || getPopupContainer?.() || document.body,
maxCount,
onAllRemoved,
});
// ================================ Ref ================================
React.useImperativeHandle(ref, () => ({
...api,
prefixCls,
hashId,
}));
return holder;
});
// ==============================================================================
// == Hook ==
// ==============================================================================
export function useInternalNotification(
notificationConfig?: HolderProps,
): [NotificationInstance, React.ReactElement] {
const holderRef = React.useRef<HolderRef>(null);
// ================================ API ================================
const wrapAPI = React.useMemo<NotificationInstance>(() => {
// Wrap with notification content
// >>> Open
const open = (config: ArgsProps) => {
if (!holderRef.current) {
2022-05-11 16:00:22 +08:00
warning(
false,
'Notification',
'You are calling notice in render which will break in React 18 concurrent mode. Please trigger in effect instead.',
);
return;
}
const { open: originOpen, prefixCls, hashId } = holderRef.current;
const noticePrefixCls = `${prefixCls}-notice`;
const {
message,
description,
icon,
type,
placement = 'topRight',
btn,
className,
...restConfig
} = config;
return originOpen({
...restConfig,
content: (
<PureContent
prefixCls={noticePrefixCls}
icon={icon}
type={type}
message={message}
description={description}
btn={btn}
/>
),
placement,
className: classNames(type && `${noticePrefixCls}-${type}`, hashId, className),
});
};
// >>> destroy
const destroy = (key?: React.Key) => {
if (key !== undefined) {
holderRef.current?.close(key);
} else {
holderRef.current?.destroy();
}
};
const clone = {
open,
destroy,
} as NotificationInstance;
const keys = ['success', 'info', 'warning', 'error'] as const;
keys.forEach((type) => {
clone[type] = (config) =>
open({
...config,
type,
});
});
return clone;
}, []);
// ============================== Return ===============================
return [wrapAPI, <Holder key="holder" {...notificationConfig} ref={holderRef} />];
}
export default function useNotification(notificationConfig?: NotificationConfig) {
return useInternalNotification(notificationConfig);
}