From 2d6c355cb23bd31d14ed53fe3078d7c076758118 Mon Sep 17 00:00:00 2001
From: Faisal Rashid <faisalrashid32@outlook.com>
Date: Sat, 19 Jun 2021 14:37:41 +0530
Subject: [PATCH 1/3] added ability to dismiss a toast by adding onDismiss
 property to Toast interface and in turn to ToastOptions interface

---
 src/components/close.tsx     | 35 +++++++++++++++++++++++++++++++++++
 src/components/toast-bar.tsx |  6 +++++-
 src/components/toaster.tsx   |  9 ++++++++-
 src/core/toast.ts            |  1 +
 src/core/types.ts            |  2 ++
 5 files changed, 51 insertions(+), 2 deletions(-)
 create mode 100644 src/components/close.tsx

diff --git a/src/components/close.tsx b/src/components/close.tsx
new file mode 100644
index 0000000..ca64e62
--- /dev/null
+++ b/src/components/close.tsx
@@ -0,0 +1,35 @@
+import { styled } from 'goober';
+
+export interface CloseTheme {
+	primary?: string;
+	secondary?: string;
+}
+
+export const CloseIcon = styled('div')<CloseTheme>`
+  width: 20px;
+  opacity: 1;
+  height: 20px;
+  border-radius: 10px;
+  background: transparent;
+  position: relative;
+  transform: rotate(45deg);
+	transition: background-color 200ms ease-out;
+
+  &:after,
+  &:before {
+    content: '';
+    animation-delay: 150ms;
+    position: absolute;
+    border-radius: 3px;
+    opacity: 1;
+    background: ${(p) => p.secondary || '#000'};
+    bottom: 9px;
+    left: 4px;
+    height: 2px;
+    width: 12px;
+  }
+
+  &:before {
+    transform: rotate(90deg);
+  }
+`;
diff --git a/src/components/toast-bar.tsx b/src/components/toast-bar.tsx
index 6525f7f..48577c7 100644
--- a/src/components/toast-bar.tsx
+++ b/src/components/toast-bar.tsx
@@ -4,6 +4,7 @@ import { styled, keyframes } from 'goober';
 import { Toast, ToastPosition, resolveValue, Renderable } from '../core/types';
 import { ToastIcon } from './toast-icon';
 import { prefersReducedMotion } from '../core/utils';
+import { CloseIcon } from "./close";
 
 const enterAnimation = (factor: number) => `
 0% {transform: translate3d(0,${factor * -200}%,0) scale(.6); opacity:.5;}
@@ -48,6 +49,7 @@ interface ToastBarProps {
     icon: Renderable;
     message: Renderable;
   }) => Renderable;
+  onDismiss: () => void;
 }
 
 const getAnimationStyle = (
@@ -69,7 +71,7 @@ const getAnimationStyle = (
 };
 
 export const ToastBar: React.FC<ToastBarProps> = React.memo(
-  ({ toast, position, style, children }) => {
+  ({ toast, position, style, children, onDismiss }) => {
     const animationStyle: React.CSSProperties = toast?.height
       ? getAnimationStyle(
           toast.position || position || 'top-center',
@@ -83,6 +85,7 @@ export const ToastBar: React.FC<ToastBarProps> = React.memo(
         {resolveValue(toast.message, toast)}
       </Message>
     );
+    const closeIcon = !!toast.canDismiss ? <CloseIcon onClick={onDismiss} /> : null;
 
     return (
       <ToastBarBase
@@ -102,6 +105,7 @@ export const ToastBar: React.FC<ToastBarProps> = React.memo(
           <>
             {icon}
             {message}
+            {closeIcon}
           </>
         )}
       </ToastBarBase>
diff --git a/src/components/toaster.tsx b/src/components/toaster.tsx
index 250cf5a..5ab317b 100644
--- a/src/components/toaster.tsx
+++ b/src/components/toaster.tsx
@@ -10,6 +10,7 @@ import {
   resolveValue,
 } from '../core/types';
 import { createRectRef, prefersReducedMotion } from '../core/utils';
+import { toast } from "../core/toast";
 
 setup(React.createElement);
 
@@ -115,7 +116,13 @@ export const Toaster: React.FC<ToasterProps> = ({
             ) : children ? (
               children(t)
             ) : (
-              <ToastBar toast={t} position={toastPosition} />
+              <ToastBar
+                toast={t}
+                position={toastPosition}
+                onDismiss={() => {
+                  toast.dismiss(t.id);
+                }}
+              />
             )}
           </div>
         );
diff --git a/src/core/toast.ts b/src/core/toast.ts
index ec04865..f0570e5 100644
--- a/src/core/toast.ts
+++ b/src/core/toast.ts
@@ -30,6 +30,7 @@ const createToast = (
   pauseDuration: 0,
   ...opts,
   id: opts?.id || genId(),
+  canDismiss: opts?.canDismiss,
 });
 
 const createHandler = (type?: ToastType): ToastHandler => (
diff --git a/src/core/types.ts b/src/core/types.ts
index 4ea02e4..fb850cb 100644
--- a/src/core/types.ts
+++ b/src/core/types.ts
@@ -52,6 +52,7 @@ export interface Toast {
   createdAt: number;
   visible: boolean;
   height?: number;
+  canDismiss?: boolean;
 }
 
 export type ToastOptions = Partial<
@@ -65,6 +66,7 @@ export type ToastOptions = Partial<
     | 'style'
     | 'position'
     | 'iconTheme'
+    | 'canDismiss'
   >
 >;
 

From e10859a3d42f6b82bb27c58d426107dadc856b31 Mon Sep 17 00:00:00 2001
From: Faisal Rashid <faisalrashid32@outlook.com>
Date: Sat, 19 Jun 2021 14:47:02 +0530
Subject: [PATCH 2/3] removed unnecessary property from CloseTheme interface

---
 src/components/close.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/close.tsx b/src/components/close.tsx
index ca64e62..77126af 100644
--- a/src/components/close.tsx
+++ b/src/components/close.tsx
@@ -1,7 +1,6 @@
 import { styled } from 'goober';
 
 export interface CloseTheme {
-	primary?: string;
 	secondary?: string;
 }
 

From fd9f4c370dc6c255c867813d371c6f2f670f3224 Mon Sep 17 00:00:00 2001
From: Faisal Rashid <faisalrashid32@outlook.com>
Date: Sat, 19 Jun 2021 14:48:24 +0530
Subject: [PATCH 3/3] added primary property to closetheme

---
 src/components/close.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/close.tsx b/src/components/close.tsx
index 77126af..86bf4d0 100644
--- a/src/components/close.tsx
+++ b/src/components/close.tsx
@@ -1,6 +1,7 @@
 import { styled } from 'goober';
 
 export interface CloseTheme {
+	primary?: string;
 	secondary?: string;
 }
 
@@ -9,7 +10,7 @@ export const CloseIcon = styled('div')<CloseTheme>`
   opacity: 1;
   height: 20px;
   border-radius: 10px;
-  background: transparent;
+  background:  ${(p) => p.primary || 'transparent'};;
   position: relative;
   transform: rotate(45deg);
 	transition: background-color 200ms ease-out;