@rainliu/y-ui/dist/es/message/index.js

# @rainliu/y-ui > 一款基于 React 的现代化 UI 组件库，提供优雅、简洁且易于使用的组件，助力快速开发高质量的 Web 应用。

import { createContext, forwardRef, useMemo, useState, useRef, useCallback, useEffect, useContext } from 'react';
import { createPortal } from 'react-dom';
import cs from 'classnames';
import { jsx, jsxs } from 'react/jsx-runtime';

// src/index.tsx
var initMessageList = [];
var currentId = 0;
var useStore = () => {
  const [messageList, setMessageList] = useState(initMessageList);
  const add = (message) => {
    const id = ++currentId;
    const newMessage = { ...message, id };
    setMessageList((prev) => {
      return [...prev, newMessage];
    });
  };
  const update = (message) => {
    setMessageList((prev) => {
      const index = prev.findIndex((item) => item.id === message.id);
      if (index === -1) return prev;
      const next = [...prev];
      next[index] = message;
      return next;
    });
  };
  const remove = (id) => {
    setMessageList((prev) => {
      const index = prev.findIndex((item) => item.id === id);
      if (index === -1) return prev;
      const next = [...prev];
      next.splice(index, 1);
      return next;
    });
  };
  const clearAll = () => {
    setMessageList(initMessageList);
  };
  return {
    messageList,
    add,
    update,
    remove,
    clearAll
  };
};
var useStore_default = useStore;
var ConfigContext = createContext({ messageRef: { current: {} } });
function ConfigProvider(props) {
  const { children } = props;
  const messageRef = useRef(null);
  return /* @__PURE__ */ jsxs(ConfigContext.Provider, { value: { messageRef }, children: [
    /* @__PURE__ */ jsx(index_default, { ref: messageRef }),
    children
  ] });
}
function useMessage() {
  const { messageRef } = useContext(ConfigContext);
  if (!messageRef) {
    throw new Error("\u8BF7\u5728\u6700\u5916\u5C42\u6DFB\u52A0 ConfigProvider \u7EC4\u4EF6");
  }
  return messageRef.current;
}
var MessageItem = ({ item, onRemove }) => {
  const { style, className, content, id, duration } = item;
  const classNames = cs("message-item", className);
  const timerRef = useRef(null);
  const clearTimer = useCallback(() => {
    if (timerRef.current) {
      clearTimeout(timerRef.current);
      timerRef.current = null;
    }
  }, []);
  useEffect(() => {
    clearTimer();
    if (duration !== Infinity) {
      timerRef.current = setTimeout(() => {
        onRemove(id);
      }, duration || 3e3);
    }
    return clearTimer;
  }, [id, duration, content, onRemove, clearTimer]);
  return /* @__PURE__ */ jsx(
    "div",
    {
      style: {
        width: 100,
        lineHeight: "30px",
        border: "1px solid #000",
        margin: "20px",
        ...style
      },
      className: classNames,
      children: content
    }
  );
};
var Message = forwardRef((_, ref) => {
  const { messageList, add, remove, update, clearAll } = useStore_default();
  if (ref && "current" in ref) {
    ref.current = {
      add,
      update,
      remove,
      clearAll
    };
  }
  const el = useMemo(() => {
    const el2 = document.createElement("div");
    el2.className = "wrapper";
    document.body.appendChild(el2);
    return el2;
  }, []);
  const messageWrapper = /* @__PURE__ */ jsx("div", { className: "message-wrapper", children: messageList.map((message) => /* @__PURE__ */ jsx(MessageItem, { item: message, onRemove: remove }, message.id)) });
  return createPortal(messageWrapper, el);
});
var index_default = Message;

export { ConfigProvider, index_default as default, useMessage };
//# sourceMappingURL=index.mjs.map
//# sourceMappingURL=index.mjs.map