2023-07-17 11:30:06 +08:00
|
|
|
import * as React from 'react';
|
2023-09-11 17:28:04 +08:00
|
|
|
import type { FC, PropsWithChildren } from 'react';
|
2023-05-19 18:21:31 +08:00
|
|
|
import classNames from 'classnames';
|
2023-08-29 19:31:12 +08:00
|
|
|
import { NotificationProvider, useNotification as useRcNotification } from 'rc-notification';
|
2023-09-13 15:19:18 +08:00
|
|
|
import type { NotificationAPI, NotificationConfig as RcNotificationConfig } from 'rc-notification';
|
2023-09-11 17:28:04 +08:00
|
|
|
|
|
|
|
import { devUseWarning } from '../_util/warning';
|
2022-05-11 14:26:18 +08:00
|
|
|
import { ConfigContext } from '../config-provider';
|
2023-07-03 20:37:11 +08:00
|
|
|
import type { ComponentStyleConfig } from '../config-provider/context';
|
2022-05-11 14:26:18 +08:00
|
|
|
import type {
|
|
|
|
ArgsProps,
|
|
|
|
NotificationConfig,
|
2023-05-19 18:21:31 +08:00
|
|
|
NotificationInstance,
|
|
|
|
NotificationPlacement,
|
2022-05-11 14:26:18 +08:00
|
|
|
} from './interface';
|
2023-07-17 11:30:06 +08:00
|
|
|
import { getCloseIcon, PureContent } from './PurePanel';
|
2022-05-16 18:02:46 +08:00
|
|
|
import useStyle from './style';
|
2023-05-19 18:21:31 +08:00
|
|
|
import { getMotion, getPlacementStyle } from './util';
|
2023-09-13 15:19:18 +08:00
|
|
|
import { useToken } from '../theme/internal';
|
2023-11-14 10:06:18 +08:00
|
|
|
import useCSSVar from './style/cssVar';
|
2022-05-11 14:26:18 +08:00
|
|
|
|
|
|
|
const DEFAULT_OFFSET = 24;
|
|
|
|
const DEFAULT_DURATION = 4.5;
|
2023-07-17 11:30:06 +08:00
|
|
|
const DEFAULT_PLACEMENT: NotificationPlacement = 'topRight';
|
2022-05-11 14:26:18 +08:00
|
|
|
|
|
|
|
// ==============================================================================
|
|
|
|
// == Holder ==
|
|
|
|
// ==============================================================================
|
|
|
|
type HolderProps = NotificationConfig & {
|
|
|
|
onAllRemoved?: VoidFunction;
|
|
|
|
};
|
|
|
|
|
|
|
|
interface HolderRef extends NotificationAPI {
|
|
|
|
prefixCls: string;
|
2023-07-03 20:37:11 +08:00
|
|
|
notification?: ComponentStyleConfig;
|
2022-05-11 14:26:18 +08:00
|
|
|
}
|
|
|
|
|
2023-08-29 19:31:12 +08:00
|
|
|
const Wrapper: FC<PropsWithChildren<{ prefixCls: string }>> = ({ children, prefixCls }) => {
|
|
|
|
const [, hashId] = useStyle(prefixCls);
|
2023-11-14 10:06:18 +08:00
|
|
|
const wrapCSSVar = useCSSVar(prefixCls);
|
|
|
|
return wrapCSSVar(
|
2023-08-29 19:31:12 +08:00
|
|
|
<NotificationProvider classNames={{ list: hashId, notice: hashId }}>
|
|
|
|
{children}
|
2023-11-14 10:06:18 +08:00
|
|
|
</NotificationProvider>,
|
2023-08-29 19:31:12 +08:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
const renderNotifications: RcNotificationConfig['renderNotifications'] = (
|
|
|
|
node,
|
|
|
|
{ prefixCls, key },
|
|
|
|
) => (
|
|
|
|
<Wrapper prefixCls={prefixCls} key={key}>
|
|
|
|
{node}
|
|
|
|
</Wrapper>
|
|
|
|
);
|
|
|
|
|
2022-05-11 14:26:18 +08:00
|
|
|
const Holder = React.forwardRef<HolderRef, HolderProps>((props, ref) => {
|
|
|
|
const {
|
|
|
|
top,
|
|
|
|
bottom,
|
|
|
|
prefixCls: staticPrefixCls,
|
|
|
|
getContainer: staticGetContainer,
|
|
|
|
maxCount,
|
|
|
|
rtl,
|
|
|
|
onAllRemoved,
|
2023-09-13 15:19:18 +08:00
|
|
|
stack,
|
2022-05-11 14:26:18 +08:00
|
|
|
} = props;
|
2023-07-03 20:37:11 +08:00
|
|
|
const { getPrefixCls, getPopupContainer, notification } = React.useContext(ConfigContext);
|
2023-09-13 15:19:18 +08:00
|
|
|
const [, token] = useToken();
|
2022-05-11 14:26:18 +08:00
|
|
|
|
|
|
|
const prefixCls = staticPrefixCls || getPrefixCls('notification');
|
|
|
|
|
|
|
|
// =============================== Style ===============================
|
2023-07-03 20:37:11 +08:00
|
|
|
const getStyle = (placement: NotificationPlacement): React.CSSProperties =>
|
2022-05-11 14:26:18 +08:00
|
|
|
getPlacementStyle(placement, top ?? DEFAULT_OFFSET, bottom ?? DEFAULT_OFFSET);
|
|
|
|
|
2023-08-29 19:31:12 +08:00
|
|
|
const getClassName = () => classNames({ [`${prefixCls}-rtl`]: rtl });
|
2022-05-11 14:26:18 +08:00
|
|
|
|
|
|
|
// ============================== Motion ===============================
|
|
|
|
const getNotificationMotion = () => getMotion(prefixCls);
|
|
|
|
|
|
|
|
// ============================== Origin ===============================
|
|
|
|
const [api, holder] = useRcNotification({
|
|
|
|
prefixCls,
|
|
|
|
style: getStyle,
|
|
|
|
className: getClassName,
|
|
|
|
motion: getNotificationMotion,
|
|
|
|
closable: true,
|
2022-06-08 17:01:26 +08:00
|
|
|
closeIcon: getCloseIcon(prefixCls),
|
2022-05-11 14:26:18 +08:00
|
|
|
duration: DEFAULT_DURATION,
|
|
|
|
getContainer: () => staticGetContainer?.() || getPopupContainer?.() || document.body,
|
|
|
|
maxCount,
|
|
|
|
onAllRemoved,
|
2023-08-29 19:31:12 +08:00
|
|
|
renderNotifications,
|
2023-09-13 15:19:18 +08:00
|
|
|
stack:
|
|
|
|
stack === false
|
|
|
|
? false
|
|
|
|
: {
|
|
|
|
threshold: typeof stack === 'object' ? stack?.threshold : undefined,
|
|
|
|
offset: 8,
|
|
|
|
gap: token.margin,
|
|
|
|
},
|
2022-05-11 14:26:18 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
// ================================ Ref ================================
|
|
|
|
React.useImperativeHandle(ref, () => ({
|
|
|
|
...api,
|
|
|
|
prefixCls,
|
2023-07-03 20:37:11 +08:00
|
|
|
notification,
|
2022-05-11 14:26:18 +08:00
|
|
|
}));
|
|
|
|
|
|
|
|
return holder;
|
|
|
|
});
|
|
|
|
|
|
|
|
// ==============================================================================
|
|
|
|
// == Hook ==
|
|
|
|
// ==============================================================================
|
|
|
|
export function useInternalNotification(
|
|
|
|
notificationConfig?: HolderProps,
|
2022-12-21 14:39:12 +08:00
|
|
|
): readonly [NotificationInstance, React.ReactElement] {
|
2022-05-11 14:26:18 +08:00
|
|
|
const holderRef = React.useRef<HolderRef>(null);
|
|
|
|
|
2023-09-13 22:07:33 +08:00
|
|
|
const warning = devUseWarning('Notification');
|
2023-09-11 17:28:04 +08:00
|
|
|
|
2022-05-11 14:26:18 +08:00
|
|
|
// ================================ 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(
|
2022-05-11 14:26:18 +08:00
|
|
|
false,
|
2023-09-11 17:28:04 +08:00
|
|
|
'usage',
|
2022-05-11 14:26:18 +08:00
|
|
|
'You are calling notice in render which will break in React 18 concurrent mode. Please trigger in effect instead.',
|
|
|
|
);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2023-08-29 19:31:12 +08:00
|
|
|
const { open: originOpen, prefixCls, notification } = holderRef.current;
|
2023-07-03 20:37:11 +08:00
|
|
|
|
2022-05-11 14:26:18 +08:00
|
|
|
const noticePrefixCls = `${prefixCls}-notice`;
|
|
|
|
|
2023-05-19 18:21:31 +08:00
|
|
|
const {
|
|
|
|
message,
|
|
|
|
description,
|
|
|
|
icon,
|
|
|
|
type,
|
|
|
|
btn,
|
|
|
|
className,
|
2023-07-03 20:37:11 +08:00
|
|
|
style,
|
2023-05-19 18:21:31 +08:00
|
|
|
role = 'alert',
|
2023-06-12 14:20:10 +08:00
|
|
|
closeIcon,
|
2023-05-19 18:21:31 +08:00
|
|
|
...restConfig
|
|
|
|
} = config;
|
2022-05-11 14:26:18 +08:00
|
|
|
|
2023-06-12 14:20:10 +08:00
|
|
|
const realCloseIcon = getCloseIcon(noticePrefixCls, closeIcon);
|
|
|
|
|
2022-05-11 14:26:18 +08:00
|
|
|
return originOpen({
|
2023-07-17 11:30:06 +08:00
|
|
|
// use placement from props instead of hard-coding "topRight"
|
|
|
|
placement: notificationConfig?.placement ?? DEFAULT_PLACEMENT,
|
2022-05-11 14:26:18 +08:00
|
|
|
...restConfig,
|
|
|
|
content: (
|
2022-06-08 17:01:26 +08:00
|
|
|
<PureContent
|
|
|
|
prefixCls={noticePrefixCls}
|
|
|
|
icon={icon}
|
|
|
|
type={type}
|
|
|
|
message={message}
|
|
|
|
description={description}
|
|
|
|
btn={btn}
|
2023-05-19 18:21:31 +08:00
|
|
|
role={role}
|
2022-06-08 17:01:26 +08:00
|
|
|
/>
|
2022-05-11 14:26:18 +08:00
|
|
|
),
|
2023-07-03 20:37:11 +08:00
|
|
|
className: classNames(
|
|
|
|
type && `${noticePrefixCls}-${type}`,
|
|
|
|
className,
|
|
|
|
notification?.className,
|
|
|
|
),
|
|
|
|
style: { ...notification?.style, ...style },
|
2023-06-12 14:20:10 +08:00
|
|
|
closeIcon: realCloseIcon,
|
|
|
|
closable: !!realCloseIcon,
|
2022-05-11 14:26:18 +08:00
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
// >>> 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;
|
2022-11-19 13:47:33 +08:00
|
|
|
keys.forEach((type) => {
|
|
|
|
clone[type] = (config) =>
|
2022-05-11 14:26:18 +08:00
|
|
|
open({
|
|
|
|
...config,
|
|
|
|
type,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
return clone;
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
// ============================== Return ===============================
|
2022-12-21 14:39:12 +08:00
|
|
|
return [
|
|
|
|
wrapAPI,
|
|
|
|
<Holder key="notification-holder" {...notificationConfig} ref={holderRef} />,
|
|
|
|
] as const;
|
2022-05-11 14:26:18 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export default function useNotification(notificationConfig?: NotificationConfig) {
|
|
|
|
return useInternalNotification(notificationConfig);
|
|
|
|
}
|