@nutui/nutui-react/dist/esm/Toast.js

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

import * as React from "react";
import classNames from "classnames";
import { Tips, Failure, Loading, Check } from "@nutui/icons-react";
import { r as render, u as unmount } from "./render.js";
import { O as Overlay } from "./overlay2.js";
import { C as ComponentDefaults } from "./typings.js";
const classPrefix = "nut-toast";
class Notification extends React.PureComponent {
  constructor(props) {
    super(props);
    this.close = this.close.bind(this);
    this.startCloseTimer = this.startCloseTimer.bind(this);
    this.clearCloseTimer = this.clearCloseTimer.bind(this);
    this.clickCover = this.clickCover.bind(this);
    this.state = {
      show: true
    };
  }
  close() {
    this.setState({
      show: false
    });
    this.clearCloseTimer();
    if (this.props.id) {
      const element = document.getElementById(this.props.id);
      element && element.parentNode && element.parentNode.removeChild(element);
    }
    this.props.onClose();
  }
  startCloseTimer() {
    const { duration } = this.props;
    if (duration) {
      this.closeTimer = window.setTimeout(() => {
        this.close();
      }, duration * 1e3);
    }
  }
  clearCloseTimer() {
    if (this.closeTimer) {
      clearTimeout(this.closeTimer);
      this.closeTimer = -1;
    }
  }
  clickCover() {
    const { closeOnOverlayClick } = this.props;
    if (closeOnOverlayClick) {
      this.close();
    }
  }
  renderIcon() {
    const { icon } = this.props;
    if (typeof icon === "string") {
      let iconNode = null;
      switch (icon) {
        case "success":
          iconNode = React.createElement(Check, null);
          break;
        case "loading":
          iconNode = React.createElement(Loading, { className: "nut-icon-loading" });
          break;
        case "fail":
          iconNode = React.createElement(Failure, null);
          break;
        case "warn":
          iconNode = React.createElement(Tips, null);
          break;
      }
      return React.createElement("p", { className: `${classPrefix}-icon-wrapper` }, iconNode);
    }
    return icon;
  }
  componentDidMount() {
    this.startCloseTimer();
  }
  componentWillUnmount() {
    this.clearCloseTimer();
  }
  render() {
    const { id, icon, title, content, position, size, closeOnOverlayClick, lockScroll, style, className, contentClassName, contentStyle, wordBreak } = this.props;
    const { show: show2 } = this.state;
    const classes = classNames({
      "nut-toast-has-icon": icon,
      [`nut-toast-${size}`]: true
    });
    return React.createElement(
      React.Fragment,
      null,
      React.createElement(
        Overlay,
        { visible: show2, style, className: `${classPrefix}-overlay-default ${className}`, onClick: () => {
          this.clickCover();
        }, closeOnOverlayClick, lockScroll },
        React.createElement(
          "div",
          { className: `${classPrefix} ${classes}`, id: `toast-${id}` },
          React.createElement(
            "div",
            { className: `${classPrefix}-inner ${classPrefix}-${position} ${contentClassName} ${wordBreak}`, style: contentStyle },
            this.renderIcon(),
            title ? React.createElement("div", { className: `${classPrefix}-title` }, title) : null,
            React.createElement("span", { className: `${classPrefix}-text` }, content)
          )
        )
      )
    );
  }
}
Notification.newInstance = (properties, callback) => {
  const element = document.createElement("div");
  const id = properties.id ? properties.id : `${(/* @__PURE__ */ new Date()).getTime()}`;
  element.id = id;
  properties.id = id;
  document.body.appendChild(element);
  let called = false;
  function ref(instance) {
    if (called) {
      return;
    }
    called = true;
    callback({
      component: instance,
      destroy() {
        unmount(element);
        element && element.parentNode && element.parentNode.removeChild(element);
      }
    });
  }
  render(React.createElement(Notification, Object.assign({}, properties, { ref })), element);
};
let messageInstance = null;
let options = Object.assign(Object.assign({}, ComponentDefaults), { id: "", duration: 2, position: "center", title: "", size: "base", icon: null, onClose: () => {
}, closeOnOverlayClick: false, lockScroll: false, contentClassName: "", wordBreak: "break-all" });
function getInstance(props, callback) {
  if (messageInstance) {
    messageInstance.destroy();
    messageInstance = null;
  }
  Notification.newInstance(props, (notification) => {
    return callback && callback(notification);
  });
}
function notice(opts) {
  function close() {
    if (messageInstance) {
      messageInstance.destroy();
      messageInstance = null;
      opts.onClose && opts.onClose();
    }
  }
  const opts2 = Object.assign(Object.assign(Object.assign({}, options), opts), { onClose: close });
  getInstance(opts2, (notification) => {
    messageInstance = notification;
  });
}
const errorMsg = (msg) => {
  if (!msg) {
    console.warn("[NutUI Toast]: msg cannot be null");
  }
};
function show(option) {
  if (typeof option === "string") {
    errorMsg(option);
    return notice({ content: option });
  }
  errorMsg(option.content);
  return notice(Object.assign({}, option));
}
function config(config2) {
  options = Object.assign(Object.assign({}, options), config2);
}
const Toast = {
  show,
  config,
  clear() {
    if (messageInstance) {
      messageInstance.destroy();
      messageInstance = null;
    }
  }
};
export {
  Toast as default
};