updating toastr to add a clear all button when >1 toast

TeselaGen · Dec 13, 2023 · 839633a · 839633a
1 parent d60ccca
commit 839633a
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -28,5 +28,5 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - genbank ss-DNA should not be overwirte to DNA [`#1`](https://github.com/TeselaGen/tg-oss/pull/1)
 - closes #35 [`#35`](https://github.com/TeselaGen/tg-oss/issues/35)
 - updating table styling to remove table last row bottom margin, removing unused S3Download, removing axios dep, updating deps [`8a6fb1f`](https://github.com/TeselaGen/tg-oss/commit/8a6fb1f047550f617c3e56b8c3ebf145967076ef)
-- tiny [`d9a5ad3`](https://github.com/TeselaGen/tg-oss/commit/d9a5ad328d87389199ba39118985f79f6a90b6e0)
 - Add example file [`79f356f`](https://github.com/TeselaGen/tg-oss/commit/79f356faac0dc5fa0afc882eccdbf9ed5f41d047)
+- reverting seq data change [`073aba6`](https://github.com/TeselaGen/tg-oss/commit/073aba63090ca69eeaa134a1efa0563aa65a9af1)
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.3.58",
+  "version": "0.3.60",
   "main": "./src/index.js",
   "exports": {
     ".": {

diff --git a/packages/ui/src/style.css b/packages/ui/src/style.css
@@ -224,3 +224,21 @@ button:not(:disabled):active {
 .bp3-tabs.bp3-vertical > .bp3-tab-panel {
   min-width: 0px;
 }
+.bp3-toast[class*="bp3-intent-"] .bp3-button.tg-clear-all-toasts:hover {
+  /* background: blue !important; */
+  /* background: unset !important; */
+  background-color: #137cbd !important;
+}
+
+/* .bp3-toast .tg-clear-all-toasts {
+  background: unset !important;
+  color: unset !important;
+  padding: unset !important;
+  margin: unset !important;
+  font-size: unset !important;
+  line-height: unset !important;
+  border: unset !important;
+  box-shadow: unset !important;
+  text-align: unset !important;
+  cursor: pointer !important;
+} */
diff --git a/packages/ui/src/toastr.js b/packages/ui/src/toastr.js
@@ -1,4 +1,4 @@
-import { Position, Toaster, Intent } from "@blueprintjs/core";
+import { Position, Toaster, Intent, Classes } from "@blueprintjs/core";
 import classNames from "classnames";
 
 const TopToaster = Toaster.create({
@@ -32,22 +32,68 @@ const generateToast = intent => (message, options) => {
   if (intent === Intent.DANGER) {
     console.error("Toastr error message: ", message);
   }
+
+  const maybeAddClearAll = () => {
+    // wipe any existing clear all buttons
+    const existingClearAllButtons =
+      document.querySelectorAll(`.tg-clear-all-toasts`);
+    existingClearAllButtons.forEach(button => {
+      button.remove();
+    });
+    const activeToasts = document.querySelectorAll(
+      `.bp3-toast:not(.bp3-toast-exit)`
+    );
+    if (activeToasts.length > 1) {
+      // add custom clear all button
+
+      const topToaster = document.querySelector(`.bp3-toast`);
+      if (!topToaster) return;
+      const closeButton = document.createElement("div");
+      closeButton.classList.add(
+        Classes.BUTTON,
+        Classes.LARGE,
+        Classes.INTENT_PRIMARY,
+        "tg-clear-all-toasts"
+      );
+      closeButton.innerText = "Clear all";
+      closeButton.onclick = window.__tgClearAllToasts;
+      // position the button to the right of the message
+      closeButton.style.position = "absolute";
+      closeButton.style.right = "-100px";
+
+      topToaster.appendChild(closeButton);
+    }
+  };
   const uniqKey = toastToUse.show(
     {
       intent,
       message,
+      onDismiss: () => {
+        if (options.onDismiss) {
+          options.onDismiss();
+        }
+        setTimeout(() => {
+          maybeAddClearAll();
+        }, 0);
+      },
       timeout:
-        options.timeout || updatedTimeout || intent === Intent.DANGER
-          ? 60000
-          : undefined,
+        options.timeout ||
+        updatedTimeout ||
+        (!window.Cypress && intent === Intent.DANGER ? 60000 : undefined),
       action: options.action,
       icon: options.icon,
       className: classNames("preserve-newline", options.className)
     },
     options.key
   );
+  setTimeout(() => {
+    maybeAddClearAll();
+  }, 0);
   function clear() {
     toastToUse.dismiss(uniqKey);
+    setTimeout(() => {
+      maybeAddClearAll();
+    }, 0);
   }
   clear.key = uniqKey;
   return clear;