press-next/common/toast/toast-web.ts

Vue3 组件库，支持 Composition API

import type { IToast, Options, RawToast } from './types';


const DEFAULT_Z_INDEX = 10000;
let loadingToastId: Partial<RawToast> = {};
let toastId: Partial<RawToast> = {};


const mToast: IToast = function (options: Options, duration?: number) {
  return show(options, duration);
};


mToast.toastComponent = () => [import('press-ui/press-toast/index')];
mToast.setComponent = function (comp) {
  mToast.toastComponent = comp;
};

mToast.show = show;

mToast.showFail = showFail;
mToast.fail = showFail;
mToast.showSuccess = showSuccess;
mToast.success = showSuccess;

mToast.showLoading = showLoading;
mToast.loading = showLoading;
mToast.dismissLoading = dismissLoading;

mToast.clear = clear;
mToast.useCustomUI = useCustomUI;


let toastComp: RawToast;
function getToast(): Promise<RawToast> {
  return new Promise((resolve) => {
    if (toastComp) {
      resolve(toastComp);
      return;
    }

    Promise.all(mToast.toastComponent())
      .then((comp: Array<{ default?: RawToast }>) => {
        const res = comp?.[0]?.default;
        if (res) {
          toastComp = res;
        }
        resolve(toastComp);
      });
  });
}


function getToastOptions({
  text,
  duration,
}: {
  text: Options,
  duration?: number
}) {
  return typeof text === 'object' ? text : { message: text, zIndex: DEFAULT_Z_INDEX, duration };
}


function innerToast(cb: Function) {
  getToast().then(() => {
    if (loadingToastId?.clear) {
      setTimeout(() => {
        cb();
      }, 100);
    } else {
      cb();
    }
  });
}


/**
 * 显示普通 Toast
 * @param text  文案
 * @param duration  显示时间，默认2秒
 */
function show(text: Options = '', duration = 2000) {
  innerToast(() => {
    toastId = toastComp(getToastOptions({ text, duration }));
  });
}

/**
 * 显示成功样式Toast（toast带√样式）
 * @param text  文案
 * @param duration  显示时间，默认2秒
 */
function showSuccess(text: Options = '', duration = 2000) {
  innerToast(() => {
    toastId = toastComp.success(getToastOptions({ text, duration }));
  });
}

/**
 * 显示失败样式 Toast(toast带！样式)
 * @param text  文案
 * @param duration  显示时间，默认2秒
 */
function showFail(text: Options = '', duration = 2000) {
  innerToast(() => {
    toastId = toastComp.fail(getToastOptions({ text, duration }));
  });
}

/**
 * 清除（隐藏）上一个toast
 */

function clear() {
  getToast().then(() => {
    if (toastId.clear) toastId.clear();
  });
}

/**
 * 显示loading Toast
 * @param {string | object} options 配置，传递字符串时候为message
 * @param {string} options.message 内容
 * @param {number} options.duration 展示时长(ms)，值为 0 时，toast 不会消失
 */
function showLoading(options: Options = '') {
  getToast().then(() => {
    if (loadingToastId?.clear) {
      loadingToastId.clear();
      loadingToastId = {};
    }
    if (typeof options === 'string') {
      loadingToastId = toastComp.loading({ message: options, duration: 0, zIndex: DEFAULT_Z_INDEX });
    } else {
      loadingToastId = toastComp.loading(options);
    }
  });
}

/**
 * 隐藏 loading toast
 */
function dismissLoading() {
  getToast().then(() => {
    if (loadingToastId?.clear) {
      loadingToastId.clear();
      loadingToastId = {};
    }
  });
}

function useCustomUI() {}

export { mToast as Toast };