nuke-modal/src/view/toast.js

模态框

'use strict';

import { createElement, Component, PropTypes } from 'rax';

import { isWeex } from 'nuke-env';
import CustomToast from './custom-toast';

const durationObj = {
  LONG: 3500,
  SHORT: 2000,
};
const styles = {
  toastContainer: {
    backgroundColor: 'rgba(0,0,0,0.7)',
    boxSizing: 'border-box',
    maxWidth: '80%',
    opacity: 1,
    color: ' #ffffff',
    padding: '4px 8px',
    position: 'fixed',
    left: '50%',
    bottom: '50%',
    fontSize: '14px',
    height: 'auto',
    lineHeight: '18px',
    borderRadius: '2px',
    textAlign: 'center',
    transition: 'all 0.4s ease-in-out',
    '-webkit-transition': 'all 0.4s ease-in-out',
    transform: 'translateX(-50%)',
    '-webkit-transform': 'translateX(-50%)',
    'z-index': 9999,
  },
};
const queue = [];
let isProcessing = false;
let toastWin;

function showToastWindow(message, durationTime, cb, containerStyle) {
  if (!toastWin) {
    toastWin = document.createElement('div');

    for (const key in containerStyle) {
      toastWin.style[key] = containerStyle[key];
    }
    document.body.appendChild(toastWin);
  }
  toastWin.innerHTML = message;
  setTimeout(() => {
    // document.body.remove(toastWin);
    toastWin.parentNode.removeChild(toastWin);
    toastWin = null;
    cb();
    // }, 1000000);
  }, durationTime);
}

const toast = {
  push(message, durationTime, containerStyle) {
    queue.push({
      message,
      durationTime,
      containerStyle,
    });
    this.show(durationTime, containerStyle);
  },

  show(durationTime, containerStyle) {
    const self = this;
    // All messages had been toasted already, so remove the toast window,
    if (!queue.length) {
      if (toastWin) {
        toastWin.parentNode.removeChild(toastWin);
      }
      toastWin = null;
      return;
    }

    // the previous toast is not ended yet.
    if (isProcessing) {
      return;
    }
    isProcessing = true;

    const toastInfo = queue.shift();

    showToastWindow(
      toastInfo.message,
      durationTime,
      () => {
        isProcessing = false;
        if (queue.length) {
          self.show(durationTime, containerStyle);
        }
      },
      containerStyle
    );
  },
};

function Toast(message, duration = 'SHORT', userStyle = {}) {
  const durationTime = duration ? durationObj[duration] : durationObj.SHORT;

  if (typeof message === 'object') {
    // 自定义用法 todo  in weex
    // return newToast(message,Number(durationTime),userStyle);
    return CustomToast(message, Number(durationTime));
  }
  const containerStyle = Object.assign({}, styles.toastContainer, userStyle);
  // console.log(containerStyle);
  if (isWeex) {
    // let moduleName = '@weex-module/modal';
    const weexModal = require('@weex-module/modal');

    if (weexModal.toast) {
      weexModal.toast({
        message,
        duration: Number(durationTime) / 1000,
      });
    }
  } else {
    toast.push(message, durationTime, containerStyle);
  }
}

export default Toast;