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

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

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var react = require('react');
var reactDom = require('react-dom');
var cs = require('classnames');
var jsxRuntime = require('react/jsx-runtime');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var cs__default = /*#__PURE__*/_interopDefault(cs);

// src/index.tsx
var initMessageList = [];
var currentId = 0;
var useStore = () => {
  const [messageList, setMessageList] = react.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 = react.createContext({ messageRef: { current: {} } });
function ConfigProvider(props) {
  const { children } = props;
  const messageRef = react.useRef(null);
  return /* @__PURE__ */ jsxRuntime.jsxs(ConfigContext.Provider, { value: { messageRef }, children: [
    /* @__PURE__ */ jsxRuntime.jsx(index_default, { ref: messageRef }),
    children
  ] });
}
function useMessage() {
  const { messageRef } = react.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__default.default("message-item", className);
  const timerRef = react.useRef(null);
  const clearTimer = react.useCallback(() => {
    if (timerRef.current) {
      clearTimeout(timerRef.current);
      timerRef.current = null;
    }
  }, []);
  react.useEffect(() => {
    clearTimer();
    if (duration !== Infinity) {
      timerRef.current = setTimeout(() => {
        onRemove(id);
      }, duration || 3e3);
    }
    return clearTimer;
  }, [id, duration, content, onRemove, clearTimer]);
  return /* @__PURE__ */ jsxRuntime.jsx(
    "div",
    {
      style: {
        width: 100,
        lineHeight: "30px",
        border: "1px solid #000",
        margin: "20px",
        ...style
      },
      className: classNames,
      children: content
    }
  );
};
var Message = react.forwardRef((_, ref) => {
  const { messageList, add, remove, update, clearAll } = useStore_default();
  if (ref && "current" in ref) {
    ref.current = {
      add,
      update,
      remove,
      clearAll
    };
  }
  const el = react.useMemo(() => {
    const el2 = document.createElement("div");
    el2.className = "wrapper";
    document.body.appendChild(el2);
    return el2;
  }, []);
  const messageWrapper = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "message-wrapper", children: messageList.map((message) => /* @__PURE__ */ jsxRuntime.jsx(MessageItem, { item: message, onRemove: remove }, message.id)) });
  return reactDom.createPortal(messageWrapper, el);
});
var index_default = Message;

exports.ConfigProvider = ConfigProvider;
exports.default = index_default;
exports.useMessage = useMessage;
//# sourceMappingURL=index.js.map
//# sourceMappingURL=index.js.map