import React, { useContext } from 'react'; import type { FC, PropsWithChildren } from 'react'; import classNames from 'classnames'; import { NotificationProvider, useNotification as useRcNotification } from 'rc-notification'; import type { NotificationAPI, NotificationConfig as RcNotificationConfig } from 'rc-notification'; import { devUseWarning } from '../_util/warning'; import { ConfigContext } from '../config-provider'; import type { ComponentStyleConfig } from '../config-provider/context'; import useCSSVarCls from '../config-provider/hooks/useCSSVarCls'; import { useToken } from '../theme/internal'; import type { ArgsProps, NotificationConfig, NotificationInstance, NotificationPlacement, } from './interface'; import { getCloseIcon, PureContent } from './PurePanel'; import useStyle from './style'; import { getMotion, getPlacementStyle } from './util'; const DEFAULT_OFFSET = 24; const DEFAULT_DURATION = 4.5; const DEFAULT_PLACEMENT: NotificationPlacement = 'topRight'; // ============================================================================== // == Holder == // ============================================================================== type HolderProps = NotificationConfig & { onAllRemoved?: VoidFunction; }; interface HolderRef extends NotificationAPI { prefixCls: string; notification?: ComponentStyleConfig; } const Wrapper: FC> = ({ children, prefixCls }) => { const rootCls = useCSSVarCls(prefixCls); const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls); return wrapCSSVar( {children} , ); }; const renderNotifications: RcNotificationConfig['renderNotifications'] = ( node, { prefixCls, key }, ) => ( {node} ); const Holder = React.forwardRef((props, ref) => { const { top, bottom, prefixCls: staticPrefixCls, getContainer: staticGetContainer, maxCount, rtl, onAllRemoved, stack, } = props; const { getPrefixCls, getPopupContainer, notification, direction } = useContext(ConfigContext); const [, token] = useToken(); const prefixCls = staticPrefixCls || getPrefixCls('notification'); // =============================== Style =============================== const getStyle = (placement: NotificationPlacement): React.CSSProperties => getPlacementStyle(placement, top ?? DEFAULT_OFFSET, bottom ?? DEFAULT_OFFSET); const getClassName = () => classNames({ [`${prefixCls}-rtl`]: rtl ?? direction === '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, renderNotifications, stack: stack === false ? false : { threshold: typeof stack === 'object' ? stack?.threshold : undefined, offset: 8, gap: token.margin, }, }); // ================================ Ref ================================ React.useImperativeHandle(ref, () => ({ ...api, prefixCls, notification, })); return holder; }); // ============================================================================== // == Hook == // ============================================================================== export function useInternalNotification( notificationConfig?: HolderProps, ): readonly [NotificationInstance, React.ReactElement] { const holderRef = React.useRef(null); const warning = devUseWarning('Notification'); // ================================ API ================================ const wrapAPI = React.useMemo(() => { // Wrap with notification content // >>> Open const open = (config: ArgsProps) => { if (!holderRef.current) { warning( false, 'usage', 'You are calling notice in render which will break in React 18 concurrent mode. Please trigger in effect instead.', ); return; } const { open: originOpen, prefixCls, notification } = holderRef.current; const noticePrefixCls = `${prefixCls}-notice`; const { message, description, icon, type, btn, className, style, role = 'alert', closeIcon, ...restConfig } = config; const realCloseIcon = getCloseIcon(noticePrefixCls, closeIcon); return originOpen({ // use placement from props instead of hard-coding "topRight" placement: notificationConfig?.placement ?? DEFAULT_PLACEMENT, ...restConfig, content: ( ), className: classNames( type && `${noticePrefixCls}-${type}`, className, notification?.className, ), style: { ...notification?.style, ...style }, closeIcon: realCloseIcon, closable: !!realCloseIcon, }); }; // >>> 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, , ] as const; } export default function useNotification(notificationConfig?: NotificationConfig) { return useInternalNotification(notificationConfig); }