[源码分析] Antd-RC-Notification

Notification

全局通知提示框,和Message相比,Notification主要用于展示较为完整的通知内容,且允许带上交互。这里引用Antd官网的使用说明:

  • 较为复杂的通知内容。
  • 带有交互的通知,给出用户下一步的行动点。
  • 系统主动推送。

Rc-Notification

Antd的Notification和Message组件的底层都是rc-notification, 它的执行流程如下:

核心在于维护一个task queue,里面存储着所有要渲染的通知框配置,组件会根据不同配置的placement,将配置分别派发至对应的渲染队列渲染通知框。

Notifications

当我们传入配置时,会在Notifications中将其写入configList state,而后根据它的Placement将其派发至不同的渲染队列,并调用createPortal将组件挂载到指定的container。

向外暴露了open, close, destroy方法,分别用于打开,关闭一个task,以及销毁整个队列的task。

typescript 复制代码
// ========================= Refs =========================
  React.useImperativeHandle(ref, () => ({
    // Create
    open: (config) => {
      setConfigList((list) => {
        let clone = [...list];

        // Replace if exist
        const index = clone.findIndex((item) => item.key === config.key);
        const innerConfig: InnerOpenConfig = { ...config };
        if (index >= 0) {
          innerConfig.times = ((list[index] as InnerOpenConfig)?.times || 0) + 1;
          clone[index] = innerConfig;
        } else {
          innerConfig.times = 0;
          clone.push(innerConfig);
        }

        if (maxCount > 0 && clone.length > maxCount) {
          clone = clone.slice(-maxCount);
        }

        return clone;
      });
    },
    // Close a task
    close: (key) => {
      onNoticeClose(key);
    },
    // Destroy all tasks
    destroy: () => {
      setConfigList([]);
    },
  }));

NoticeList

渲染分发好的Task, 根据placement生成对应的css,根据传入的stack,计算出通知框的位移量,调用CSSMotionList为组件添加对应的移入移出动画。

Calculate the stack

typescript 复制代码
// If dataIndex is -1, that means this notice has been removed in data, but still in dom
// Should minus (motionIndex - 1) to get the correct index because keys.length is not the same as dom length
const stackStyle: CSSProperties = {};
if (stack) {
  const index = keys.length - 1 - (dataIndex > -1 ? dataIndex : motionIndex - 1);
  const transformX = placement === "top" || placement === "bottom" ? "-50%" : "0";
  if (index > 0) {
    stackStyle.height = expanded
      ? dictRef.current[strKey]?.offsetHeight
      : latestNotice?.offsetHeight;

    // Transform
    let verticalOffset = 0;
    for (let i = 0; i < index; i++) {
      verticalOffset += dictRef.current[keys[keys.length - 1 - i].key]?.offsetHeight + gap;
    }

    const transformY = (expanded ? verticalOffset : index * offset) *
      (placement.startsWith("top") ? 1 : -1);
    const scaleX = !expanded && latestNotice?.offsetWidth && dictRef.current[strKey]?.offsetWidth
        ? (latestNotice?.offsetWidth - offset * 2 * (index < 3 ? index : 3)) /
          dictRef.current[strKey]?.offsetWidth
        : 1;
    stackStyle.transform = `translate3d(${transformX}, ${transformY}px, 0) scaleX(${scaleX})`;
  } else {
    stackStyle.transform = `translate3d(${transformX}, 0, 0)`;
  }
}

Notice

渲染我们实际看到的通知框内容,以及实现duration倒计时,Pause On Hover等功能

倒计时

当duration大于0,且鼠标不在通知框上时,会开启倒计时。这里维护一个用于记录已经过时间的状态值: spentTime,当鼠标移到通知框上时,会停止倒计时,并记录下已经经过的时间值,下次倒计时的时间将会是duration - spentTime后的时间。

typescript 复制代码
 const [spentTime, setSpentTime] = React.useState(0);
 
// ======================== Effect ========================
  React.useEffect(() => {
    if (!mergedHovering && duration > 0) {
      // 记录开始时间(减去已经经过的时间的差值)
      const start = Date.now() - spentTime;
      const timeout = setTimeout(
        () => {
          onInternalClose();
        },
        duration * 1000 - spentTime,
      );

      return () => {
        if (pauseOnHover) {
          clearTimeout(timeout);
        }
        // 记录结束时当前时间和开始时间的差值
        setSpentTime(Date.now() - start);
      };
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [duration, mergedHovering, times]);

useNotification

调用Notifications,使用ref获取该组件暴露出来的方法:

typescript 复制代码
 const contextHolder = (
    <Notifications
      container={container}
      ref={notificationsRef}
      prefixCls={prefixCls}
      motion={motion}
      maxCount={maxCount}
      className={className}
      style={style}
      onAllRemoved={onAllRemoved}
      stack={stack}
      renderNotifications={renderNotifications}
    />
 );

维护一组api,传入配置时,会打上对应的type:

typescript 复制代码
// ========================= Refs =========================
const api = React.useMemo<NotificationAPI>(() => {
  return {
    open: (config) => {
      const mergedConfig = mergeConfig(shareConfig, config);
      if (mergedConfig.key === null || mergedConfig.key === undefined) {
        mergedConfig.key = `rc-notification-${uniqueKey}`;
        uniqueKey += 1;
      }
      setTaskQueue((queue) => [
        ...queue,
        { type: "open", config: mergedConfig },
      ]);
    },
    close: (key) => {
      setTaskQueue((queue) => [...queue, { type: "close", key }]);
    },
    destroy: () => {
      setTaskQueue((queue) => [...queue, { type: "destroy" }]);
    },
  };
}, []);

随后遍历这个队列,根据不同的type,调用Notifications中暴露出的方法:

typescript 复制代码
// ======================== Effect ========================
React.useEffect(() => {
  // Flush task when node ready
  if (notificationsRef.current && taskQueue.length) {
    taskQueue.forEach((task) => {
      switch (task.type) {
        case "open":
          notificationsRef.current.open(task.config);
          break;

        case "close":
          notificationsRef.current.close(task.key);
          break;

        case "destroy":
          notificationsRef.current.destroy();
          break;
      }
    });
    // React 17 will mix order of effect & setState in async
    // - open: setState[0]
    // - effect[0]
    // - open: setState[1]
    // - effect setState([]) * here will clean up [0, 1] in React 17
    setTaskQueue((oriQueue) =>
      oriQueue.filter((task) => !taskQueue.includes(task))
    );
  }
}, [taskQueue]);

最后返回api和contextHolder:

typescript 复制代码
// ======================== Return ========================
return [api, contextHolder];
相关推荐
雯0609~10 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ13 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z19 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
彭世瑜42 分钟前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund40443 分钟前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish44 分钟前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five1 小时前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序1 小时前
vue3 封装request请求
java·前端·typescript·vue
临枫5411 小时前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
前端每日三省1 小时前
面试题-TS(八):什么是装饰器(decorators)?如何在 TypeScript 中使用它们?
开发语言·前端·javascript