cfbender/snowballtools-base
1
0
Fork 0
forked from cerc-io/snowballtools-base
Code Pull Requests Activity

🔧 chore: add id to allow singular toast deletion

Browse Source
This commit is contained in:
Andre H 2024-02-22 14:59:12 +07:00
parent fffc370d40
commit 5be29a9745
2 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/frontend/src/components/shared/Toast/SimpleToast.tsx
View File

@ -17,13 +17,15 @@ interface CtaProps extends ButtonBaseProps, ButtonTheme {
buttonLabel: string; buttonLabel: string;
} }
export interface SimpleToastProps extends ToastProps { export interface SimpleToastProps extends ToastProps {
id: string;
title: string; title: string;
variant?: SimpleToastTheme['variant']; variant?: SimpleToastTheme['variant'];
cta?: CtaProps[]; cta?: CtaProps[];
onDismiss: (id?: string) => void; onDismiss: (toastId: string) => void;
} }
export const SimpleToast = ({ export const SimpleToast = ({
id,
className, className,
title, title,
variant = 'success', variant = 'success',
@ -50,23 +52,23 @@ export const SimpleToast = ({
const renderCta = useMemo(() => { const renderCta = useMemo(() => {
if (!hasCta) return null; if (!hasCta) return null;
return ( return (
<div className="flex gap-1.5 ml-2"> <div className="flex gap-1.5 ml-2">
{cta.map(({ buttonLabel, ...props }, index) => ( {cta.map(({ buttonLabel, ...props }, index) => (
<Button key={index} {...props}> <Button key={index} {...props}>
{buttonLabel} {buttonLabel}
</Button> </Button>
))} ))}
</div> </div>
); );
}, [cta]); }, [cta]);
const renderCloseButton = useMemo( const renderCloseButton = useMemo(
() => ( () => (
<div onClick={() => onDismiss(props.id)} className={closeIconCls()}> <div onClick={() => onDismiss(id)} className={closeIconCls()}>
<CrossIcon className="h-3 w-3" /> <CrossIcon className="h-3 w-3" />
</div> </div>
), ),
[], [id],
); );
return ( return (

2
packages/frontend/src/components/shared/Toast/Toaster.tsx
View File

@ -11,7 +11,7 @@ export const Toaster = ({}: ToasterProps) => {
const renderToasts = useMemo( const renderToasts = useMemo(
() => () =>
toasts.map(({ id, ...props }) => ( toasts.map(({ id, ...props }) => (
<SimpleToast key={id} {...(props as SimpleToastProps)} /> <SimpleToast key={id} {...(props as SimpleToastProps)} id={id} />
)), )),
[toasts], [toasts],
); );