feat: added flexibility for timer

[Flaain]

Issue 😱:

Closes -

What has been done ✅:

Hello, i was trying to recreate Sonner by myself and found out some unnecessary code in useEffect timer:

React.useEffect(() => {
    if ((toast.promise && toastType === 'loading') || toast.duration === Infinity || toast.type === 'loading') return;
    let timeoutId: NodeJS.Timeout;
    let remainingTime = duration;

    // Pause the timer on each hover
    const pauseTimer = () => {
      if (lastCloseTimerStartTimeRef.current < closeTimerStartTimeRef.current) {
        // Get the elapsed time since the timer started
        const elapsedTime = new Date().getTime() - closeTimerStartTimeRef.current;

        remainingTime = remainingTime - elapsedTime;
      }

      lastCloseTimerStartTimeRef.current = new Date().getTime();
    };

    const startTimer = () => {
      closeTimerStartTimeRef.current = new Date().getTime();

      // Let the toast know it has started
      timeoutId = setTimeout(() => {
        toast.onAutoClose?.(toast);
        deleteToast();
      }, remainingTime);
    };

    if (expanded || interacting || (pauseWhenPageIsHidden && isDocumentHidden)) {
      pauseTimer();
    } else {
      startTimer();
    }

    return () => clearTimeout(timeoutId);
  }, [dependencies]);

What unnecessary code this useEffect have?:

1. We don't need let remainingTime = duration and recalculate logic for remainingTime because we don't save remainingTime between rerenders. In this case we can just use duration prop for setTimeout nothing will change.
2. Also don't need let timeoutId: NodeJS.Timeout;, closeTimerStartTimeRef and lastCloseTimerStartTimeRef we can contain this in timerRef.

What did i do?:

1. Added optional prop that defaults to false recalculateRemainingTime = false.
2. Instead of 2 lastCloseTimerStartTimeRef and closeTimerStartTimeRef create just one:

const timerRef = React.useRef<{ start: number; end: number; remaining: number; id: NodeJS.Timeout | null }>({
    start: 0, // maybe we can use Date.now() as well instead of 0
    end: 0,
    id: null,
    remaining: duration,
  });

3. In setTimeout we can use our recalculateRemainingTime prop for right delay before trigger:

setTimeout(() => {
  toast.onAutoClose?.(toast);
  deleteToast();
}, recalculateRemainingTime ? timerRef.current.remaining : duration);

Screenshots/Videos 🎥:

N/A

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
sonner	❌ Failed (Inspect)			Mar 4, 2024 4:29am