@nutui/nutui-react-taro/dist/esm/toast.taro-Tx0IHbsl.js

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

import React__default, { useRef, useEffect } from "react";
import classNames from "classnames";
import { Success, Failure, Tips, Loading } from "@nutui/icons-react-taro";
import { O as Overlay } from "./overlay.taro-C8eXSsJH.js";
import { C as ComponentDefaults } from "./typings-DV9RBfhj.js";
import { b as useParams, u as useCustomEvent, a as useCustomEventsPath, c as customEvents } from "./use-custom-event-DuP4onEm.js";
import { u as usePropsValue } from "./use-props-value-SH9krhkx.js";
import { m as mergeProps } from "./merge-props-2rRqFlJz.js";
const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { id: "", icon: null, iconSize: "20", content: "", msg: "", duration: 2, position: "center", type: "text", title: "", closeOnOverlayClick: false, lockScroll: false, contentClassName: "", size: "base", visible: false, wordBreak: "break-all", onClose: () => {
} });
const classPrefix = "nut-toast";
const Toast = (props) => {
  const { params: { id, position, contentStyle, icon, iconSize, content, msg, duration, type, title, closeOnOverlayClick, lockScroll, contentClassName, visible, size, className, style, onClose, wordBreak }, setParams } = useParams(mergeProps(defaultProps, props));
  const timer = useRef(-1);
  const [innerVisible, setInnerVisible] = usePropsValue({
    value: visible,
    defaultValue: void 0,
    finalValue: false,
    onChange: (v) => {
      !v && (onClose === null || onClose === void 0 ? void 0 : onClose());
    }
  });
  useEffect(() => {
    if (innerVisible) {
      autoClose();
    }
  }, [innerVisible, duration]);
  useCustomEvent(id, ({ status, options }) => {
    if (status) {
      options.visible = true;
      setParams(options);
      show2();
    } else {
      setParams({ visible: false });
      hide2();
    }
  });
  const clearTimer = () => {
    if (timer.current) {
      clearTimeout(timer.current);
      timer.current = -1;
    }
  };
  const show2 = () => {
    setInnerVisible(true);
  };
  const hide2 = () => {
    clearTimer();
    setInnerVisible(false);
  };
  const autoClose = () => {
    clearTimer();
    if (duration) {
      timer.current = window.setTimeout(() => {
        setParams({ visible: false });
        hide2();
      }, duration * 1e3);
    }
  };
  const clickCover = () => {
    if (closeOnOverlayClick) {
      hide2();
    }
  };
  const hasIcon = () => {
    if (type !== "text") {
      return true;
    }
    return !!icon;
  };
  const iconName = () => {
    if (icon) {
      return icon;
    }
    return {
      success: React__default.createElement(Success, { color: "#ffffff", size: iconSize }),
      fail: React__default.createElement(Failure, { color: "#ffffff", size: iconSize }),
      warn: React__default.createElement(Tips, { color: "#ffffff", size: iconSize }),
      loading: React__default.createElement(Loading, { color: "#ffffff", size: iconSize })
    }[type];
  };
  const classes = classNames({
    "nut-toast-has-icon": icon,
    [`nut-toast-${size}`]: true
  });
  return React__default.createElement(React__default.Fragment, null, innerVisible ? React__default.createElement(
    Overlay,
    { visible: innerVisible, style, className: `${classPrefix}-overlay-default ${className}`, closeOnOverlayClick, lockScroll, onClick: () => {
      clickCover();
    } },
    React__default.createElement(
      "div",
      { className: `${classPrefix} ${classes}`, id },
      React__default.createElement(
        "div",
        { className: `${classPrefix}-inner ${classPrefix}-${position} ${contentClassName} ${wordBreak}`, style: contentStyle },
        hasIcon() ? React__default.createElement("p", { className: `${classPrefix}-icon-wrapper` }, iconName()) : null,
        title ? React__default.createElement("div", { className: `${classPrefix}-title` }, title) : null,
        React__default.createElement("span", { className: `${classPrefix}-text` }, content || msg)
      )
    )
  ) : null);
};
function show(selector, options) {
  const path = useCustomEventsPath(selector);
  customEvents.trigger(path, { status: true, options });
}
function hide(selector) {
  const path = useCustomEventsPath(selector);
  customEvents.trigger(path, { status: false });
}
Toast.displayName = "NutToast";
Toast.show = show;
Toast.hide = hide;
export {
  Toast as T
};