Ant-Design源码分析Notification

2021SC@SDUSC

首先导入相应模块

import * as React from 'react';
import Notification from 'rc-notification';
import { NotificationInstance as RCNotificationInstance } from 'rc-notification/lib/Notification';
import CloseOutlined from '@ant-design/icons/CloseOutlined';
import classNames from 'classnames';
import CheckCircleOutlined from '@ant-design/icons/CheckCircleOutlined';
import CloseCircleOutlined from '@ant-design/icons/CloseCircleOutlined';
import ExclamationCircleOutlined from '@ant-design/icons/ExclamationCircleOutlined';
import InfoCircleOutlined from '@ant-design/icons/InfoCircleOutlined';
import createUseNotification from './hooks/useNotification';
import ConfigProvider, { globalConfig } from '../config-provider';

定义了通知提醒框的四个出现位置

export type NotificationPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';

定义了四个图标类型

export type IconType = 'success' | 'info' | 'error' | 'warning';

定义了一些变量

//默认的持续时间4.5秒
let defaultDuration = 4.5;
//默认与顶端距离24px
let defaultTop = 24;
//默认与底端距离24px
let defaultBottom = 24;
//默认前缀为空
let defaultPrefixCls = '';
//默认的出现位置为右上方
let defaultPlacement: NotificationPlacement = 'topRight';
//默认容器
let defaultGetContainer: () => HTMLElement;
//默认的关闭图标
let defaultCloseIcon: React.ReactNode;
//默