Skip to content

Commit 7c24042

Browse files
committed
explicit timeout starter prop
1 parent 63092e3 commit 7c24042

File tree

3 files changed

+20
-32
lines changed

3 files changed

+20
-32
lines changed

src/internal/components/Toast.test.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -273,6 +273,7 @@ describe('Toast component', () => {
273273
position="bottom-right"
274274
onClose={handleClose}
275275
durationMs={durationMs}
276+
startTimeout={false}
276277
>
277278
<div>Test Child</div>
278279
</Toast>,
@@ -286,6 +287,7 @@ describe('Toast component', () => {
286287
position="bottom-right"
287288
onClose={handleClose}
288289
durationMs={durationMs}
290+
startTimeout={true}
289291
>
290292
<div>Updated Child</div>
291293
</Toast>,

src/internal/components/Toast.tsx

+15-12
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { getToastPosition } from '../utils/getToastPosition';
66
type ToastProps = {
77
className?: string;
88
durationMs?: number;
9+
startTimeout?: boolean;
910
position: 'top-center' | 'top-right' | 'bottom-center' | 'bottom-right';
1011
animation?: 'animate-enterRight' | 'animate-enterUp' | 'animate-enterDown';
1112
isVisible: boolean;
@@ -23,6 +24,7 @@ const defaultAnimationByPosition = {
2324
export function Toast({
2425
className,
2526
durationMs = 5000,
27+
startTimeout = true,
2628
position = 'bottom-center',
2729
animation,
2830
isVisible,
@@ -32,20 +34,21 @@ export function Toast({
3234
const positionClass = getToastPosition(position);
3335
const animationClass = animation ?? defaultAnimationByPosition[position];
3436

35-
/* biome-ignore lint/correctness/useExhaustiveDependencies: retrigger durationMs on updates to children */
3637
useEffect(() => {
37-
const timer = setTimeout(() => {
38-
if (isVisible) {
39-
onClose();
40-
}
41-
}, durationMs);
38+
if (startTimeout) {
39+
const timer = setTimeout(() => {
40+
if (isVisible) {
41+
onClose();
42+
}
43+
}, durationMs);
4244

43-
return () => {
44-
if (timer) {
45-
clearTimeout(timer);
46-
}
47-
};
48-
}, [durationMs, isVisible, onClose, children]);
45+
return () => {
46+
if (timer) {
47+
clearTimeout(timer);
48+
}
49+
};
50+
}
51+
}, [durationMs, isVisible, onClose, startTimeout]);
4952

5053
if (!isVisible) {
5154
return null;

src/transaction/components/TransactionToast.tsx

+3-20
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,4 @@
1-
import {
2-
Children,
3-
cloneElement,
4-
isValidElement,
5-
useCallback,
6-
useEffect,
7-
} from 'react';
1+
import { useCallback } from 'react';
82
import { Toast } from '../../internal/components/Toast';
93
import type { TransactionToastReact } from '../types';
104
import { useTransactionContext } from './TransactionProvider';
@@ -23,7 +17,6 @@ export function TransactionToast({
2317
setIsToastVisible,
2418
transactionHash,
2519
transactionId,
26-
lifecycleStatus,
2720
} = useTransactionContext();
2821

2922
const closeToast = useCallback(() => {
@@ -37,12 +30,6 @@ export function TransactionToast({
3730
!errorMessage &&
3831
!transactionId;
3932

40-
useEffect(() => {
41-
if (receipt || errorMessage) {
42-
setIsToastVisible(true);
43-
}
44-
}, [receipt, errorMessage, setIsToastVisible]);
45-
4633
if (!isToastVisible || isInProgress) {
4734
return null;
4835
}
@@ -54,13 +41,9 @@ export function TransactionToast({
5441
durationMs={durationMs}
5542
isVisible={isToastVisible}
5643
onClose={closeToast}
44+
startTimeout={!!receipt || !!errorMessage}
5745
>
58-
{Children.map(children, (child) => {
59-
if (isValidElement(child)) {
60-
return cloneElement(child, { key: lifecycleStatus.statusName });
61-
}
62-
return child;
63-
})}
46+
{children}
6447
</Toast>
6548
);
6649
}

0 commit comments

Comments
 (0)