mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 21:48:19 +08:00
232 lines
6.8 KiB
TypeScript
232 lines
6.8 KiB
TypeScript
import * as React from 'react';
|
|
import { useNotification as useRcNotification } from 'rc-notification/lib';
|
|
import type { NotificationAPI } from 'rc-notification/lib';
|
|
import classNames from 'classnames';
|
|
import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
|
|
import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
|
|
import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
|
|
import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
|
|
import InfoCircleFilled from '@ant-design/icons/InfoCircleFilled';
|
|
import CloseOutlined from '@ant-design/icons/CloseOutlined';
|
|
import { ConfigContext } from '../config-provider';
|
|
import useStyle from './style';
|
|
import type {
|
|
MessageInstance,
|
|
ArgsProps,
|
|
MessageType,
|
|
ConfigOptions,
|
|
NoticeType,
|
|
TypeOpen,
|
|
} from './interface';
|
|
import { getMotion, wrapPromiseFn } from './util';
|
|
import warning from '../_util/warning';
|
|
|
|
const TypeIcon = {
|
|
info: <InfoCircleFilled />,
|
|
success: <CheckCircleFilled />,
|
|
error: <CloseCircleFilled />,
|
|
warning: <ExclamationCircleFilled />,
|
|
loading: <LoadingOutlined />,
|
|
};
|
|
|
|
const DEFAULT_OFFSET = 8;
|
|
const DEFAULT_DURATION = 3;
|
|
|
|
// ==============================================================================
|
|
// == Holder ==
|
|
// ==============================================================================
|
|
type HolderProps = ConfigOptions & {
|
|
onAllRemoved?: VoidFunction;
|
|
};
|
|
|
|
interface HolderRef extends NotificationAPI {
|
|
prefixCls: string;
|
|
}
|
|
|
|
const Holder = React.forwardRef<HolderRef, HolderProps>((props, ref) => {
|
|
const {
|
|
top,
|
|
prefixCls: staticPrefixCls,
|
|
getContainer: staticGetContainer,
|
|
maxCount,
|
|
rtl,
|
|
transitionName,
|
|
onAllRemoved,
|
|
} = props;
|
|
const { getPrefixCls, getPopupContainer } = React.useContext(ConfigContext);
|
|
|
|
const prefixCls = staticPrefixCls || getPrefixCls('message');
|
|
|
|
const [, hashId] = useStyle(prefixCls);
|
|
|
|
// =============================== Style ===============================
|
|
const getStyle = () => ({
|
|
left: '50%',
|
|
transform: 'translateX(-50%)',
|
|
top: top ?? DEFAULT_OFFSET,
|
|
});
|
|
|
|
const getClassName = () => classNames(hashId, rtl ? `${prefixCls}-rtl` : '');
|
|
|
|
// ============================== Motion ===============================
|
|
const getNotificationMotion = () => getMotion(prefixCls, transitionName);
|
|
|
|
// ============================ Close Icon =============================
|
|
const mergedCloseIcon = (
|
|
<span className={`${prefixCls}-close-x`}>
|
|
<CloseOutlined className={`${prefixCls}-close-icon`} />
|
|
</span>
|
|
);
|
|
|
|
// ============================== Origin ===============================
|
|
const [api, holder] = useRcNotification({
|
|
prefixCls,
|
|
style: getStyle,
|
|
className: getClassName,
|
|
motion: getNotificationMotion,
|
|
closable: false,
|
|
closeIcon: mergedCloseIcon,
|
|
duration: DEFAULT_DURATION,
|
|
getContainer: () => staticGetContainer?.() || getPopupContainer?.() || document.body,
|
|
maxCount,
|
|
onAllRemoved,
|
|
});
|
|
|
|
// ================================ Ref ================================
|
|
React.useImperativeHandle(ref, () => ({
|
|
...api,
|
|
prefixCls,
|
|
}));
|
|
|
|
return holder;
|
|
});
|
|
|
|
// ==============================================================================
|
|
// == Hook ==
|
|
// ==============================================================================
|
|
let keyIndex = 0;
|
|
|
|
export function useInternalMessage(
|
|
notificationConfig?: HolderProps,
|
|
): [MessageInstance, React.ReactElement] {
|
|
const holderRef = React.useRef<HolderRef>(null);
|
|
|
|
// ================================ API ================================
|
|
const wrapAPI = React.useMemo<MessageInstance>(() => {
|
|
// Wrap with notification content
|
|
|
|
// >>> close
|
|
const close = (key: React.Key) => {
|
|
holderRef.current?.close(key);
|
|
};
|
|
|
|
// >>> Open
|
|
const open = (config: ArgsProps): MessageType => {
|
|
if (!holderRef.current) {
|
|
warning(
|
|
false,
|
|
'Message',
|
|
'You are calling notice in render which will break in React 18 concurrent mode. Please trigger in effect instead.',
|
|
);
|
|
|
|
const fakeResult: any = () => {};
|
|
fakeResult.then = () => {};
|
|
return fakeResult;
|
|
}
|
|
|
|
const { open: originOpen, prefixCls } = holderRef.current;
|
|
const noticePrefixCls = `${prefixCls}-notice`;
|
|
|
|
const { content, icon, type, key, className, onClose, ...restConfig } = config;
|
|
|
|
let mergedKey: React.Key = key!;
|
|
if (mergedKey === undefined || mergedKey === null) {
|
|
keyIndex += 1;
|
|
mergedKey = `antd-message-${keyIndex}`;
|
|
}
|
|
|
|
return wrapPromiseFn(resolve => {
|
|
originOpen({
|
|
...restConfig,
|
|
key: mergedKey,
|
|
content: (
|
|
<div className={classNames(`${prefixCls}-custom-content`, `${prefixCls}-${type}`)}>
|
|
{icon || TypeIcon[type!]}
|
|
<span>{content}</span>
|
|
</div>
|
|
),
|
|
placement: 'top',
|
|
className: classNames(type && `${noticePrefixCls}-${type}`, className),
|
|
onClose: () => {
|
|
onClose?.();
|
|
resolve();
|
|
},
|
|
});
|
|
|
|
// Return close function
|
|
return () => {
|
|
close(mergedKey);
|
|
};
|
|
});
|
|
};
|
|
|
|
// >>> destroy
|
|
const destroy = (key?: React.Key) => {
|
|
if (key !== undefined) {
|
|
close(key);
|
|
} else {
|
|
holderRef.current?.destroy();
|
|
}
|
|
};
|
|
|
|
const clone = {
|
|
open,
|
|
destroy,
|
|
} as MessageInstance;
|
|
|
|
const keys: NoticeType[] = ['info', 'success', 'warning', 'error', 'loading'];
|
|
keys.forEach(type => {
|
|
const typeOpen: TypeOpen = (jointContent, duration, onClose) => {
|
|
let config: ArgsProps;
|
|
if (jointContent && typeof jointContent === 'object' && 'content' in jointContent) {
|
|
config = jointContent;
|
|
} else {
|
|
config = {
|
|
content: jointContent,
|
|
};
|
|
}
|
|
|
|
// Params
|
|
let mergedDuration: number | undefined;
|
|
let mergedOnClose: VoidFunction | undefined;
|
|
if (typeof duration === 'function') {
|
|
mergedOnClose = duration;
|
|
} else {
|
|
mergedDuration = duration;
|
|
mergedOnClose = onClose;
|
|
}
|
|
|
|
const mergedConfig = {
|
|
onClose: mergedOnClose,
|
|
duration: mergedDuration,
|
|
...config,
|
|
type,
|
|
};
|
|
|
|
return open(mergedConfig);
|
|
};
|
|
|
|
clone[type] = typeOpen;
|
|
});
|
|
|
|
return clone;
|
|
}, []);
|
|
|
|
// ============================== Return ===============================
|
|
return [wrapAPI, <Holder key="holder" {...notificationConfig} ref={holderRef} />];
|
|
}
|
|
|
|
export default function useMessage(notificationConfig?: ConfigOptions) {
|
|
return useInternalMessage(notificationConfig);
|
|
}
|