2021SC@SDUSC
首先导入相关要使用的模块
import * as React from 'react';
import classNames from 'classnames';
import RCNotification from 'rc-notification';
import {
NotificationInstance as RCNotificationInstance,
NoticeContent,
} from 'rc-notification/lib/Notification';
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 createUseMessage from './hooks/useMessage';
import ConfigProvider, { globalConfig } from '../config-provider';
定义了五种类型
type NoticeType = 'info' | 'success' | 'error' | 'warning' | 'loading';
定义了一些初始变量,其中
messageInstance:消息实例,其类型为React的rc-notification或空
defaultDuration:默认的持续时间,设置为3s
defaultTop:message与顶端的距离
key:id
localPrefixCls:前缀,用于区分组件
transitionName:消息出现的方式
hasTransitionName:消息是否有非默认的出现方式
getContainer:函数,获取message内容
maxCount: 默认顶端最多存在几个message(若超过则直接删除最上方的message)
rtl:是否有RTL模式(组件强制变为从右向左布局)
let messageInstance: RCNotificationInstance | null;
let defaultDuration = 3;
let defaultTop: number;
let key = 1;
let localPrefixCls = '';
let transitionName = 'move-up';
let hasTransitionName = false;
let getContainer: () => HTMLElement;
let maxCount: number;
let rtl = false;
函数,让id自增
export function getKeyThenIncreaseKey() {
return key++;
}
定义了message的接口,其中
top:与顶端距离
duration:持续时间
prefixCls:前缀内容
getContainer:用于获取message内容
transitionName:message出现的方式
maxCount:messgae最大数量
rtl:是否开启RTL模式
整体与上述定义的变量没有区别,换句话说上面定义的变量就是为了定义接口做的准备
export interface ConfigOptions {
top?: number;
duration?: number;
prefixCls?: string;
getContainer?: () => HTMLElement;
transitionName?: string;
maxCount?: number;
rtl?: boolean;
}
设置message的配置,就是导入一个已有的配置到一个message上,若该message没有对应配置则被覆盖,否则保持原来的配置
function setMessageConfig(options: ConfigOptions) {
if (options.top !== undefined) {
defaultTop = options.top;
messageInstance = null; // delete messageInstance for new defaultTop
}
if (options.duration !== undefined) {
defaultDuration = options.duration;
}
if (options.prefixCls !== undefined) {
localPrefixCls = options.prefixCls;
}
if (options.getContainer !== undefined) {
getContainer = options.getContainer;
}
if (options.transitionName !== undefined) {
transitionName = options.transitionName;
messageInstance = null; // delete messageInstance for new transitionName
hasTransitionName = true;
}
if (options.maxCount !== undefined) {
maxCount = options.maxCount;
messageInstance = null;
}
if (options.rtl !== undefined) {
rtl = options.rtl;
}
}
函数获取一个React的rc-notification实例内容
function getRCNotificationInstance(
args: ArgsProps,
callback: (info: {
prefixCls: string;
rootPrefixCls: string;
iconPrefixCls: string;
instance: RCNotificationInstance;
}) => void,
) {
const { prefixCls: customizePrefixCls, getPopupContainer: getContextPopupContainer } = args;
const { getPrefixCls, getRootPrefixCls, getIconPrefixCls } = globalConfig();
const prefixCls = getPrefixCls('message', customizePrefixCls || localPrefixCls);
const rootPrefixCls = getRootPrefixCls(args.rootPrefixCls, prefixCls);
const iconPrefixCls = getIconPrefixCls();
if (messageInstance) {
callback({ prefixCls, rootPrefixCls, iconPrefixCls, instance: messageInstance });
return;
}
const instanceConfig = {
prefixCls,
transitionName: hasTransitionName ? transitionName : `${rootPrefixCls}-${transitionName}`,
style: { top: defaultTop }, // 覆盖原来的样式
getContainer: getContainer || getContextPopupContainer,
maxCount,
};
RCNotification.newInstance(instanceConfig, (instance: any) => {
if (messageInstance) {
callback({ prefixCls, rootPrefixCls, iconPrefixCls, instance: messageInstance });
return;
}
messageInstance = instance;
if (process.env.NODE_ENV === 'test') {
(messageInstance as any).config = instanceConfig;
}
callback({ prefixCls, rootPrefixCls, iconPrefixCls, instance });
});
}
规定了五种类型分别对应的图标
info:
success:
error:
warning:
loading:
const typeToIcon = {
info: InfoCircleFilled,
success: CheckCircleFilled,
error: CloseCircleFilled,
warning: ExclamationCircleFilled,
loading: LoadingOutlined,
};
定义了AegsProps的接口
export interface ArgsProps {
content: React.ReactNode;
duration: number | null;
type: NoticeType;
prefixCls?: string;
rootPrefixCls?: string;
getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
onClose?: () => void;
icon?: React.ReactNode;
key?: string | number;
style?: React.CSSProperties;
className?: string;
onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
}
函数:通过传入一个argsprops获取其中的信息而返回一个rc_notice实例
function getRCNoticeProps(
args: ArgsProps,
prefixCls: string,
iconPrefixCls?: string,
): NoticeContent {
const duration = args.duration !== undefined ? args.duration : defaultDuration;
const IconComponent = typeToIcon[args.type];
const messageClass = classNames(`${prefixCls}-custom-content`, {
[`${prefixCls}-${args.type}`]: args.type,
[`${prefixCls}-rtl`]: rtl === true,
});
return {
key: args.key,
duration,
style: args.style || {},
className: args.className,
content: (
<ConfigProvider iconPrefixCls={iconPrefixCls}>
<div className={messageClass}>
{args.icon || (IconComponent && <IconComponent />)}
<span>{args.content}</span>
</div>
</ConfigProvider>
),
onClose: args.onClose,
onClick: args.onClick,
};
}
函数,通过argsprops创建一个新的message
function notice(args: ArgsProps): MessageType {
const target = args.key || key++;
const closePromise = new Promise(resolve => {
const callback = () => {
if (typeof args.onClose === 'function') {
args.onClose();
}
return resolve(true);
};
getRCNotificationInstance(args, ({ prefixCls, iconPrefixCls, instance }) => {
instance.notice(
getRCNoticeProps({ ...args, key: target, onClose: callback }, prefixCls, iconPrefixCls),
);
});
});
const result: any = () => {
if (messageInstance) {
messageInstance.removeNotice(target);
}
};
result.then = (filled: ThenableArgument, rejected: ThenableArgument) =>
closePromise.then(filled, rejected);
result.promise = closePromise;
return result;
}
最后是各种类型的message接口,供最后编辑组件时使用
export interface MessageInstance {
info(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose): MessageType;
success(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose): MessageType;
error(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose): MessageType;
warning(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose): MessageType;
loading(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose): MessageType;
open(args: ArgsProps): MessageType;
}
MessageApi
export interface MessageApi extends MessageInstance {
warn(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose): MessageType;
config(options: ConfigOptions): void;
destroy(messageKey?: React.Key): void;
useMessage(): [MessageInstance, React.ReactElement];
}