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

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

import * as React from "react";
import classNames from "classnames";
import { CSSTransition } from "react-transition-group";
import { r as render, u as unmount } from "./render.js";
import { C as ComponentDefaults } from "./typings.js";
const classPrefix = "nut-notify";
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);
    }
  }
  clearCloseTimer() {
    if (this.closeTimer) {
      clearTimeout(this.closeTimer);
      this.closeTimer = -1;
    }
  }
  clickCover() {
    this.props.onClick();
  }
  componentDidMount() {
    this.startCloseTimer();
  }
  componentWillUnmount() {
    this.clearCloseTimer();
  }
  render() {
    const { style, message, type, className, position } = this.props;
    const { show } = this.state;
    const classes = classNames({
      [`${classPrefix}-popup-top`]: position === "top",
      [`${classPrefix}-popup-bottom`]: position === "bottom",
      [`${classPrefix}`]: true,
      [`${classPrefix}-${type}`]: true
    });
    return React.createElement(
      React.Fragment,
      null,
      React.createElement(
        CSSTransition,
        { in: show, timeout: 300, classNames: "fade", unmountOnExit: true, appear: true, position },
        React.createElement("div", { className: `${classes} ${className}`, style, onClick: this.clickCover }, message)
      )
    );
  }
}
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() {
        setTimeout(() => {
          unmount(element);
          element && element.parentNode && element.parentNode.removeChild(element);
        }, 300);
      }
    });
  }
  render(React.createElement(Notification, Object.assign({}, properties, { ref })), element);
};
let messageInstance = null;
const options = Object.assign(Object.assign({}, ComponentDefaults), { id: "", duration: 3e3, type: "danger", position: "top", onClose: () => {
}, onClick: () => {
} });
function getInstance(props, callback) {
  if (messageInstance) {
    messageInstance.destroy();
    messageInstance = null;
  }
  Notification.newInstance(props, (notification) => {
    return callback && callback(notification);
  });
}
function notice(opts) {
  opts = Object.assign(Object.assign({}, options), opts);
  getInstance(opts, (notification) => {
    messageInstance = notification;
  });
}
const errorMsg = (message) => {
  if (!message) {
    console.warn("[NutUI Notify]: message不能为空");
  }
};
const Notify = {
  text(message, option = {}) {
    errorMsg(message);
    return notice(Object.assign({ message, type: "base" }, option));
  },
  success(message, option = {}) {
    errorMsg(message);
    return notice(Object.assign({ message, type: "success" }, option));
  },
  primary(message, option = {}) {
    errorMsg(message);
    return notice(Object.assign({ message, type: "primary" }, option));
  },
  danger(message, option = {}) {
    errorMsg(message);
    return notice(Object.assign({ message, type: "danger" }, option));
  },
  warn(message, option = {}) {
    errorMsg(message);
    return notice(Object.assign({ message, type: "warning" }, option));
  },
  hide() {
    if (messageInstance) {
      messageInstance.destroy();
      messageInstance = null;
    }
  }
};
export {
  Notify as default
};