Ant-Design组件源码分析——Messgae

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];
}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值