tsp-component/lib/toast/index.ts

提供多端和react版本的UI组件

const prefix = 'tsp-component-Toast';
// 用于hide方法
const componentFlag = 'tsp-component-Toast-flag';

function render(templelte: string, key: number, duration: number, onClose?: () => void): void {
  const noTouch = function(event: any): void {
    event.preventDefault();
  };

  document.body.insertAdjacentHTML('beforeend', templelte);
  document.getElementById(key.toString()).addEventListener('touchmove', noTouch, false);
  setTimeout(() => {
    const el = document.getElementById(key.toString());
    el.removeEventListener('touchmove', noTouch, false);
    el.parentNode.removeChild(el);
  }, duration);
}

class Toast {
  /**
   * 加载图标的src
   */
  public static loadingSrc: string;

  /**
   * 无图标，只有文本
   */
  public static text(content: string, duration: number = 3000): void {
    const key = new Date().getTime();
    const templelte = `<div class="${prefix} ${componentFlag} ${prefix}-text" id="${key}">
      <div class="${prefix}-text-content">${content}</div>
    </div>`;
    render(templelte, key, duration);
  }

  /**
   * 成功
   */
  public static success(content: string, duration: number = 3000): void {
    const key = new Date().getTime();
    // tslint:disable-next-line:max-line-length
    const templelte = `<div class="${prefix} ${componentFlag}" id="${key}">
      <img class="${prefix}-icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAACDUlEQVR4Xu2Z4VHDMAxGP23ACB2BEboCE0AngA3oBtAJKBt0A44JgE3YQJzu0rse18Sy40RKLP9t2vg9f1ZjhdD4oMb5EQIiAY0biC3QeACiCMYWiC3QuIHYAo0HIP4FVrMFmPkGwDOAWwC/AN6J6JRK+CoEMLNAfwAQCZfjSES7IQmLFzAAf+a+G0rCogUo4EXCgYie+lKwWAFK+HUKyIAXATsiOq4mAZnwn0S0XU0RzIT/AbAlIvlL7B2LqQFTwIuVRQiYCn4RAqaEdy9ganjXAuaAdytgLniXAuaEzxLQHTc3RPSdOmKWfj43vEoAM28AvMlDRQcmDxZ7IjqUgl77ngV8UkC36l8ARML/kTxrawVZwWsEyDHyZQBktARLeI0AOUXdJ1ayWII1vEbAvuuzpdKcLcEDvEaA9NqkBmiGWoIX+KQAuYCZU3XgUk5Sgid4lYBOgqYWnEX0SvAGrxZQQ4JH+CwBYyR4hc8WUCJB2tI9Ly2uFVZVG0tTkbXXFHWEmDmnJmjnMjt8UQLONJUlmMCPElCwHfqSYAY/WkAFCabwVQSMkGAOX01AgQQX8FUFZEhwA19dQCfhFcBjT8VzBT+JgE6CtM8eLjpJ0kY7Db2l1T4s1L6u6EGo9iQsfy8EWNr3cO9IgIdVsJxDJMDSvod7RwI8rILlHCIBlvY93DsS4GEVLOfQfAL+ALOwC1C10enRAAAAAElFTkSuQmCC" />
      ${content}
    </div>`;
    render(templelte, key, duration);
  }

  /**
   * 失败
   */
  public static fail(content: string, duration: number = 3000): void {
    const key = new Date().getTime();
    // tslint:disable-next-line:max-line-length
    const templelte = `<div class="${prefix} ${componentFlag}" id="${key}">
      <img class="${prefix}-icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAACW0lEQVR4Xu3a7U3EMAwGYHsDRmAEGAAEAzDDcRuwAhMgJuBuEhATMAoI/htFaqQKpamd+iPi0p/QNnmfOqEJRTjxA088PwyAUQEnLjCGwIkXwJgExxCQDAEiOgOAc0T8kFzncS4R7RDxKG2LXQFT+NcEAAC3PSEQ0QsA3APAARH3EgQWwCz8xXTzz14QZuFzbhHCKkAhfG4oHKEQPvftGREfOJWwCpBuQkQHANgVbhiGUAn/BQA33CHKAugNQSt8ysUG6AWBiFJpPxWqUfTk8/UigGgEIkozfZrx/x5N4cUVkFuNmBMswjcDeFeCVfhNAF4IluE3A1gjWIdXAbBC8AivBqCN4BVeFUALwTO8OsBWBO/wJgCtCBHhzQCkCFHhTQG4CJHhzQEYCGlR86j5bl+4V/VH4sWQtIEVhNLtmhc2LX1zARAguIZ3GQLzp1JZRabTfgDgiruT0/K0S9e4VcBUBUvr+fTrbwC4/rcAldl+/mDc9xhdKoAZPkO4IpgDrPydfweAu8LYdEMwBeC85ERsr83BzQA44XNHIhFMAFbG/GVppo9CUAdYCb9HxPRfpuIRgaAKsCV81HBQA9AIH4GgAqAZ3hthM4BFeE+ETQCW4b0QmgE8wnsgNAF4hrdGEANEhLdEEAFEhrdCYAP0EN4CgQXQU3htBC7A0ldi1Xd7rX27hrWD7mdyC7u6oeErlXBExLT3yDpYFVBorIvwhX6JwqfrRQBTJaSPEN9YvI4npXmqttRe6ooYwDGTS1MDwIW540ZGBXT8cFy6NirAhbnjRkYFdPxwXLr2C95Q3VDSo5ZBAAAAAElFTkSuQmCC" />
      ${content}
    </div>`;
    render(templelte, key, duration);
  }

  /**
   * 警告
   */
  public static warning(content: string, duration: number = 3000): void {
    const key = new Date().getTime();
    // tslint:disable-next-line:max-line-length
    const templelte = `<div class="${prefix} ${componentFlag}" id="${key}">
      <img class="${prefix}-icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAACGElEQVR4Xu1bwVEDMQzcrQA6ACoAKgAqACqAEqACSAWkBKgAqICkAqCDlAAViNFwl7m5Afteq0wsffOwtV6tpT2HaDzYeP5IAJIBjSOQJRBFADPbBXDYr09yGbEXOQPM7ALAA4D9UcJfAOYkZ0ogpACY2SmAt0qCM5L3KhDUACwAnFSSW5E82FYAbEpiJGUHI1vIEzez5gFwodupsOCbpN8QklAzYIoGLEm6WEoiAZDA3C1iZs0z4AXAeQX0V5LeLElCXQLe4Ny13AglAK0z4KYbhEpVcEtyLhEAQGuJTRyGzkj6bSEJtQhOmQYTgG1mwBGA9wq3j0l+SPiv1oApE6FyFPb9SDUgAZjgCbTAgJInIPUCokqgNBFKvYAEIEgEm2dAyROQegFRJVAaiaUfRRKAIA1ongElT0DqBUSVQGkklo7CCUCQBjTPgJInIPUCQkqgNBKrJ8EEIEIDkgG/pshf84B8DogsAf/4+TwyPi9JOjDSkHuCfXbdc7n+IcQiIvkwBkiPuLJYGAM2BYQQALpnslcAvCny8A8hTyTdMJWGHAAz8yey/nVo/BLMk/dOcKVEIAKA5i0xP+G9f05Z+kw25BaovRZVzwMRJeCCt/6fwIgJnyR7YZRIQQQAbXuC3TD0CMCvwWH4NXgtOfbBInIGDFphvwbXfUBEDxAiguoTrq0XxoDaxlS/JwAqpDd1nWTApp6Mal8/QsLzQWduTWsAAAAASUVORK5CYII=" />
      ${content}
    </div>`;
    render(templelte, key, duration);
  }

  /**
   * 加载
   */
  public static loading(content?: string, duration?: number, onClose?: () => void): void {
    const key = new Date().getTime();
    const templelte = `<div class="${prefix}-loading ${componentFlag}" id="${key}">
      <div class="${prefix}">
        <img class="${prefix}-icon" src="${Toast.loadingSrc}" />
        ${content ? content : '请稍等'}
      </div>
    </div>
    `;
    render(templelte, key, duration ? duration : 15000);
  }

  /**
   * 隐藏
   */
  public static hide(selector?: string): void {
    const el = document.querySelectorAll(`.${selector ? selector : componentFlag}`);
    const length = el.length;
    let i;
    for (i = 0; i < length; i++) {
      el[i]['style'].display = 'none';
    }
  }
}

export default Toast;