Support custom hide timeouts on a message-by-message Basis

[mlaursen]

This looks like something I forgot to port from v1 -- there was an autohideTimeout that could be configured a bit easier.

This also might be a good time to redo the alert package since I didn't understand hooks or typescript when I wrote that package and it's a bit of a mess...

A current "workaround" for this would be something like (untested):

import { useQueue, useAddMessage, useMessageQueueActions } from "@react-md/alert";


// assuming `messageId` is: `{{MESSAGE_ID}}-{{TIMEOUT}}
// example: `MY_MESSAGE-50000`
const getTImeout = (message: ToastMessage | undefined): number | undefined => {
  const timeout = parseInt((message?.messageId ?? '').replace(/^.+-/, ''), 10);
  
  return Number.isNaN(timeout) ? undefined : timeout;
};


const queue = useQueue();
const addMessage = useAddMessage();
const { hideMessage } = useMessageQueueActions();
const [message] = queue;

useEffect(() => {
  const duration= getTimeout(message);
  if (!duration) {
    return;
  }

  const timeout = window.setTImeout(hideMessage, duration);
  return () => {
    window.clearTImeout(timeout);
  };
}, [message]);

return (
  <Button
    onClick={() => {
      addMessage({
        messageId: 'MyMessage-50000',
        disableAutoHide: true.
      });
    }}
  >
    Text
  </Button>
);