@arrow-ecs/reflex/js/toast.js

Reflex UI library

const getToastNum = () => {
  const toasts = document.querySelectorAll('.toast');
  return toasts ? toasts.length : 0;
}

const clearToast = (toast, timeoutHandler) => {
  if (timeoutHandler) {
    clearTimeout(timeoutHandler);
  }

  toast.classList.remove('show');
  setTimeout(() => {
    if (toast) {
      document.body.removeChild(toast);
    }
  }, 300);
}

const addNewToast = (type, message, options) => {
  let timeoutHandler;
  let toastNum = getToastNum();
  const toast = document.createElement('div');
  toast.classList.add('toast', type);
  toast.style.top = (toastNum * (56 + 4) + 32) + 'px';

  toast.innerHTML = `
    <p>${message}</p>
  `;

  if (options && options.button) {
    const toastAction = document.createElement('a');
    toastAction.classList.add('m-left-2x');
    toastAction.href = options.button.href;
    toastAction.innerHTML = `${options.button.name}`;

    toast.appendChild(toastAction);
  }

  if (options && options.dismissible) {
    const toastDismiss = document.createElement('a');
    toastDismiss.classList.add('toast-close-btn');
    toastDismiss.innerHTML = `
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
        <path fill-rule="evenodd" d="M20.8086032,2.15982613 C21.1021344,1.94186341 21.518807,1.96591581 21.7851717,2.23208416 C22.0781729,2.52486935 22.078348,2.99974306 21.7855628,3.29274426 L21.7855628,3.29274426 L13.0639697,12.0196098 L21.7855628,20.7471928 C22.078348,21.040194 22.0781729,21.5150677 21.7851717,21.8078529 C21.518807,22.0740213 21.1021344,22.0980737 20.8086032,21.880111 L20.7245116,21.8074618 L12.0039697,13.0806098 L3.28449529,21.8074618 L3.20040364,21.880111 C2.9068725,22.0980737 2.49019992,22.0740213 2.22383519,21.8078529 C1.93083398,21.5150677 1.93065887,21.040194 2.22344406,20.7471928 L2.22344406,20.7471928 L10.9439697,12.0196098 L2.22344406,3.29274426 C1.93065887,2.99974306 1.93083398,2.52486935 2.22383519,2.23208416 C2.49019992,1.96591581 2.9068725,1.94186341 3.20040364,2.15982613 L3.28449529,2.23247529 L12.0039697,10.9586098 L20.7245116,2.23247529 Z"/>
      </svg>
    `;

    const appendedToastDismiss = toast.appendChild(toastDismiss);
    appendedToastDismiss.addEventListener('click', () => {
      const toastElem = appendedToastDismiss.closest('.toast');

      clearToast(toastElem, timeoutHandler);
    });
  }

  const appendedToast = document.body.appendChild(toast);

  // handle animation
  setTimeout(() => {
    appendedToast.classList.add('show');
    setTimeout(() => {

      // handle auto close toast message after certain amount of time
      timeoutHandler = setTimeout(() => {
        clearToast(appendedToast);
      }, 3000);

    }, 300);
  });
}