Extend timer api with current state for useToastState

[yarastqt]

🙋 Feature Request

Provide timer state (ex. isRunning) for toast.

🤔 Expected Behavior

A toast.timer provide state of current timer.

😯 Current Behavior

A toast.timer has private property timerId for check timer state.

💁 Possible Solution

Add property isRunning for Timer (or state="running | paused"):

react-spectrum/packages/@react-stately/toast/src/useToastState.ts

Lines 205 to 209 in a30e1bf

	class Timer {
	private timerId;
	private startTime: number;
	private remaining: number;
	private callback: () => void;

🔦 Context

I create toasts with progress bar and when toast is hovered we can't stop animation because timer api doesn't have current state.

💻 Examples

function Snackbar<T>(props: ToastProps<T>) {
  const { toast } = props;

  // @ts-expect-error (timerId is private API)
  const timerId = toast?.timer?.timerId;

  return (
    <div className={styles.root}>
      <div
        className={styles.progress}
        style={{
          animationDuration: `${toast.timeout}ms`,
          animationPlayState: timerId === null ? "paused" : "running",
          // Better solution:
          // animationPlayState: toast.timer.isRunning ? "running" : "paused",
        }}
      />
    </div>
  );
}

🧢 Your Company/Team

Yandex

🎁 Tracking Ticket (optional)

N/A

[Itherael]

To add more details to this issue, it does not affect only the hover. Using the resumeAll and pauseAll methods will have the same problem.

[RBilly]

Hi !
I'm finding myself in a similar need.
I've implemented a reverse progress bar to show the remaining time before the toast closes.
But to do that I had to make use of an elapsed time tracker that would give me the time elapsed since the toast was created.
Then I deduct the elapsed time from the timeout value of the toast to get the remaining time.
And to handle the pause state of the timer I had to do the same trick of using the private field toast.timer?.timerId in a useEffect to detect when the timer is paused and sync the elapsed time tracker state.
Like this:

export const Notification = ({toast}) => {
  const [isPaused, setPaused] = useState(false);
  const { elapsedTime } = useElapsedTime({
    isPlaying: !isPaused,
    duration: toast.timeout
  });

  useEffect(() => {
    // @ts-ignore
    if (!toast.timer?.timerId) {
      setPaused(true);
    } else if (isPaused) {
      setPaused(false);
    }
    // @ts-ignore
  }, [toast.timer?.timerId, isPaused]);

  return (
    {/* .... */}
        <progress
          max={toast.timeout}
          value={(toast.timeout- elapsedTime)}
        />
  );
};

It's not that hard but it would be so much simpler if the toast.timer had an api that exposed the remaining value updated every Xms where X could be configurable as well as the play/paused state of the timer like expressed in this issue.

React-aria is so awesome ! Thanks for your work