public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Toast is removed using onClick (#9832) 

* toaster is removed using onclick

* Apply suggestions from code review

* Update showToast.tsx

---------

Co-authored-by: Peer Richelsen <peer@cal.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
pull/9497/head^2
Anik Dhabal Babu 2023-06-28 21:51:53 +05:30 committed by GitHub
parent 6a975194bb
commit 79779e5166
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 36 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
packages/ui/components/toast/showToast.tsx
View File

@ -6,14 +6,16 @@ import { Check, Info } from "../icon";
type IToast = {
message: string;
toastVisible: boolean;
onClose: () => void;
};
export const SuccessToast = ({ message, toastVisible }: IToast) => (
export const SuccessToast = ({ message, toastVisible, onClose }: IToast) => (
<div
className={classNames(
"data-testid-toast-success bg-brand-default text-inverted mb-2 flex h-auto items-center space-x-2 rounded-md p-3 text-sm font-semibold shadow-md rtl:space-x-reverse md:max-w-sm",
toastVisible && "animate-fade-in-up"
)}>
toastVisible && "animate-fade-in-up cursor-pointer"
)}
onClick={onClose}>
<span>
<Check className="h-4 w-4" />
</span>
@ -21,12 +23,13 @@ export const SuccessToast = ({ message, toastVisible }: IToast) => (
</div>
);
export const ErrorToast = ({ message, toastVisible }: IToast) => (
export const ErrorToast = ({ message, toastVisible, onClose }: IToast) => (
<div
className={classNames(
"animate-fade-in-up bg-error text-error mb-2 flex h-auto items-center space-x-2 rounded-md p-3 text-sm font-semibold shadow-md rtl:space-x-reverse md:max-w-sm",
toastVisible && "animate-fade-in-up"
)}>
toastVisible && "animate-fade-in-up cursor-pointer"
)}
onClick={onClose}>
<span>
<Info className="h-4 w-4" />
</span>
@ -34,12 +37,13 @@ export const ErrorToast = ({ message, toastVisible }: IToast) => (
</div>
);
export const WarningToast = ({ message, toastVisible }: IToast) => (
export const WarningToast = ({ message, toastVisible, onClose }: IToast) => (
<div
className={classNames(
"animate-fade-in-up bg-brand-default text-brand mb-2 flex h-auto items-center space-x-2 rounded-md p-3 text-sm font-semibold shadow-md rtl:space-x-reverse md:max-w-sm",
toastVisible && "animate-fade-in-up"
)}>
toastVisible && "animate-fade-in-up cursor-pointer"
)}
onClick={onClose}>
<span>
<Info className="h-4 w-4" />
</span>
@ -47,12 +51,13 @@ export const WarningToast = ({ message, toastVisible }: IToast) => (
</div>
);
export const DefaultToast = ({ message, toastVisible }: IToast) => (
export const DefaultToast = ({ message, toastVisible, onClose }: IToast) => (
<div
className={classNames(
"animate-fade-in-up bg-brand-default text-inverted mb-2 flex h-auto items-center space-x-2 rounded-md p-3 text-sm font-semibold shadow-md rtl:space-x-reverse md:max-w-sm",
toastVisible && "animate-fade-in-up"
)}>
toastVisible && "animate-fade-in-up cursor-pointer"
)}
onClick={onClose}>
<span>
<Check className="h-4 w-4" />
</span>
@ -67,14 +72,29 @@ export function showToast(
variant: "success" | "warning" | "error",
duration = TOAST_VISIBLE_DURATION
) {
const onClose = () => {
toast.dismiss();
};
switch (variant) {
case "success":
return toast.custom((t) => <SuccessToast message={message} toastVisible={t.visible} />, { duration });
return toast.custom(
(t) => <SuccessToast message={message} toastVisible={t.visible} onClose={onClose} />,
{ duration }
);
case "error":
return toast.custom((t) => <ErrorToast message={message} toastVisible={t.visible} />, { duration });
return toast.custom(
(t) => <ErrorToast message={message} toastVisible={t.visible} onClose={onClose} />,
{ duration }
);
case "warning":
return toast.custom((t) => <WarningToast message={message} toastVisible={t.visible} />, { duration });
return toast.custom(
(t) => <WarningToast message={message} toastVisible={t.visible} onClose={onClose} />,
{ duration }
);
default:
return toast.custom((t) => <DefaultToast message={message} toastVisible={t.visible} />, { duration });
return toast.custom(
(t) => <DefaultToast message={message} toastVisible={t.visible} onClose={onClose} />,
{ duration }
);
}
}