ant-design/components/notification/useNotification.tsx
Minko bcd667068e
fix: notification from useApp should consume App config ()
* feat: notfication use global showProgress, pauseOnHover config

* fix: notification not inherit app config
2024-06-11 14:19:49 +08:00

226 lines
6.8 KiB
TypeScript

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 { NotificationConfig as CPNotificationConfig } 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?: CPNotificationConfig;
}
const Wrapper: FC<PropsWithChildren<{ prefixCls: string }>> = ({ children, prefixCls }) => {
const rootCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
return wrapCSSVar(
<NotificationProvider classNames={{ list: classNames(hashId, cssVarCls, rootCls) }}>
{children}
</NotificationProvider>,
);
};
const renderNotifications: RcNotificationConfig['renderNotifications'] = (
node,
{ prefixCls, key },
) => (
<Wrapper prefixCls={prefixCls} key={key}>
{node}
</Wrapper>
);
const Holder = React.forwardRef<HolderRef, HolderProps>((props, ref) => {
const {
top,
bottom,
prefixCls: staticPrefixCls,
getContainer: staticGetContainer,
maxCount,
rtl,
onAllRemoved,
stack,
duration,
pauseOnHover = true,
showProgress,
} = 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: duration ?? DEFAULT_DURATION,
getContainer: () => staticGetContainer?.() || getPopupContainer?.() || document.body,
maxCount,
pauseOnHover,
showProgress,
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<HolderRef>(null);
const warning = devUseWarning('Notification');
// ================================ API ================================
const wrapAPI = React.useMemo<NotificationInstance>(() => {
// 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,
closable,
...restConfig
} = config;
const realCloseIcon = getCloseIcon(
noticePrefixCls,
typeof closeIcon !== 'undefined' ? closeIcon : notification?.closeIcon,
);
return originOpen({
// use placement from props instead of hard-coding "topRight"
placement: notificationConfig?.placement ?? DEFAULT_PLACEMENT,
...restConfig,
content: (
<PureContent
prefixCls={noticePrefixCls}
icon={icon}
type={type}
message={message}
description={description}
btn={btn}
role={role}
/>
),
className: classNames(
type && `${noticePrefixCls}-${type}`,
className,
notification?.className,
),
style: { ...notification?.style, ...style },
closeIcon: realCloseIcon,
closable: 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,
<Holder key="notification-holder" {...notificationConfig} ref={holderRef} />,
] as const;
}
export default function useNotification(notificationConfig?: NotificationConfig) {
return useInternalNotification(notificationConfig);
}